/* ==========================================================================
   VENDOR SIGNUP - vendor-signup.html, on top of site.css. Everything is .vs-
   A white page (the site tokens are re-coloured below); only the hero stays dark.

   TOKENS      page colours and fonts
   HERO        dark banner with cobwebs
   RAIL        sticky step bar under the hero
   LAYOUT      the one-page flow: sections down the middle, summary at the side
   SECTIONS    a card per step: heading, number, lock, intro, actions
   EVENTS      the event cards (js/site/vendor-signup.js builds them)
   PICKED      the event you chose
   TYPE        food van / market stall choice
   CATEGORIES  food category chips
   FIELDS      inputs, labels, documents, facts, FAQs, terms, waitlist
   MAP         the site plan and its legend
   SIDE        your application, sticky at the side
   CHECKOUT    the review cards and pay button
   CONFIRM     the all-done card
   Each section carries its own phone rules.
   ========================================================================== */

/* ==========================================================================
   TOKENS
   ========================================================================== */
.vendor-signup {
    /* The site tokens, re-coloured for a white page */
    --sg-black: var(--sg-paper-soft);
    --sg-panel: var(--sg-white);
    --sg-panel-light: var(--sg-paper-soft);
    --sg-border: var(--sg-paper-line);
    --sg-text: var(--sg-ink);
    --sg-muted: var(--sg-ink-muted);
    --sg-dim: var(--sg-ink-muted);
    --sg-gold: var(--sg-orange-dark); /* darker gold, reads on white */
    --sg-grain: none; /* grain looks like dirt on white */

    /* Poppins headings, Inter text, on this page only */
    --sg-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --sg-font-display: 'Poppins', 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
    --sg-font-accent: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Halloween accents */
    --vs-purple: var(--sg-purple);
    --vs-purple-deep: var(--sg-purple-dark);
    --vs-purple-light: var(--sg-purple);
    --vs-slime: var(--sg-lime);

    /* Site plan states (dark set, kept for the swatches' fallback) */
    --vs-available: var(--sg-green);
    --vs-held: var(--sg-sun-top);
    --vs-booked: var(--sg-poster-ink);
    --vs-blocked: var(--sg-border);
    --vs-mine: var(--sg-orange);
}

/* Headings: ink on white, no uppercase */
.vendor-signup h2,
.vendor-signup h3 {
    color: var(--sg-white);
}

/* Inputs: white boxes with a visible edge */
.vendor-signup input,
.vendor-signup select,
.vendor-signup textarea {
    background: var(--sg-white);
    color: var(--sg-white);
    border-color: var(--sg-border);
}

.vendor-signup input::placeholder,
.vendor-signup textarea::placeholder {
    color: var(--sg-dim);
}

/* ==========================================================================
   HERO - gradients listed before the photo or the headline is unreadable
   ========================================================================== */
.vs-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(46, 16, 66, 0.82) 0%, rgba(10, 10, 10, 0.92) 62%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 100%),
        url('../../data/images/services/festivals.webp') center 62% / cover no-repeat,
        var(--sg-night);
}

.vs-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--sg-grain);
    opacity: 0.14;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.vs-hero > * {
    position: relative;
    z-index: 1;
}

/* The hero keeps the real gold and white type */
.vendor-signup .vs-hero {
    --sg-gold: var(--sg-gold);
}

.vendor-signup .vs-hero,
.vendor-signup .vs-hero h1,
.vendor-signup .vs-hero p {
    color: var(--sg-white);
}

.vs-hero-inner {
    padding: 120px 20px 70px;
    max-width: 860px;
    margin: auto;
}

.vs-hero h1 {
    font-family: var(--sg-font-display);
    font-size: clamp(2.1rem, 6vw, 4rem);
    line-height: 0.98;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.vs-hero .vs-hero-sub {
    font-family: var(--sg-font-display);
    font-size: clamp(1.1rem, 3.4vw, 2rem);
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--sg-orange);
    margin-bottom: 18px;
}

.vs-hero .vs-hero-kicker {
    font-family: var(--sg-font-display);
    font-size: clamp(1.3rem, 4vw, 2.4rem);
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Cobwebs in the top corners */
.vs-web {
    position: absolute;
    top: 0;
    width: 130px;
    height: 130px;
    opacity: 0.22;
    pointer-events: none;
    z-index: 1;
}

.vs-web-left {
    left: 0;
}

.vs-web-right {
    right: 0;
    transform: scaleX(-1);
}

.vs-web path {
    fill: none;
    stroke: var(--sg-white);
    stroke-width: 1.4;
}

/* Red banner shown only while Firebase is not connected */
.vs-preview-banner {
    background: var(--sg-poster-ink);
    border-bottom: 2px solid var(--sg-red);
    color: var(--sg-red-bg);
    padding: 14px 6%;
    text-align: center;
    font-size: 0.95rem;
}

.vs-preview-banner strong {
    color: var(--sg-ink);
}

@media (max-width: 768px) {
    .vs-hero-inner {
        padding: 100px 20px 54px;
    }
    .vs-web {
        width: 88px;
        height: 88px;
    }
}

/* ==========================================================================
   RAIL - the steps, sticky under the hero
   ========================================================================== */
.vs-rail {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--sg-night);
    border-bottom: 1px solid var(--sg-border);
}

.vendor-signup .vs-rail {
    text-transform: none;
    letter-spacing: -0.4px;
    font-weight: 600;
}

.vs-rail-list {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    max-width: var(--sg-max-width);
    margin: auto;
    padding: 12px 6%;
    overflow-x: auto;
    scrollbar-width: none;
}

.vs-rail-list::-webkit-scrollbar {
    display: none;
}

/* The line between steps is drawn on the item so it cannot wrap alone */
.vs-rail-list li {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.vs-rail-list li + li::before {
    content: '';
    flex: 1 1 20px;
    height: 1px;
    background: var(--sg-ink-soft);
    margin: 0 4px;
}

.vs-rail-list button {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--sg-grey);
    font: inherit;
    font-size: 0.86rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}

.vs-rail-list button:hover {
    color: var(--sg-white);
}

.vs-rail-num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--sg-ink-soft);
    font-size: 0.8rem;
    font-weight: 600;
}

.vs-rail-list .is-here button {
    color: var(--sg-white);
}

.vs-rail-list .is-here .vs-rail-num {
    background: var(--sg-orange);
    border-color: var(--sg-orange);
    color: var(--sg-ink);
}

.vs-rail-list .is-done .vs-rail-num {
    background: var(--sg-green);
    border-color: var(--sg-green);
    color: var(--sg-white);
}

.vs-rail-list .is-done button {
    color: var(--sg-muted);
}

@media (max-width: 768px) {
    /* The rail shows numbers only */
    .vs-rail-list {
        padding: 10px 5%;
    }
    .vs-rail-list li {
        justify-content: center;
    }
    .vs-rail-label {
        display: none;
    }
}

/* ==========================================================================
   LAYOUT - the flow band and its two columns
   ========================================================================== */
.vs-apply {
    padding: clamp(28px, 4vw, 52px) 6% clamp(48px, 7vw, 84px);
    background: var(--sg-night);
    color: var(--sg-ink);
}

.vendor-signup .vs-apply {
    color: var(--sg-white);
}

.vs-apply-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: clamp(20px, 3vw, 40px);
    max-width: var(--sg-max-width);
    margin: auto;
}

.vs-main {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 26px);
    min-width: 0;
}

/* Outline buttons and text links, dark on white */
.vendor-signup .vs-apply .btn-outline {
    color: var(--sg-ink);
    border-color: var(--sg-muted);
    background: var(--sg-white);
}

.vendor-signup .vs-apply .btn-outline:hover {
    background: var(--sg-ink);
    border-color: var(--sg-ink);
    color: var(--sg-white);
}

.vendor-signup .vs-apply a:not(.btn) {
    color: var(--sg-orange-dark);
}

.vendor-signup .vs-apply a:not(.btn):hover {
    color: var(--sg-ink);
}

/* Headings in the flow: no uppercase, lighter weight */
.vendor-signup .vs-apply h2,
.vendor-signup .vs-apply h3 {
    text-transform: none;
    letter-spacing: -0.4px;
    font-weight: 600;
}

/* Tablet: one column, summary first and no longer sticky */
@media (max-width: 980px) {
    .vs-apply-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #vs-flow {
        padding: 20px 5%;
    }
}

/* ==========================================================================
   SECTIONS - one card per step
   ========================================================================== */
.vs-sec {
    background: var(--sg-panel);
    border: 1px solid var(--sg-border);
    border-radius: 18px;
    padding: 34px 30px;
    scroll-margin-top: 66px; /* clears the rail when jumped to */
}

.vs-sec h2 {
    font-family: var(--sg-font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    letter-spacing: -0.7px;
    color: var(--sg-white);
    text-align: left;
    margin: 0 0 8px;
}

.vendor-signup .vs-apply h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    margin-bottom: 6px;
}

.vs-sec-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.vs-sec-aside {
    flex: 0 0 auto;
    margin-left: auto; /* stays right when it wraps */
    color: var(--sg-orange-dark);
    font-size: 0.86rem;
}

/* The step number, inside the heading */
.vs-secnum {
    display: grid;
    place-items: center;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0 0 14px;
    border-radius: 50%;
    background: var(--sg-orange);
    color: var(--sg-ink); /* white on orange is too faint at this size */
    font-family: var(--sg-font);
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: uppercase;
}

.vs-sec.is-locked .vs-secnum {
    background: var(--sg-muted);
    color: var(--sg-ink-muted);
}

.vs-sec-intro {
    margin: 0 0 26px;
    color: var(--sg-ink-muted);
    font-size: 0.95rem;
}

.vendor-signup .vs-sec-intro {
    margin: 0 0 22px 42px;
    color: var(--sg-muted);
    font-size: 0.94rem;
}

/* A locked step shows only its heading and the reason */
.vs-sec.is-locked > *:not(h2):not(.vs-lock) {
    display: none;
}

.vs-sec:not(.is-locked) > .vs-lock {
    display: none;
}

.vs-lock {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 40px 20px;
    border: 1px solid var(--sg-paper-line);
    border-radius: 14px;
    background: var(--sg-white);
    text-align: center;
}

.vs-lock-head {
    margin: 6px 0 0;
    font-weight: bold;
    color: var(--sg-ink);
}

.vs-lock-sub {
    margin: 0;
    color: var(--sg-ink-muted);
    font-size: 0.9rem;
}

/* Subheading with a rule above, splitting a step into parts */
.vs-sub {
    font-family: var(--sg-font-display);
    font-size: 1.15rem;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 38px 0 18px;
    padding-top: 26px;
    border-top: 1px solid var(--sg-border);
}

.vs-sec > .vs-sub:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.vendor-signup .vs-sub {
    font-family: var(--sg-font-display);
    font-size: 1rem;
    text-transform: none;
    letter-spacing: -0.3px;
}

.vs-sub-note {
    margin: -10px 0 18px;
    color: var(--sg-muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

/* The Continue button row */
.vs-sec-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

.vs-error {
    background: var(--sg-poster-ink);
    border: 1px solid var(--sg-red);
    color: var(--sg-red-bg);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 18px;
    font-size: 0.95rem;
}

.vs-busy {
    color: var(--sg-gold);
    font-family: var(--sg-font-accent);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 16px;
}

.vs-muted {
    color: var(--sg-dim);
}

/* ==========================================================================
   EVENTS - the cards to choose from
   ========================================================================== */
.vs-sec .vs-events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: 16px;
    margin-top: 0;
}

.vs-sec .vs-events-loading {
    color: var(--sg-ink-muted);
    padding: 24px 0;
}

.vs-sec .vs-event {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sg-paper-line);
    border-radius: 14px;
    background: var(--sg-white);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 1px 3px rgba(16, 24, 40, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.vs-sec .vs-event:hover {
    transform: translateY(-3px);
    border-color: var(--sg-ink-soft);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.12);
}

.vs-sec .vs-event.is-chosen {
    border-color: var(--sg-orange);
    box-shadow:
        0 0 0 1px var(--sg-orange),
        0 12px 26px rgba(16, 24, 40, 0.12);
}

/* Closed or not open yet: listed, but not an option */
.vs-sec .vs-event.is-shut {
    opacity: 0.82;
}

.vs-sec .vs-event.is-shut:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--sg-border);
}

.vs-sec .vs-event-art {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--sg-paper-line);
    background-image: var(--vs-ev-art);
    background-size: cover;
    background-position: center;
}

/* Status badge over the picture */
.vs-sec .vs-event-status {
    position: absolute;
    left: 9px;
    bottom: 9px;
    padding: 4px 9px;
    border-radius: 6px;
    font-family: var(--sg-font-accent);
    font-size: 0.56rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vs-sec .vs-event-status.is-open {
    background: var(--sg-green);
    color: var(--sg-white);
}

.vs-sec .vs-event-status.is-limited {
    background: var(--sg-sun-top);
    color: var(--sg-poster-ink);
}

.vs-sec .vs-event-status.is-closed,
.vs-sec .vs-event-status.is-soon {
    background: var(--sg-ink);
    color: var(--sg-white);
}

.vs-sec .vs-event-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px 14px 16px;
    flex: 1;
}

.vs-sec .vs-event-body h3 {
    font-family: var(--sg-font-display);
    font-size: 1rem;
    letter-spacing: -0.4px;
    text-transform: none;
    color: var(--sg-ink);
    margin: 0 0 2px;
}

/* Date and place with icons in the text colour */
.vs-sec .vs-event-when,
.vs-sec .vs-event-where {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--sg-ink-muted);
    font-size: 0.84rem;
    font-weight: normal;
}

.vs-sec .vs-event-when::before,
.vs-sec .vs-event-where::before {
    content: '';
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--pk-icon) center / contain no-repeat;
    mask: var(--pk-icon) center / contain no-repeat;
}

.vs-sec .vs-event-when::before {
    --pk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10z'/%3E%3C/svg%3E");
}

.vs-sec .vs-event-where::before {
    --pk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.vs-sec .vs-event-blurb {
    margin: 6px 0 0;
    color: var(--sg-ink-muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

/* Black choose button (orange is kept for "buy") */
.vs-sec .vs-event-go {
    margin-top: 14px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--sg-ink);
    color: var(--sg-white);
    font-family: var(--sg-font-accent);
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.vs-sec .vs-event-go:hover {
    background: var(--sg-night);
}

.vs-sec .vs-event.is-chosen .vs-event-go {
    background: var(--sg-orange);
    color: var(--sg-ink);
}

.vs-sec .vs-event.is-chosen .vs-event-go:hover {
    background: var(--sg-sun-deep);
}

.vs-sec .vs-event-go.is-disabled {
    background: var(--sg-paper-line);
    color: var(--sg-grey);
    cursor: default;
}

/* Share button under the poster */
.vs-event-share {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: var(--sg-white);
    color: var(--sg-ink, var(--sg-panel));
    border: 2px solid var(--sg-panel);
    font-size: 0.72rem;
    padding: 12px 16px;
    letter-spacing: 0.12em;
}

.vs-event-share:hover {
    background: var(--sg-panel);
    color: var(--sg-white);
}

/* No picture: the logo on the house gradient */
.vs-event[data-noart] .vs-event-art,
.vs-picked-art[data-noart],
.vs-side-art[data-noart] {
    background-color: var(--sg-ink);
    background-image: url('/data/images/logowhite.png'), linear-gradient(135deg, #3a1c05 0%, #12141a 72%);
    background-repeat: no-repeat;
    background-position: center;
    background-size:
        36% auto,
        cover;
}

/* A portrait poster shows whole, so the card grows taller */
.vs-event[data-poster] .vs-event-art {
    aspect-ratio: 900 / 1335;
    background-size: cover;
    background-position: center top;
    background-color: var(--sg-sun-top);
}

.vs-event[data-poster] .vs-event-status {
    top: calc(100% + 14px); /* under the poster, clear of the sponsor strip */
    bottom: auto;
    left: 16px;
    z-index: 2;
}

.vs-event[data-poster] .vs-event-body {
    padding-top: 52px;
}

/* "Food vans sold out" sticker over the poster */
.vs-event-sticker {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    background: var(--sg-red);
    color: var(--sg-white);
    border: 3px solid var(--sg-white);
    padding: 10px 18px;
    border-radius: 10px;
    font-family: 'Arial Black', Impact, sans-serif;
    font-weight: 900;
    font-size: 1.35rem;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    pointer-events: none;
}

/* Grey placeholder cards while the events load */
.vs-event.is-loading {
    border-color: var(--sg-paper-line);
    box-shadow: none;
    pointer-events: none;
}

.vs-event.is-loading:hover {
    transform: none;
    box-shadow: none;
}

.vs-event.is-loading .vs-event-art {
    background-image: none;
}

.vs-event.is-loading .vs-event-art,
.vs-skel {
    background: var(--sg-paper-line);
    animation: vs-pulse 1.4s ease-in-out infinite;
}

.vs-skel {
    display: block;
    height: 11px;
    border-radius: 5px;
}

.vs-skel-title {
    width: 62%;
    height: 15px;
    margin-bottom: 6px;
}

.vs-skel-line {
    width: 80%;
}

.vs-skel-line.is-short {
    width: 52%;
}

.vs-skel-btn {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    margin-top: 12px;
}

@keyframes vs-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

/* ==========================================================================
   PICKED - the event you chose, shown in the next step
   ========================================================================== */
.vs-picked {
    margin-top: 22px;
    border: 1px solid var(--sg-orange);
    border-radius: 14px;
    background: var(--sg-white);
}

.vs-picked-head {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 14px 16px;
}

.vs-picked-art {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    height: 64px;
    border-radius: 10px;
    background-color: var(--sg-paper-line);
    background-image: var(--vs-ev-art);
    background-size: cover;
    background-position: center;
}

.vs-picked-tick {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sg-green);
    color: var(--sg-white);
    font-size: 0.72rem;
}

.vs-picked-what,
.vs-picked-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--sg-muted);
    line-height: 1.45;
}

.vs-picked-what {
    flex: 1 1 200px;
}

.vs-picked-fact {
    flex: 0 1 auto;
    padding-left: 18px;
    border-left: 1px solid var(--sg-poster-cream);
}

.vs-picked-what strong,
.vs-picked-fact strong {
    color: var(--sg-ink);
    font-size: 0.95rem;
}

.vs-picked-label {
    margin: 0 0 2px;
    font-size: 0.62rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sg-grey);
}

.vs-picked-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid var(--sg-paper-line);
    border-radius: 9px;
    background: var(--sg-white);
    color: var(--sg-ink);
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
}

.vs-picked-more-btn span {
    display: inline-block;
    transition: transform 0.2s ease;
}

.vs-picked-more-btn.is-open span {
    transform: rotate(180deg);
}

.vs-picked-more {
    padding: 4px 16px 18px;
    border-top: 1px solid var(--sg-poster-cream);
}

@media (max-width: 768px) {
    .vs-picked-fact {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--sg-poster-cream);
        padding-top: 10px;
        flex-basis: 100%;
    }
}

/* ==========================================================================
   TYPE - food van or market stall
   ========================================================================== */
.vs-type-grid {
    display: grid;
    gap: 16px;
}

.vs-type-grid.is-two {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.vs-type {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: 2px solid var(--sg-paper-line);
    border-radius: 14px;
    background: var(--sg-white);
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.vs-type:hover {
    border-color: var(--sg-muted);
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}

.vs-type.is-selected {
    border-color: var(--sg-orange);
    background: var(--sg-white);
}

.vs-type-ico {
    flex: 0 0 auto;
    width: 54px;
    height: 40px;
    fill: none;
    stroke: var(--sg-ink);
    stroke-width: 2;
    stroke-linejoin: round;
}

.vs-type.is-selected .vs-type-ico {
    stroke: var(--sg-orange-dark);
}

.vs-type-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vs-type-name {
    font-family: var(--sg-font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--sg-ink);
}

.vs-type-desc {
    color: var(--sg-muted);
    font-size: 0.86rem;
}

.vs-type-price {
    margin-top: 6px;
    font-family: var(--sg-font-display);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--sg-ink);
}

.vs-type-per {
    font-size: 0.92rem;
    font-weight: normal;
    color: var(--sg-muted);
}

.vs-type-fees {
    margin-top: 2px;
    color: var(--sg-dim);
    font-size: 0.78rem;
}

.vs-type-size {
    color: var(--sg-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* Tick on the chosen card only */
.vs-type-tick {
    position: absolute;
    top: 14px;
    right: 14px;
    display: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sg-green);
    color: var(--sg-white);
    font-size: 0.78rem;
}

.vs-type.is-selected .vs-type-tick {
    display: grid;
}

/* Sold out (automatic, from the site map): card greys, sticker stays bright */
.vs-type.is-soldout {
    cursor: not-allowed;
}

.vs-type.is-soldout:hover {
    transform: none;
    box-shadow: none;
}

.vs-type.is-soldout > *:not(.vs-type-soldout) {
    opacity: 0.45;
    filter: grayscale(1);
}

.vs-type-soldout {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    background: var(--sg-red);
    color: var(--sg-white);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'Arial Black', Impact, sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: rotate(6deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.vs-soldout-word {
    color: var(--sg-red);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   CATEGORIES - food category chips
   ========================================================================== */
.vs-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.vs-category {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    background: var(--sg-white);
    border: 2px solid var(--sg-border);
    border-radius: 12px;
    padding: 16px 18px;
    color: var(--sg-ink);
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s,
        transform 0.2s;
}

.vs-category:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--sg-poster-ink);
}

.vs-category.is-selected {
    border-color: var(--sg-orange);
    background: var(--sg-white);
}

.vs-category.is-selected .vs-category-name {
    color: var(--sg-orange-dark);
}

.vs-category-name {
    font-family: var(--sg-font-display);
    font-size: 1rem;
    letter-spacing: -0.3px;
    text-transform: uppercase;
}

.vendor-signup .vs-category-name {
    font-family: var(--sg-font-display);
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.2px;
}

.vs-category-count {
    font-family: var(--sg-font-accent);
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: var(--sg-dim);
}

.vendor-signup .vs-category-count {
    font-family: var(--sg-font);
    letter-spacing: 0;
}

.vs-category.is-full {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: var(--sg-poster-ink);
}

.vs-category-full {
    position: absolute;
    top: 10px;
    right: 12px;
    font-family: var(--sg-font-accent);
    font-size: 0.66rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: var(--sg-red-light);
    background: var(--sg-poster-ink);
    border-radius: 4px;
    padding: 2px 6px;
}

@media (prefers-reduced-motion: reduce) {
    .vs-category:hover:not(:disabled) {
        transform: none;
    }
}

/* ==========================================================================
   FIELDS
   ========================================================================== */
.vs-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.vs-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vs-field.is-wide {
    grid-column: 1 / -1;
}

/* Labels in sentence case; the asterisk comes from the required attribute */
.vs-field label {
    font-family: var(--sg-font-accent);
    font-size: 0.74rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sg-gold);
}

.vendor-signup .vs-field label {
    font-family: var(--sg-font);
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sg-ink-soft);
}

.vendor-signup .vs-field:has(input[required], select[required], textarea[required]) > label::after {
    content: ' *';
    color: var(--sg-red);
}

.vs-field input,
.vs-field select,
.vs-field textarea {
    padding: 14px;
    border-radius: 8px;
    background: var(--sg-white);
    color: var(--sg-ink);
    border: 1px solid var(--sg-border);
    font-family: var(--sg-font);
    font-size: 1rem;
    width: 100%;
}

.vs-field textarea {
    resize: vertical;
}

.vs-field-hint {
    color: var(--sg-dim);
    font-size: 0.82rem;
}

.vendor-signup .vs-field-hint {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: var(--sg-dim);
}

.vs-field-count {
    flex: 0 0 auto;
    color: var(--sg-dim);
    font-size: 0.78rem;
}

.vs-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sg-muted);
}

.vs-check input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Something to read before ticking the box under it */
.vs-notice {
    background: rgba(107, 63, 160, 0.14);
    border: 1px solid var(--vs-purple);
    border-left: 4px solid var(--vs-purple);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 12px;
    color: var(--sg-muted);
    font-size: 0.94rem;
}

.vs-notice strong {
    color: var(--sg-ink);
}

/* A button inside a label, styled as a link */
.vs-inline-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--sg-orange-dark);
    text-decoration: underline;
    cursor: pointer;
}

.vs-inline-link:hover {
    color: var(--sg-ink);
}

.vs-link {
    background: none;
    border: none;
    color: var(--sg-orange);
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
    padding: 4px;
}

/* Documents */
.vs-file-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 14px;
    align-items: end;
}

.vs-doc-list {
    list-style: none;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vs-doc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    background: var(--sg-white);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    padding: 12px 16px;
}

.vs-doc-type {
    font-family: var(--sg-font-accent);
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sg-gold);
}

.vs-doc-name {
    flex: 1;
    min-width: 120px;
    word-break: break-word;
}

.vs-doc-size {
    color: var(--sg-dim);
    font-size: 0.85rem;
}

.vs-doc-empty {
    color: var(--sg-dim);
    font-size: 0.92rem;
}

/* Event facts */
.vs-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2px;
    background: var(--sg-border);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
}

.vs-facts > div {
    background: var(--sg-white);
    padding: 16px 18px;
}

.vs-facts dt {
    font-family: var(--sg-font-accent);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sg-gold);
    margin-bottom: 6px;
}

.vs-facts dd {
    color: var(--sg-ink);
    font-size: 0.95rem;
}

/* FAQs: native <details>, work without JavaScript */
.vs-faqs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vs-faqs details {
    background: var(--sg-white);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    overflow: hidden;
}

.vs-faqs details[open] {
    border-color: var(--vs-purple);
}

.vs-faqs summary {
    padding: 16px 46px 16px 18px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    color: var(--sg-ink);
    list-style: none;
}

.vs-faqs summary::-webkit-details-marker {
    display: none;
}

.vs-faqs summary::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--sg-font-display);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--sg-orange);
}

.vs-faqs details[open] summary::after {
    content: '\2013';
}

.vs-faqs summary:hover {
    color: var(--sg-gold);
}

.vs-faqs details p {
    padding: 0 18px 18px;
    color: var(--sg-muted);
    font-size: 0.94rem;
    line-height: 1.7;
}

/* Terms and conditions */
.vs-terms {
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 4px 4px 0;
}

.vs-terms h4 {
    margin: 14px 0 4px;
    font-size: 15px;
}

.vs-terms p,
.vs-terms li {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 6px;
}

.vs-terms ul {
    margin: 0 0 6px 18px;
    padding: 0;
}

.vs-terms-ok {
    margin: 14px 0 6px;
}

.vs-terms-read {
    margin: 14px 0 0;
    border: 1px solid var(--sg-sun-top);
    border-radius: 12px;
    background: var(--sg-poster-cream);
    padding: 10px 14px;
}

.vs-terms-read summary {
    cursor: pointer;
    font-weight: 700;
}

.vs-terms-read summary em {
    display: block;
    font-weight: 400;
    font-style: normal;
    font-size: 12.5px;
    opacity: 0.75;
}

.vs-terms-read .vs-terms {
    margin-top: 10px;
}

.vs-terms-line {
    margin: 0 0 12px;
    font-size: 14px;
}

/* Waitlist, when a type is sold out */
.vs-waitlist {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
}

.vs-wl-card {
    border: 1px solid rgba(255, 107, 0, 0.45);
    background: rgba(255, 107, 0, 0.08);
    border-radius: 14px;
    padding: 16px 18px;
}

.vs-wl-card > b {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

.vs-wl-card > p {
    margin: 0 0 12px;
    font-size: 14px;
    opacity: 0.85;
}

.vs-wl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-bottom: 12px;
}

.vs-wl-grid label {
    display: grid;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.vs-wl-grid input {
    font: inherit;
    font-size: 15px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--sg-muted);
    background: var(--sg-white);
    color: var(--sg-panel);
}

.vs-wl-grid input:focus {
    outline: 2px solid var(--sg-orange);
    outline-offset: 1px;
    border-color: var(--sg-orange);
}

.vs-wl-wide {
    grid-column: 1 / -1;
}

.vs-wl-msg {
    margin: 8px 0 0;
    color: var(--sg-red-light);
    font-size: 14px;
}

.vs-wl-done {
    border-color: rgba(76, 175, 80, 0.6);
    background: rgba(76, 175, 80, 0.12);
}

/* Orange banner at the top when a waitlist spot is claimed */
.vs-claim-banner {
    margin: 90px auto 0;
    max-width: 1100px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--sg-orange);
    color: var(--sg-white);
    font-size: 15px;
    line-height: 1.5;
}

.vs-claim-banner.is-bad {
    background: var(--sg-red);
}

@media (max-width: 768px) {
    .vs-file-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vs-wl-grid {
        grid-template-columns: 1fr;
    }
    .vs-claim-banner {
        margin: 80px 12px 0;
    }
}

/* ==========================================================================
   MAP - the site plan. Six states as inks on a light plan:
     available green, held by you orange, on hold amber, booked red,
     not available grey, opens later dashed grey
   ========================================================================== */
.vs-map-wrap {
    position: relative;
    background: var(--sg-white);
    border: 1px solid var(--sg-paper-line);
    border-radius: 14px;
    padding: 14px;
    color: var(--sg-ink);
    max-height: min(70vh, 780px); /* the tall plan scrolls inside, not the page */
    overflow: auto;
    overscroll-behavior: contain;
}

.vs-map {
    min-width: 620px; /* keeps each bay a 44px tap target */
}

.vmap-svg {
    display: block;
    width: 100%;
    height: auto;
}

.vs-map-hint {
    color: var(--sg-dim);
    font-size: 0.84rem;
    margin-top: 8px;
}

/* Fixed furniture: stage, bar, walkway */
.vmap-landmark rect {
    fill: var(--sg-paper-soft);
    stroke: var(--sg-paper-line);
    stroke-width: 2;
}

.vmap-landmark-text {
    fill: var(--sg-grey);
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
}

/* Bookable bays */
.vmap-site rect {
    stroke-width: 2.5;
    transition:
        fill 0.15s,
        stroke 0.15s;
}

.vmap-site-label {
    fill: var(--sg-ink);
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 17px;
    pointer-events: none;
}

.vmap-site-sub {
    fill: rgba(18, 20, 26, 0.6);
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    letter-spacing: 1px;
    pointer-events: none;
}

.vmap-site.is-available rect {
    fill: var(--sg-green-bg);
    stroke: var(--sg-green);
}

.vmap-site.is-held rect {
    fill: var(--sg-poster-cream);
    stroke: var(--sg-orange-dark);
}

.vmap-site.is-booked rect {
    fill: var(--sg-red-bg);
    stroke: var(--sg-red);
}

.vmap-site.is-blocked rect {
    fill: var(--sg-paper-soft);
    stroke: var(--sg-muted);
}

.vmap-site.is-mine rect {
    fill: var(--sg-poster-cream);
    stroke: var(--sg-orange-dark);
}

.vmap-site.is-selectable {
    cursor: pointer;
}

.vmap-site.is-selectable:hover rect {
    fill: var(--sg-green-bg);
    stroke: var(--sg-green);
}

.vmap-site.is-selected rect {
    fill: var(--sg-poster-cream);
    stroke: var(--sg-orange);
    stroke-width: 4;
}

/* Free but not released yet: dashed, reads "not now" not "gone" */
.vmap-site.is-not-open rect {
    fill: var(--sg-paper-soft);
    stroke: var(--sg-muted);
    stroke-dasharray: 5 4;
}

.vmap-site.is-locked .vmap-site-label,
.vmap-site.is-not-open .vmap-site-label,
.vmap-site.is-not-open .vmap-site-sub {
    fill: rgba(18, 20, 26, 0.42);
}

.vmap-site.is-wrong-type rect {
    fill: var(--sg-paper-soft);
    stroke: var(--sg-paper-line);
}

.vmap-site.is-wrong-type .vmap-site-label,
.vmap-site.is-wrong-type .vmap-site-sub {
    fill: rgba(18, 20, 26, 0.3);
}

.vmap-site.is-selectable:focus-visible rect {
    stroke: var(--sg-gold);
    stroke-width: 4;
}

/* Legend - swatches must match the bays above */
.vs-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 18px 0 6px;
    list-style: none;
}

.vs-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sg-muted);
    font-size: 0.86rem;
}

.vs-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid;
    flex: 0 0 auto;
}

.vs-swatch.is-available {
    background: var(--sg-green-bg);
    border-color: var(--sg-green);
}

.vs-swatch.is-held {
    background: var(--sg-poster-cream);
    border-color: var(--sg-orange-dark);
}

.vs-swatch.is-booked {
    background: var(--sg-red-bg);
    border-color: var(--sg-red);
}

.vs-swatch.is-blocked {
    background: var(--sg-paper-soft);
    border-color: var(--sg-muted);
}

.vs-swatch.is-mine {
    background: var(--sg-poster-cream);
    border-color: var(--sg-orange-dark);
}

.vs-swatch.is-not-open {
    background: var(--sg-paper-soft);
    border-color: var(--sg-muted);
}

/* Words above the plan */
.vs-map-intro {
    margin: 14px 0 0;
    color: var(--sg-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.vs-map-intro strong {
    color: var(--sg-orange-dark);
}

.vs-map-intro-sub {
    color: var(--sg-dim);
    font-size: 0.86rem;
}

.vs-map-counts {
    color: var(--sg-dim);
    font-size: 0.88rem;
    margin-top: 4px;
}

/* The bay you picked */
.vs-site-choice {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--sg-white);
    border: 1px solid var(--sg-border);
    color: var(--sg-dim);
}

.vs-site-choice.is-chosen {
    border-color: var(--sg-orange);
    background: var(--sg-poster-cream);
    color: var(--sg-ink);
}

.vs-hold-timer {
    margin-top: 10px;
    font-family: var(--sg-font-accent);
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sg-gold);
}

.vs-hold-timer.is-expired {
    color: var(--sg-red-light);
}

/* ==========================================================================
   SIDE - your application, sticky beside the steps
   ========================================================================== */
.vs-side {
    min-width: 0;
    align-self: stretch; /* gives the sticky box room to travel */
}

.vs-side-inner {
    position: sticky;
    top: 76px; /* clears the rail */
    border: 1px solid var(--sg-paper-line);
    border-radius: 16px;
    background: var(--sg-white);
    padding: 18px;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 1px 3px rgba(16, 24, 40, 0.06);
}

.vs-side-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.vs-side-head {
    font-family: var(--sg-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    text-transform: none;
    color: var(--sg-ink);
    margin: 0;
}

.vs-side-change {
    padding: 0;
    border: 0;
    background: none;
    color: var(--sg-orange-dark);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.vs-side-empty {
    margin: 10px 0 0;
    color: var(--sg-muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

.vs-side-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 14px;
}

.vs-side-art {
    flex: 0 0 auto;
    width: 72px;
    height: 56px;
    border-radius: 9px;
    background-color: var(--sg-paper-line);
    background-image: var(--vs-ev-art);
    background-size: cover;
    background-position: center;
}

.vs-side-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--sg-muted);
    line-height: 1.45;
}

.vs-side-card-text strong {
    color: var(--sg-ink);
    font-size: 0.88rem;
}

.vs-side-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sg-paper-line);
    font-size: 0.8rem;
    color: var(--sg-muted);
    line-height: 1.45;
}

.vs-side-row strong {
    color: var(--sg-ink);
    font-size: 0.88rem;
}

.vs-side-wait {
    color: var(--sg-ink);
    font-size: 0.88rem;
    font-weight: 600;
}

.vs-side-label {
    margin: 0 0 3px;
    font-size: 0.62rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sg-dim);
}

/* Site, fee and GST lines above the total */
.vs-side-sum {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sg-paper-line);
}

.vs-side-sum > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.82rem;
    color: var(--sg-muted);
}

.vs-side-sum > div > span:last-child {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--sg-ink);
}

.vs-side-sum em {
    font-style: normal;
    color: var(--sg-dim);
    font-size: 0.92em;
}

.vs-side-sum + .vs-side-total {
    margin-top: 12px;
    padding-top: 12px;
}

.vs-side-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sg-paper-line);
    font-family: var(--sg-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sg-ink);
}

.vs-side-total strong {
    font-size: 1.3rem;
}

.vs-side-fineprint {
    margin: 2px 0 0;
    text-align: right;
    color: var(--sg-dim);
    font-size: 0.72rem;
}

.vendor-signup .vs-side-go {
    display: block;
    width: 100%;
    max-width: none;
    margin-top: 16px;
    text-align: center;
}

.vs-side-hold {
    margin: 14px 0 0;
    padding: 12px;
    border-radius: 10px;
    background: var(--sg-paper-soft);
    color: var(--sg-muted);
    font-size: 0.76rem;
    line-height: 1.55;
}

/* Tablet: one column, summary first and no longer sticky */
@media (max-width: 980px) {
    .vs-side {
        order: -1;
    }
    .vs-side-inner {
        position: static;
    }
}

/* ==========================================================================
   CHECKOUT - one column of small cards
   ========================================================================== */
.vs-sec.is-checkout {
    background: none;
    border: 0;
    padding: 0;
}

.vs-sec.is-checkout > h2,
.vs-sec.is-checkout > .vs-sec-intro,
.vs-sec.is-checkout > .vs-busy,
.vs-sec.is-checkout > .vs-error {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.vs-checkout {
    display: grid;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto;
}

.vs-card {
    background: var(--sg-white);
    border: 1px solid var(--sg-paper-line);
    border-radius: 16px;
    padding: 20px;
}

.vs-card h3 {
    margin: 0;
    font-family: var(--sg-font-display);
    font-size: 1.2rem;
    letter-spacing: -0.4px;
    color: var(--sg-ink);
}

.vs-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.vs-card-sub {
    margin: 8px 0 0;
    color: var(--sg-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Edit booking button */
.vs-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 50px;
    border: 1px solid var(--sg-paper-line);
    background: var(--sg-paper-soft);
    color: var(--sg-ink);
    font-size: 0.82rem;
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s;
}

.vs-pill:hover {
    border-color: var(--sg-orange);
    color: var(--sg-orange);
}

.vs-pill-ico {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* What is being bought */
.vs-lineitem {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.vs-lineitem-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255, 107, 0, 0.12);
    color: var(--sg-orange);
}

.vs-lineitem-ico svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.vs-lineitem-txt {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.vs-lineitem-txt strong {
    color: var(--sg-ink);
    font-size: 1rem;
}

.vs-lineitem-txt > span {
    color: var(--sg-muted);
    font-size: 0.85rem;
}

/* Price / qty / total in thirds */
.vs-figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--sg-paper-line);
}

.vs-figures > div:nth-child(2) {
    text-align: center;
}

.vs-figures > div:last-child {
    text-align: right;
}

.vs-figures dt {
    font-family: var(--sg-font-accent);
    font-size: 0.66rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sg-dim);
    margin-bottom: 5px;
}

.vs-figures dd {
    margin: 0;
    color: var(--sg-ink);
    font-size: 0.95rem;
}

.vs-figures dd.is-strong {
    font-weight: bold;
}

/* What it comes to */
.vs-sum {
    display: grid;
    gap: 11px;
    margin: 16px 0 0;
}

.vs-sum > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.vs-sum dt {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--sg-muted);
    font-size: 0.92rem;
}

.vs-sum dd {
    margin: 0;
    color: var(--sg-ink);
    font-size: 0.92rem;
}

/* The (i) opens a note below (hover tips do not work on phones) */
.vs-info {
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--sg-dim);
    background: none;
    color: var(--sg-dim);
    font-family: var(--sg-font-accent);
    font-size: 0.62rem;
    line-height: 1;
    cursor: pointer;
}

.vs-info:hover {
    border-color: var(--sg-orange);
    color: var(--sg-orange);
}

.vs-info-note {
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: 9px;
    background: var(--sg-paper-soft);
    border: 1px solid var(--sg-paper-line);
    color: var(--sg-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.vs-sum-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--sg-paper-line);
}

.vs-sum-total span {
    font-family: var(--sg-font-display);
    font-size: 1.05rem;
    letter-spacing: -0.2px;
    color: var(--sg-orange);
}

.vs-sum-total strong {
    font-family: var(--sg-font-display);
    font-size: 1.55rem;
    letter-spacing: -0.5px;
    color: var(--sg-orange);
}

/* Who takes the money */
.vs-secure-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vs-secure-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 107, 0, 0.12);
    color: var(--sg-orange);
}

.vs-secure-ico svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.vs-secure-head > span:last-child {
    display: grid;
    gap: 3px;
}

.vs-secure-head strong {
    color: var(--sg-ink);
    font-size: 0.95rem;
}

.vs-secure-head > span:last-child > span {
    color: var(--sg-muted);
    font-size: 0.84rem;
}

.vs-secure-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    list-style: none;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--sg-paper-line);
}

.vs-secure-row li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sg-dim);
    font-size: 0.78rem;
}

/* Their answers, folded away */
.vs-yourdetails {
    padding: 0;
    overflow: hidden;
}

.vs-yourdetails summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    font-family: var(--sg-font-accent);
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--sg-gold);
}

.vs-yourdetails summary::-webkit-details-marker {
    display: none;
}

.vs-yourdetails summary span {
    margin-left: auto;
    color: var(--sg-dim);
    letter-spacing: 1px;
}

.vs-yourdetails summary::after {
    content: '+';
    color: var(--sg-dim);
    font-size: 1.1rem;
}

.vs-yourdetails[open] summary::after {
    content: '\2212';
}

.vs-summary-list {
    display: grid;
    gap: 1px;
    background: var(--sg-border);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    overflow: hidden;
}

.vs-summary-list > div {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: 14px;
    background: var(--sg-white);
    padding: 13px 18px;
}

.vs-summary-list dt {
    font-family: var(--sg-font-accent);
    font-size: 0.74rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sg-gold);
    align-self: center;
}

.vs-summary-list dd {
    color: var(--sg-ink);
    word-break: break-word;
}

.vs-yourdetails .vs-summary-list {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--sg-paper-line);
    border-radius: 0;
}

.vs-checkout-foot {
    margin: 2px 0 0;
    text-align: center;
    color: var(--sg-dim);
    font-size: 0.84rem;
}

.vs-help-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--sg-orange);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Darker orange so the total and link read on white */
.vs-sum-total,
.vs-sum-total span,
.vs-sum-total strong,
.vs-help-link {
    color: var(--sg-orange-dark);
}

/* The pay button, at the end of the page */
.vs-paybar {
    display: block;
    max-width: 560px;
    margin: 22px auto 0;
}

.vs-paybar .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: none;
}

#vs-pay:not(:disabled)::after {
    content: '\2192';
    font-size: 1.1em;
    line-height: 1;
}

#vs-pay:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(1);
}

@media (max-width: 768px) {
    .vs-sec {
        padding: 20px 16px;
        border-radius: 14px;
    }
    .vs-sec-intro {
        margin-bottom: 18px;
    }
    .vendor-signup .vs-sec-intro {
        margin-left: 0;
    }
    .vs-sec-actions .btn {
        width: 100%;
        max-width: none;
    }
    .vs-summary-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    /* A tighter checkout */
    .vs-checkout {
        gap: 12px;
    }
    .vs-card {
        padding: 16px;
        border-radius: 14px;
    }
    .vs-card-head {
        gap: 10px;
    }
    .vs-pill {
        padding: 7px 12px;
        font-size: 0.78rem;
    }
    .vs-secure-row {
        gap: 8px 14px;
    }
    .vs-secure-row li {
        font-size: 0.74rem;
    }
    .vs-yourdetails summary {
        padding: 14px 16px;
    }
}

/* ==========================================================================
   CONFIRM - paying, then paid
   ========================================================================== */
.vs-confirming,
.vs-confirmed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 760px;
    margin: auto;
    text-align: center;
}

.vs-confirm-card {
    background: var(--sg-panel);
    border: 1px solid var(--sg-border);
    border-top: 4px solid var(--vs-available);
    border-radius: 18px;
    padding: 40px 32px;
    text-align: left;
}

.vs-eyebrow {
    font-family: var(--sg-font-accent);
    font-size: 0.76rem;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--vs-slime);
    margin-bottom: 10px;
}

.vs-confirm-card h2 {
    text-align: left;
    margin-bottom: 10px;
}

.vs-confirm-ref {
    font-family: var(--sg-font-accent);
    letter-spacing: 2px;
    color: var(--sg-muted);
    margin-bottom: 24px;
}

.vs-confirm-note {
    color: var(--sg-muted);
    margin-top: 22px;
    font-size: 0.95rem;
}

.vs-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 20px;
    border: 3px solid var(--sg-border);
    border-top-color: var(--sg-orange);
    border-radius: 50%;
    animation: vs-spin 1s linear infinite;
}

@keyframes vs-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-spinner,
    .vs-event.is-loading .vs-event-art,
    .vs-skel {
        animation: none;
    }
}