* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

html, body { width: 100%; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  background: #f4f5f7;
}

/* App canvas: ALWAYS full width on every screen size */
.phone {
  width: 100%;
  min-height: 100vh;
  background: #f4f5f7;
  position: relative;
  overflow-x: hidden;
}

/* ============================================================
   FIXED BOTTOM BARS — always full width
   ============================================================ */
.phone .fixed.bottom-0,
body > .fixed.bottom-0 {
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* The bottom-sheet inside modals should also be full width */
.rounded-t-3xl { max-width: 100% !important; }

.script-font { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-style: italic; }

/* Screen transitions */
.screen { display: none; animation: fade .25s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to {opacity:1; transform:none;} }

/* hide scrollbar */
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { -ms-overflow-style: none; scrollbar-width: none; }

.bottom-nav-active { color: #0066cc; }

input, select, textarea { outline: none; }
input:focus, select:focus, textarea:focus { border-color: #0066cc !important; }

.pb-safe { padding-bottom: 84px; }

/* ============================================================
   DESKTOP CONTENT ENHANCEMENTS
   On wide screens, use wider content areas but keep them readable
   with contained inner widths where needed.
   ============================================================ */

/* On tablets+, give content more breathing room */
@media (min-width: 768px) {
  /* Home hero banner taller */
  .phone .h-44 { height: 22rem; }
  .phone .h-28 { height: 9rem; }

  /* Content padding */
  .phone .p-4 { padding: 1.5rem 2.5rem; }
  .phone .px-4 { padding-left: 2.5rem; padding-right: 2.5rem; }
}

@media (min-width: 1024px) {
  /* Home: action grid 4 across */
  .phone .grid.grid-cols-2.gap-3 {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1.25rem;
  }
  .phone .grid.grid-cols-4.gap-2 { gap: 1rem; }

  /* Banner even taller on desktop */
  .phone .h-44 { height: 28rem; }
  .phone .h-28 { height: 10rem; }

  /* Give content generous side padding */
  .phone .p-4 { padding: 2rem 4rem; }
  .phone .px-4 { padding-left: 4rem; padding-right: 4rem; }
}

@media (min-width: 1400px) {
  .phone .p-4 { padding: 2rem 8rem; }
  .phone .px-4 { padding-left: 8rem; padding-right: 8rem; }
}

@media (min-width: 1800px) {
  .phone .p-4 { padding: 2rem 12rem; }
  .phone .px-4 { padding-left: 12rem; padding-right: 12rem; }
}

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%);
  background: #0c2340; color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; z-index: 999; opacity: 0; transition: opacity .3s; pointer-events: none;
  max-width: 90%;
}
#toast.show { opacity: 1; }