/* ============================================================
 Montalvo App Shell — adaptive UI layer
 - Mobile (≤768px): native-app feel
 • Top nav collapses to a slim header
 • Bottom tab bar (Home / Book / Schedule / Account)
 • Sticky bottom CTA helper (.app-fab-bar)
 • Bottom-sheet modal style (.app-sheet)
 • Safe-area aware (notch + home indicator)
 - Desktop (≥769px): expanded website feel
 • Bottom tab bar hidden
 • Wider container, multi-column hero/dashboard layouts
 • Hover affordances
 Pages opt in via `app-shell.js` which injects markup.
 ============================================================ */

:root {
 --app-tab-height: 64px;
 --app-fab-height: 72px;
 --app-safe-bottom: env(safe-area-inset-bottom, 0px);
 --app-safe-top: env(safe-area-inset-top, 0px);
}

/* ── Mobile-only bottom tab bar ─────────────────────────────── */
.app-tabbar {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 height: calc(var(--app-tab-height) + var(--app-safe-bottom));
 background: #fff;
 border-top: 1px solid rgba(0, 0, 0, 0.06);
 box-shadow: 0 -2px 18px rgba(31, 58, 43, 0.08);
 display: none; /* shown on mobile via media query below */
 z-index: 95;
 padding-bottom: var(--app-safe-bottom);
 backdrop-filter: saturate(180%) blur(20px);
 -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.app-tabbar-inner {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 height: var(--app-tab-height);
 max-width: 600px;
 margin: 0 auto;
}
.app-tab {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 3px;
 color: #706050;
 text-decoration: none;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.02em;
 transition: color 0.15s, transform 0.1s;
 -webkit-tap-highlight-color: transparent;
}
.app-tab:active { transform: scale(0.92); }
.app-tab svg { width: 22px; height: 22px; stroke-width: 2; }
.app-tab.active { color: #1f3a2b; }
.app-tab.active svg { stroke: #4ea36c; fill: rgba(78, 163, 108, 0.1); }
.app-tab-label { line-height: 1; }

/* ── Mobile sticky CTA bar ──────────────────────────────────── */
/* Wrap your primary action in this on mobile-heavy pages.
 It floats above the tab bar, respects safe area, and animates in. */
.app-fab-bar {
 position: fixed;
 left: 0;
 right: 0;
 bottom: calc(var(--app-tab-height) + var(--app-safe-bottom));
 padding: 12px 16px;
 background: linear-gradient(180deg, rgba(245, 239, 230, 0) 0%, #f5efe6 30%);
 z-index: 90;
 display: none; /* mobile only */
 pointer-events: none;
}
.app-fab-bar.show { display: block; }
.app-fab-bar > * { pointer-events: auto; }
.app-fab-bar .btn { width: 100%; min-height: 52px; font-size: 15px; }
.app-fab-bar.no-tab { bottom: var(--app-safe-bottom); }

/* ── Bottom-sheet modal ─────────────────────────────────────── */
/* Wrap a modal's overlay in .app-modal-overlay and its dialog in
 .app-sheet. On mobile the sheet anchors to the bottom and slides up.
 On desktop it centers like a normal modal. */
.app-modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.55);
 z-index: 300;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 16px;
 animation: app-overlay-fade 0.2s ease-out;
}
@keyframes app-overlay-fade { from { opacity: 0; } to { opacity: 1; } }

.app-sheet {
 background: #fff;
 border-radius: 16px;
 width: 100%;
 max-width: 520px;
 max-height: 92vh;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
 position: relative;
}
.app-sheet-handle {
 display: none; /* mobile only */
 width: 40px;
 height: 4px;
 background: rgba(31, 58, 43, 0.18);
 border-radius: 4px;
 margin: 8px auto 0;
}

/* ── Pull-to-refresh indicator (host pages add it via JS) ──── */
.app-ptr {
 position: fixed;
 top: var(--app-safe-top);
 left: 50%;
 transform: translate(-50%, -80px) scale(0.7);
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: #fff;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 80;
 opacity: 0;
 transition: opacity 0.15s, transform 0.2s;
 pointer-events: none;
}
.app-ptr svg { width: 22px; height: 22px; stroke: #4ea36c; }
.app-ptr.armed { opacity: 1; transform: translate(-50%, calc(var(--app-safe-top) + 12px)) scale(1); }
.app-ptr.spin svg { animation: app-spin 0.9s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }

/* ── Mobile-only behavior ───────────────────────────────────── */
@media (max-width: 768px) {
 .app-tabbar { display: block; }
 /* Add bottom padding to body so content isn't hidden behind tab bar. */
 body.app-has-tabs { padding-bottom: calc(var(--app-tab-height) + var(--app-safe-bottom)) !important; }
 body.app-has-tabs.app-has-fab { padding-bottom: calc(var(--app-tab-height) + var(--app-fab-height) + var(--app-safe-bottom)) !important; }

 /* Bottom-sheet treatment on mobile: slide up from bottom, full-width. */
 .app-modal-overlay { align-items: flex-end; padding: 0; }
 .app-sheet {
 border-radius: 20px 20px 0 0;
 max-width: 100%;
 max-height: 92vh;
 padding-bottom: var(--app-safe-bottom);
 animation: app-sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 .app-sheet-handle { display: block; }
 @keyframes app-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

 /* Hide the desktop nav links on mobile (landing-shell handles its own
 mobile menu, this just makes sure inner-page chrome is minimal). */
 .ls-nav-links { display: none; }

 /* App-style cards: less padding, no shadow on individual rows. */
 .app-list-card { background: #fff; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); border-radius: 0; }
 .app-list-card:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
 .app-list-card:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
}

/* ── Desktop-only behavior ──────────────────────────────────── */
@media (min-width: 769px) {
 .app-tabbar, .app-fab-bar { display: none !important; }
 /* Hover lift on cards */
 .ls-card:hover, .q-card:hover, .stat-card:hover {
 transform: translateY(-2px);
 transition: transform 0.18s, box-shadow 0.18s;
 box-shadow: 0 12px 32px rgba(31, 58, 43, 0.1);
 }
 /* Wider hero & content containers feel more like a website */
 .ls-hero-content, .ls-section-inner, .ls-footer-inner { max-width: 1180px; }
 .ls-container, .quote-main { max-width: 1080px; }

 /* Multi-column quote builder on big screens */
 .quote-main.app-grid-2col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
 .quote-main.app-grid-2col > .q-step { min-width: 0; }
 .quote-main.app-grid-2col > .app-desktop-side { position: sticky; top: 96px; }
}

/* ── Tap target boost (mobile only) ─────────────────────────── */
@media (max-width: 768px) {
 input[type="text"], input[type="tel"], input[type="email"],
 input[type="number"], input[type="date"], select, textarea {
 font-size: 16px !important; /* prevents iOS zoom-on-focus */
 min-height: 44px;
 }
 .btn, .btn-sm { min-height: 44px; }
}