/* ============================================================
   MegaPro Wash Hub — brand stylesheet
   Palette from logo: deep navy #11384B · orange #F97432 · peach #FFA97A
   ============================================================ */

:root {
    --navy: #11384B;
    --navy-dark: #0B2735;
    --navy-light: #1C4E68;
    --orange: #F97432;
    --orange-dark: #E05E1D;
    --peach: #FFB48A;
    --peach-light: #FFE3D1;
    --bg: #F4F8FA;
    --card: #FFFFFF;
    --text: #1E2A32;
    --muted: #64748B;
    --line: #E2EAF0;
    --ok: #16A34A;
    --warn: #D97706;
    --bad: #DC2626;
    --radius: 14px;
    --shadow: 0 4px 24px rgba(17, 56, 75, .08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-size: 16px;
}
img { max-width: 100%; }
a { color: var(--navy-light); text-decoration: none; }
a:hover { color: var(--orange); }
h1, h2, h3, h4 { line-height: 1.25; color: var(--navy); }
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.accent { color: var(--orange); }
.right { text-align: right; }
.lead { font-size: 1.12rem; color: var(--muted); }

/* ---- Buttons ---- */
.btn {
    display: inline-block; border: 2px solid transparent; border-radius: 999px;
    padding: .55rem 1.4rem; font-weight: 600; font-size: .95rem; cursor: pointer;
    transition: all .18s ease; text-align: center; line-height: 1.4;
    white-space: nowrap;   /* keep labels like "⬇ CSV" on one line, not a circle */
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(249, 116, 50, .35); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.hero .btn-outline, .section-navy .btn-outline { border-color: rgba(255,255,255,.7); color: #fff; }
.hero .btn-outline:hover, .section-navy .btn-outline:hover { background: #fff; color: var(--navy); }
/* Destructive actions (permanent delete) — outlined until hover, so it reads as
   dangerous without competing with the primary action next to it. */
.btn-danger { border-color: var(--bad); color: var(--bad); background: transparent; }
.btn-danger:hover { background: var(--bad); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--peach-light); color: var(--navy-dark); }
.btn-lg { padding: .8rem 2rem; font-size: 1.05rem; }
.btn-sm { padding: .3rem .9rem; font-size: .85rem; }
.btn-block { display: block; width: 100%; }

/* ---- Topbar & navbar ---- */
.topbar { background: var(--navy-dark); color: var(--peach); font-size: .82rem; padding: .4rem 0; }
.topbar-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar-right { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.topbar a { color: inherit; text-decoration: none; }
.topbar-phone:hover { text-decoration: underline; }

.navbar { background: var(--navy); position: sticky; top: 0; z-index: 60; box-shadow: 0 2px 14px rgba(0,0,0,.18); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; padding-top: .6rem; padding-bottom: .6rem; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { width: 46px; height: 46px; border-radius: 12px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { color: #fff; font-size: 1.05rem; letter-spacing: .04em; }
.brand-text small { color: var(--peach); font-size: .72rem; letter-spacing: .02em; }
.nav-links { display: flex; align-items: center; gap: 1.2rem; }
.nav-links a { color: #D9E6EE; font-weight: 500; font-size: .95rem; }
.nav-links a:hover, .nav-links a.active { color: var(--orange); }
.nav-links a.nav-cta { color: #fff; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer;
    padding: .5rem .7rem; line-height: 1; border-radius: 8px;
    min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(255,255,255,.1); }

/* ---- Hero ---- */
.hero {
    background:
        radial-gradient(1000px 500px at 85% -10%, rgba(249,116,50,.25), transparent 60%),
        radial-gradient(700px 400px at -10% 110%, rgba(255,180,138,.18), transparent 60%),
        linear-gradient(150deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%);
    color: #E8F1F6; padding: 4.5rem 0 4rem;
}
.hero-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: center; }
.hero-badge {
    display: inline-block; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: var(--peach); border-radius: 999px; padding: .3rem 1rem; font-size: .85rem; margin-bottom: 1.2rem;
}
.hero h1 { color: #fff; font-size: 2.7rem; margin-bottom: 1rem; }
.hero .lead { color: #C6D8E2; margin-bottom: 1.6rem; }
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.hero-stats { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 1.5rem; color: var(--orange); }
.hero-stats span { font-size: .82rem; color: #A9C2CF; }

.hero-card {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px; padding: 2rem; text-align: center; backdrop-filter: blur(6px);
}
.hero-logo { width: 110px; height: 110px; border-radius: 26px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hero-card h3 { color: #fff; margin-top: 1rem; letter-spacing: .06em; }
.hero-card p { color: var(--peach); font-size: .9rem; margin-bottom: 1rem; }
.hero-ticks { list-style: none; text-align: left; color: #D5E4EC; font-size: .92rem; }
.hero-ticks li { padding: .3rem 0; border-bottom: 1px dashed rgba(255,255,255,.12); }
.hero-ticks li:last-child { border-bottom: 0; }

/* ---- Sections ---- */
.section { padding: 4rem 0; }
.section-alt { background: #fff; }
.section-navy { background: linear-gradient(150deg, var(--navy-dark), var(--navy)); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.section-head h2 { font-size: 2rem; margin-bottom: .5rem; }

.page-hero {
    background: linear-gradient(150deg, var(--navy-dark), var(--navy) 70%, var(--navy-light));
    color: #fff; padding: 3rem 0; text-align: center;
}
.page-hero h1 { color: #fff; font-size: 2.3rem; margin-bottom: .5rem; }
.page-hero .lead { color: #C6D8E2; max-width: 760px; margin: 0 auto; }

/* ---- Steps ---- */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.step { background: #fff; border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); border-top: 4px solid var(--orange); }
.step-no {
    display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
    background: var(--peach-light); color: var(--orange-dark); font-weight: 700; border-radius: 50%; margin-bottom: .8rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.step p { font-size: .9rem; color: var(--muted); }

/* ---- Cards ---- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card { background: var(--card); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.chip {
    display: inline-block; align-self: flex-start; background: #EAF2F7; color: var(--navy-light);
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    border-radius: 999px; padding: .2rem .7rem; margin-bottom: .7rem;
}
.chip-accent { background: var(--peach-light); color: var(--orange-dark); }
.service-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.service-card p { font-size: .9rem; flex: 1; }
.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.price { color: var(--orange-dark); font-weight: 700; }

/* ---- Signature section ---- */
.signature-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
.ticks { list-style: none; margin: 1.2rem 0 1.6rem; }
.ticks li { padding: .35rem 0 .35rem 1.6rem; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.signature-panel { background: var(--navy); color: #D5E4EC; border-radius: 18px; padding: 2rem; }
.signature-panel h4 { color: #fff; margin-bottom: .6rem; }
.signature-panel em { color: var(--peach); }
.mini-stats { display: grid; gap: 1rem; margin-top: 1.4rem; }
.mini-stats div { display: flex; align-items: baseline; gap: .8rem; border-left: 3px solid var(--orange); padding-left: .9rem; }
.mini-stats strong { font-size: 1.35rem; color: var(--orange); }
.mini-stats span { font-size: .85rem; }

/* ---- Plans strip (home) ---- */
.plans-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.plan-pill {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 16px;
    padding: 1.3rem; display: flex; flex-direction: column; gap: .15rem; color: #fff; transition: all .18s;
}
.plan-pill:hover { transform: translateY(-3px); border-color: var(--orange); color: #fff; }
.plan-pill span { color: #A9C2CF; font-size: .85rem; }
.plan-pill em { color: var(--orange); font-style: normal; font-weight: 700; margin-top: .4rem; }
.plan-pill.highlight { background: var(--orange); border-color: var(--orange); }
.plan-pill.highlight span, .plan-pill.highlight em { color: #fff; }

/* ---- Trust & CTA ---- */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.trust h3 { font-size: 1rem; margin-bottom: .4rem; }
.trust p { font-size: .88rem; }
.cta-band { background: linear-gradient(120deg, var(--orange-dark), var(--orange)); color: #fff; padding: 2.6rem 0; }
.cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-inner h2 { color: #fff; margin-bottom: .3rem; }
.cta-inner p { opacity: .92; }

/* ---- FAQ ---- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 1.2rem; }
.faq-item summary {
    cursor: pointer; list-style: none; font-weight: 600; color: var(--navy);
    padding: 1.05rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--orange); line-height: 1; }
.faq-item[open] summary::after { content: '−'; }
.faq-item > p { padding: 0 0 1.1rem; margin: 0; }

/* ---- Price tables ---- */
.anchor-nav { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 2.5rem; justify-content: center; }
.anchor-nav a {
    background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .4rem 1.1rem;
    font-size: .88rem; font-weight: 600; color: var(--navy);
}
.anchor-nav a:hover { border-color: var(--orange); color: var(--orange); }
.price-block { margin-bottom: 3rem; scroll-margin-top: 90px; }
.price-block h2 { margin-bottom: 1rem; font-size: 1.4rem; }
.price-table-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.price-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.price-table th, .price-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .93rem; }
.price-table th { background: var(--navy); color: #fff; font-weight: 600; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table tr:hover td { background: #F8FBFD; }

/* ---- Discount badges & old-price strikethrough ---- */
.discount-badge {
    display: inline-block; background: var(--orange); color: #fff; font-size: .72rem; font-weight: 700;
    border-radius: 999px; padding: .1rem .65rem; margin-left: .4rem; vertical-align: middle;
    text-transform: uppercase; letter-spacing: .03em;
}
.old-price { text-decoration: line-through; color: var(--muted); margin-right: .3rem; font-size: .85rem; }
.svc-option .discount-badge { font-size: .65rem; padding: .05rem .5rem; }

.note-box {
    background: var(--peach-light); border-left: 4px solid var(--orange); border-radius: 8px;
    padding: 1rem 1.2rem; font-size: .92rem; color: #7A4A2B;
}
.note-box a { color: var(--orange-dark); font-weight: 600; }
/* Inline code — must wrap long URLs/paths so they never overflow on mobile */
code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .86em; background: rgba(0, 0, 0, .06); padding: .1em .38em; border-radius: 5px;
    overflow-wrap: anywhere; word-break: break-word;
}
.note-box code { background: rgba(122, 74, 43, .1); color: inherit; }

/* ---- Forms & panels ---- */
.panel { background: #fff; border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.form-grid .span-2 { grid-column: span 2; }
.form-stack { display: flex; flex-direction: column; gap: 1rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; color: var(--navy); }
input, select, textarea {
    font: inherit; padding: .6rem .8rem; border: 1.5px solid var(--line); border-radius: 9px;
    background: #FBFDFE; transition: border .15s; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); background: #fff; }

/* ---- Password show/hide toggle ---- */
.pw-field { display: flex; align-items: stretch; gap: 0; }
.pw-field input { flex: 1; border-radius: 9px 0 0 9px; border-right: 0; }
.pw-field input:focus { border-color: var(--orange); border-right: 0; }
.pw-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; flex-shrink: 0; background: #FBFDFE; border: 1.5px solid var(--line);
    border-left: 0; border-radius: 0 9px 9px 0; cursor: pointer;
    font-size: 1.15rem; line-height: 1; padding: 0; color: var(--muted); transition: all .15s;
}
.pw-field:focus-within .pw-toggle { border-color: var(--orange); background: #fff; }
.pw-toggle:hover { background: var(--peach-light); color: var(--navy); }
/* Clear keyboard-focus ring (only for keyboard users, not mouse clicks). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid rgba(249, 116, 50, .5); outline-offset: 2px; border-radius: 4px;
}
.input-sm { max-width: 200px; padding: .35rem .6rem; }
.input-sm-select { width: auto; min-width: 48px; }

/* Service-description text — keep readable even on narrow admin tables */
.svc-table td:first-child { min-width: 220px; }
.svc-table td:first-child .muted { font-size: .88rem; line-height: 1.5; display: block; max-width: 320px; }

/* Quick-edit inputs must stay readable: without a floor the browser squeezes
   them to a couple of characters (₦1500 renders as "15") before the panel's
   horizontal scroll kicks in. Direct children only — inputs inside a
   .field-group are deliberately flexible and keep their own sizing. */
.svc-table td > .input-sm { min-width: 80px; }
.svc-table td > input[type="number"].input-sm { min-width: 88px; }
.svc-table td > input[type="text"].input-sm { min-width: 84px; }
/* Action columns: never wrap a button onto two lines. */
.svc-table td:last-child, .svc-table td:nth-last-child(2) { white-space: nowrap; }

/* Laptop widths: the fixed sidebar leaves ~800px of content, so give the
   description column less room and hand it to the controls instead. */
@media (min-width: 1121px) and (max-width: 1400px) {
    .svc-table td:first-child { min-width: 210px; }
    .svc-table td:first-child .muted { font-size: .82rem; max-width: 260px; }
    .admin-table th, .admin-table td { padding: .6rem .5rem; }
}

/* ---- Field group (inline row of small inputs that wrap on small screens) ---- */
.field-group {
    display: flex;
    gap: .35rem;
    align-items: center;
    flex-wrap: nowrap;
}
.field-group > .input-sm {
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
}
.field-group > .input-sm:first-child {
    min-width: 48px;
}
/* Paired inputs (discount %+label, commission type+value) stack rather than
   shrink to a character or two — the sidebar makes admin columns tight well
   past the usual tablet breakpoint. */
.svc-table .field-group > .input-sm { min-width: 76px; }
@media (max-width: 1400px) {
    .admin-table .field-group {
        flex-wrap: wrap;
    }
    .admin-table .field-group > .input-sm {
        flex: 1 1 100%;
    }
    .admin-table .field-group > .input-sm-select {
        flex: 0 0 auto;
    }
}

/* ---- Booking layout ---- */
.booking-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.6rem; align-items: start; }
.booking-main { display: flex; flex-direction: column; gap: 1.6rem; }
.booking-main h2 { font-size: 1.15rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.step-dot {
    display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
    background: var(--orange); color: #fff; border-radius: 50%; font-size: .95rem;
}
.svc-cat { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.1rem 0 .5rem; }
.svc-list { display: flex; flex-direction: column; gap: .5rem; }
.svc-option {
    display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .9rem; border: 1.5px solid var(--line); border-radius: 10px;
    padding: .7rem .9rem; cursor: pointer; font-weight: 500; transition: all .15s;
}
.svc-option:hover { border-color: var(--peach); }
.svc-option:has(input:checked) { border-color: var(--orange); background: #FFF7F2; }
.svc-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--orange); flex-shrink: 0; }
.svc-info { flex: 1; display: flex; flex-direction: column; }
.svc-info small { font-weight: 400; }
.svc-right { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.qty-wrap { font-size: .8rem; color: var(--muted); display: none; align-items: center; gap: .3rem; }
.svc-option:has(input:checked) .qty-wrap { display: inline-flex; }
.qty-input { width: 58px; padding: .2rem .4rem; font-size: .85rem; }

/* Range-price slider on the admin booking forms */
.price-range {
    display: none; flex-basis: 100%; align-items: center; gap: .6rem;
    margin-top: .2rem; padding-top: .55rem; border-top: 1px dashed var(--line);
}
.svc-option:has(input:checked) .price-range { display: flex; }
.price-range .pr-label { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.price-range input[type="range"] { flex: 1; min-width: 110px; accent-color: var(--orange); cursor: pointer; }
.price-range .price-number { width: 96px; padding: .25rem .45rem; font-size: .85rem; text-align: right; }
.price-range .pr-range { white-space: nowrap; }
.price-current { font-weight: 700; color: var(--navy); }

/* Range-price slider on the booking-detail line editor */
.line-range { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.line-range input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--orange); cursor: pointer; }

.booking-side { position: sticky; top: 90px; }
.summary-panel h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.summary-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.summary-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; border-bottom: 1px dashed var(--line); padding-bottom: .4rem; }
.summary-list li.empty { border: 0; }
.summary-total {
    display: flex; justify-content: space-between; align-items: center; background: var(--navy);
    color: #fff; border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem;
}
.summary-total strong { font-size: 1.25rem; color: var(--peach); }
.pay-title { font-size: .95rem; margin: 1rem 0 .5rem; }
.pay-option {
    display: flex; flex-direction: row; gap: .8rem; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 10px;
    padding: .7rem .9rem; cursor: pointer; margin-bottom: .6rem; font-weight: 500;
}
.pay-option:has(input:checked) { border-color: var(--orange); background: #FFF7F2; }
.pay-option input { width: 17px; height: 17px; accent-color: var(--orange); margin-top: .25rem; flex-shrink: 0; }
.pay-option span { display: flex; flex-direction: column; }
.pay-option small { font-weight: 400; }

/* ---- Alerts & badges ---- */
.alert { border-radius: 10px; padding: .9rem 1.2rem; margin: 1rem 0; font-size: .95rem; }
.alert ul { margin-left: 1.2rem; }
.alert-ok { background: #EAF9F0; color: #166534; border: 1px solid #BBE8CC; }
.alert-warn { background: #FEF6E7; color: #92400E; border: 1px solid #F5DFB8; }
.alert-bad { background: #FDECEC; color: #991B1B; border: 1px solid #F5C6C6; }
.badge {
    display: inline-block; border-radius: 999px; padding: .15rem .7rem; font-size: .76rem; font-weight: 700;
}
.badge.ok { background: #EAF9F0; color: var(--ok); }
.badge.warn { background: #FEF6E7; color: var(--warn); }
.badge.bad { background: #FDECEC; color: var(--bad); }
.badge.muted { background: #EEF2F5; color: var(--muted); }

/* ---- Plans page ---- */
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; align-items: stretch; }
.plan-card {
    background: #fff; border-radius: 18px; padding: 1.8rem; box-shadow: var(--shadow);
    display: flex; flex-direction: column; position: relative; border: 2px solid transparent;
}
.plan-card.highlight { border-color: var(--orange); transform: scale(1.02); }
.plan-flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--orange); color: #fff; font-size: .74rem; font-weight: 700;
    border-radius: 999px; padding: .2rem .9rem; white-space: nowrap;
}
.plan-card h3 { font-size: 1.2rem; }
.plan-vehicles { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.plan-price { margin-bottom: 1.2rem; }
.plan-price strong { font-size: 1.7rem; color: var(--navy); display: block; }
.plan-price span { color: var(--muted); font-size: .85rem; }
.plan-features { list-style: none; flex: 1; margin-bottom: 1.4rem; display: flex; flex-direction: column; gap: .4rem; }
.plan-features li { font-size: .88rem; }

/* ---- Receipt ---- */
.receipt-wrap { max-width: 860px; }
.receipt-head { display: flex; gap: 1.2rem; align-items: center; border-bottom: 2px solid var(--navy); padding-bottom: 1.2rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.receipt-head img { width: 64px; height: 64px; border-radius: 14px; }
.receipt-head h2 { font-size: 1.3rem; }
.receipt-ref { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.receipt-ref strong { font-size: 1.15rem; color: var(--orange-dark); }
.receipt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.receipt-meta > div { display: flex; flex-direction: column; gap: .15rem; }
.receipt-table { width: 100%; border-collapse: collapse; margin-top: 1.4rem; }
.receipt-table th, .receipt-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .93rem; text-align: left; }
.receipt-table th { background: #F2F7FA; color: var(--navy); }
.receipt-table th.right, .receipt-table td.right { text-align: right; }
.receipt-foot { margin-top: 1.6rem; text-align: center; }
.receipt-actions { display: flex; gap: .8rem; justify-content: center; margin-top: .8rem; }

/* ---- Contact & about ---- */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6rem; align-items: start; }
.contact-info h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.contact-info h3:first-child { margin-top: 0; }
.about-banner { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 2.5rem; background: #fff; }
.about-banner img { display: block; width: 100%; }
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; }
.about-grid p { margin-bottom: 1rem; }

/* ---- Footer ---- */
.footer { background: var(--navy-dark); color: #B9CDD8; padding: 3.5rem 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.2rem; padding-bottom: 2.5rem; }
.footer h4 { color: #fff; margin-bottom: .8rem; font-size: .95rem; }
.footer a { display: block; color: #B9CDD8; padding: .18rem 0; font-size: .9rem; }
.footer a:hover { color: var(--orange); }
.footer .muted { color: #8AA5B3; font-size: .88rem; }
.footer-brand img { width: 40px; height: 40px; border-radius: 10px; }
.footer-brand strong { color: #fff; }
.footer-motto { color: var(--peach); font-style: italic; margin: .8rem 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.1rem 0; font-size: .82rem; }
.footer-bottom-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ============================================================
   Admin panel
   ============================================================ */
.admin-body { background: var(--bg); overflow-x: hidden; }
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; min-width: 0; }
.admin-side { background: var(--navy-dark); display: flex; flex-direction: column; padding: 1.2rem .9rem; position: sticky; top: 0; height: 100vh; }
.admin-brand { margin-bottom: 1.6rem; padding: 0 .5rem; }
.admin-brand img { width: 38px; height: 38px; border-radius: 10px; }
.admin-brand span { color: #fff; font-size: .95rem; }
.admin-brand strong { color: var(--orange); }
.admin-nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-height: 0; overflow-y: auto; }
/* Sidebar scrollbar: transparent track (no white background), and a thumb that
   only shows while the nav is hovered — it fades away on mouse-out. */
.admin-nav, .admin-side { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.admin-nav:hover, .admin-side:hover { scrollbar-color: rgba(255,255,255,.45) transparent; }
.admin-nav::-webkit-scrollbar, .admin-side::-webkit-scrollbar { width: 8px; }
.admin-nav::-webkit-scrollbar-track, .admin-side::-webkit-scrollbar-track { background: transparent; }
.admin-nav::-webkit-scrollbar-thumb, .admin-side::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.admin-nav:hover::-webkit-scrollbar-thumb, .admin-side:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.45); }
.admin-nav::-webkit-scrollbar-thumb:hover, .admin-side::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.6); }
.admin-nav a { color: #B9CDD8; padding: .55rem .8rem; border-radius: 8px; font-size: .92rem; flex-shrink: 0; }
.admin-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-nav a.active { background: var(--orange); color: #fff; }
.btn-remove { background: transparent; border: 1px solid var(--line); color: var(--bad); width: 26px; height: 26px;
    border-radius: 6px; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: all .15s; }
.btn-remove:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.add-line-form { display: flex; gap: .5rem; align-items: center; margin-top: .8rem; flex-wrap: wrap; }
.nav-badge { display: inline-block; background: var(--orange); color: #fff; font-size: .68rem; font-weight: 700;
    border-radius: 999px; padding: .05rem .42rem; margin-left: .3rem; vertical-align: middle; line-height: 1.5; }
.admin-nav a.active .nav-badge { background: #fff; color: var(--orange-dark); }
.admin-side-foot { display: flex; flex-direction: column; gap: .2rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: .8rem; }
.admin-side-foot a { color: #8AA5B3; font-size: .88rem; padding: .3rem .8rem; }
.admin-side-foot a:hover { color: var(--orange); }
.admin-main { padding: 1.6rem 2rem; min-width: 0; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; flex-wrap: wrap; gap: .6rem; }
.admin-topbar h1 { font-size: 1.5rem; }
.admin-content { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }

/* Mobile top bar for the admin drawer — hidden on desktop */
.admin-mobilebar { display: none; }
.admin-mobilebar-brand { display: flex; align-items: center; gap: .5rem; }
.admin-mobilebar-brand img { width: 32px; height: 32px; border-radius: 8px; }
.admin-mobilebar-brand span { color: #fff; font-size: .95rem; }
.admin-mobilebar-brand strong { color: var(--orange); }
.admin-nav-toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,.35);
    color: #fff; font-size: 1.25rem; line-height: 1; width: 44px; height: 44px; border-radius: 8px; cursor: pointer; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.stat-card { background: #fff; border-radius: 12px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .2rem; }
.stat-card strong { font-size: 1.45rem; color: var(--navy); }
.stat-card.accent strong { color: var(--orange-dark); }
.stat-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.admin-two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.4rem; align-items: start; min-width: 0; }
.admin-two-col > * { min-width: 0; }   /* grid items don't shrink below content size by default — this lets tables scroll inside instead of blowing out the page */

/* ================= Settings page ================= */
.settings { max-width: 880px; }

/* Tabbed navigation (enabled only when JS adds .js — otherwise all panels show) */
.settings .tabs { display: none; }
.settings.js .tabs { display: flex; gap: .2rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--line);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.settings.js .tabs::-webkit-scrollbar { display: none; }
.settings .tab { flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
    padding: .65rem .95rem; font-size: .92rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap;
    border-radius: 8px 8px 0 0; display: inline-flex; align-items: center; gap: .35rem; font-family: inherit; }
.settings .tab:hover { color: var(--navy); background: rgba(17, 56, 75, .04); }
.settings .tab.active { color: var(--orange-dark); border-bottom-color: var(--orange); }
.settings .tab:focus-visible { outline: 3px solid rgba(249, 116, 50, .45); outline-offset: -3px; }
.settings.js .tabpanel { display: none; }
.settings.js .tabpanel.active { display: block; animation: settings-fade .18s ease; }
.settings.js .tabpanel > .panel:only-child { margin-bottom: 0; }
@keyframes settings-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Config-health overview chips */
.settings-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.stat-chip { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; display: flex; align-items: center; gap: .65rem; box-shadow: var(--shadow); }
.stat-chip .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.stat-chip .dot.ok { background: var(--ok); } .stat-chip .dot.warn { background: var(--warn); }
.stat-chip .dot.bad { background: var(--bad); } .stat-chip .dot.muted { background: #94A3B8; }
.stat-chip .chip-body { display: flex; flex-direction: column; min-width: 0; }
.stat-chip .chip-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stat-chip .chip-value { font-weight: 700; font-size: .92rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Card header inside a settings panel */
.settings .panel { margin-bottom: 1.3rem; }
.card-head { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.card-head .card-icon { font-size: 1.35rem; line-height: 1.1; flex: 0 0 auto; }
.card-head .card-title { min-width: 0; flex: 1; }
.card-head h2 { font-size: 1.05rem; margin: 0; }
.card-head p { margin: .2rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.card-head .card-status { margin-left: auto; flex: 0 0 auto; align-self: center; }

/* Field grid + labels */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.1rem; }
.field-grid .span-2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field .field-label { font-size: .86rem; font-weight: 600; color: var(--navy); }
.field .field-label small { font-weight: 400; }
.field input, .field select { padding: .6rem .75rem; }

/* Toggle switch */
.setting-toggle { display: flex; align-items: flex-start; gap: .85rem; padding: .7rem 0; cursor: pointer; border-top: 1px solid var(--line); }
.setting-toggle:first-of-type { border-top: 0; }
.setting-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.setting-toggle .track { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: #CBD5E1; position: relative; transition: background .2s ease; margin-top: .1rem; }
.setting-toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
.setting-toggle input:checked + .track { background: var(--orange); }
.setting-toggle input:checked + .track::after { transform: translateX(18px); }
.setting-toggle input:focus-visible + .track { outline: 3px solid rgba(249,116,50,.5); outline-offset: 2px; }
.setting-toggle .toggle-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.setting-toggle .toggle-text strong { font-size: .92rem; color: var(--navy); font-weight: 600; }
.setting-toggle .toggle-text small { color: var(--muted); font-size: .82rem; line-height: 1.4; }

/* Advanced (SMTP) disclosure */
.settings-advanced { border: 1px solid var(--line); border-radius: var(--radius); margin: .4rem 0 0; }
.settings-advanced > summary { cursor: pointer; padding: .7rem .9rem; font-weight: 600; font-size: .88rem; color: var(--navy); list-style: none; display: flex; align-items: center; gap: .5rem; }
.settings-advanced > summary::-webkit-details-marker { display: none; }
.settings-advanced > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.settings-advanced[open] > summary::before { transform: rotate(90deg); }
.settings-advanced[open] > summary { border-bottom: 1px solid var(--line); }
.settings-advanced .adv-body { padding: 1rem .9rem; }

/* Inline sub-block (test email, delivery log) inside a card */
.settings-subcard { background: var(--bg); border-radius: var(--radius); padding: 1rem; margin-top: 1.1rem; }
.settings-subcard h3 { font-size: .92rem; margin: 0 0 .7rem; }
.settings-inline-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.settings-inline-form .field { flex: 1 1 200px; }

/* Sticky save bar for the main settings form */
.settings-save { position: sticky; bottom: 0; margin: 0 0 .4rem; padding: .9rem 0; display: flex; justify-content: flex-end; align-items: center; gap: 1rem;
    background: linear-gradient(to top, var(--bg) 55%, rgba(244,248,250,0)); z-index: 5; }
.settings-save .muted { margin-right: auto; }
@media (max-width: 640px) {
    .field-grid { grid-template-columns: 1fr; }
    /* Solid sticky footer on phones so content doesn't bleed through the gradient. */
    .settings-save { background: var(--bg); box-shadow: 0 -6px 14px rgba(17, 56, 75, .08); padding: .8rem 0 .5rem; }
    .settings-save .btn { width: 100%; }
    .settings-save .muted { display: none; }
}

/* ---- Offsite areas: map beside the zone form/list ---- */
.offsite-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.4rem; align-items: start; min-width: 0; }
.offsite-grid > * { min-width: 0; }
/* Map needs an explicit height or Leaflet collapses to 0. Keep it below sticky
   chrome with a low stacking context (Leaflet panes default high). */
.offsite-map { height: 440px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); z-index: 0; }
.offsite-map.map-sm { height: 300px; }
.leaflet-container { font: inherit; }
@media (max-width: 900px) { .offsite-grid { grid-template-columns: 1fr; } .offsite-map { height: 340px; } }

/* ---- Offsite choice + panel on the public booking form ---- */
.offsite-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: .2rem 0 1rem; }
.loc-option { display: flex; align-items: flex-start; gap: .6rem; border: 1.5px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; cursor: pointer; transition: border-color .15s, background .15s; }
.loc-option:has(input:checked) { border-color: var(--orange); background: var(--peach-light, #FFF4EE); }
.loc-option input { margin-top: .2rem; }
.loc-option span { display: flex; flex-direction: column; gap: .1rem; }
.loc-option small { font-size: .8rem; }
.offsite-panel { border: 1px dashed var(--line); border-radius: var(--radius); padding: 1rem; margin: 0 0 1.2rem; background: #FCFDFE; }
.offsite-filter-note { margin-top: .6rem; }
.offsite-status { margin-top: .5rem; font-weight: 600; }
.offsite-status.is-warn { color: var(--warn); }
.summary-offsite { font-size: .9rem; color: var(--navy); }
/* Non-eligible services while booking offsite. */
.svc-option.svc-disabled { opacity: .45; }
.svc-option.svc-disabled .price { text-decoration: line-through; }
@media (max-width: 560px) { .offsite-choice { grid-template-columns: 1fr; } }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: .8rem; }
.panel-head h2 { font-size: 1.1rem; }

.panel { min-width: 0; }
.admin-main .panel { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: middle; }
.admin-table th { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.admin-table tr:hover td { background: #F8FBFD; }
.admin-table .right { text-align: right; }
/* Long free-text columns (vendor/note, description, etc.) shouldn't stretch the table absurdly wide or wrap into a tall stack. */
.admin-table td.wrap-col, .admin-table .col-note { max-width: 220px; overflow-wrap: break-word; }

.filter-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter-tabs a { padding: .3rem .9rem; border-radius: 999px; font-size: .85rem; border: 1px solid var(--line); color: var(--muted); }
.filter-tabs a.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.search-form { display: flex; gap: .5rem; }
.search-form input { max-width: 260px; padding: .4rem .7rem; font-size: .88rem; }

.message-card { border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: .9rem; }
.message-card.unread { border-left: 4px solid var(--orange); background: #FFFBF8; }
.message-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; flex-wrap: wrap; }
.message-actions { display: flex; gap: .5rem; align-items: flex-start; }

/* ---- Login ---- */
.login-body {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background:
        radial-gradient(800px 400px at 90% 0%, rgba(249,116,50,.2), transparent 60%),
        linear-gradient(150deg, var(--navy-dark), var(--navy));
    padding: 1.5rem;
}
.login-card { width: 100%; max-width: 400px; text-align: center; }
.login-logo { width: 76px; height: 76px; border-radius: 18px; margin-bottom: .8rem; }
.login-card h1 { font-size: 1.4rem; margin-bottom: .3rem; }
.login-card p { margin-bottom: 1.4rem; }
.login-card form { display: flex; flex-direction: column; gap: 1rem; text-align: left; }

/* ---- Honeypot (bot trap — visually hidden, still in the DOM) ---- */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Pagination ---- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; }
.pagination .disabled { opacity: .4; pointer-events: none; }

/* ---- Dashboard chart ---- */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: .5rem; }
.chart-day { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
/* On small screens, keep bars a usable/tappable width and scroll instead of squishing. */
@media (max-width: 640px) {
    .chart { overflow-x: auto; gap: 10px; padding-bottom: .3rem; }
    .chart-day { min-width: 30px; }
}
.chart-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.chart-bar { width: 40%; max-width: 20px; border-radius: 4px 4px 0 0; transition: height .2s; }
.chart-bar.bookings { background: var(--navy); }
.chart-bar.revenue { background: var(--orange); }
.chart-label { font-size: .7rem; color: var(--muted); margin-top: .3rem; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }

/* ---- Receipt payment strip ---- */
.receipt-pay { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---- Permissions matrix ---- */
.perm-table-wrap { overflow-x: auto; }
.perm-table th.center, .perm-table td.center { text-align: center; }
.perm-table td.center input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--orange); cursor: pointer; }
.perm-table tbody tr:hover td { background: #F8FBFD; }
.perm-table th.rolehead { border-left: 2px solid var(--line); background: #F2F7FA; }
.perm-table th.actionhead { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.perm-table thead tr:last-child th:nth-child(3n+1),
.perm-table td:nth-child(3n) { border-left: 2px solid var(--line); }

/* ---- Performance bonus ---- */
.bonus-panel { border-top: 3px solid var(--orange); }
.bonus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.bonus-grid > div { display: flex; flex-direction: column; gap: .15rem; }
.bonus-figure { font-size: 1.5rem; color: var(--navy); line-height: 1.1; }
.bonus-progress { margin-top: .4rem; }
.bonus-progress-label { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .35rem; gap: 1rem; }
@media (max-width: 720px) { .bonus-grid { grid-template-columns: 1fr; } }

/* ---- Branding upload ---- */
.brand-row { display: flex; gap: 1rem; align-items: flex-start; }
.brand-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); background: #fff; flex: none; }
.brand-thumb-wide { width: 96px; }

/* ---- Reports ---- */
.report-presets { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.report-presets a { font-size: .85rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line); color: var(--navy); }
.report-presets a:hover { border-color: var(--orange); color: var(--orange); }
.inline-date { flex-direction: row; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
.inline-date input { padding: .35rem .5rem; }
.bar-list { display: flex; flex-direction: column; gap: .9rem; }
.bar-row { display: flex; flex-direction: column; gap: .3rem; }
.bar-label { display: flex; justify-content: space-between; font-size: .88rem; }
.bar-label span:last-child { font-weight: 700; color: var(--navy); }
.bar-track { height: 8px; background: #EEF3F6; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--peach)); border-radius: 999px; }

/* ---- Staff earnings cards ---- */
.earn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.earn-card { background: #fff; border-radius: 14px; padding: 1.3rem 1.4rem; box-shadow: var(--shadow); border-top: 4px solid var(--orange); }
.earn-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; }
.earn-card-head h3 { font-size: 1.05rem; }
.earn-figure { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .9rem; }
.earn-earned { font-size: 1.9rem; color: var(--navy); line-height: 1.1; }
.earn-split { display: flex; gap: 1rem; border-top: 1px dashed var(--line); padding-top: .8rem; }
.earn-split > div { display: flex; flex-direction: column; gap: .1rem; }
.earn-split b { font-size: 1.05rem; color: var(--navy); }
.earn-jobs { margin-top: .7rem; font-size: .82rem; color: var(--muted); }
@media (max-width: 900px) { .earn-grid { grid-template-columns: 1fr; } }

/* ---- Print ---- */
@media print {
    .topbar, .navbar, .footer, .no-print, .alert { display: none !important; }
    body { background: #fff; }
    .panel { box-shadow: none; border: 1px solid #ddd; }
    .section { padding: 0; }
}

/* ---- Narrow desktop (721–1100 px) — wrap nav links so they never overflow ---- */
/* The page scrollbar can't reach items that overflow the navbar horizontally,
   so we let the links wrap onto multiple lines. The navbar naturally gets taller
   and the page scrollbar scrolls everything into view. */
@media (min-width: 721px) and (max-width: 1100px) {
    .navbar { position: static; }                    /* remove sticky so it scrolls with page */
    .navbar-inner { flex-wrap: wrap; gap: .4rem; }   /* let brand & nav wrap */
    .nav-links {
        flex-wrap: wrap; gap: .3rem .6rem;           /* wrap links themselves */
        width: 100%; justify-content: flex-end;
    }
    .nav-links a { font-size: .85rem; padding: .25rem .5rem; }
    .nav-links a.nav-cta { padding: .25rem .9rem; font-size: .85rem; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .steps-grid, .trust-grid, .plans-grid, .plans-strip { grid-template-columns: repeat(2, 1fr); }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-inner, .signature-grid, .about-grid { grid-template-columns: 1fr; }
    .hero-card { max-width: 420px; margin: 0 auto; }
    .booking-grid { grid-template-columns: 1fr; }
    .booking-side { position: static; }
    .admin-two-col { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .hero h1 { font-size: 2rem; }
    .svc-option { flex-wrap: wrap; }
    .svc-info { flex: 1 1 calc(100% - 2.2rem); }
    .svc-right { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; padding-left: 2.2rem; }
    .nav-toggle { display: inline-flex; }
    .nav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--navy); flex-direction: column; align-items: stretch;
        padding: 1rem 1.4rem; gap: .6rem; box-shadow: 0 10px 20px rgba(0,0,0,.25);
    }
    .nav-links.open { display: flex; }
    .steps-grid, .trust-grid, .cards-grid, .plans-grid, .plans-strip, .form-grid, .contact-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: span 1; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    /* Footer: stack into a single readable column on phones. */
    .footer { padding-top: 2.2rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; padding-bottom: 2rem; }
    .footer-bottom-inner { flex-direction: column; gap: .4rem; }
    /* Compact top bar on phones: keep only the tappable phone, drop long address/hours. */
    .topbar-loc, .topbar-hours { display: none; }
    .topbar-inner { justify-content: center; }
    .plan-card.highlight { transform: none; }
}

/* ---- Admin: collapse the sidebar into a hamburger drawer ---- */
@media (max-width: 860px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-mobilebar {
        display: flex; align-items: center; justify-content: space-between;
        background: var(--navy-dark); padding: .6rem .9rem; height: 56px;
        position: sticky; top: 0; z-index: 50;
    }
    .admin-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .admin-side {
        display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
        height: auto; z-index: 45; overflow-y: auto; padding: 1rem;
    }
    .admin-shell.nav-open .admin-side { display: flex; }
    .admin-side .admin-brand { display: none; }   /* brand already shown in the mobile bar */
    .admin-nav a { padding: .8rem .9rem; font-size: 1rem; }   /* larger tap targets */
    .admin-side-foot a { padding: .6rem .9rem; font-size: .95rem; }
    .admin-main { padding: 1rem; }
    .admin-topbar h1 { font-size: 1.25rem; }

    /* ---- Panel head: stack filter-tabs above search/action row ---- */
    .panel-head { flex-direction: column; align-items: stretch; gap: .7rem; }
    /* Cap children at the header width so wide content (filter tabs, the search
       row) resolves via its own overflow-scroll / wrap instead of forcing the
       whole panel wider than the phone and stretching buttons into circles. */
    .panel-head > * { min-width: 0; max-width: 100%; }

    /* ---- Search form: expand input, wrap buttons ---- */
    .search-form { flex-wrap: wrap; gap: .4rem; }
    .search-form input[type="search"],
    .search-form input[type="text"],
    .search-form input[type="month"],
    .search-form input[type="date"] { max-width: none; flex: 1 1 140px; min-width: 0; }

    /* ---- Filter tabs: horizontal scroll so they never push page wider ---- */
    .filter-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: .25rem; scrollbar-width: none; }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tabs a { white-space: nowrap; flex-shrink: 0; }

    /* ---- Tables: allow horizontal scroll rather than squishing columns ---- */
    .admin-table { min-width: 560px; }
    /* …except narrow summary tables (e.g. the P&L label/value list), which fit
       fine and shouldn't be forced into an unnecessary sideways scroll. */
    .admin-table.compact { min-width: 0; }

    /* ---- Receipt strips: stack on mobile ---- */
    .receipt-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
    .receipt-actions .btn { width: 100%; text-align: center; }
    .receipt-pay { flex-direction: column; gap: .8rem; }

    /* ---- Report preset links: allow wrapping ---- */
    .report-presets { gap: .4rem; }

    /* ---- Add-line form in booking detail: full-width inputs ---- */
    .add-line-form select { flex: 1 1 140px; min-width: 0; }

    /* ---- Admin two-col detail pages ---- */
    .admin-two-col { gap: 1rem; }

    /* ---- Pagination: compact ---- */
    .pagination { gap: .5rem; font-size: .9rem; }
}

/* ---- Admin services & products: break the table into stacked cards ----
   Kicks in at 1120px, not the usual mobile breakpoint: the admin sidebar is a
   fixed ~240px, so a 1024px laptop only leaves ~700px of content — not enough
   for the full row of quick-edit controls without squeezing the inputs. */
@media (max-width: 1120px) {
    .admin-table.svc-table thead { display: none; }
    .admin-table.svc-table,
    .admin-table.svc-table tbody,
    .admin-table.svc-table tr,
    .admin-table.svc-table td {
        display: block;
    }
    .admin-table.svc-table tr {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,.06);
        padding: 1rem;
        margin-bottom: 1rem;
        border: 1px solid var(--line);
    }
    .admin-table.svc-table td {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .45rem .4rem;
        border-bottom: 0;
        min-height: 0;
    }
    .admin-table.svc-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--navy);
        font-size: .82rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        min-width: 90px;
        flex-shrink: 0;
    }
    .admin-table.svc-table td:first-child {
        display: block;
        padding-bottom: .7rem;
        margin-bottom: .5rem;
        border-bottom: 1px solid var(--line);
    }
    .admin-table.svc-table td:first-child::before { display: none; }
    .admin-table.svc-table td:last-child,
    .admin-table.svc-table td:nth-last-child(2) {
        display: inline-flex;
        width: auto;
        gap: .5rem;
        margin-top: .3rem;
    }
    .admin-table.svc-table td:last-child::before,
    .admin-table.svc-table td:nth-last-child(2)::before { display: none; }
    .admin-table.svc-table .input-sm {
        max-width: 280px;
        flex: 1;
        padding: .55rem .7rem;
        font-size: .95rem;
        min-height: 42px;
    }
    .admin-table.svc-table .input-sm-select {
        min-width: 56px;
        padding: .55rem .7rem;
        font-size: .95rem;
        min-height: 42px;
    }
    .admin-table.svc-table .field-group {
        flex: 1;
        gap: .5rem;
    }
    /* Every checkbox cell (Active, Featured, …) — sit flush after its label. */
    .admin-table.svc-table td input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        margin: 0;
    }
    .admin-table.svc-table td[data-label="Quote"] {
        font-size: 1rem;
    }
    .admin-table.svc-table .btn-sm {
        padding: .55rem 1.2rem;
        font-size: .9rem;
        min-height: 42px;
    }
    .admin-table.svc-table { min-width: 0; }
}
/* Hide data-label on empty labels (action columns) */
.admin-table td[data-label=""]::before { display: none !important; }

/* ---- Generic list tables → stacked cards on phones (opt-in .stack-cards) ----
   Labels are injected from each table's own <thead> by main.js, so there is no
   per-cell markup to maintain. Read-mostly admin lists: bookings, customers,
   payments, orders, subscriptions, plans, users, activity, earnings, my work… */
@media (max-width: 680px) {
    .admin-table.stack-cards { min-width: 0; }
    .admin-table.stack-cards thead { display: none; }
    .admin-table.stack-cards,
    .admin-table.stack-cards tbody,
    .admin-table.stack-cards tr,
    .admin-table.stack-cards td { display: block; }
    .admin-table.stack-cards tr {
        background: #fff; border: 1px solid var(--line); border-radius: 12px;
        box-shadow: 0 2px 12px rgba(17, 56, 75, .06);
        padding: .85rem 1rem; margin-bottom: .9rem;
    }
    .admin-table.stack-cards tr:hover td { background: transparent; }
    .admin-table.stack-cards td {
        display: flex; justify-content: space-between; align-items: center;
        gap: 1rem; text-align: right; padding: .3rem 0; border-bottom: 0; min-height: 0;
    }
    .admin-table.stack-cards td[data-label]::before {
        content: attr(data-label);
        font-weight: 600; color: var(--muted);
        font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
        text-align: left; margin-right: auto; flex: 0 0 auto;
    }
    /* First cell = the card's title (usually the reference / name / date). */
    .admin-table.stack-cards td:first-child {
        display: block; text-align: left; font-weight: 700; font-size: 1rem;
        padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
    }
    .admin-table.stack-cards td:first-child::before { display: none; }
    /* Action cells (empty header → no injected label): full-width, stacked buttons. */
    .admin-table.stack-cards td:not([data-label]):not(:first-child) {
        display: block; text-align: left; margin-top: .4rem;
    }
    .admin-table.stack-cards td:not([data-label]):not(:first-child) .btn { width: 100%; text-align: center; }
    /* Empty-state row ("No bookings found.") spanning all columns. */
    .admin-table.stack-cards td[colspan] {
        display: block; text-align: center; font-weight: 400;
        border-bottom: 0; margin-bottom: 0; padding: .6rem 0;
    }
    .admin-table.stack-cards td[colspan]::before { display: none; }
}

/* ---- Extra-small phones (≤ 480 px) ---- */
@media (max-width: 480px) {
    .admin-main { padding: .75rem; }
    .admin-topbar { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .admin-topbar h1 { font-size: 1.1rem; }

    /* stat cards: 2-column grid on small phones */
    .stat-grid { grid-template-columns: repeat(2, 1fr); }

    /* tables need more room — a wider min-width triggers a proper scroll */
    .admin-table { min-width: 480px; }

    /* panel padding tighter on small screens */
    .panel { padding: 1rem; }

    /* panel-head h2 smaller */
    .panel-head h2 { font-size: 1rem; }

    /* booking detail action buttons wrap cleanly */
    .booking-actions { flex-direction: column; align-items: stretch; }
    .booking-actions .btn { width: 100%; text-align: center; }

    /* receipt meta: single column */
    .receipt-meta { grid-template-columns: 1fr 1fr; }

    /* earn-grid: single column for tiny phones */
    .earn-grid { grid-template-columns: 1fr; }

    /* message-head: stack on phone */
    .message-head { flex-direction: column; gap: .4rem; }
    .message-actions { flex-wrap: wrap; }
}

/* ---- Buttons: comfortable touch targets on phones (site-wide, admin + public) ---- */
@media (max-width: 640px) {
    /* Small buttons (table row actions, pagination, filter tabs, CSV/export links)
       are the most-tapped and smallest controls — bump them closer to the
       44px recommended touch target without blowing up desktop-dense tables. */
    .btn-sm { padding: .5rem 1.05rem; font-size: .88rem; min-height: 38px; display: inline-flex; align-items: center; }
    .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-block { display: flex; }

    /* Round remove/× buttons in line-item rows (booking items, plans, etc.) */
    .btn-remove { width: 36px; height: 36px; font-size: 1.3rem; }

    /* Filter pills need more vertical padding to be reliably tappable */
    .filter-tabs a { padding: .5rem 1.05rem; }

    /* Pagination: bigger gap between Prev/Next so mis-taps are less likely */
    .pagination { gap: 1rem; }

    /* Checkbox/radio inputs inside tappable rows: slightly larger hit area */
    .svc-option input[type="checkbox"] { width: 20px; height: 20px; }
    .pay-option input { width: 19px; height: 19px; }
    .perm-table td.center input[type="checkbox"] { width: 20px; height: 20px; }
}

/* ---- Product grid ---- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
.product-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(17, 56, 75, .12);
}
.product-card.featured {
    border: 2px solid var(--orange);
    position: relative;
}
.product-card.featured::before {
    content: "Featured";
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--orange);
    color: #fff;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    z-index: 1;
}
.product-img {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    padding: 12px;
    overflow: hidden;
}
.product-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.product-body {
    padding: 1rem 1.1rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-body h3 {
    font-size: 1rem;
    margin-bottom: .35rem;
}
.product-body p {
    flex: 1;
    line-height: 1.5;
    margin-bottom: .8rem;
}
.product-footer {
    display: flex;
    align-items: baseline;
    gap: .3rem;
}
.product-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--navy);
}
.product-unit {
    font-size: .8rem;
    color: var(--muted);
}
.featured-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ---- Add to cart (product cards) ---- */
.product-add {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-top: .8rem;
}
.product-add input[type="number"] {
    width: 68px;
    flex: 0 0 auto;
    padding: .45rem .55rem;
    text-align: center;
}
.product-add .btn {
    flex: 1;
    white-space: nowrap;
}

/* ---- Cart ---- */
.nav-cart { white-space: nowrap; }
.cart-product {
    display: flex;
    gap: .7rem;
    align-items: center;
}
.cart-product img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--radius);
    flex: none;
}
.cart-product span { display: block; }
.cart-table .input-sm { width: 80px; text-align: center; }
.cart-actions {
    display: flex;
    gap: .8rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ---- Checkout: form beside a sticky order summary ---- */
.checkout-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.6rem;
    align-items: start;
}
.checkout-summary { position: sticky; top: 1rem; }
.checkout-summary .receipt-table td { padding: .5rem .4rem; }
@media (max-width: 860px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
    .cart-actions { justify-content: stretch; }
    .cart-actions .btn { flex: 1; text-align: center; }
}
@media (max-width: 560px) {
    /* Cart rows become stacked cards so the quantity box stays usable. */
    .cart-table thead { display: none; }
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; }
    .cart-table tr { border-bottom: 1px solid var(--line); padding: .8rem 0; }
    .cart-table td { display: flex; justify-content: space-between; align-items: center; gap: .8rem; border: 0; padding: .3rem 0; }
    .cart-table td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--navy); font-size: .8rem; }
    .cart-table td[data-label="Product"] { display: block; }
    .cart-table td[data-label="Product"]::before { display: none; }
    .cart-table tfoot tr { display: flex; justify-content: space-between; }
    .cart-table tfoot td { padding: .3rem 0; }
}

/* ==== Fleet plan configurator & estimator ============================== */
.is-hidden { display: none !important; }

/* Vehicle stepper */
.fleet-vehicles { display: block; font-weight: 600; color: var(--navy); }
.stepper {
    display: inline-flex;
    align-items: stretch;
    margin-top: .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    max-width: 190px;
}
.stepper .step-btn {
    width: 46px;
    border: 0;
    background: var(--bg);
    color: var(--navy);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}
.stepper .step-btn:hover { background: #e7eef2; }
.stepper input {
    width: 90px;
    border: 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
    -moz-appearance: textfield;
    appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Selectable option cards (frequency / add-ons / billing cycle) */
.field-label { font-weight: 600; color: var(--navy); margin: 1.1rem 0 .5rem; }
.option-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.option-cards.two { grid-template-columns: 1fr 1fr; }
.option-card {
    position: relative;
    display: block;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.option-card:hover { border-color: var(--orange); }
.option-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.option-card-body { display: block; }
.option-card-body strong { display: block; color: var(--navy); font-size: .98rem; }
.option-card-body small { display: block; margin-top: .15rem; }
.option-card:has(input:checked) {
    border-color: var(--orange);
    background: #fff6f1;
    box-shadow: 0 0 0 1px var(--orange) inset;
}
/* Fallback for engines without :has() — highlights the inner text only */
.option-card input:checked ~ .option-card-body strong { color: var(--orange); }
.option-card:focus-within { border-color: var(--orange); }
.save-flag {
    display: inline-block;
    background: var(--ok, #1b9e5a);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 6px;
    margin-left: .35rem;
    vertical-align: middle;
}

/* Sticky summary: price breakdown */
.fleet-summary .summary-list li { display: flex; justify-content: space-between; gap: 1rem; }
.fleet-price { margin: .8rem 0; padding: .8rem 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.fleet-price-row { display: flex; justify-content: space-between; align-items: baseline; padding: .2rem 0; }
.fleet-price-row strong { color: var(--navy); }
.volume-line strong { color: var(--ok, #1b9e5a); }

/* /plans estimator: controls + live result side by side */
.fleet-estimator { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; }
.estimator-result { position: sticky; top: 1.5rem; }
.estimator-total { margin: .3rem 0 1rem; }
.estimator-total strong { font-size: 2.1rem; color: var(--navy); line-height: 1; }
.estimator-total span { margin-left: .3rem; }

/* Enterprise band */
.enterprise-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.enterprise-band h3 { margin: 0; color: var(--navy); }

/* Admin fleet-pricing config groups */
.fleet-pricing-form .config-group {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem 1.25rem;
    margin-bottom: 1.1rem;
    background: var(--bg, #f6f9fb);
}
.fleet-pricing-form .config-group h3 {
    color: var(--navy);
    font-size: 1.02rem;
    margin: 0 0 .35rem;
}
.fleet-pricing-form .config-group > p.muted { margin-top: 0; margin-bottom: .7rem; }
.pricing-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.pricing-cols .config-group { margin-bottom: 1.1rem; }
.fleet-pricing-form .admin-table.compact { margin: 0 0 .6rem; background: #fff; }
.fleet-pricing-form .admin-table.compact input { width: 100%; }
.fleet-save-bar {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    padding-top: .4rem;
    border-top: 1px solid var(--line);
    margin-top: .3rem;
}

@media (max-width: 860px) {
    .fleet-estimator { grid-template-columns: 1fr; }
    .estimator-result { position: static; }
    .pricing-cols { grid-template-columns: 1fr; gap: 0; }
    .fleet-save-bar { justify-content: stretch; }
    .fleet-save-bar .btn { width: 100%; }
}