/* =====================================================================
   WashPoint — Customer App Shell
   ---------------------------------------------------------------------
   Mobile-first components layered on top of Tailwind CDN. Same brand
   family as the admin panel (Space Grotesk + Inter, blue/cyan) but
   warmer and friendlier — bigger touch targets, rounder corners,
   bottom-sheet/sticky-CTA patterns that read as "app", not "web form".
   ===================================================================== */

:root {
    --wp-radius: 16px;
    --wp-radius-lg: 22px;
    --wp-shadow: 0 1px 2px rgba(11,37,69,.04), 0 8px 24px -12px rgba(11,37,69,.10);
    --wp-shadow-lg: 0 16px 40px -12px rgba(11,37,69,.18);
}

body { font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, .font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.01em; }

/* =====================================================================
   Cards
   ===================================================================== */
.app-card {
    background: #fff;
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow);
    border: 1px solid rgba(11,37,69,.06);
}
.dark .app-card {
    background: #101C34;
    border-color: rgba(255,255,255,.06);
}

/* Edge-to-edge on mobile: full width, square corners, top/bottom
   hairline only — reads as native app content, not a web card
   floating in a gutter. Cards regain their normal inset/rounded look
   from md: up, where there's room for it to look intentional. */
@media (max-width: 767px) {
    .app-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
        border-top: 1px solid rgba(11,37,69,.08);
        border-bottom: 1px solid rgba(11,37,69,.08);
    }
    .dark .app-card { border-top-color: rgba(255,255,255,.08); border-bottom-color: rgba(255,255,255,.08); }
    .app-card + .app-card { margin-top: 12px; }
}

/* =====================================================================
   Step indicator — horizontal progress for multi-step flows
   (package select -> scheduling -> summary)
   ===================================================================== */
.app-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px 18px;
}
.app-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}
.app-step__dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700;
    background: #E5E7EB; color: #6B7280;
    transition: all .2s ease;
    z-index: 1;
}
.dark .app-step__dot { background: #374151; color: #9CA3AF; }
.app-step__label { font-size: .68rem; font-weight: 600; color: #9CA3AF; text-align: center; }

.app-step.active .app-step__dot {
    background: linear-gradient(135deg, #1657D6, #17B6E8);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(22,87,214,.15);
}
.app-step.active .app-step__label { color: #1657D6; }
.dark .app-step.active .app-step__label { color: #6FD3F5; }

.app-step.done .app-step__dot { background: #16B981; color: #fff; }
.app-step.done .app-step__label { color: #16B981; }

.app-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px; left: 50%; width: 100%; height: 2px;
    background: #E5E7EB;
    z-index: 0;
}
.dark .app-step:not(:last-child)::after { background: #374151; }
.app-step.done:not(:last-child)::after { background: #16B981; }

/* =====================================================================
   Sticky bottom CTA — the "app" feel: primary action pinned to the
   bottom of the viewport on mobile instead of buried at page-end.
   ===================================================================== */
.app-sticky-cta {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(76px + env(safe-area-inset-bottom)); /* sit ABOVE the floating glass bottom nav, not on top of it */
    z-index: 35; /* above page content, below modals/dropdowns */
    background: #fff;
    border-top: 1px solid rgba(11,37,69,.08);
    padding: 12px 16px;
    box-shadow: 0 -8px 24px -12px rgba(11,37,69,.15);
}
.dark .app-sticky-cta { background: #101C34; border-color: rgba(255,255,255,.08); }

/* Leave room so page content never sits under the sticky bar AND the
   bottom tab nav stacked beneath it. */
.app-has-sticky-cta { padding-bottom: calc(76px + 88px + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
    /* On desktop the CTA can just sit inline at the end of the card —
       no need to pin it to the viewport. */
    .app-sticky-cta {
        position: static;
        box-shadow: none;
        border-top: none;
        padding: 0;
        background: transparent;
    }
    .app-has-sticky-cta { padding-bottom: 0; }
}

/* =====================================================================
   Buttons
   ===================================================================== */
.app-btn-primary {
    background: linear-gradient(135deg, #1657D6, #124FC4);
    color: #fff;
    font-weight: 600;
    border-radius: 14px;
    padding: 14px 20px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 8px 20px -8px rgba(22,87,214,.5);
    transition: transform .12s ease, box-shadow .12s ease;
    border: none;
}
.app-btn-primary:active { transform: scale(.98); }
.app-btn-primary:disabled { opacity: .5; box-shadow: none; }

.app-btn-ghost {
    background: transparent;
    border: 1.5px solid rgba(11,37,69,.12);
    color: #374151;
    font-weight: 600;
    border-radius: 14px;
    padding: 12px 18px;
}
.dark .app-btn-ghost { border-color: rgba(255,255,255,.15); color: #E5E7EB; }

/* =====================================================================
   Selection cards (package/service picker) — bigger tap targets,
   clear selected state, replaces plain radio+label rows.
   ===================================================================== */
.app-select-card {
    display: block;
    border: 2px solid rgba(11,37,69,.08);
    border-radius: var(--wp-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    background: #fff;
}
.dark .app-select-card { background: #101C34; border-color: rgba(255,255,255,.08); }
.app-select-card:active { transform: scale(.99); }
.app-select-card.is-selected {
    border-color: #1657D6;
    background: linear-gradient(135deg, rgba(22,87,214,.06), rgba(23,182,232,.05));
}
.dark .app-select-card.is-selected { background: linear-gradient(135deg, rgba(22,87,214,.15), rgba(23,182,232,.1)); }

/* =====================================================================
   Badges
   ===================================================================== */
.app-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    padding: 3px 9px; border-radius: 999px;
}
.app-badge--deal { background: #FEF3E2; color: #B4740E; }
.dark .app-badge--deal { background: #3A2A0E; color: #F5C066; }
.app-badge--success { background: #E7F9F2; color: #0E9E6B; }
.dark .app-badge--success { background: #0E2A22; color: #59D8A6; }

/* =====================================================================
   Bottom Nav — floating glass pill, curved edges, no protruding FAB
   ===================================================================== */
.app-bottom-nav {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 6px;
    border-radius: 28px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 12px 32px -8px rgba(11,37,69,.25), 0 2px 8px -2px rgba(11,37,69,.1);
}
.dark .app-bottom-nav {
    background: rgba(16,28,52,.78);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.5);
}

.app-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    text-decoration: none;
    color: #6B7280;
}
.dark .app-tab { color: #9CA3AF; }

.app-tab__pill {
    width: 40px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    font-size: 1rem;
    transition: background .18s ease, color .18s ease, transform .12s ease;
}
.app-tab:active .app-tab__pill { transform: scale(.92); }
.app-tab__label { font-size: .66rem; font-weight: 600; }

.app-tab.is-active { color: #1657D6; }
.dark .app-tab.is-active { color: #6FD3F5; }
.app-tab.is-active .app-tab__pill {
    background: linear-gradient(135deg, #1657D6, #17B6E8);
    color: #fff;
}

/* Book stays visually distinct even when not the active tab — subtle
   tinted pill at rest, full gradient when active — rather than a
   circle popping up above the bar. */
.app-tab--accent .app-tab__pill {
    background: rgba(22,87,214,.12);
    color: #1657D6;
}
.dark .app-tab--accent .app-tab__pill { background: rgba(111,211,245,.15); color: #6FD3F5; }
.app-tab--accent.is-active .app-tab__pill {
    background: linear-gradient(135deg, #1657D6, #17B6E8);
    color: #fff;
}

/* Reserve room at the bottom of the page so content never sits under
   the floating nav. */
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}