/* ================================================================
 * Befikreyy App � Soft pastel � v5
 * Urban Company inspired � friendly, rounded, generous spacing.
 * Tokens are at the top; everything below references them.
 * ================================================================ */

:root {
    /* Brand — premium indigo → sky-blue gradient (was warm orange) */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-300: #a5b4fc;
    --brand-400: #818cf8;
    --brand-500: #4f46e5;     /* primary CTA — indigo */
    --brand-600: #4338ca;
    --brand-700: #3730a3;

    /* Accents � mint, peach, lavender, sky */
    --mint-50:   #ecfdf5;
    --mint-500:  #10b981;
    --peach-50:  #fff7ed;
    --peach-300: #fdba74;
    --lav-50:    #f5f3ff;
    --lav-400:   #a78bfa;
    --sky-50:    #f0f9ff;
    --sky-400:   #38bdf8;

    /* Neutrals */
    --ink-900: #1f2937;
    --ink-700: #374151;
    --ink-500: #6b7280;
    --ink-300: #d1d5db;
    --ink-100: #f3f4f6;
    --ink-50:  #fafbfc;
    --paper:   #ffffff;
    --bg:      #faf7f3;  /* warm off-white backdrop */

    /* Tokens */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .04), 0 1px 4px rgba(17, 24, 39, .04);
    --shadow-md: 0 4px 14px rgba(17, 24, 39, .06), 0 2px 6px rgba(17, 24, 39, .04);
    --shadow-lg: 0 14px 36px rgba(17, 24, 39, .10), 0 6px 14px rgba(17, 24, 39, .06);
    --shadow-glow: 0 8px 28px rgba(79, 70, 229, .32);

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Playfair Display', Cambria, 'Hoefler Text', Georgia, 'Times New Roman', serif;

    /* Motion */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --dur: 220ms;
}

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

html, body { margin: 0; padding: 0; }

body.app-body {
    font-family: var(--font-sans);
    color: var(--ink-900);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

.phone-frame {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ============================================================
 *  App header
 * ============================================================ */
.app-header {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: calc(env(safe-area-inset-top, 0) + 14px) 18px 14px;
    background: var(--paper);
    border-bottom: 1px solid rgba(17, 24, 39, .04);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(180%) blur(8px);
    background: rgba(255, 255, 255, .88);
}
.app-logo { height: 30px; width: auto; }
.app-logo-link { display: flex; align-items: center; }
.app-header-title {
    flex: 1; text-align: center;
    font-weight: 700; font-size: 16px; color: var(--ink-900);
    letter-spacing: -.01em;
}
.app-header-right { display: flex; align-items: center; gap: var(--s-2); }

.ah-back, .ah-icon {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill);
    color: var(--ink-700);
    background: var(--ink-50);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
    font-size: 18px; font-weight: 600;
}
.ah-back:hover, .ah-icon:hover { background: var(--ink-100); }
.ah-back:active, .ah-icon:active { transform: scale(.92); }
.ah-add { background: var(--brand-500); color: white; box-shadow: var(--shadow-glow); }
.ah-add:hover { background: var(--brand-600); }

.lang-switch {
    display: inline-flex;
    background: var(--ink-50);
    border-radius: var(--r-pill);
    padding: 3px;
}
.lang-switch a {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 700;
    color: var(--ink-500);
    letter-spacing: .02em;
    transition: color var(--dur), background var(--dur);
}
.lang-switch a.active { background: var(--paper); color: var(--brand-600); box-shadow: var(--shadow-sm); }

/* ============================================================
 *  Bottom navigation
 * ============================================================ */
.app-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px 6px calc(env(safe-area-inset-bottom, 0) + 8px);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid rgba(17, 24, 39, .04);
    z-index: 40;
}
.app-bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 0;
    color: var(--ink-500);
    border-radius: var(--r-md);
    transition: color var(--dur), transform var(--dur) var(--ease);
    font-size: 10.5px; font-weight: 600;
}
.app-bottom-nav a svg { width: 22px; height: 22px; stroke-width: 1.8; }
.app-bottom-nav a.active { color: var(--brand-600); }
.app-bottom-nav a.active::before {
    content: ''; display: block; width: 28px; height: 3px;
    border-radius: 3px; background: var(--brand-500);
    margin-bottom: 2px;
}
.app-bottom-nav a:active { transform: scale(.94); }

/* ============================================================
 *  Main + sections
 * ============================================================ */
.app-main { flex: 1; padding: 0 0 80px; }

.app-section { padding: 0 18px; margin-top: var(--s-6); }
.app-pad { padding: 18px; }
.section-h {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 var(--s-3);
}
.section-h h3 {
    margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
    color: var(--ink-900);
}
.section-h .link-sm {
    font-size: 12.5px; color: var(--brand-600); font-weight: 600;
}

/* ============================================================
 *  Hero / greeting
 * ============================================================ */
.app-hero {
    position: relative;
    margin: 0 18px var(--s-5);
    padding: 22px 22px 26px;
    border-radius: var(--r-xl);
    background: linear-gradient(160deg, #ffd9b8 0%, #ffb88c 45%, #ff8e4a 100%);
    color: var(--ink-900);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.app-hero::after {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%);
    pointer-events: none;
}
.app-hero::before {
    content: ''; position: absolute; left: -30px; bottom: -60px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .25), transparent 70%);
    pointer-events: none;
}
.hello-row { display: flex; align-items: center; gap: 14px; }
.hello-eyebrow {
    text-transform: uppercase; letter-spacing: .12em;
    font-size: 11px; font-weight: 700; color: rgba(31, 41, 55, .65);
}
.hello-name {
    margin: 4px 0 0; font-size: 22px; font-weight: 800; line-height: 1.15;
    letter-spacing: -.02em;
}
.hello-wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.6s ease-in-out infinite; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.hello-sub { margin: 4px 0 0; font-size: 13px; color: rgba(31, 41, 55, .7); }
.hello-av {
    width: 44px; height: 44px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .55);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--brand-700);
    margin-left: auto;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .35);
}
.hello-login {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .8); color: var(--brand-700);
    font-weight: 700; font-size: 12.5px;
}

.quick-search {
    margin-top: 16px;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, .9);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
}
.quick-search input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font: inherit; color: var(--ink-900);
}
.quick-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-top: 14px;
}
.qs-stat {
    background: rgba(255, 255, 255, .85);
    border-radius: var(--r-md);
    padding: 10px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.qs-num { display: block; font-size: 18px; font-weight: 800; color: var(--brand-700); letter-spacing: -.02em; }
.qs-lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); margin-top: 2px; font-weight: 600; }

/* ============================================================
 *  Location pill / card
 * ============================================================ */
.loc-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: var(--ink-50);
    border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 600; color: var(--ink-700);
}
.loc-pill.is-missing { color: var(--brand-600); background: var(--brand-50); }

.location-card {
    display: flex; gap: 12px; align-items: center;
    background: var(--paper);
    padding: 14px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.location-card .lc-ic {
    width: 38px; height: 38px; border-radius: var(--r-pill);
    background: var(--brand-50); color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.location-card .lc-body { flex: 1; min-width: 0; }
.location-card .lc-eyebrow { font-size: 11px; color: var(--ink-500); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.location-card .lc-text { font-size: 14px; font-weight: 600; color: var(--ink-900); margin-top: 2px; }
.location-card .lc-sub { font-size: 12px; color: var(--ink-500); }

/* ============================================================
 *  Category grid (UC-style: 2-col tile, circular image, label below)
 * ============================================================ */
.cat-app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.cat-app-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 10px 14px;
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--ink-100);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-app-tile::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--brand-50) 0%, transparent 60%);
    opacity: .55;
    z-index: 0;
    transition: opacity var(--dur) var(--ease);
}
.cat-app-tile:active { transform: scale(.97); box-shadow: var(--shadow-md); }
.cat-app-tile:hover, .cat-app-tile:focus-visible { box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.cat-app-tile:hover::before, .cat-app-tile:focus-visible::before { opacity: .9; }
.cat-app-tile.is-selected { box-shadow: 0 0 0 3px var(--brand-500), var(--shadow-md); border-color: var(--brand-500); }
.cat-app-bg {
    position: relative; z-index: 1;
    width: 72px; height: 72px;
    border-radius: 50%;
    background-color: var(--brand-100);
    background-size: cover;
    background-position: center;
    box-shadow: 0 6px 14px -4px rgba(79, 70, 229, .35), inset 0 0 0 4px var(--paper);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur) var(--ease);
}
.cat-app-tile:hover .cat-app-bg, .cat-app-tile:focus-visible .cat-app-bg { transform: translateY(-2px) scale(1.04); }
.cat-app-emoji {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    border: 1px solid var(--ink-100);
}
.cat-app-overlay {
    position: relative; z-index: 1;
    margin-top: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cat-app-overlay .nm {
    font-size: 14px; font-weight: 800; color: var(--ink-900); letter-spacing: -.005em;
    line-height: 1.2;
}
.cat-app-overlay .ct {
    font-size: 11px; color: var(--ink-500); font-weight: 600;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--brand-50);
    color: var(--brand-700);
}

/* ============================================================
 *  Service rows
 * ============================================================ */
/* ============================================================
 *  Service category picker (2 big tiles on /customerapp/services
 *  when no filter is active � the user picks Car Wash or Property Care)
 * ============================================================ */
.svc-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 6px;
}
.svc-picker-tile {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 160px;
    border-radius: var(--r-xl);
    padding: 18px 16px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-picker-tile[data-code="car_wash"] {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #c026d3 100%);
}
.svc-picker-tile[data-code="flat_maintenance"] {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #06b6d4 100%);
}
.svc-picker-tile:active { transform: scale(.98); }
.svc-picker-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 90% -10%, rgba(255,255,255,.25), transparent 55%),
        radial-gradient(circle at -10% 110%, rgba(0,0,0,.18), transparent 55%);
    pointer-events: none;
}
.svc-picker-body { position: relative; z-index: 1; }
.svc-picker-emoji { font-size: 36px; line-height: 1; margin-bottom: 12px; }
.svc-picker-name {
    font-size: 17px; font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.svc-picker-meta {
    font-size: 11.5px; opacity: .85;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.svc-picker-arrow {
    position: absolute; top: 14px; right: 16px;
    font-size: 22px; font-weight: 300;
    opacity: .7;
}

.svc-group {
    margin-bottom: 22px;
}
.svc-group:last-child { margin-bottom: 0; }
.svc-group-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px 10px;
    border-bottom: 1px solid var(--ink-100);
    margin-bottom: 12px;
}
.svc-group-head > div { display: flex; align-items: center; gap: 8px; }
.svc-group-emoji { font-size: 17px; line-height: 1; }
.svc-group-title {
    font-size: 14.5px; font-weight: 800;
    color: var(--ink-900); letter-spacing: -.005em;
    text-transform: capitalize;
}
.svc-group-count {
    font-size: 11px; color: var(--ink-500); font-weight: 700;
    background: var(--ink-50);
    padding: 3px 9px; border-radius: var(--r-pill);
}

.svc-app-list { display: flex; flex-direction: column; gap: 12px; }
.svc-app-row {
    display: flex; gap: 14px; align-items: center;
    background: var(--paper);
    border-radius: var(--r-lg);
    padding: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-app-row:active { transform: scale(.98); }
.svc-app-row-img {
    width: 76px; height: 76px; border-radius: var(--r-md);
    background: var(--ink-100);
    background-size: cover; background-position: center;
    flex-shrink: 0;
}
.svc-app-row-body { flex: 1; min-width: 0; }
.svc-app-row-top { display: flex; align-items: center; gap: 8px; }
.svc-app-row-top strong { font-size: 14.5px; font-weight: 700; color: var(--ink-900); letter-spacing: -.01em; }
.svc-app-tag { display: block; font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.svc-app-row-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.svc-app-rating { font-size: 12px; color: var(--ink-500); font-weight: 600; }
.svc-app-price { font-size: 15px; font-weight: 800; color: var(--brand-600); }
.svc-app-price small { font-size: 11px; color: var(--ink-500); font-weight: 600; margin-left: 2px; }

.badge-pop {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
    color: white;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 10px; font-weight: 700;
    letter-spacing: .04em;
}

/* ============================================================
 *  Service detail
 * ============================================================ */
.svc-detail-hero {
    aspect-ratio: 16 / 10;
    background-size: cover; background-position: center;
    border-radius: var(--r-xl);
    margin: 0 18px var(--s-4);
    background-color: var(--brand-100);
    overflow: hidden;
    position: relative;
}
.svc-detail-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .55) 100%);
}
.svc-detail-hero .badge-pop {
    position: absolute; top: 14px; left: 14px;
    z-index: 2;
}
.svc-detail-hero .price-overlay {
    position: absolute; left: 18px; right: 18px; bottom: 18px;
    z-index: 2; color: white;
    display: flex; align-items: end; justify-content: space-between;
}
.svc-detail-hero .price-overlay .p { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.svc-detail-hero .price-overlay .p small { font-size: 12px; opacity: .8; margin-left: 4px; font-weight: 600; }

.svc-detail-section {
    padding: 0 18px; margin-top: var(--s-6);
}
.svc-detail-section h3 {
    margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}

/* Service detail CTA � pin the "Continue" button to the bottom of the
   viewport so it never sits behind the "Other plans" cards while
   scrolling. Above the bottom nav (~70px). Adds matching bottom
   padding to the page so content isn't hidden behind the bar. */
.svc-detail-section.is-fixed-bottom-cta,
.svc-detail-section--has-bottom-cta.is-fixed-bottom-cta {
    position: fixed;
    left: 0; right: 0; bottom: 76px; /* sits flush on top of the bottom nav */
    z-index: 30;
    /* Fully opaque background � nothing scrolls through. */
    background: #ffffff;
    padding: 14px 18px calc(env(safe-area-inset-bottom, 0) + 14px);
    margin-top: 0;
    border-top: 1px solid rgba(17, 24, 39, .06);
    box-shadow: 0 -6px 18px rgba(17, 24, 39, .06);
}
/* When the CTA is pinned, leave room at the bottom of the page so
   scrolling all the way down reveals the last content card fully. */
.app-main.has-fixed-bottom-cta {
    padding-bottom: 100px;
}
/* Phone-frame containment: when the device is desktop and the
   .phone-frame is centered with max-width 480px, fixed bottom
   elements (CTA bar + bottom nav) should sit inside the frame,
   not span the whole window. */
@media (min-width: 481px) {
    .svc-detail-section--has-bottom-cta.is-fixed-bottom-cta {
        left: 50%;
        right: auto;
        width: 480px;
        transform: translateX(-50%);
    }
    .app-bottom-nav {
        left: 50%;
        right: auto;
        width: 480px;
        transform: translateX(-50%);
    }
}

.included-list { display: flex; flex-direction: column; gap: 8px; }
.included-list li {
    display: flex; align-items: center; gap: 10px;
    background: var(--paper);
    padding: 11px 14px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    font-size: 13.5px; color: var(--ink-900);
}
.included-list li::before {
    content: '?'; color: var(--mint-500); font-weight: 800;
    width: 22px; height: 22px; flex-shrink: 0;
    background: var(--mint-50);
    border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}

/* ============================================================
 *  Buttons
 * ============================================================ */
.btn-app {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 18px;
    border-radius: var(--r-pill);
    font-weight: 700; font-size: 14px;
    border: 0; outline: 0;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    cursor: pointer;
}
.btn-app:active { transform: scale(.96); }
.btn-app-primary {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
    color: white;
    box-shadow: var(--shadow-glow);
}
.btn-app-primary:hover { background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); }
.btn-app-secondary { background: var(--paper); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.btn-app-outline { background: transparent; color: var(--brand-600); border: 1.5px solid var(--brand-200); }
.btn-app-ghost { background: transparent; color: var(--ink-700); }
.btn-app-full { width: 100%; }
.btn-app-lg { padding: 16px 22px; font-size: 15px; }
.btn-app-sm { padding: 8px 14px; font-size: 12.5px; }

.btn-fab {
    position: fixed; bottom: 90px; right: 18px;
    width: 56px; height: 56px; border-radius: var(--r-pill);
    background: var(--brand-500);
    color: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-glow);
    z-index: 30;
}

/* ============================================================
 *  Forms
 * ============================================================ */
.field-app {
    margin-bottom: var(--s-4);
    display: flex; flex-direction: column;
}
.field-app label {
    font-size: 12px; font-weight: 700; color: var(--ink-700);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.field-app input,
.field-app select,
.field-app textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    background: var(--paper);
    font: inherit;
    color: var(--ink-900);
    transition: border var(--dur), box-shadow var(--dur);
}
.field-app input:focus,
.field-app select:focus,
.field-app textarea:focus {
    outline: 0;
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px var(--brand-50);
}
.fa-hint { font-size: 11.5px; color: var(--ink-500); margin-top: 4px; }

.pwd-wrap { position: relative; }
.pwd-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; color: var(--brand-600);
    font-weight: 700; font-size: 12px; padding: 4px 6px; cursor: pointer;
}

/* ============================================================
 *  Checkbox (custom — fully aligned, no native OS styling)
 * ============================================================ */
.checkbox-app {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 var(--s-4);
    padding: 0;
    font-size: 13px;
    color: var(--ink-700);
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}
.checkbox-app > input[type="checkbox"] {
    /* reset the native control completely, then style it ourselves */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0 0;
    padding: 0;
    border: 1.5px solid var(--ink-200);
    border-radius: 6px;
    background-color: var(--paper);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 9px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(16, 24, 40, 0.02);
}
.checkbox-app > input[type="checkbox"]:hover {
    border-color: var(--brand-400);
}
.checkbox-app > input[type="checkbox"]:checked {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    /* checkmark drawn with a background SVG (no pseudo-elements) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'><path d='M1 4.5 L4.5 8 L11 1' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: 12px 9px;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}
.checkbox-app > input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--brand-50);
    border-color: var(--brand-400);
}
.checkbox-app > span {
    flex: 1 1 auto;
    padding-top: 1px;
}
.checkbox-app > input[type="checkbox"]:checked ~ span a { color: var(--brand-600); }

.app-alert {
    padding: 12px 14px;
    border-radius: var(--r-md);
    font-size: 13px;
    margin-bottom: var(--s-4);
    display: flex; align-items: center; gap: 8px;
}
.app-alert-error { background: #fef2f2; color: #b91c1c; }

/* ============================================================
 *  Splash
 * ============================================================ */
.splash-screen {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--brand-50) 0%, var(--bg) 60%);
    display: flex; flex-direction: column; padding: 18px;
}
.splash-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.splash-logo-img { width: 92px; height: 92px; border-radius: 24px; background: white; padding: 16px; box-shadow: var(--shadow-lg); }
.splash-title { font-family: var(--font-display); font-size: 38px; font-weight: 700; margin: 24px 0 6px; letter-spacing: -.02em; }
.splash-tagline { color: var(--ink-500); font-size: 14px; max-width: 320px; }
.splash-features { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 320px; width: 100%; }
.splash-feat {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    font-size: 13px; color: var(--ink-700); font-weight: 500;
}
.splash-feat .ic {
    width: 24px; height: 24px; border-radius: var(--r-pill);
    background: var(--mint-50); color: var(--mint-500);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
}
.splash-bottom { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; }
.splash-foot-link { text-align: center; font-size: 12.5px; color: var(--ink-500); margin-top: 4px; }

/* ============================================================
 *  Auth screens
 * ============================================================ */
.auth-screen { padding: 24px 18px 40px; }
.auth-hero { text-align: center; margin-bottom: 22px; }
.auth-logo { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; background: var(--brand-50); padding: 10px; }
.auth-title { font-size: 24px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.02em; }
.auth-sub { color: var(--ink-500); font-size: 13.5px; margin: 0 auto; max-width: 320px; }

.auth-card {
    background: var(--paper);
    padding: 22px;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
}

.auth-divider {
    text-align: center; margin: 18px 0;
    font-size: 12px; color: var(--ink-500);
    display: flex; align-items: center; gap: 10px;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--ink-100);
}
.auth-foot { text-align: center; font-size: 12px; color: var(--ink-500); margin-top: 16px; }
.auth-foot a { color: var(--brand-600); font-weight: 600; }

.demo-accounts {
    margin-top: 18px;
    padding: 12px;
    background: var(--ink-50);
    border-radius: var(--r-md);
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11.5px; color: var(--ink-500);
}
.demo-accounts strong { color: var(--ink-900); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }

/* ============================================================
 *  Tabs
 * ============================================================ */
.app-tab-row {
    display: flex; gap: 6px;
    padding: 14px 18px 0;
    overflow-x: auto;
}
.app-tab {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-size: 13px; font-weight: 600;
    color: var(--ink-500);
    background: var(--ink-50);
    transition: color var(--dur), background var(--dur);
}
.app-tab.active { background: var(--brand-500); color: white; }

/* ============================================================
 *  Booking cards (separate by category code)
 * ============================================================ */
.bk-section { margin-bottom: var(--s-6); }
.bk-section-h {
    display: flex; align-items: center; gap: 10px;
    padding: 0 18px;
    margin-bottom: 12px;
}
.bk-section-h .ico {
    width: 28px; height: 28px; border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-50); color: var(--brand-600); font-size: 14px;
}
.bk-section-h h4 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.bk-section-h .ct { font-size: 11.5px; color: var(--ink-500); margin-left: auto; font-weight: 600; }
.bk-section.is-fmc .ico { background: var(--peach-50); color: #c2410c; }
.bk-section.is-cw .ico { background: var(--sky-50); color: #0369a1; }

.bk-card {
    display: flex; gap: 14px;
    background: var(--paper);
    padding: 14px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin: 0 18px 12px;
    transition: transform var(--dur) var(--ease);
}
.bk-card:active { transform: scale(.98); }
.bk-card-img {
    width: 72px; height: 72px; border-radius: var(--r-md);
    background-color: var(--brand-100);
    background-size: cover; background-position: center;
    flex-shrink: 0;
}
.bk-card-body { flex: 1; min-width: 0; }
.bk-card-top { display: flex; align-items: center; gap: 8px; }
.bk-status-pill {
    padding: 2px 10px; border-radius: var(--r-pill);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.bk-pill-active { background: var(--mint-50); color: #047857; }
.bk-pill-paused { background: #fef3c7; color: #b45309; }
.bk-pill-cancelled { background: #fee2e2; color: #b91c1c; }
.bk-code { font-size: 11px; color: var(--ink-500); font-weight: 600; margin-left: auto; }
.bk-name { display: block; font-size: 14.5px; font-weight: 700; margin-top: 4px; color: var(--ink-900); }
.bk-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; color: var(--ink-500); }
.bk-meta span { display: inline-flex; align-items: center; gap: 4px; }
.bk-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.bk-price { font-size: 14px; font-weight: 800; color: var(--brand-600); }
.bk-price small { font-size: 10.5px; color: var(--ink-500); margin-left: 2px; font-weight: 600; }
.bk-next { font-size: 11px; color: var(--ink-500); font-weight: 600; }

/* ============================================================
 *  Booking detail
 * ============================================================ */
.bd-hero {
    margin: 0 18px var(--s-4);
    padding: 22px;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--brand-100), var(--brand-300));
    color: var(--ink-900);
    box-shadow: var(--shadow-md);
}
.bd-hero h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.bd-hero .sub { font-size: 13px; color: rgba(31, 41, 55, .7); }

.bd-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 18px;
}
.bd-tile {
    background: var(--paper);
    padding: 14px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}
.bd-tile .lbl { font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.bd-tile .val { font-size: 14px; font-weight: 700; color: var(--ink-900); margin-top: 4px; }

/* ============================================================
 *  Profile
 * ============================================================ */
.profile-hero {
    background: linear-gradient(160deg, var(--brand-100), var(--brand-300));
    padding: 24px 18px 60px;
    text-align: center;
    color: var(--ink-900);
}
.profile-hero .av {
    width: 80px; height: 80px; border-radius: var(--r-pill);
    background: white;
    margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 800; color: var(--brand-700);
    box-shadow: var(--shadow-md);
}
.profile-hero .name { font-size: 18px; font-weight: 800; }
.profile-hero .phone { font-size: 13px; color: rgba(31, 41, 55, .65); margin-top: 2px; }

.profile-card {
    margin: -40px 18px 0;
    background: var(--paper);
    border-radius: var(--r-xl);
    padding: 16px;
    box-shadow: var(--shadow-md);
}
.profile-list { display: flex; flex-direction: column; }
.profile-list a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 4px;
    font-size: 14px; font-weight: 600; color: var(--ink-900);
    border-bottom: 1px solid var(--ink-100);
    transition: color var(--dur);
}
.profile-list a:last-child { border-bottom: 0; }
.profile-list a:hover { color: var(--brand-600); }
.profile-list .ic {
    width: 30px; height: 30px; border-radius: var(--r-pill);
    background: var(--ink-50); color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.profile-list .arr { margin-left: auto; color: var(--ink-300); }

/* ============================================================
 *  Founder / trust card
 * ============================================================ */
.founder-card {
    display: flex; gap: 14px; align-items: center;
    background: var(--paper);
    padding: 16px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin: 0 18px var(--s-4);
}
.founder-card .av {
    width: 60px; height: 60px; border-radius: var(--r-pill);
    background: var(--brand-100);
    flex-shrink: 0;
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; color: var(--brand-700);
}
.founder-card .body { flex: 1; min-width: 0; }
.founder-card .nm { font-size: 14.5px; font-weight: 800; }
.founder-card .ti { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.founder-card .badge {
    display: inline-block;
    background: var(--brand-50); color: var(--brand-700);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: 3px 8px; border-radius: var(--r-pill);
    margin-top: 6px;
}

/* ============================================================
 *  Photos (per visit, per category)
 * ============================================================ */
.photo-section { padding: 0 18px; margin-top: var(--s-6); }
.photo-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.photo-tile {
    aspect-ratio: 1 / 1;
    background: var(--ink-100) center / cover;
    border-radius: var(--r-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--dur) var(--ease);
}
.photo-tile:active { transform: scale(.96); }

.photo-day {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--paper);
    padding: 10px 14px;
    border-radius: var(--r-md);
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
}
.photo-day .d { font-size: 13px; font-weight: 700; }
.photo-day .n { font-size: 11.5px; color: var(--ink-500); }

/* ============================================================
 *  Search bar / chips
 * ============================================================ */
.app-search-bar {
    padding: 14px 18px 0;
}
.app-search-bar form {
    display: flex; align-items: center; gap: 10px;
    background: var(--paper);
    padding: 10px 14px;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
}
.app-search-bar input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font: inherit; color: var(--ink-900);
}

.app-chip-row {
    display: flex; gap: 8px;
    padding: 14px 18px;
    overflow-x: auto;
    scrollbar-width: none;
}
.app-chip-row::-webkit-scrollbar { display: none; }
.chip {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--ink-50);
    color: var(--ink-700);
    font-size: 12.5px; font-weight: 600;
    transition: background var(--dur), color var(--dur);
}
.chip.chip-active { background: var(--brand-500); color: white; }

.results-count { font-size: 12px; color: var(--ink-500); font-weight: 600; margin-bottom: 10px; }

/* ============================================================
 *  Empty / loading states
 * ============================================================ */
.empty-app {
    text-align: center; padding: 40px 20px;
}
.empty-app .ea-ic {
    width: 72px; height: 72px;
    border-radius: var(--r-pill);
    background: var(--ink-50); color: var(--ink-300);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin: 0 auto 14px;
}
.empty-app h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.empty-app p { color: var(--ink-500); font-size: 13px; margin: 0 0 16px; }

.app-pagination { margin-top: 18px; }
.app-pagination nav { display: flex; justify-content: center; gap: 6px; }
.app-pagination a, .app-pagination span {
    padding: 8px 12px; border-radius: var(--r-pill);
    font-size: 12.5px; font-weight: 600; color: var(--ink-700);
    background: var(--ink-50);
}
.app-pagination .active span { background: var(--brand-500); color: white; }

/* ============================================================
 *  Toast
 * ============================================================ */
.app-toast {
    position: fixed; left: 50%; top: 18px;
    transform: translateX(-50%);
    padding: 12px 18px;
    border-radius: var(--r-pill);
    color: white; font-size: 13px; font-weight: 600;
    z-index: 100;
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 8px;
    animation: toast-in var(--dur) var(--ease);
    max-width: calc(100% - 36px);
}
.app-toast-success { background: var(--mint-500); }
.app-toast-error { background: #ef4444; }
.app-toast.is-hide { animation: toast-out 240ms var(--ease) forwards; }
@keyframes toast-in { from { transform: translate(-50%, -20px); opacity: 0; } }
@keyframes toast-out { to { transform: translate(-50%, -20px); opacity: 0; } }

/* ============================================================
 *  Misc / chips / pills
 * ============================================================ */
.skeleton {
    background: linear-gradient(90deg, var(--ink-100), var(--ink-50), var(--ink-100));
    background-size: 200% 100%;
    animation: skel 1.4s linear infinite;
    border-radius: var(--r-sm);
}
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ============================================================
 *  Responsive
 * ============================================================ */
@media (max-width: 380px) {
    .hello-name { font-size: 20px; }
    .app-section { padding: 0 14px; }
    .cat-app-grid { grid-template-columns: 1fr 1fr; }
    .splash-title { font-size: 32px; }
}
@media (min-width: 720px) {
    .phone-frame { box-shadow: var(--shadow-lg); border-radius: var(--r-xl); margin-top: 24px; margin-bottom: 24px; }
}

/* Selection / focus polish */
::selection { background: var(--brand-200); color: var(--ink-900); }

/* ============================================================
 *  Booking flow � stepper + partner cards + area list + summary
 * ============================================================ */
.book-wrap { display: flex; flex-direction: column; gap: var(--s-5); }

.stepper {
    display: flex; align-items: center; gap: 0;
    margin: 0 18px var(--s-4);
    padding: 14px;
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}
.stepper .st {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-align: center;
}
.stepper .st .n {
    width: 28px; height: 28px;
    border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
    background: var(--ink-100); color: var(--ink-500);
    transition: background var(--dur), color var(--dur);
}
.stepper .st .l { font-size: 11px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
.stepper .st.active .n { background: var(--brand-500); color: white; box-shadow: var(--shadow-glow); }
.stepper .st.active .l { color: var(--brand-600); }
.stepper .st.done .n { background: var(--mint-500); color: white; }
.stepper .st.done .l { color: var(--mint-500); }
.stepper .line {
    width: 24px; height: 2px;
    background: var(--ink-100);
    border-radius: 2px;
    margin: 0 4px;
    transition: background var(--dur);
}
.stepper .line.done { background: var(--mint-500); }

.book-card {
    margin: 0 18px;
    padding: 20px;
    background: var(--paper);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
}

.area-list { display: flex; flex-direction: column; gap: 8px; }
.area-option {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--ink-50);
    border: 0; cursor: pointer; text-align: left;
    font: inherit;
    transition: background var(--dur), transform var(--dur) var(--ease);
}
.area-option:hover { background: var(--brand-50); }
.area-option:active { transform: scale(.98); }
.area-option .nm { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.area-option .ct { font-size: 12px; color: var(--ink-500); }
.area-option.selected { background: var(--brand-500); color: white; }
.area-option.selected .nm, .area-option.selected .ct { color: white; }

.partner-list { display: flex; flex-direction: column; gap: 10px; }
.partner-option {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    border-radius: var(--r-md);
    background: var(--ink-50);
    cursor: pointer;
    border: 2px solid transparent;
    transition: background var(--dur), border var(--dur), transform var(--dur) var(--ease);
}
.partner-option:hover { background: var(--brand-50); }
.partner-option:active { transform: scale(.99); }
.partner-option.selected { background: var(--brand-50); border-color: var(--brand-500); }
.partner-option .av {
    width: 44px; height: 44px; border-radius: var(--r-pill);
    background: var(--brand-100);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--brand-700);
    font-size: 16px;
    flex-shrink: 0;
}
.partner-option .body { flex: 1; min-width: 0; }
.partner-option .body h4 {
    margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-900);
    display: flex; align-items: center; gap: 6px;
}
.partner-option .badge {
    background: var(--mint-50); color: #047857;
    padding: 1px 6px; border-radius: var(--r-pill);
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.partner-option .sub { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.partner-option .sub .online { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint-500); margin-right: 4px; vertical-align: middle; }
.partner-option .right { text-align: right; flex-shrink: 0; }
.partner-option .right .rating { font-size: 13px; font-weight: 800; color: var(--ink-900); }
.partner-option .right .jobs { font-size: 10.5px; color: var(--ink-500); margin-top: 2px; }

.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.field-row .field { margin-bottom: var(--s-4); display: flex; flex-direction: column; }
.field-row .field label,
.field .label { font-size: 12px; font-weight: 700; color: var(--ink-700); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.field-row .field input,
.field-row .field select,
.field-row .field textarea,
.field input,
.field select,
.field textarea {
    width: 100%; padding: 13px 14px;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    background: var(--paper);
    font: inherit; color: var(--ink-900);
    transition: border var(--dur), box-shadow var(--dur);
}
.field-row .field input:focus,
.field-row .field select:focus,
.field-row .field textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 0;
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px var(--brand-50);
}

.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }

.alert {
    padding: 12px 14px;
    border-radius: var(--r-md);
    font-size: 13px;
    margin-bottom: var(--s-4);
}
.alert-info { background: var(--sky-50); color: #075985; }
.alert-info a { color: #075985; font-weight: 700; }

.summary-card {
    margin: 0 18px;
    padding: 22px;
    background: linear-gradient(135deg, var(--brand-100), var(--brand-300));
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    color: var(--ink-900);
}
.summary-card h3 {
    margin: 0 0 14px; font-size: 15px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
}
.summary-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; font-size: 13.5px;
}
.summary-row .lbl { color: rgba(31, 41, 55, .65); font-weight: 600; }
.summary-row .val { font-weight: 700; }
.summary-divider {
    height: 1px; background: rgba(31, 41, 55, .15); margin: 10px 0;
}
.summary-total {
    font-size: 18px; font-weight: 800;
    padding-top: 14px;
}
.summary-total > div:first { font-weight: 800; }
.text-center { text-align: center; }
.muted { color: var(--ink-500); }

/* Section headers inside book-card */
.book-h {
    display: flex; align-items: center; gap: 8px;
    margin: 18px 0 10px;
    font-size: 13px; font-weight: 800; color: var(--ink-900);
    text-transform: uppercase; letter-spacing: .06em;
}
.book-h:first-child { margin-top: 0; }
.book-h .change-link {
    margin-left: auto;
    font-size: 12px; font-weight: 600; color: var(--brand-600);
    text-transform: none; letter-spacing: 0;
}

/* Property Care specific fields */
.book-section-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--peach-50);
    color: #c2410c;
    border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 12px;
}

.payment-toggle {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 6px;
}
.payment-toggle label {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 14px;
    border-radius: var(--r-md);
    background: var(--paper);
    border: 2px solid var(--ink-100);
    color: var(--ink-700);
    cursor: pointer;
    font-size: 13px; font-weight: 700;
    transition: all var(--dur) var(--ease);
    position: relative;
    user-select: none;
}
.payment-toggle label:hover { background: var(--brand-50); border-color: var(--brand-200); }
/* Native radio stays in the accessibility tree but visually hidden
   so screen-readers + keyboard nav still work while the label is the
   visual surface. */
.payment-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
/* Visual radio dot � empty circle on the left. */
.payment-toggle label::before {
    content: "";
    flex: 0 0 18px;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ink-300);
    background: var(--paper);
    transition: all var(--dur) var(--ease);
}
.payment-toggle label.is-selected {
    background: var(--brand-500);
    color: white;
    border-color: var(--brand-500);
    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.25);
}
.payment-toggle label.is-selected::before {
    border-color: white;
    background: white;
    box-shadow: inset 0 0 0 4px var(--brand-500);
}

/* Login wall card for guest checkout */
.guest-wall {
    margin: 0 18px;
    padding: 22px;
    background: linear-gradient(135deg, var(--lav-50), white);
    border: 1.5px dashed var(--lav-400);
    border-radius: var(--r-xl);
    text-align: center;
}
.guest-wall h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.guest-wall p { margin: 0 0 16px; color: var(--ink-500); font-size: 13px; }

/* Guest inline notice inside book card */
.inline-guest {
    background: var(--lav-50);
    color: #5b21b6;
    padding: 12px 14px;
    border-radius: var(--r-md);
    font-size: 13px;
    margin-bottom: var(--s-4);
}
.inline-guest a { color: #5b21b6; font-weight: 700; }

@media (max-width: 480px) {
    .field-row { grid-template-columns: 1fr; }
    .stepper .line { width: 14px; }
}

/* ============================================================
 *  Legacy shim � backwards-compat for views still using older
 *  class names. Maps them to the new design tokens so every
 *  page renders correctly without rewriting 16+ blade files.
 *  Will be phased out as views are modernised.
 * ============================================================ */

/* Profile hero (legacy) */
.profile-hero {
    background: linear-gradient(160deg, var(--brand-100), var(--brand-300));
    padding: 24px 18px 60px;
    text-align: center;
    color: var(--ink-900);
}
.ph-av {
    width: 80px; height: 80px; border-radius: var(--r-pill);
    background: white;
    margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 800; color: var(--brand-700);
    box-shadow: var(--shadow-md);
}
.ph-name { font-size: 18px; font-weight: 800; margin: 0 0 2px; }
.ph-meta { font-size: 13px; color: rgba(31, 41, 55, .65); margin: 0 0 6px; }
.ph-role {
    display: inline-block; padding: 3px 10px;
    background: rgba(255, 255, 255, .8); color: var(--brand-700);
    border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 700; text-transform: capitalize;
}

/* Collapsible menu items (profile / settings) */
.app-collapsible {
    background: var(--paper);
    border-radius: var(--r-lg);
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.collap-h {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0; background: transparent; cursor: pointer;
    text-align: left; font: inherit;
    color: var(--ink-900);
    transition: background var(--dur);
}
.collap-h:hover { background: var(--ink-50); }
.collap-h .ic {
    width: 32px; height: 32px; border-radius: var(--r-pill);
    background: var(--brand-50); color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.collap-h strong { flex: 1; font-size: 14px; font-weight: 700; }
.collap-h .caret { color: var(--ink-300); font-size: 20px; transition: transform var(--dur); }
.app-collapsible.open .collap-h .caret { transform: rotate(90deg); }
.collap-body {
    padding: 0 16px 16px;
    display: none;
}
.app-collapsible.open .collap-body { display: block; }

/* Menu-link list rows */
.menu-link {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--paper);
    border-radius: var(--r-md);
    margin-bottom: 8px;
    box-shadow: var(--shadow-sm);
    font-size: 14px; font-weight: 600; color: var(--ink-900);
    transition: transform var(--dur) var(--ease), color var(--dur);
}
.menu-link:active { transform: scale(.98); }
.menu-link:hover { color: var(--brand-600); }
.menu-link .ic {
    width: 32px; height: 32px; border-radius: var(--r-pill);
    background: var(--ink-50); color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.menu-link .caret { margin-left: auto; color: var(--ink-300); font-size: 20px; }
.menu-link strong { flex: 1; font-weight: 700; }

/* Address cards (profile) */
.addr-card {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    background: var(--paper);
}
.addr-tx { flex: 1; min-width: 0; }
.addr-tx strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.addr-tx p { margin: 0 0 4px; font-size: 12.5px; color: var(--ink-700); }
.addr-tx small.muted { font-size: 11.5px; color: var(--ink-500); }
.addr-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.badge-default {
    padding: 2px 8px; border-radius: var(--r-pill);
    background: var(--mint-50); color: #047857;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.addr-del {
    background: transparent; border: 0;
    color: #b91c1c; font-size: 12px; font-weight: 600;
    cursor: pointer; padding: 4px 8px;
}
.addr-add { margin-top: 8px; }
.addr-add summary {
    cursor: pointer; padding: 10px 14px;
    background: var(--brand-50); color: var(--brand-700);
    border-radius: var(--r-md);
    font-weight: 700; font-size: 13px;
    list-style: none;
}
.addr-add summary::-webkit-details-marker { display: none; }
.field-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .field-app-grid { grid-template-columns: 1fr; } }

/* Logout + version footer */
.logout-form { margin-top: 24px; }
.btn-app-danger-outline {
    background: transparent; color: #b91c1c; border: 1.5px solid #fecaca;
}
.btn-app-danger-outline:hover { background: #fef2f2; }
.profile-version {
    text-align: center; margin: 24px 0 0;
    font-size: 11.5px; color: var(--ink-500);
}
.optional { color: var(--ink-500); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* Help / Contact / About hero blocks (legacy) */
.app-about-hero, .app-help-hero {
    background: linear-gradient(135deg, var(--brand-100), var(--brand-300));
    padding: 28px 22px;
    border-radius: var(--r-xl);
    margin: 0 18px 22px;
    color: var(--ink-900);
    box-shadow: var(--shadow-md);
}
.app-about-hero h1, .app-help-hero h1 {
    margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.01em;
}
.app-about-hero p, .app-help-hero p { margin: 0; color: rgba(31, 41, 55, .7); font-size: 13.5px; }

.about-card {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 20px;
    background: var(--paper);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
}
.about-photo {
    width: 80px; height: 80px; border-radius: var(--r-pill);
    background: var(--brand-100) center / cover;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; color: var(--brand-700);
}
.about-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.about-card p { margin: 0 0 8px; font-size: 13px; color: var(--ink-700); line-height: 1.55; }
.ck {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: var(--r-pill);
    background: var(--brand-50); color: var(--brand-700);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    margin-right: 4px;
}
.app-list-checks { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; margin: 0; }
.app-list-checks li {
    display: flex; align-items: center; gap: 10px;
    background: var(--paper); padding: 10px 14px;
    border-radius: var(--r-md); box-shadow: var(--shadow-sm);
    font-size: 13.5px;
}
.app-list-checks li::before {
    content: '?'; color: var(--mint-500); font-weight: 800;
    width: 22px; height: 22px; flex-shrink: 0;
    background: var(--mint-50); border-radius: var(--r-pill);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}

.app-help-cta {
    margin: 18px 18px 0;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-500));
    color: white; padding: 18px; border-radius: var(--r-xl);
    text-align: center; box-shadow: var(--shadow-md);
}
.app-help-cta h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.app-help-cta p { margin: 0 0 12px; font-size: 13px; opacity: .9; }
.app-help-cta .btn-app-primary { background: white; color: var(--mint-500); box-shadow: none; }

.logo-img-el { height: 38px; width: auto; }

/* FAQ */
.faq-app { display: flex; flex-direction: column; gap: 8px; }
.faq-app details {
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.faq-app summary {
    cursor: pointer; padding: 14px 16px;
    font-weight: 700; font-size: 14px; color: var(--ink-900);
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
}
.faq-app summary::-webkit-details-marker { display: none; }
.faq-app summary::after {
    content: '+'; color: var(--brand-600); font-weight: 800; font-size: 20px;
    transition: transform var(--dur);
}
.faq-app details[open] summary::after { content: '-'; }
.fa-body {
    padding: 0 16px 14px;
    font-size: 13.5px; color: var(--ink-700); line-height: 1.55;
}

/* Contact channels */
.channel-card {
    display: flex; gap: 12px; align-items: center;
    padding: 14px; margin-bottom: 10px;
    background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.cc-icon {
    width: 44px; height: 44px; border-radius: var(--r-pill);
    background: var(--brand-50); color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.cc-tx { flex: 1; min-width: 0; }
.cc-tx strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink-900); }
.cc-tx span, .cc-tx a { font-size: 12.5px; color: var(--ink-700); word-break: break-word; }

.hours-app {
    background: var(--paper); border-radius: var(--r-lg);
    padding: 14px; box-shadow: var(--shadow-sm);
}
.hours-app-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; font-size: 13px;
}
.hours-app-row strong { font-weight: 700; }
.hours-app-row span { color: var(--ink-500); }

/* Detail page heading (legacy "app-detail-h3") */
.app-detail-h3 {
    margin: 22px 0 10px; font-size: 14px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-900);
}
.app-detail-hero {
    margin: 0 18px 16px;
    aspect-ratio: 16 / 9;
    background-color: var(--brand-100);
    background-size: cover; background-position: center;
    border-radius: var(--r-xl);
    position: relative;
}
.app-detail-title { font-size: 22px; font-weight: 800; margin: 4px 0 4px; letter-spacing: -.01em; }
.app-detail-tag { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-500); }
.bk-detail-card {
    background: var(--paper); padding: 16px; border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.bk-detail-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--ink-100);
    font-size: 13px;
}
.bk-detail-row:last-child { border-bottom: 0; }
.bk-detail-row span:first-child { color: var(--ink-500); font-weight: 600; min-width: 110px; }
.bk-detail-row strong { font-weight: 700; color: var(--ink-900); }

/* Legal / doc pages (Terms, Privacy) */
.legal-doc-app { color: var(--ink-700); line-height: 1.65; font-size: 14px; }
.legal-doc-app p { margin: 0 0 10px; }
.legal-doc-app a { color: var(--brand-600); text-decoration: none; }
.legal-doc-app a:hover { text-decoration: underline; }
.legal-list-app { padding-left: 20px; margin: 0 0 12px; color: var(--ink-700); line-height: 1.65; font-size: 14px; }
.legal-list-app li { margin-bottom: 6px; }
.legal-list-app strong { color: var(--ink-900); }
.app-detail-h3 { font-size: 15px; font-weight: 700; color: var(--ink-900); margin: 18px 0 8px; }

/* Visit pills (schedule / booking) */
.visit-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--r-pill);
    font-size: 10.5px; font-weight: 700; text-transform: capitalize;
    background: var(--ink-50); color: var(--ink-700);
}
.visit-pill.visit-pill-completed, .visit-pill.visit-pill-done { background: var(--mint-50); color: #047857; }
.visit-pill.visit-pill-scheduled, .visit-pill.visit-pill-pending { background: #fef3c7; color: #b45309; }
.visit-pill.visit-pill-cancelled, .visit-pill.visit-pill-skipped { background: #fee2e2; color: #b91c1c; }

/* Schedule hero / stats */
.schedule-hero {
    margin: 0 18px 16px;
    padding: 22px;
    background: linear-gradient(160deg, var(--brand-100), var(--brand-300));
    border-radius: var(--r-xl);
    color: var(--ink-900);
    box-shadow: var(--shadow-md);
}
.sh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.sh-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sh-month-nav { display: flex; align-items: center; gap: 8px; }
.sh-nav-btn {
    width: 32px; height: 32px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .8); color: var(--brand-700);
    border: 0; cursor: pointer; font-weight: 700;
}
.sh-card {
    background: var(--paper); border-radius: var(--r-md);
    padding: 12px; box-shadow: var(--shadow-sm);
    text-align: center;
}
.shc-ic { font-size: 14px; color: var(--brand-700); margin-bottom: 4px; }
.shc-info strong { display: block; font-size: 18px; font-weight: 800; color: var(--ink-900); }
.shc-info span { font-size: 10.5px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }

.calendar-wrap { background: var(--paper); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-sm); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal-wd {
    text-align: center; padding: 6px 0;
    font-size: 11px; font-weight: 700; color: var(--ink-500); text-transform: uppercase;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    background: var(--ink-50); border-radius: var(--r-sm);
    font-size: 12px; font-weight: 600; color: var(--ink-700);
    border: 1.5px solid transparent;
}
.cal-cell.is-today { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-500); }
.cal-cell.has-visit { background: var(--mint-50); color: #047857; }
.cal-cell.out-of-month { opacity: .35; }

.active-sub-list { display: flex; flex-direction: column; gap: 10px; }
.asub-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; background: var(--paper);
    border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.asub-ic {
    width: 38px; height: 38px; border-radius: var(--r-pill);
    background: var(--brand-50); color: var(--brand-600);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.asub-info { flex: 1; min-width: 0; }
.asub-info strong { display: block; font-size: 14px; font-weight: 700; }
.asub-info span { font-size: 12px; color: var(--ink-500); }

.visit-list-mini { display: flex; flex-direction: column; gap: 6px; }
.vlm-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: var(--ink-50);
    border-radius: var(--r-sm);
    font-size: 12.5px;
}
.vlm-date { font-weight: 700; min-width: 50px; }
.vlm-info { flex: 1; min-width: 0; color: var(--ink-700); }
.cc-date { font-size: 11px; color: var(--ink-500); }
.cc-tag {
    display: inline-block; padding: 2px 8px;
    background: var(--brand-50); color: var(--brand-700);
    border-radius: var(--r-pill);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
}

/* Book summary (legacy) */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-grid .field { margin-bottom: 12px; }
.text-right { text-align: right; }
table { border-collapse: collapse; width: 100%; }
table th, table td {
    padding: 8px 10px; border-bottom: 1px solid var(--ink-100);
    text-align: left; font-size: 13px;
}
table th { font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

/* Register page extras */
.role-toggle-app { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.role-toggle-app label {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; border-radius: var(--r-md);
    background: var(--ink-50); border: 2px solid transparent;
    cursor: pointer; font-size: 13px; font-weight: 700;
    transition: all var(--dur) var(--ease);
}
.role-toggle-app input { display: none; }
.role-toggle-app label.is-selected,
.role-toggle-app input:checked + * { background: var(--brand-500); color: white; }
.rt-ic { width: 22px; height: 22px; border-radius: var(--r-pill); background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.rt-tx { display: flex; flex-direction: column; }
.rt-tx small { font-size: 10.5px; opacity: .85; font-weight: 500; }
.phone-wrap { display: flex; gap: 8px; }
.phone-prefix {
    padding: 14px 12px; background: var(--ink-50);
    border: 1.5px solid var(--ink-100); border-radius: var(--r-md);
    font-weight: 700; color: var(--ink-700); font-size: 14px;
    flex-shrink: 0;
}
.phone-wrap input { flex: 1; }

/* Generic placeholder */
.muted { color: var(--ink-500); font-size: 12.5px; }
.caret { display: inline-block; transform: rotate(90deg); transition: transform var(--dur); }
.alert { padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; margin-bottom: 12px; }
.alert-success { background: var(--mint-50); color: #047857; }
.alert-warning { background: #fef3c7; color: #b45309; }
.alert-error { background: #fee2e2; color: #b91c1c; }
.alert-info { background: var(--sky-50); color: #075985; }

/* App footer link (legacy) */
.app-footer-link { display: block; text-align: center; padding: 14px; color: var(--brand-600); font-weight: 700; font-size: 13px; }

/* Responsive */
@media (max-width: 380px) {
    .cal-cell { font-size: 11px; }
    .asub-row { padding: 10px; }
    .sh-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
 *  Partner-app legacy shim � same soft-pastel + rounded tokens
 *  used by partnerapp views that have not yet been rewritten.
 * ============================================================ */

/* Form sections (bookings_new) */
.form-section {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--brand-50), white);
    border-radius: var(--r-md);
    margin: 16px 0 10px;
    border: 1px solid var(--brand-100);
}
.form-section .ic {
    width: 30px; height: 30px; border-radius: var(--r-pill);
    background: var(--brand-500); color: white;
    display: flex; align-items: center; justify-content: center;
}
.form-section h4 { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink-900); }
.form-section .sub { font-size: 12px; color: var(--ink-500); margin-left: auto; }

.form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-grid-2 .field, .form-grid-2 > div { margin-bottom: 12px; }
@media (max-width: 480px) { .form-grid-2 { grid-template-columns: 1fr; } }

.lbl { font-size: 12px; font-weight: 700; color: var(--ink-700); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; display: block; }

/* Pill toggle */
.pill-toggle {
    display: inline-flex; background: var(--ink-50);
    border-radius: var(--r-pill); padding: 3px;
}
.pill-toggle a {
    padding: 6px 14px; border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700; color: var(--ink-500);
}
.pill-toggle a.active { background: var(--brand-500); color: white; }

/* Generic helpers */
.sw { display: flex; gap: 10px; align-items: center; }
.req { color: #b91c1c; }
.pill { padding: 2px 10px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; background: var(--ink-50); color: var(--ink-700); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--r-pill); border: 0; background: var(--brand-500); color: white; font-weight: 700; font-size: 13px; cursor: pointer; }
.btn-secondary { background: var(--ink-100); color: var(--ink-900); }
.btn-danger { background: #ef4444; color: white; }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.flex { display: flex; }
.ic-btn {
    width: 32px; height: 32px; border-radius: var(--r-pill);
    background: var(--ink-50); color: var(--ink-700);
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer;
}
.ic-btn:hover { background: var(--brand-50); color: var(--brand-600); }

/* KPI tiles (partner home) */
.pa-kpi {
    background: var(--paper); border-radius: var(--r-md);
    padding: 14px; box-shadow: var(--shadow-sm);
    text-align: center;
}
.kpi-num { font-size: 20px; font-weight: 800; color: var(--brand-700); letter-spacing: -.02em; display: block; }
.kpi-lbl { font-size: 10.5px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

/* Team list cards */
.tm-list { display: flex; flex-direction: column; gap: 10px; }
.tm-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; background: var(--paper);
    border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.tm-av {
    width: 44px; height: 44px; border-radius: var(--r-pill);
    background: var(--brand-100); color: var(--brand-700);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 16px; flex-shrink: 0;
}
.tm-info { flex: 1; min-width: 0; }
.tm-info strong { display: block; font-size: 14px; font-weight: 700; }
.tm-info span { font-size: 12px; color: var(--ink-500); }
.tm-act { display: flex; gap: 6px; }

/* Booking status column */
.bk-status-col { display: flex; flex-direction: column; gap: 6px; }

/* Visit detail */
.att-body { background: var(--paper); border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-sm); }
.att-actions { display: flex; gap: 8px; margin-top: 12px; }
.bk-map-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: var(--r-pill);
    background: var(--brand-50); color: var(--brand-700);
    font-size: 12px; font-weight: 700;
}
.select-wrap { position: relative; }

/* Profile dots */
.ph-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink-300); display: inline-block;
}
.v-ic {
    width: 38px; height: 38px; border-radius: var(--r-pill);
    background: var(--ink-50); color: var(--ink-700);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}

/* Visit pill status colors (duplicate for partner) */
.visit-pill.visit-pill-accepted { background: var(--mint-50); color: #047857; }
.visit-pill.visit-pill-pending { background: #fef3c7; color: #b45309; }
.visit-pill.visit-pill-rejected { background: #fee2e2; color: #b91c1c; }
.visit-pill.visit-pill-arrived { background: var(--sky-50); color: #075985; }
.visit-pill.visit-pill-in_progress { background: var(--lav-50); color: #5b21b6; }
.visit-pill.visit-pill-completed { background: var(--mint-500); color: white; }

/* ============================================================
 *  Location card v2 � soft pastel + rounded
 *  Used by <x-location-card> on customerapp home
 * ============================================================ */
.location-card-v2 {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    background: var(--paper);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--ink-100);
    transition: border var(--dur), box-shadow var(--dur);
}
.location-card-v2[data-bfk-loc-status="captured"] {
    background: linear-gradient(135deg, var(--mint-50), white);
    border-color: var(--mint-500);
}
.location-card-v2 .lc2-ic {
    width: 42px; height: 42px;
    border-radius: var(--r-pill);
    background: var(--brand-50);
    color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .08);
}
.location-card-v2[data-bfk-loc-status="captured"] .lc2-ic {
    background: var(--mint-500);
    color: white;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .15);
}
.location-card-v2 .lc2-body { flex: 1; min-width: 0; }
.location-card-v2 .lc2-display { display: block; }
.location-card-v2 .lc2-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}
.location-card-v2[data-bfk-loc-status="captured"] .lc2-eyebrow {
    color: #047857;
}
.location-card-v2 .lc2-text {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink-900);
    letter-spacing: -.01em;
    margin-bottom: 2px;
    word-break: break-word;
}
.location-card-v2 .lc2-sub {
    display: block;
    font-size: 12px;
    color: var(--ink-500);
}
.location-card-v2 .lc2-editor { display: none; padding-top: 10px; }
.location-card-v2.open .lc2-editor { display: block; }
.location-card-v2.open .lc2-display { display: none; }
.location-card-v2 .lc2-edit-row { margin-bottom: 10px; }
.location-card-v2 .lc2-edit-lbl {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-700);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 5px;
}
.location-card-v2 .lc2-edit-input {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    background: var(--paper);
    font: inherit;
    color: var(--ink-900);
    transition: border var(--dur), box-shadow var(--dur);
}
.location-card-v2 .lc2-edit-input:focus {
    outline: 0;
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px var(--brand-50);
}
.location-card-v2 .lc2-edit-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-bottom: 10px;
}
@media (max-width: 420px) {
    .location-card-v2 .lc2-edit-grid { grid-template-columns: 1fr; }
}
.location-card-v2 .lc2-edit-actions {
    display: flex; gap: 8px; margin-top: 10px;
    flex-wrap: wrap;
}
.location-card-v2 .lc2-actions {
    display: flex; gap: 8px; flex-shrink: 0;
    align-self: flex-start;
}
@media (max-width: 380px) {
    .location-card-v2 .lc2-actions {
        width: 100%;
        margin-top: 4px;
    }
}
.location-card-v2 .lc2-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    border: 0; outline: 0; cursor: pointer;
    border-radius: var(--r-pill);
    font: inherit;
    font-weight: 700; font-size: 12.5px;
    transition: transform var(--dur) var(--ease), background var(--dur);
}
.location-card-v2 .lc2-btn:active { transform: scale(.96); }
.location-card-v2 .lc2-btn-primary {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
    color: white;
    box-shadow: var(--shadow-glow);
}
.location-card-v2 .lc2-btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
}
.location-card-v2 .lc2-btn-secondary {
    background: var(--ink-50);
    color: var(--ink-700);
}
.location-card-v2 .lc2-btn-secondary:hover { background: var(--ink-100); }
.location-card-v2 .lc2-btn-ghost {
    background: transparent;
    color: var(--ink-700);
}
.location-card-v2 .lc2-btn-compact { padding: 8px 12px; font-size: 12px; }

.location-card-v2[data-bfk-loc-status="captured"] .lc2-btn-primary {
    background: linear-gradient(135deg, var(--mint-500), #14b88a);
    box-shadow: 0 6px 20px rgba(16, 185, 129, .3);
}

/* Fix location card overlap on narrow screens */
@media (max-width: 480px) {
    .location-card-v2 {
        flex-wrap: wrap;
    }
    .location-card-v2 .lc2-ic {
        width: 38px; height: 38px;
    }
    .location-card-v2 .lc2-body {
        flex: 1 1 60%;
        min-width: 0;
    }
    .location-card-v2 .lc2-actions {
        width: 100%;
        flex-shrink: 0;
        align-self: stretch;
        justify-content: flex-end;
        margin-top: 4px;
    }
}

/* ============================================================
   v7 STUNNING UPGRADES � premium gradients, glass, depth, motion
   ============================================================ */

:root {
    --grad: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-400) 50%, var(--brand-300) 100%);
    --grad-soft: linear-gradient(135deg, #fff4ed 0%, #ffe7d2 100%);
    --grad-dark: linear-gradient(135deg, #1a1d29 0%, #2a2d3a 100%);
    --grad-blue: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
    --grad-purple: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
}

/* Body � subtle premium backdrop */
body.app-mobile-body {
    background:
        radial-gradient(800px 500px at 100% -100px, rgba(79, 70, 229, 0.10), transparent 60%),
        radial-gradient(600px 400px at -50% 30%, rgba(99, 102, 241, 0.10), transparent 60%),
        var(--paper) !important;
}

/* Hero � premium gradient + glass card */
.app-hero {
    background:
        radial-gradient(700px 400px at 100% 0%, rgba(79, 70, 229, 0.18), transparent 60%),
        radial-gradient(500px 300px at 0% 100%, rgba(99, 102, 241, 0.12), transparent 60%),
        linear-gradient(180deg, #fff8f3 0%, #fff 70%) !important;
    padding: 22px 18px 26px;
    border-radius: 0 0 28px 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.04);
}
.app-hero::after {
    content: '';
    position: absolute;
    bottom: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(99, 102, 241, 0.05));
    z-index: 0;
}
.app-hero > * { position: relative; z-index: 1; }

.hello-name {
    background: linear-gradient(135deg, #0c0d10 0%, #2a2d3a 60%, #1a1d29 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-size: 26px; font-weight: 800; letter-spacing: -.02em;
    margin: 0;
}
.hello-wave { display: inline-block; animation: waveHand 1.8s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes waveHand {
    0%, 100% { transform: rotate(0deg); }
    20%, 60% { transform: rotate(-12deg); }
    40%, 80% { transform: rotate(14deg); }
}
.hello-av {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
    border: 2px solid #fff;
}
.hello-login {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
    transition: transform var(--dur) var(--ease);
}
.hello-login:hover { color: #fff; transform: translateY(-1px); }
.hello-eyebrow {
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Search bar � premium glass */
.quick-search {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 24px rgba(20, 21, 26, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-radius: var(--r-pill);
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px;
}
.quick-search input {
    border: 0; outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--ink-900);
    flex: 1;
    font-weight: 500;
}
.quick-search .qs-ic {
    color: var(--brand-500);
    font-size: 16px;
}

/* Section heading � premium */
.section-h {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
    padding: 0 2px;
}
.section-h h3 {
    font-size: 17px; font-weight: 800; margin: 0;
    letter-spacing: -.01em;
    color: var(--ink-900);
}
.section-h .link-sm {
    color: var(--brand-600);
    font-weight: 700;
    font-size: 13px;
    transition: color var(--dur) var(--ease);
}
.section-h .link-sm:hover { color: var(--brand-700); }

/* Premium category tile � circular image + emoji badge */
.cat-app-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 10px 16px;
    border-radius: var(--r-xl);
    background: #fff;
    box-shadow: 0 4px 16px rgba(20, 21, 26, 0.05);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--ink-100);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-app-tile::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--brand-50) 0%, transparent 65%);
    opacity: .65;
    z-index: 0;
    transition: opacity var(--dur) var(--ease);
}
.cat-app-tile:active { transform: scale(.97); }
.cat-app-tile:hover, .cat-app-tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(79, 70, 229, 0.18);
    border-color: var(--brand-200);
}
.cat-app-tile:hover::before, .cat-app-tile:focus-visible::before { opacity: 1; }

.cat-app-bg {
    position: relative; z-index: 1;
    width: 76px; height: 76px;
    border-radius: 50%;
    background-color: var(--brand-100);
    background-size: cover;
    background-position: center;
    box-shadow:
        0 8px 20px -6px rgba(79, 70, 229, 0.4),
        inset 0 0 0 4px #fff,
        0 0 0 1px rgba(79, 70, 229, 0.1);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur) var(--ease);
}
.cat-app-tile:hover .cat-app-bg { transform: translateY(-2px) scale(1.05); }

.cat-app-emoji {
    position: absolute;
    bottom: -3px; right: -3px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(20, 21, 26, 0.06);
}

.cat-app-overlay {
    position: relative; z-index: 1;
    margin-top: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cat-app-overlay .nm {
    font-size: 14.5px; font-weight: 800; color: var(--ink-900); letter-spacing: -.005em;
    line-height: 1.2;
}
.cat-app-overlay .ct {
    font-size: 10.5px; color: var(--brand-700); font-weight: 700;
    margin-top: 4px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--brand-50);
    letter-spacing: 0.02em;
}

/* Premium app section spacing */
.app-section { margin-top: 22px; }
.app-section:first-of-type { margin-top: 18px; }

/* Premium founder card */
.founder-card {
    background: linear-gradient(135deg, #fff8f3 0%, #fff 50%, #fff8f3 100%);
    border: 1px solid rgba(79, 70, 229, 0.18);
    border-radius: var(--r-xl);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08);
    position: relative;
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.founder-card::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.18), transparent 70%);
}
.founder-card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(79, 70, 229, 0.14); }
.founder-card .av {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
    border: 2px solid #fff;
    flex-shrink: 0;
    background-size: cover; background-position: center;
    overflow: hidden;
}
.founder-card .body { flex: 1; min-width: 0; }
.founder-card .nm { font-weight: 800; font-size: 15px; color: var(--ink-900); letter-spacing: -.01em; }
.founder-card .ti { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; font-weight: 500; }
.founder-card .badge {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Premium empty state */
.empty-app {
    background: linear-gradient(135deg, #fff8f3 0%, #fff 100%);
    border-radius: var(--r-xl);
    padding: 32px 22px;
    text-align: center;
    border: 1px dashed rgba(79, 70, 229, 0.25);
}
.empty-app .ea-ic {
    font-size: 48px;
    margin-bottom: 10px;
    display: inline-block;
    animation: floatGentle 3s ease-in-out infinite;
}
@keyframes floatGentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Stagger reveal animation for app */
@keyframes revealUpSm { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.reveal-sm { animation: revealUpSm .6s var(--ease) both; }
.reveal-d1 { animation-delay: .08s; }
.reveal-d2 { animation-delay: .16s; }
.reveal-d3 { animation-delay: .24s; }

/* Sticky bottom CTA glow (for booking flow) */
.btn-app-primary {
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-400) 50%, var(--brand-300) 100%) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 800 !important;
}
.btn-app-primary:hover {
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px);
}

/* Bottom nav � premium pill */
.bottom-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid rgba(20, 21, 26, 0.06) !important;
    box-shadow: 0 -8px 24px rgba(20, 21, 26, 0.04) !important;
}
.bottom-nav a.active {
    color: var(--brand-600) !important;
}
.bottom-nav a.active::before {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600)) !important;
}

/* ============================================================
   PROFESSIONAL POLISH � restrained Linear/Stripe-style
   ============================================================ */

/* Body � clean off-white */
body.app-mobile-body {
    background: var(--paper) !important;
    background-image: none !important;
}

/* App hero � clean white with subtle gradient */
.app-hero {
    background: #fff !important;
    background-image: none !important;
    padding: 24px 18px 22px !important;
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 1px 2px rgba(20, 21, 26, 0.04) !important;
    position: relative;
    overflow: hidden;
}
.app-hero::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(67, 56, 202, 0.06), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.app-hero > * { position: relative; z-index: 1; }

/* Hello name � clean */
.hello-name {
    font-family: var(--bfk-font);
    background: none !important;
    -webkit-background-clip: initial !important; background-clip: initial !important;
    color: var(--ink-900) !important;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 4px 0 0;
}
.hello-wave { display: inline-block; }
.hello-sub {
    font-size: 14px;
    color: var(--ink-500);
    margin: 4px 0 0;
}
.hello-eyebrow {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-500);
    text-transform: none;
    letter-spacing: 0;
}
.hello-av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink-100) !important;
    background-image: none !important;
    color: var(--ink-700) !important;
    display: grid; place-items: center;
    font-weight: 600;
    font-size: 16px;
    box-shadow: none !important;
    border: 1px solid var(--ink-100);
}
.hello-login {
    background: var(--ink-900) !important;
    background-image: none !important;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(20, 21, 26, 0.08) !important;
    transition: transform .2s var(--ease);
}
.hello-login:hover { background: #000 !important; transform: none !important; }

/* Quick search � clean */
.quick-search {
    background: var(--ink-100) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: var(--r-pill) !important;
    box-shadow: none !important;
    padding: 12px 16px;
    margin-top: 18px;
}
.quick-search:focus-within {
    background: #fff !important;
    border-color: var(--ink-900) !important;
}
.quick-search .qs-ic {
    color: var(--ink-500) !important;
    font-size: 16px;
}
.quick-search input {
    color: var(--ink-900);
    font-weight: 500;
}

/* Section heading � clean */
.section-h { padding: 0 2px; margin-bottom: 14px; }
.section-h h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}
.section-h .link-sm {
    color: var(--ink-700);
    font-weight: 500;
    font-size: 13px;
}

/* Category tile � clean, premium */
.cat-app-tile {
    background: #fff !important;
    border: 1px solid var(--ink-100) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: none !important;
    padding: 18px 12px 16px !important;
    transition: transform .25s var(--ease), border-color .25s var(--ease) !important;
    position: relative;
    overflow: hidden;
}
.cat-app-tile::before { display: none !important; }
.cat-app-tile:active { transform: scale(.98); }
.cat-app-tile:hover, .cat-app-tile:focus-visible {
    transform: translateY(-2px) !important;
    border-color: var(--ink-200) !important;
    box-shadow: 0 1px 2px rgba(20, 21, 26, 0.04), 0 12px 28px rgba(20, 21, 26, 0.08) !important;
}

.cat-app-bg {
    width: 64px !important;
    height: 64px !important;
    background-color: var(--ink-100) !important;
    box-shadow: none !important;
    border: 1px solid var(--ink-100);
}
.cat-app-tile:hover .cat-app-bg { transform: none !important; }

.cat-app-emoji { display: none !important; }

.cat-app-overlay { margin-top: 12px; }
.cat-app-overlay .nm {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}
.cat-app-overlay .ct {
    font-size: 11px;
    color: var(--ink-500);
    font-weight: 500;
    background: none !important;
    background-image: none !important;
    margin-top: 2px;
    padding: 0;
}

/* App section � clean spacing */
.app-section { margin-top: 28px; }

/* Founder card � clean */
.founder-card {
    background: #fff !important;
    border: 1px solid var(--ink-100) !important;
    border-radius: var(--r-lg) !important;
    padding: 16px !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--ease), border-color .25s var(--ease) !important;
}
.founder-card::before { display: none !important; }
.founder-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--ink-200) !important;
    box-shadow: 0 1px 2px rgba(20, 21, 26, 0.04), 0 12px 28px rgba(20, 21, 26, 0.08) !important;
}
.founder-card .av {
    width: 44px;
    height: 44px;
    /* background + background-image set inline by the view when a
       founder photo is available � only use the grey fallback when
       the inline style is absent. */
    background-color: var(--ink-100);
    color: var(--ink-700);
    border: 1px solid var(--ink-100);
    background-size: cover;
    background-position: center;
    font-size: 16px;
}
.founder-card .nm {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink-900);
    letter-spacing: -0.01em;
}
.founder-card .ti {
    font-size: 12.5px;
    color: var(--ink-500);
    margin-top: 2px;
}
.founder-card .badge {
    background: var(--ink-900) !important;
    background-image: none !important;
    color: #fff !important;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-top: 6px;
}

/* Trust strip � refined dark */
.app-section .trust-strip-app {
    background: var(--ink-900) !important;
    background-image: none !important;
    border-radius: var(--r-lg) !important;
    padding: 18px 14px !important;
    color: #fff;
    box-shadow: 0 1px 2px rgba(20, 21, 26, 0.04), 0 12px 28px rgba(20, 21, 26, 0.12);
    position: relative;
    overflow: hidden;
}
.app-section .trust-strip-app::before {
    display: none !important;
}
.app-section .trust-strip-app > div {
    background: transparent !important;
    background-image: none !important;
}

/* Empty state � clean */
.empty-app {
    background: var(--ink-100) !important;
    border: 1px dashed var(--ink-200) !important;
    border-radius: var(--r-lg);
    padding: 32px 22px;
    text-align: center;
}
.empty-app .ea-ic {
    font-size: 36px;
    margin-bottom: 10px;
    animation: none !important;
}

/* Buttons � clean primary */
.btn-app-primary {
    background: var(--brand-500) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(20, 21, 26, 0.08) !important;
    border: 0 !important;
    font-weight: 600 !important;
}
.btn-app-primary:hover {
    background: var(--brand-600) !important;
    box-shadow: 0 1px 2px rgba(20, 21, 26, 0.08) !important;
    transform: none !important;
}

/* Bottom nav � clean */
.bottom-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    border-top: 1px solid rgba(20, 21, 26, 0.06) !important;
    box-shadow: 0 -1px 0 rgba(20, 21, 26, 0.04) !important;
}
.bottom-nav a.active {
    color: var(--ink-900) !important;
}
.bottom-nav a.active::before {
    background: var(--ink-900) !important;
    background-image: none !important;
}

/* Reveal animation � gentle */
@keyframes revealUpSm { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reveal-sm { animation: revealUpSm .55s var(--ease) both; }