/* ==========================================================================
   Shubho Milan website: modern refresh (loaded after style.css).
   Keeps the brand (serif headings, maroon and gold) but with cleaner, lighter
   surfaces: off-white page, thin borders, soft shadows, sentence-case labels.
   ========================================================================== */

:root {
    --vs-cream: #faf9f7;
    --vs-ivory: #ffffff;
    --vs-line: #ebe8e4;
    --vs-body: #3f3a3c;
    --vs-muted: #75696d;
    --vs-radius: 16px;
    --vs-radius-sm: 10px;
    --vs-shadow-sm: 0 1px 2px rgba(24, 20, 22, .05);
    --vs-shadow: 0 8px 24px -10px rgba(24, 20, 22, .14);
    --vs-shadow-lg: 0 20px 48px -18px rgba(24, 20, 22, .22);
    --vs-ring: 0 0 0 3px rgba(122, 31, 61, .14);
}

body { background: var(--vs-cream); }

/* Labels: sentence case, no spaced capitals or decorative rules. */
.eyebrow { font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; gap: 8px; }
.eyebrow::before, .section__head .eyebrow::after { width: 16px; opacity: .6; }
.vendor-card__cat, .badge, .tag, .chip, .label-caps { letter-spacing: 0 !important; text-transform: none !important; }
.vendor-card__cat { font-size: .78rem; font-weight: 600; color: var(--vs-maroon); }

/* Buttons: no glow; a quiet shadow and a clear focus ring. */
.btn { font-weight: 600; letter-spacing: 0; }
.btn--primary, .btn--gold { box-shadow: 0 1px 2px rgba(24, 20, 22, .12); }
.btn--primary:hover { box-shadow: 0 4px 12px -4px rgba(122, 31, 61, .45); }
.btn--outline { border-width: 1px; border-color: #d9d2d4; color: var(--vs-ink); }
.btn--outline:hover { border-color: var(--vs-maroon); background: var(--vs-maroon-soft); color: var(--vs-maroon); }
.btn:focus-visible { outline: none; box-shadow: var(--vs-ring); }

/* Cards: thin border, soft shadow, gentle lift. */
.vendor-card, .booking-card, .panel, .auth__wrap, .account-card, .card {
    border: 1px solid var(--vs-line); box-shadow: var(--vs-shadow-sm);
}
.vendor-card:hover { box-shadow: var(--vs-shadow); transform: translateY(-2px); }
.vendor-card:hover .vendor-card__cover img { transform: scale(1.03); }
.vendor-card__shortlist { box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.auth__wrap { box-shadow: var(--vs-shadow); }

/* Header: crisp white bar with a hairline instead of a shadow. */
.site-header { border-bottom: 1px solid transparent; }
.site-header.is-scrolled { box-shadow: none; border-bottom-color: var(--vs-line); background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(12px); }

/* Forms. */
.form-control { border-color: #ddd7d9; border-radius: 10px; min-height: 44px; }
.form-control:hover { border-color: #c9c1c4; }
.form-control:focus { box-shadow: var(--vs-ring); }

/* Mobile bottom bar and chips. */
.app-nav, .mobile-cta { box-shadow: none; border-top: 1px solid var(--vs-line); background: rgba(255, 255, 255, .95); }

/* Small labels were sized for capitals; a touch larger now they are sentence case. */
.filter-group > label, .filter-group__label, .search-box__field label, .legal-nav__label, .biz-chips legend { font-size: .82rem; color: var(--vs-ink); }
.footer-grid h4 { font-size: .9rem; }
.biz-quote small, .biz-money small { font-size: .78rem; }

/* Phones: the hero search card as a tidy 2 + 1 grid (city | category, then the date), dividers aligned. */
@media (max-width: 767px) {
    .search-box { grid-template-columns: 1fr 1fr; gap: 0; padding: 6px; }
    .search-box__field { padding: 10px 12px; border: 0 !important; border-radius: 0; min-width: 0; }
    .search-box__field:nth-child(2) { border-left: 1px solid var(--vs-line) !important; }
    .search-box__field:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--vs-line) !important; }
    .search-box .btn { grid-column: 1 / -1; margin-top: 6px; }
    .search-box__field select, .search-box__field input { font-size: .95rem; text-overflow: ellipsis; }
}

/* Header city picker: the whole pill is the tap target. */
.city-select { position: relative; }
.city-select select { height: 100%; min-height: 36px; }

/* ---------- Requests: one card per request, its vendors inside; offline payment details ---------- */
.account__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-card { gap: 10px; }
.rq-vendor-list { display: grid; gap: 8px; }
.rq-vendor-row { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--vs-line); border-radius: var(--vs-radius-sm, 10px); background: #fff; }
.rq-vendor-row .form-hint { margin: 0; }
.rq-vendor-row .enquiry__foot { padding-top: 0; }
.rq-form .account__row { align-items: start; }
.rq-steps ol { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 10px; font-size: .92rem; color: var(--vs-muted, #555); }
.rq-steps ol b { color: var(--vs-ink, #222); }
[data-pay-howto] strong { display: block; margin-bottom: 4px; }
[data-pay-howto] p { margin: 0; }
.pay-details { margin: 10px 0 0; display: grid; gap: 8px; }
.pay-details div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.pay-details dt { font-weight: 600; }
.pay-details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .pay-details div { grid-template-columns: 1fr; gap: 2px; } }
.hero__alt { grid-column: 1 / -1; margin: 12px 0 0; color: #fff; font-size: .95rem; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.hero__alt a, .page-head__link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.status--quote_review { background: #ede9fe; color: #6d28d9; }
.status--closed.rq-closed, .status--assigned { background: #e8f0fe; color: #1d4ed8; }

/* Vendor join form: email + code check */
.verify-row { display: flex; gap: 8px; align-items: stretch; }
.verify-row .form-control { flex: 1; min-width: 0; }
.verify-row .btn { flex: none; white-space: nowrap; }
.verify-row + .verify-row { margin-top: 8px; }
.verify-row input[readonly] { background: #f6f3f4; }
.form-hint.is-error { color: #b42318; }
.form-hint.is-success { color: var(--vs-success); font-weight: 600; }

/* ---------- For vendors page ---------- */
/* Hero: three short facts under the buttons. */
.vb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; color: rgba(255, 255, 255, .88); font-size: .9rem; font-weight: 500; }
.vb-chips li { display: flex; align-items: center; gap: 8px; }
.vb-chips li::before { content: '✓'; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .7rem; font-weight: 700; color: var(--vs-maroon-dark); background: var(--vs-gold-light); }

/* How bookings work: a white card that overlaps the bottom of the hero. */
[data-page="for-vendors"] .hero { padding-bottom: 88px; }
@media (max-width: 767.98px) { [data-page="for-vendors"] .hero .btn--lg { padding: 12px 18px; font-size: .92rem; } [data-page="for-vendors"] .hero div:has(> .btn) { gap: 8px !important; } [data-page="for-vendors"] .hero div:has(> .btn) .btn { flex: 1 1 auto; } }
@media (min-width: 992px) {
    [data-page="for-vendors"] .hero { min-height: 0; padding-bottom: 150px; }
    [data-page="for-vendors"] .site-header--overlay + main > .hero:first-child { padding-top: calc(var(--vs-header-h) + 56px); }
    [data-page="for-vendors"] .hero h1 { font-size: clamp(2.4rem, 4vw, 3.1rem); }
    [data-page="for-vendors"] .hero__lead { margin-bottom: 22px; }
}
.vb-flow { position: relative; z-index: 2; padding-bottom: 8px; }
.vb-flow__card {
    margin-top: -64px; padding: 24px 20px; border-radius: 24px;
    background: var(--vs-white); border: 1px solid var(--vs-line); box-shadow: var(--vs-shadow-lg);
}
.vb-flow__head { margin-bottom: 22px; }
.vb-flow__head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
@media (min-width: 992px) {
    .vb-flow__card { margin-top: -110px; padding: 36px 40px 40px; }
    .vb-flow__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--vs-line); }
    .vb-flow__head .eyebrow { order: 2; margin: 0; }
}

.vb-timeline { list-style: none; margin: 0; padding: 0; counter-reset: vbstep; display: grid; }
.vb-timeline li { position: relative; counter-increment: vbstep; padding: 0 0 22px 56px; }
.vb-timeline li:last-child { padding-bottom: 0; }
.vb-timeline li::before {
    content: counter(vbstep); position: absolute; left: 0; top: -4px; z-index: 1;
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    font: 600 1.05rem/1 var(--vs-font-head); color: var(--vs-white);
    background: linear-gradient(135deg, var(--vs-maroon), var(--vs-maroon-dark));
    box-shadow: 0 0 0 5px var(--vs-maroon-soft);
}
.vb-timeline li::after { content: ''; position: absolute; left: 19.5px; top: 42px; bottom: 2px; border-left: 1px dashed var(--vs-gold); opacity: .6; }
.vb-timeline li:last-child::after { display: none; }
.vb-timeline h3 { font-size: 1.06rem; margin-bottom: 4px; }
.vb-timeline p { margin: 0; color: var(--vs-muted); font-size: .9rem; }
@media (min-width: 992px) {
    .vb-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
    .vb-timeline li { padding: 60px 0 0; }
    .vb-timeline li::before { top: 0; }
    .vb-timeline li::after { left: 56px; right: -16px; top: 20px; bottom: auto; border-left: 0; border-top: 1px dashed var(--vs-gold); }
}

/* Who can list: category photo tiles; a swipe row on phones. */
.vb-cats__grid .cat-tile:hover { transform: translateY(-2px); }
.vb-cats__grid .cat-tile small { display: block; margin-top: 2px; }
@media (min-width: 768px) { .vb-cats__grid .cat-tile { aspect-ratio: 5 / 4; } }
@media (max-width: 767.98px) {
    .vb-cats__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
    .vb-cats__grid::-webkit-scrollbar { display: none; }
    .vb-cats__grid .cat-tile { scroll-snap-align: start; aspect-ratio: 3 / 4; }
}

/* Why join: a photo card beside the feature cards. */
.vb-features__photo {
    position: relative; isolation: isolate; overflow: hidden; min-height: 220px;
    display: flex; align-items: flex-end; padding: 22px; border-radius: var(--vs-radius);
    background: var(--vs-maroon-dark) center / cover no-repeat;
}
.vb-features__photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(31, 10, 18, .88)); }
.vb-features__photo p { margin: 0; color: var(--vs-white); font: 600 1.25rem/1.35 var(--vs-font-head); }
@media (min-width: 640px) { .vb-features__photo { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
    .vb-features { grid-template-columns: 1.1fr 1fr 1fr; }
    .vb-features__photo { grid-column: 1; grid-row: 1 / span 3; min-height: 0; padding: 28px; }
    .vb-features__photo p { font-size: 1.5rem; }
}


.vb-features .feature { border: 1px solid var(--vs-line); transition: box-shadow .2s, transform .2s; }
.vb-features .feature:hover { box-shadow: var(--vs-shadow); transform: translateY(-2px); }
.vb-features .feature i { color: var(--vs-maroon); }
.vb-features .feature i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

[data-page="for-vendors"] .step { border: 1px solid var(--vs-line); }

/* Tighter rhythm on this page so it reads in fewer scrolls. */
@media (min-width: 992px) {
    [data-page="for-vendors"] .section { padding: 64px 0; }
    [data-page="for-vendors"] .section__head { margin-bottom: 36px; }
}

/* Phones: feature cards as compact rows (icon beside the text), steps with the number inline. */
@media (max-width: 639.98px) {
    .vb-features { gap: 10px; }
    .vb-features .feature { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
    .vb-features .feature i { grid-row: span 2; width: 42px; height: 42px; margin: 0; border-radius: 12px; }
    .vb-features .feature h3 { font-size: 1.02rem; margin-bottom: 2px; }
    .vb-features .feature p { font-size: .88rem; }
    [data-page="for-vendors"] .steps { gap: 10px; }
    [data-page="for-vendors"] .step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 16px; }
    [data-page="for-vendors"] .step::before { grid-row: span 2; margin: 0; font-size: 1.5rem; }
    [data-page="for-vendors"] .step h3 { font-size: 1.02rem; margin-bottom: 2px; }
}

/* Register band: crimson background, wider card, form in two columns from tablet up. */
#register.section { background: linear-gradient(135deg, var(--vs-maroon-dark), var(--vs-maroon)); }
#register .container { max-width: 860px !important; }
#register .panel { padding: 24px 18px; box-shadow: var(--vs-shadow-lg); border-color: transparent; }
#register .panel > h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 4px; }
#register .panel > p { margin-bottom: 20px; font-size: .95rem; }
#register .form-group { margin-bottom: 14px; }
@media (min-width: 768px) {
    #register .panel { padding: 36px 40px; }
    #register form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
    #register form > :not(.form-group) { grid-column: 1 / -1; }
}

@media (max-width: 639.98px) {
    .vb-features__photo { min-height: 170px; padding: 18px; }
    .vb-features__photo p { font-size: 1.1rem; }
}

/* ==========================================================================
   App feel on phones (all pages): no tap flash, press feedback, no iOS
   zoom on focus, content clear of the notch and home bar.
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, .btn, .cat-tile, .vendor-card, .chip, label { -webkit-tap-highlight-color: transparent; }
@media (max-width: 767.98px) {
    body { overscroll-behavior-y: none; }
    .form-control, .phone-input .form-control, .search-box__field select, .search-box__field input { font-size: 16px; }
    .btn { min-height: 44px; }
    .btn:active, .app-nav a:active, .chip:active { transform: scale(.97); }
    .cat-tile:active, .vendor-card:active, .feature:active, .panel a:active { transform: scale(.985); }
    .btn, .app-nav a, .chip, .cat-tile, .vendor-card { transition: transform .12s ease, background-color .2s, color .2s, box-shadow .2s; }
    .site-header { padding-top: env(safe-area-inset-top); }
    .container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .app-nav { backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); background: rgba(255, 255, 255, .88); }
    .panel, .feature, .step, .vendor-card { border-radius: 18px; }
}

/* Home: a shorter hero so the search and the next section sit higher. */
@media (min-width: 992px) {
    [data-page="home"] .hero { min-height: 0; padding-bottom: 72px; }
    [data-page="home"] .site-header--overlay + main > .hero:first-child { padding-top: calc(var(--vs-header-h) + 56px); }
    [data-page="home"] .hero h1 { font-size: clamp(2.4rem, 4vw, 3.1rem); }
    [data-page="home"] .hero__lead { margin-bottom: 22px; }
}
@media (max-width: 767.98px) {
    [data-page="home"] .hero { padding-top: 40px; }
    [data-page="home"] .hero h1 { font-size: 1.85rem; }
}

/* Vendors listing on phones: space under the page header; result count above Filters and Sort. */
@media (max-width: 991.98px) {
    [data-page="vendors"] .chip-row { padding-top: 14px; margin-bottom: 6px; }
    .listing__bar { flex-wrap: wrap; gap: 6px 8px; }
    .listing__bar p { flex: 1 1 100%; font-size: .8rem; }
    .listing__bar .btn { flex: 1 1 0; min-height: 40px; padding: 8px 12px; }
    .listing__bar .form-control--inline { flex: 1 1 0; max-width: none; min-height: 40px; padding: 7px 10px; font-size: 16px; }
}
@media (max-width: 767.98px) {
    [data-page="vendors"] .page-head { padding: 22px 0 20px; }
    [data-page="vendors"] .page-head h1 { font-size: 1.7rem !important; margin-bottom: 6px; }
}

/* Two-field rows (plan request, account) stack on narrow phones so selects aren't cut off. */
@media (max-width: 419.98px) { .account__row { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Login (customer and partner): photo panel with a crimson wash and a glass
   list, a cleaner form card, digit boxes with focus and filled states.
   ========================================================================== */
.auth { background: radial-gradient(900px 500px at 85% -10%, rgba(201, 146, 42, .16), transparent 60%), radial-gradient(800px 500px at -10% 110%, rgba(122, 31, 61, .12), transparent 60%), var(--vs-cream); }
.auth__wrap { border-radius: 28px; border: 1px solid var(--vs-line); box-shadow: var(--vs-shadow-lg); }
.auth__card { position: relative; }
.auth__brand { padding-bottom: 20px; border-bottom: 1px solid var(--vs-line); }
.auth__brand img { border-radius: 50%; box-shadow: 0 0 0 4px var(--vs-gold-soft); }
.auth__brand strong { font-size: 1.45rem; }
.auth .form-group label { font-size: .84rem; }
.auth .form-control { min-height: 50px; border-radius: 12px; }
.auth .btn--lg { border-radius: 12px; padding: 15px 22px; background-image: linear-gradient(135deg, var(--vs-maroon), var(--vs-maroon-dark)); }
.auth .btn--lg:hover { background-image: linear-gradient(135deg, var(--vs-maroon-dark), var(--vs-maroon-dark)); }
.otp-sent { margin: 0 0 18px; line-height: 1.5; }
.otp-sent strong { color: var(--vs-ink); word-break: break-all; }

.otp-inputs { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.otp-inputs input {
    width: 48px; height: 56px; min-height: 0; padding: 0; flex: 0 1 48px; min-width: 0;
    border: 1.5px solid #ddd7d9; border-radius: 12px; background: var(--vs-white);
    font: 600 1.4rem/1 var(--vs-font-body); color: var(--vs-ink); caret-color: var(--vs-maroon);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.otp-inputs input:focus { border-color: var(--vs-maroon); box-shadow: 0 0 0 4px rgba(122, 31, 61, .12); outline: none; }
.otp-inputs input:not(:placeholder-shown) { border-color: var(--vs-maroon); background: var(--vs-maroon-soft); color: var(--vs-maroon-dark); }
.otp-inputs input:nth-child(3) { margin-right: 8px; }

.auth__note { margin-top: 18px; }
.auth__trust { display: flex; align-items: center; justify-content: center; gap: 8px; text-wrap: balance; margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--vs-line); font-size: .78rem; color: var(--vs-muted); text-align: center; }
.auth__trust::before { content: ''; flex: none; width: 14px; height: 14px; background: var(--vs-success); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }

.auth__aside-logo { display: none; }
@media (min-width: 860px) {
    .auth { padding: 56px 24px; }
    .auth__wrap { max-width: 1020px; grid-template-columns: 1.1fr 1fr; }
    .auth__card { padding: 56px 52px 40px; }
    .auth__aside { min-height: 620px; padding: 36px; }
    .auth__aside::before { background: linear-gradient(165deg, rgba(78, 16, 38, .35) 0%, rgba(78, 16, 38, .55) 45%, rgba(31, 10, 18, .94) 100%); }
    .auth__aside::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 260px at 100% 0%, rgba(201, 146, 42, .28), transparent 70%); }
    .auth__aside-logo { display: flex; align-items: center; gap: 10px; margin-bottom: auto; font: 600 1.15rem/1 var(--vs-font-head); color: var(--vs-white); }
    .auth__aside-logo img { border-radius: 50%; }
    .auth__aside h2 { font-size: 2.4rem; line-height: 1.12; }
    .auth__perks {
        margin-top: 22px; padding: 18px 20px; gap: 14px; border-radius: 18px;
        background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
        backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    }
    .auth__perks span { width: 34px; height: 34px; background: rgba(243, 217, 164, .18); border: 1px solid rgba(243, 217, 164, .35); }
}
/* Phones: the brand row becomes a crimson header across the top of the card. */
@media (max-width: 859.98px) {
    .auth { padding: 20px 16px 32px; place-items: start center; }
    .auth__wrap { border-radius: 24px; }
    .auth__card { padding: 0 20px 22px; }
    .auth__brand {
        margin: 0 -20px 22px; padding: 22px 20px; border-bottom: 0;
        background: linear-gradient(135deg, var(--vs-maroon-dark), var(--vs-maroon)); color: var(--vs-white);
        position: relative; overflow: hidden;
    }
    .auth__brand::after { content: ''; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 146, 42, .35), transparent 70%); }
    .auth__brand strong { color: var(--vs-white); font-size: 1.3rem; }
    .auth__brand small { color: rgba(255, 255, 255, .78); }
    .auth__brand img { box-shadow: 0 0 0 3px rgba(243, 217, 164, .4); }
    .otp-inputs { gap: 6px; }
    .otp-inputs input { height: 52px; font-size: 1.25rem; }
    .otp-inputs input:nth-child(3) { margin-right: 4px; }
}

/* Filters: category and rating as pill chips, "verified" as a switch; the desktop
   sidebar scrolls on its own if it ever needs to, with no visible scrollbar. */
[data-category-filter], .filter-group:has(> .filter-option input[type=radio]) { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-group:has(> .filter-option input[type=radio]) > .filter-group__label { flex: 1 1 100%; margin-bottom: 0; }
.filter-option:has(input[type=radio]) {
    position: relative; display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--vs-line); background: var(--vs-white); font-size: .84rem; font-weight: 500; color: var(--vs-body);
    transition: background .15s, border-color .15s, color .15s;
}
.filter-option:has(input[type=radio]):hover { border-color: #d9c9cf; color: var(--vs-maroon); }
.filter-option input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.filter-option:has(input[type=radio]:checked) { background: var(--vs-maroon); border-color: var(--vs-maroon); color: var(--vs-white); }
.filter-option:has(input[type=radio]:focus-visible) { box-shadow: var(--vs-ring); }

.filter-option:has(input[type=checkbox]) { justify-content: space-between; flex-direction: row-reverse; font-weight: 500; }
.filter-option input[type=checkbox] {
    appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px;
    background: #ddd7d9; position: relative; cursor: pointer; transition: background .2s;
}
.filter-option input[type=checkbox]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.filter-option input[type=checkbox]:checked { background: var(--vs-maroon); }
.filter-option input[type=checkbox]:checked::after { transform: translateX(16px); }
.filter-option input[type=checkbox]:focus-visible { box-shadow: var(--vs-ring); outline: none; }

.filter-group { padding: 16px 0; }
@media (min-width: 992px) {
    .filters { max-height: calc(100vh - var(--vs-header-h) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 22px; }
    .filters::-webkit-scrollbar { display: none; }
}
@media (min-width: 992px) {
    .filters .form-control { min-height: 42px; padding: 9px 12px; font-size: .9rem; }
    .filters .filter-group { padding: 12px 0; }
    .filters .filter-option:has(input[type=radio]) { padding: 6px 12px; font-size: .8rem; }
    /* "Clear filters" stays pinned at the bottom of the panel, over a soft fade. */
    .filters [type=reset] { position: sticky; bottom: -22px; margin: 4px -22px -22px; width: calc(100% + 44px); border-radius: 0 0 var(--vs-radius) var(--vs-radius); border: 0; border-top: 1px solid var(--vs-line); padding: 14px; background: var(--vs-white); box-shadow: 0 -16px 20px -6px rgba(255, 255, 255, .95); }
    .filters [type=reset]:hover { background: var(--vs-maroon-soft); }
}

/* ==========================================================================
   My business (vendor dashboard): header card with stats, pill tabs,
   cards with a date block.
   ========================================================================== */
.bh { position: relative; isolation: isolate; padding: 18px 0 0; background: linear-gradient(135deg, var(--vs-maroon-dark), var(--vs-maroon) 70%); }
.bh::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 260px at 90% 0%, rgba(201, 146, 42, .3), transparent 70%); }
.bh .breadcrumb { color: rgba(255, 255, 255, .7); margin-bottom: 12px; }
.bh .breadcrumb a { color: rgba(255, 255, 255, .85); }
.bh__card {
    position: relative; top: 28px; margin-top: -4px; display: grid; gap: 16px; padding: 18px;
    background: var(--vs-white); border: 1px solid var(--vs-line); border-radius: 22px; box-shadow: var(--vs-shadow-lg);
}
.bh__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bh__id > div { min-width: 0; }
.bh__avatar {
    flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
    font: 600 1.3rem/1 var(--vs-font-head); color: var(--vs-white);
    background: linear-gradient(135deg, var(--vs-maroon), var(--vs-maroon-dark)); box-shadow: 0 0 0 4px var(--vs-gold-soft);
}
.bh h1 { font-size: clamp(1.35rem, 3vw, 1.9rem); margin: 0 0 6px; overflow-wrap: anywhere; }
.bh__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bh__chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; background: var(--vs-cream); color: var(--vs-body); border: 1px solid var(--vs-line); }
.bh__chip--live { background: var(--vs-success-soft); color: var(--vs-success); border-color: #c7e8d3; }
.bh__chip--live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(31, 122, 77, .18); }
.bh__chip--review { background: #eef4ff; color: #1d4ed8; border-color: #d6e4ff; }
.bh__chip--waiting { background: var(--vs-gold-soft); color: #8a5c00; border-color: #f1dfb6; }
.bh__chip--hidden, .bh__chip--rejected { background: #fdecec; color: #b42318; border-color: #f6cfcf; }
.bh__chip--city::before { content: ''; width: 10px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.bh__actions { display: flex; gap: 8px; }
.bh__actions .btn { flex: 1; }
.bh__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bh__stats:empty { display: none; }
.bh__stat {
    display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--vs-cream); border: 1px solid var(--vs-line);
    color: var(--vs-body); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.bh__stat:hover { border-color: #e2c9d1; color: var(--vs-body); box-shadow: var(--vs-shadow-sm); transform: translateY(-1px); }
.bh__stat strong { font: 600 1.5rem/1.1 var(--vs-font-head); color: var(--vs-ink); }
.bh__stat span { font-size: .8rem; font-weight: 600; }
.bh__stat small { font-size: .72rem; color: var(--vs-muted); }
.bh__stat.is-hot { background: var(--vs-maroon-soft); border-color: #ecd2da; }
.bh__stat.is-hot strong { color: var(--vs-maroon); }
@media (min-width: 900px) {
    .bh { padding-top: 26px; }
    .bh__card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 24px 28px; gap: 20px 24px; top: 36px; }
    .bh__avatar { width: 64px; height: 64px; font-size: 1.5rem; }
    .bh__stats { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .bh__stat { padding: 14px 18px; }
}
[data-page="business"] .account { padding-top: 52px; }
@media (min-width: 900px) { [data-page="business"] .account { padding-top: 64px; } }

/* Tabs: pills in a white bar; swipe on phones. */
.biz-tabs { gap: 4px; margin: 0 0 18px; padding: 5px; border: 1px solid var(--vs-line); border-radius: 16px; background: var(--vs-white); box-shadow: var(--vs-shadow-sm); }
.biz-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 11px; font-size: .88rem; font-weight: 500; color: var(--vs-body); transition: background .15s, color .15s; }
.biz-tabs a:hover { background: var(--vs-cream); color: var(--vs-maroon); }
.biz-tabs a.is-active { background: var(--vs-maroon); color: var(--vs-white); }
.biz-tabs a.is-active .tab-count { background: var(--vs-white); color: var(--vs-maroon); }
.biz-filters { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px; scrollbar-width: none; margin-bottom: 14px; }
.biz-filters::-webkit-scrollbar { display: none; }

/* Cards: date block, name and meta, status chip; actions on one line. */
[data-page="business"] .biz-card { gap: 12px; padding: 18px; border-radius: 18px; transition: box-shadow .2s; }
[data-page="business"] .biz-card:hover { box-shadow: var(--vs-shadow); }
.biz-card__top { align-items: center; }
.biz-card__who { flex: 1; min-width: 0; }
.biz-card__who strong { display: block; font: 600 1.08rem/1.25 var(--vs-font-head); }
.biz-date {
    flex: none; width: 54px; padding: 6px 0 5px; border-radius: 12px; text-align: center; line-height: 1;
    background: var(--vs-maroon-soft); border: 1px solid #ecd2da; color: var(--vs-maroon);
}
.biz-date b { display: block; font: 600 1.35rem/1 var(--vs-font-head); }
.biz-date span { display: block; margin-top: 2px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.biz-date small { display: block; margin-top: 1px; font-size: .64rem; color: var(--vs-muted); }
[data-page="business"] .status { padding: 4px 10px; font-size: .74rem; }
[data-page="business"] .enquiry__msg { padding: 10px 14px; border-radius: 12px; background: var(--vs-cream); font-style: italic; }
[data-page="business"] .biz-card__actions { padding-top: 2px; }
[data-page="business"] .enquiry__foot { padding-top: 10px; border-top: 1px solid var(--vs-line); }
@media (max-width: 599.98px) {
    .biz-card__top { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; }
    .biz-card__top .status { grid-column: 2; justify-self: start; }
    .bh__stat { padding: 10px 12px; }
    .bh__stat strong { font-size: 1.3rem; }
    [data-page="business"] .biz-card { padding: 14px; }
    .biz-date { width: 50px; }
    [data-page="business"] .biz-card__actions .btn { flex: 1; }
    [data-page="business"] .enquiry__foot { flex-wrap: wrap; }
}
@media (min-width: 768px) { .biz-filters { margin-left: 0; margin-right: 0; padding: 0; flex-wrap: wrap; } }
/* Panel headings with filter chips beside them (Support "My tickets"): chips go under the heading on phones. */
.account__head .biz-filters { padding: 0; }
@media (max-width: 599.98px) { .account__head { flex-wrap: wrap; } .account__head h2 { flex: 1 1 100%; } }
@media (max-width: 859.98px) { .auth__trust { justify-content: flex-start; text-align: left; } }

/* Number boxes: no up/down arrows (amounts are typed, not stepped) */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
@media (max-width: 859.98px) { .auth__wrap { grid-template-columns: minmax(0, 1fr); } }
[data-step="otp"] .form-hint, [data-step="otp"] .form-hint .link-btn { font-size: .8rem; }
.filters { scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; }

/* ==========================================================================
   Phones (< 768px): native-app layout. Desktop is untouched.
   ========================================================================== */
.app-back, .app-title { display: none; }
.app-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 767.98px) {
    /* Inner pages: back button + page name in a slim bar; logo and city picker step aside. */
    .site-header:not(.site-header--overlay) { --vs-header-h: 56px; }
    .site-header:not(.site-header--overlay) .site-header__inner { height: 56px; gap: 6px; }
    .site-header:not(.site-header--overlay) .logo,
    .site-header:not(.site-header--overlay) .city-select { display: none; }
    .site-header:not(.site-header--overlay) .app-back {
        display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: -6px; border-radius: 50%; color: var(--vs-ink);
    }
    .site-header:not(.site-header--overlay) .app-back:active { background: var(--vs-cream); }
    .site-header:not(.site-header--overlay) .app-title {
        display: block; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        font: 600 1.08rem/1.2 var(--vs-font-head); color: var(--vs-ink);
    }
    .site-header:not(.site-header--overlay) .nav-toggle { margin-left: auto; }

    /* Page banners: a slim strip under the bar; the bar already says where you are. */
    .page-head { padding: 18px 0 16px !important; }
    .page-head .breadcrumb { display: none; }
    .page-head h1 { font-size: 1.45rem !important; margin-bottom: 4px; }
    .page-head p { font-size: .86rem; line-height: 1.45; }
    .bh .breadcrumb { display: none; }
    .bh { padding-top: 8px; }

    /* Bottom tab bar: five slots, bigger targets, safe-area padding. */
    .app-nav { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
    .app-nav__item { padding: 6px 0 5px; min-height: 52px; justify-content: center; font-size: .68rem; }
    .app-nav__ico { width: 52px; height: 30px; }

    /* Forms on phones: the main button sits above the tab bar while you fill the form. */
    .rq-form [type=submit] {
        position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 5;
        box-shadow: 0 8px 24px -8px rgba(78, 16, 38, .45);
    }
    .btn { min-height: 44px; }
    .chip { display: inline-flex; align-items: center; min-height: 38px; }
    .panel { border-radius: 18px; }
}

/* My business on phones: every section visible as a tile grid instead of a hidden swipe row. */
@media (max-width: 599.98px) {
    .biz-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 6px; }
    .biz-tabs a { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 4px; text-align: center; white-space: normal; line-height: 1.2; font-size: .78rem; border-radius: 12px; background: var(--vs-cream); }
    .biz-tabs a .tab-count { position: absolute; margin: -34px 0 0 52px; }
    .biz-tabs a { position: relative; }
}

/* Profile tab: read-only summary above the form. */
.biz-summary { display: grid; gap: 14px; margin-bottom: 16px; }
.biz-summary__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.biz-summary__head h2 { margin: 0; font-size: 1.2rem; }
.biz-summary__list { display: grid; gap: 0; margin: 0; }
.biz-summary__list > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--vs-line); }
.biz-summary__list dt { font-size: .82rem; font-weight: 600; color: var(--vs-muted); }
.biz-summary__list dd { margin: 0; font-size: .92rem; color: var(--vs-ink); }
.biz-summary__list em { color: var(--vs-muted); font-style: normal; }
.biz-summary__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.biz-summary__chips span { padding: 3px 10px; border-radius: 999px; background: var(--vs-maroon-soft); color: var(--vs-maroon); font-size: .78rem; font-weight: 600; }
@media (max-width: 599.98px) { .biz-summary__list > div { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 767.98px) { [data-page="vendor-detail"] .breadcrumb { display: none; } }