/*
 * "Vehicle Information" and its "Services This Vehicle Supports" control and
 * picker on the website's driver sign-up forms (task 186,
 * partials/driver-vehicle-section + driver-services-field,
 * public/js/site/service-picker.js). Drawn inside four different forms (two
 * themes, the /provider/login REGISTER step, /register-driver), so every
 * rule is scoped under .gt-vs* and resets what those pages set on bare
 * label / button / span / ul / h2. Colours come from the theme tokens
 * (layout.theme-vars: --site-color, --gt-accent-*), with fallbacks.
 * Labels grey 12.5px / 500, values dark 14-15px / 400-500 (never bold).
 */
.gt-vs, .gt-vs-sheet, .gt-vs-section-head {
    --gt-vs-brand: var(--site-color, #C23F38);
    --gt-vs-on-brand: var(--gt-accent-ink, #FFFFFF);
    --gt-vs-tint: var(--gt-accent-soft, #FBEDEC);
    --gt-vs-line: #DDD6D5;
    --gt-vs-ink: #1A1413;
    --gt-vs-soft: #5E5654;
    --gt-vs-faint: #8A8F98;
    --gt-vs-surface: #FFFFFF;
    --gt-vs-danger: #B4231C;
}
.gt-vs *, .gt-vs *::before, .gt-vs *::after { box-sizing: border-box; }
.gt-vs [hidden], .gt-vs[hidden] { display: none !important; }

/* The section's heading. */
.gt-vs-section-head { text-align: left; }
/* An id in :is() outranks the pages' own heading rules (the /provider/login form's step-name rule, .gtl #register h3, set it uppercase 12px with !important margins). */
:is(#gt-vs-x, .gt-vs-section-head) h3.gt-vs-heading {
    margin: 14px 0 6px !important; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--gt-vs-line);
    font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--gt-vs-ink);
    text-align: left !important; text-transform: none; letter-spacing: 0; float: none; width: auto;
}

/* The control. */
.gt-vs { text-align: left; margin-bottom: 12px; }
.gt-vs .gt-vs-label {
    display: block; margin: 0 0 6px; float: none; width: auto;
    font-size: 12.5px; line-height: 1.35; font-weight: 500; color: var(--gt-vs-soft); text-align: left;
}
.gt-vs .gt-vs-control {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 8px 12px;
    background: var(--gt-vs-surface); border: 1px solid var(--gt-vs-line); border-radius: 10px; box-shadow: none;
    color: var(--gt-vs-ink); font: inherit; font-size: 15px; font-weight: 400; line-height: 1.3; text-align: left;
    cursor: pointer; float: none; text-transform: none; letter-spacing: 0;
}
.gt-vs .gt-vs-control:hover { border-color: var(--gt-vs-soft); }
.gt-vs .gt-vs-control:focus-visible { outline: 2px solid var(--gt-vs-brand); outline-offset: 2px; }
.gt-vs .gt-vs-control[aria-invalid="true"] { border-color: var(--gt-vs-danger); }
.gt-vs .gt-vs-control-icon { display: inline-flex; flex: 0 0 auto; color: var(--gt-vs-faint); }
.gt-vs .gt-vs-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.gt-vs .gt-vs-summary.is-empty { color: var(--gt-vs-faint); font-weight: 400; }
.gt-vs .gt-vs-chev { flex: 0 0 auto; color: var(--gt-vs-soft); }

.gt-vs .gt-vs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.gt-vs .gt-vs-chip {
    display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 32px; margin: 0; padding: 0 2px 0 12px;
    background: var(--gt-vs-tint); border: 1px solid transparent; border-radius: 999px;
    color: var(--gt-vs-ink); font-size: 13.5px; font-weight: 500; line-height: 1.2; float: none;
}
.gt-vs .gt-vs-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gt-vs .gt-vs-chip-x {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 32px; height: 32px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 999px;
    color: var(--gt-vs-soft); cursor: pointer; box-shadow: none; float: none;
}
.gt-vs .gt-vs-chip-x:hover { background: rgba(0, 0, 0, .06); color: var(--gt-vs-ink); }
.gt-vs .gt-vs-chip-x:focus-visible { outline: 2px solid var(--gt-vs-brand); outline-offset: 0; }

.gt-vs .gt-vs-error {
    display: block; position: static; margin: 6px 0 0; padding: 0; background: none;
    font-size: 12.5px; line-height: 1.35; font-weight: 500; color: var(--gt-vs-danger); text-align: left;
}
.gt-vs .gt-vs-hint { display: block; margin: 6px 0 0; font-size: 12px; line-height: 1.35; color: var(--gt-vs-faint); text-align: left; }
.gt-vs.gt-vs--invalid .gt-vs-hint { display: none; }

/* The picker: a dialog, a sheet from the bottom on a phone. */
html.gt-vs-locked { overflow: hidden; }
.gt-vs-sheet {
    width: min(560px, calc(100vw - 32px)); max-width: none; max-height: min(720px, calc(100vh - 48px));
    margin: auto; padding: 0; border: 0; border-radius: 16px; overflow: hidden;
    background: var(--gt-vs-surface); color: var(--gt-vs-ink); box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    font-size: 15px; line-height: 1.4; text-align: left;
}
.gt-vs-sheet:not([open]) { display: none; }
.gt-vs-sheet::backdrop { background: rgba(17, 12, 11, .48); }
.gt-vs-sheet *, .gt-vs-sheet *::before, .gt-vs-sheet *::after { box-sizing: border-box; }
.gt-vs-sheet .gt-vs-sheet-box { display: flex; flex-direction: column; max-height: inherit; }
.gt-vs-sheet .gt-vs-sheet-head { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 18px 12px 12px 20px; border-bottom: 1px solid var(--gt-vs-line); }
.gt-vs-sheet .gt-vs-grab { display: none; }
.gt-vs-sheet .gt-vs-sheet-say { flex: 1 1 auto; min-width: 0; }
.gt-vs-sheet .gt-vs-title {
    margin: 0 0 2px; padding: 0; border: 0; float: none;
    font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--gt-vs-ink); text-align: left; text-transform: none; letter-spacing: 0;
}
.gt-vs-sheet .gt-vs-count { margin: 0; font-size: 13px; color: var(--gt-vs-soft); }
.gt-vs-sheet .gt-vs-x {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 44px; height: 44px; margin: -8px 0 0; padding: 0; background: transparent; border: 0; border-radius: 999px;
    color: var(--gt-vs-soft); cursor: pointer; box-shadow: none; float: none;
}
.gt-vs-sheet .gt-vs-x:hover { background: rgba(0, 0, 0, .06); color: var(--gt-vs-ink); }

.gt-vs-sheet .gt-vs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 12px 16px; list-style: none; }
.gt-vs-sheet .gt-vs-list > li { margin: 0 0 8px; padding: 0; float: none; }
.gt-vs-sheet .gt-vs-list > li:last-child { margin-bottom: 0; }
.gt-vs-sheet .gt-vs-empty { padding: 24px 8px; color: var(--gt-vs-soft); text-align: center; }
.gt-vs-sheet .gt-vs-opt {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 0; padding: 10px 12px;
    background: var(--gt-vs-surface); border: 1.5px solid var(--gt-vs-line); border-radius: 12px; box-shadow: none;
    color: var(--gt-vs-ink); font: inherit; text-align: left; cursor: pointer; float: none; text-transform: none; letter-spacing: 0;
}
.gt-vs-sheet .gt-vs-opt:hover { border-color: var(--gt-vs-soft); }
.gt-vs-sheet .gt-vs-opt:focus-visible { outline: 2px solid var(--gt-vs-brand); outline-offset: 2px; }
.gt-vs-sheet .gt-vs-opt.is-on { border-color: var(--gt-vs-brand); background: var(--gt-vs-tint); }
.gt-vs-sheet .gt-vs-img {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 56px; height: 40px; border-radius: 8px; background: #F4F1F0; color: var(--gt-vs-soft); overflow: hidden;
}
.gt-vs-sheet .gt-vs-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gt-vs-sheet .gt-vs-say { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.gt-vs-sheet .gt-vs-name { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--gt-vs-ink); overflow-wrap: anywhere; }
.gt-vs-sheet .gt-vs-desc { font-size: 13px; line-height: 1.35; color: var(--gt-vs-soft); overflow-wrap: anywhere; }
.gt-vs-sheet .gt-vs-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px; font-size: 12.5px; color: var(--gt-vs-soft); }
.gt-vs-sheet .gt-vs-fact { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.gt-vs-sheet .gt-vs-tick {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 24px; height: 24px; border: 1.5px solid var(--gt-vs-line); border-radius: 6px; color: transparent; background: var(--gt-vs-surface);
}
.gt-vs-sheet .gt-vs-list[role="radiogroup"] .gt-vs-tick { border-radius: 999px; }
.gt-vs-sheet .gt-vs-opt.is-on .gt-vs-tick { border-color: var(--gt-vs-brand); background: var(--gt-vs-brand); color: var(--gt-vs-on-brand); }

.gt-vs-sheet .gt-vs-sheet-foot { display: flex; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--gt-vs-line); background: var(--gt-vs-surface); }
.gt-vs-sheet .gt-vs-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-height: 48px; margin: 0; padding: 0 16px;
    border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: none; float: none; width: auto;
    text-transform: none; letter-spacing: 0;
}
.gt-vs-sheet .gt-vs-btn--ghost { background: var(--gt-vs-surface); border: 1px solid var(--gt-vs-line); color: var(--gt-vs-ink); }
.gt-vs-sheet .gt-vs-btn--ghost:hover:not(:disabled) { background: #F4F1F0; }
.gt-vs-sheet .gt-vs-btn--primary { background: var(--gt-vs-brand); border: 1px solid var(--gt-vs-brand); color: var(--gt-vs-on-brand); }
.gt-vs-sheet .gt-vs-btn:disabled { opacity: .45; cursor: default; }
.gt-vs-sheet .gt-vs-btn:focus-visible { outline: 2px solid var(--gt-vs-brand); outline-offset: 2px; }

@media (max-width: 575.98px) {
    .gt-vs-sheet {
        width: 100vw; max-width: 100vw; max-height: 88vh; margin: auto 0 0; border-radius: 18px 18px 0 0;
    }
    .gt-vs-sheet .gt-vs-grab { display: block; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--gt-vs-line); }
    .gt-vs-sheet .gt-vs-sheet-head { padding-top: 20px; }
    .gt-vs-sheet .gt-vs-sheet-foot { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
    .gt-vs-sheet[open] { animation: gt-vs-in .18s ease-out; }
    @media (max-width: 575.98px) { .gt-vs-sheet[open] { animation-name: gt-vs-up; } }
}
@keyframes gt-vs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gt-vs-up { from { transform: translateY(100%); } to { transform: none; } }

/* ---------------------------------------------------------------------------
   Page mode (task 189, the owner's reference 2): the sign-up's own step 3,
   "Select Service Type", full screen in the form (driver-services-field with
   page => true). Title + hint, a tab per category (red label, red
   underline), one card per service (image left in a light rounded square,
   name, description, "Capacity: n" / "Luggage: n", a checkbox right); a
   chosen card is pink with a red border and a filled red checkbox; Clear All
   (outlined red) + Confirm (n) (filled red) stay at the bottom.
   Measured by tests/visual/specs/driver-signup-steps.spec.ts.
--------------------------------------------------------------------------- */
.gt-vs.gt-vs--page { margin: 0; text-align: left; }
.gt-vs--page .gt-vs-phead { margin: 0 0 14px; }
:is(#gt-vs-x, .gt-vs--page) h2.gt-vs-ptitle {
    margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; float: none !important;
    font-size: 22px !important; line-height: 1.25 !important; font-weight: 700 !important; color: var(--gt-vs-ink) !important;
    text-align: left !important; text-transform: none !important; letter-spacing: 0 !important;
}
.gt-vs--page h2.gt-vs-ptitle:focus { outline: none; }
.gt-vs--page .gt-vs-psub { margin: 0; font-size: 14px; line-height: 1.4; color: var(--gt-vs-soft); }
.gt-vs--page .gt-vs-tabs {
    display: flex; gap: 4px; margin: 0 0 14px; padding: 0; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--gt-vs-line);
}
.gt-vs--page .gt-vs-tabs::-webkit-scrollbar { display: none; }
:is(#gt-vs-x, .gt-vs--page) button.gt-vs-tab {
    position: relative; flex: 0 0 auto; min-height: 44px; margin: 0 !important; padding: 0 14px !important;
    border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    font: inherit; font-size: 13px !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important;
    color: var(--gt-vs-soft) !important; cursor: pointer; float: none !important; width: auto !important; margin-bottom: -1px !important;
}
:is(#gt-vs-x, .gt-vs--page) button.gt-vs-tab[aria-selected="true"] { color: var(--gt-vs-brand) !important; border-bottom-color: var(--gt-vs-brand) !important; }
.gt-vs--page .gt-vs-tab:focus-visible { outline: 2px solid var(--gt-vs-brand); outline-offset: -2px; }
.gt-vs--page .gt-vs-error { margin: 0 0 12px; }

.gt-vs--page .gt-vs-list { margin: 0; padding: 0; list-style: none; }
.gt-vs--page .gt-vs-list > li { margin: 0 0 12px; padding: 0; float: none; list-style: none; }
.gt-vs--page .gt-vs-empty { padding: 24px 8px; color: var(--gt-vs-soft); text-align: center; }
:is(#gt-vs-x, .gt-vs--page) button.gt-vs-opt {
    display: flex !important; align-items: center; gap: 14px; width: 100% !important; min-height: 88px; margin: 0 !important; padding: 14px !important;
    background: var(--gt-vs-surface) !important; border: 1px solid var(--gt-vs-line) !important; border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(20, 10, 10, .04) !important;
    color: var(--gt-vs-ink) !important; font: inherit; text-align: left !important; cursor: pointer; float: none !important;
    text-transform: none !important; letter-spacing: 0 !important; height: auto !important;
}
:is(#gt-vs-x, .gt-vs--page) button.gt-vs-opt:hover { border-color: var(--gt-vs-soft) !important; }
.gt-vs--page .gt-vs-opt:focus-visible { outline: 2px solid var(--gt-vs-brand); outline-offset: 2px; }
/* Chosen: a 2px brand border (1px less padding, so nothing moves) and the tint. */
:is(#gt-vs-x, .gt-vs--page) button.gt-vs-opt.is-on { border: 2px solid var(--gt-vs-brand) !important; padding: 13px !important; background: var(--gt-vs-tint) !important; }
.gt-vs--page .gt-vs-img {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 64px; height: 64px; border-radius: 14px; background: #F4F1F0; color: var(--gt-vs-soft); overflow: hidden;
}
.gt-vs--page .gt-vs-img img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.gt-vs--page .gt-vs-say { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.gt-vs--page .gt-vs-name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--gt-vs-ink); overflow-wrap: anywhere; }
.gt-vs--page .gt-vs-desc { font-size: 13.5px; line-height: 1.35; color: var(--gt-vs-soft); overflow-wrap: anywhere; }
.gt-vs--page .gt-vs-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; font-size: 13px; color: var(--gt-vs-soft); }
/* Task 194: a long fact ("Luggage: 3 small, 2 medium, 1 large") wraps onto more lines, never cut; when
   Capacity and Luggage do not fit side by side the row wraps them onto two lines. The icon keeps its
   size and sits on the first line. */
.gt-vs--page .gt-vs-fact { display: inline-flex; align-items: flex-start; gap: 5px; min-width: 0; max-width: 100%; font-variant-numeric: tabular-nums; }
.gt-vs--page .gt-vs-fact svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }
.gt-vs--page .gt-vs-fact-text { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 18px; }
.gt-vs--page .gt-vs-tick {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 24px; height: 24px; border: 1.5px solid #C9C1C0; border-radius: 6px; color: transparent; background: var(--gt-vs-surface);
}
.gt-vs--page .gt-vs-list[role="radiogroup"] .gt-vs-tick { border-radius: 999px; }
.gt-vs--page .gt-vs-opt.is-on .gt-vs-tick { border-color: var(--gt-vs-brand); background: var(--gt-vs-brand); color: var(--gt-vs-on-brand); }

.gt-vs--page .gt-vs-pfoot {
    position: sticky; bottom: 0; z-index: 5; display: flex; gap: 12px; margin: 4px -2px 0; padding: 12px 2px max(12px, env(safe-area-inset-bottom));
    background: var(--gt-vs-surface); box-shadow: 0 -10px 16px -12px rgba(20, 10, 10, .18);
}
:is(#gt-vs-x, .gt-vs--page) button.gt-vs-btn {
    display: inline-flex !important; align-items: center; justify-content: center; flex: 1 1 0; min-height: 52px; height: 52px; margin: 0 !important; padding: 0 16px !important;
    border-radius: 999px !important; font: inherit; font-size: 16px !important; line-height: 1 !important; font-weight: 600 !important;
    cursor: pointer; box-shadow: none !important; float: none !important; width: auto !important; text-transform: none !important; letter-spacing: 0 !important;
}
:is(#gt-vs-x, .gt-vs--page) button.gt-vs-btn--ghost { background: var(--gt-vs-surface) !important; border: 1.5px solid var(--gt-vs-brand) !important; color: var(--gt-vs-brand) !important; }
:is(#gt-vs-x, .gt-vs--page) button.gt-vs-btn--primary { background: var(--gt-vs-brand) !important; border: 1.5px solid var(--gt-vs-brand) !important; color: var(--gt-vs-on-brand) !important; }
.gt-vs--page .gt-vs-btn:disabled { opacity: .45; cursor: default; }
.gt-vs--page .gt-vs-btn:focus-visible { outline: 2px solid var(--gt-vs-brand); outline-offset: 2px; }