/* Vehicle-selection step components (.vsel-*).
 *
 * EXTRACTED 18 Aug 2026 from an inline <style> in pages/booking-process.php.
 * It moved because a SECOND page now needs the same components: the shuttle
 * funnel's departures step at /booking-shuttle, which sells a seat on a
 * departure the way this step sells a vehicle. Two funnels rendering the
 * same product must not be two designs, and a copy of 270 lines of CSS is
 * how they become two.
 *
 * Byte-identical to the block it replaces: the transfer flow renders exactly
 * as before (t5-regression + the browser rigs re-run to prove it). Callers
 * load it with:
 *   <link rel="stylesheet" href="<?php echo assetVersion('/assets/css/sections/vehicle_select.css'); ?>">
 *
 * Anything shuttle-only belongs in shuttle_page.css, NOT here.
 */

/* Vehicle-selection step - wide rows + reused summary (matches the checkout flow) */
.vsel-list { display: flex; flex-direction: column; gap: 12px; }
.vsel-row { display: flex; align-items: center; gap: 16px; padding: 16px; background: #fff; border: 1px solid #e5ebf1; border-radius: 14px; cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s; user-select: none; }
.vsel-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.vsel-row:hover:not(.vsel-row-selected) { border-color: #d9e2e9; box-shadow: 0 8px 28px rgba(0,0,0,.08); }
/* Selected row sits on a light grey so the choice reads at a glance, not white like its siblings (owner, 6 Sep 2026). */
.vsel-row-selected { background: #f4f6f8; border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.vsel-thumb { flex-shrink: 0; width: 150px; height: 100px; border-radius: 12px; background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vsel-thumb img { width: 100%; height: 100%; object-fit: contain; }
.vsel-thumb-ph { width: 60%; color: #9ca3af; }
.vsel-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vsel-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* Operator's large-party note ("or 2 vans"): sits beside the name, muted, and is
   only rendered when the party reaches the class's configured threshold. */
.vsel-altnote { font-size: 12px; font-weight: 600; color: #6b7280; white-space: nowrap; }
.vsel-name { font-size: 19.5px; font-weight: 700; color: #192024; line-height: 1.1; }
.vsel-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: 2px 7px 2px 5px; border-radius: 999px; white-space: nowrap; background: #eef1f4; color: #5a6872; }
.vsel-badge svg { width: 10px; height: 10px; flex-shrink: 0; }
.vsel-badge--best_value { background: #e7f6ec; color: #1f8a44; }
.vsel-badge--popular { background: #fdecec; color: #d32933; }
.vsel-badge--recommended { background: #fdf3e0; color: #b7791f; }
/* Prezzi concordati (8 Sep 2026): the signed-in customer's own agreed figure on this class */
.vsel-badge--agreed { background: #192024; color: #fff; }
.vsel-specs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 11px; color: #374151; font-size: 15px; font-weight: 600; }
.vsel-spec { display: inline-flex; align-items: center; gap: 4px; }
.vsel-spec svg { width: 21px; height: 21px; flex-shrink: 0; color: #4b5563; }
/* No vertical offset: the row is align-items:center, so the (?) lines up with the
   21px passenger/luggage icons on its own. A `top` nudge dropped it below them. */
.vsel-info-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 21px; height: 21px; border: none; background: none; color: #808b99; cursor: pointer; flex-shrink: 0; transition: color .15s; }
.vsel-info-btn:hover { color: var(--color-primary); }
.vsel-info-btn svg { width: 18px; height: 18px; display: block; }
.vsel-models { font-size: 12.5px; color: #6b7280; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vsel-price { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.vsel-price-strike { font-size: 13px; color: #d32933; text-decoration: line-through; }
.vsel-price-final { font-size: 21px; font-weight: 700; color: #192024; line-height: 1.1; }
.vsel-price-cap { font-size: 12px; color: #9ca3af; }
.vsel-price-promo { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #e7f6ec; color: #1f8a44; white-space: nowrap; }
.vsel-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d9e2e9; display: flex; align-items: center; justify-content: center; color: #fff; transition: background .15s, border-color .15s; }
.vsel-check svg { width: 13px; height: 13px; opacity: 0; transition: opacity .15s; }
.vsel-row-selected .vsel-check { background: var(--color-primary); border-color: var(--color-primary); }
.vsel-row-selected .vsel-check svg { opacity: 1; }
.vsel-empty { text-align: center; color: #5a6872; padding: 36px 0; font-size: 14px; }
.vsel-error { display: none; color: #b91c1c; margin-top: 14px; font-size: 13px; }
.vsel-error.show { display: block; }
/* Compact continue button (sticky bars + details modal): dark, not pure black,
   with an internal shadow for depth. */
.vsel-continue { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border: none; border-radius: 11px; background: linear-gradient(120deg, #22262c 0%, #3d454f 50%, #22262c 100%); background-size: 220% 100%; background-position: 0% 50%; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 9px rgba(0,0,0,.42), 0 2px 6px rgba(16,24,40,.16); transition: background-position .6s ease, box-shadow .2s ease, opacity .15s; }
.vsel-continue:hover { background-position: 100% 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -3px 10px rgba(0,0,0,.45), 0 5px 14px rgba(16,24,40,.24); }
.vsel-continue:disabled { opacity: .55; cursor: default; }
#card-vehicle-summary .scard-trust-pills { margin: 16px 0 0; }
#card-vehicle-summary .scard-body { padding-bottom: 14px; }
.scard-pax-pill { display: inline-flex; align-items: center; gap: 5px; }
.scard-pax-pill svg { flex-shrink: 0; opacity: .85; }
/* Trust pills are clickable → open a short "what is this" explainer modal. */
.scard-pill-btn { background: none; font-family: inherit; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.scard-pill-btn:hover { border-color: #192024; color: #192024; background: #f7f9fb; }
.vsel-svc-overlay { position: fixed; inset: 0; z-index: 1250; background: rgba(15,23,42,.5); display: none; align-items: center; justify-content: center; padding: 20px; }
.vsel-svc-overlay.is-open { display: flex; }
.vsel-svc { position: relative; background: #fff; border-radius: 18px; width: 100%; max-width: 460px; padding: 26px 28px 28px; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.vsel-svc-ico { width: 48px; height: 48px; border-radius: 13px; background: #eef1f4; color: #262b30; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.vsel-svc-ico svg { width: 26px; height: 26px; }
.vsel-svc-title { font-size: 20px; font-weight: 800; color: #111827; margin: 0 0 9px; letter-spacing: -.01em; }
.vsel-svc-x { position: absolute; top: 16px; right: 16px; background: none; border: none; color: #9aa4b0; cursor: pointer; padding: 4px; line-height: 0; border-radius: 8px; transition: color .15s, background .15s; }
.vsel-svc-x:hover { color: #111827; background: #f1f3f5; }
.vsel-svc-desc { font-size: 15px; color: #4a5568; line-height: 1.6; margin: 0; }
/* The whole right column sticks as one block while the taller vehicle list scrolls. */
.vsel-step .booking-sidebar-column { position: sticky; top: 16px; align-self: start; }
/* Sticky bars share this layout: left = your choice, right = compact Continue */
.vsel-choice { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 11px; }
.vsel-choice-car { flex: 0 0 auto; display: inline-flex; color: #262b30; }
.vsel-choice-car svg { display: block; }
.vsel-choice-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.vsel-choice-cap { font-size: 12.5px; font-weight: 600; color: #8a97a5; letter-spacing: .01em; }
.vsel-choice-name { font-size: 17px; font-weight: 800; color: #192024; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The mobile bottom bar is the SHARED .bkbar component (CSS in booking_process.css,
   which is loaded on this step too) - no step-specific bar styles live here. */
/* Free-cancellation reassurance banner under the vehicle list (narrow mobile only). */
.vsel-cancel-banner { display: none; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 13px 15px; background: #e9f8ef; border: 1px solid #b7e4c7; border-radius: 12px; }
.vsel-cancel-banner-ico { flex: 0 0 auto; color: #1f9d55; margin-top: 1px; }
.vsel-cancel-banner-ico svg { width: 24px; height: 24px; display: block; }
.vsel-cancel-banner-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vsel-cancel-banner-title { font-size: 14.5px; font-weight: 800; color: #15803d; letter-spacing: -.01em; }
.vsel-cancel-banner-desc { font-size: 13px; color: #217a47; line-height: 1.45; }
/* Static WhatsApp button (replaces the suppressed float on this step). Full-width
   under the free-cancellation banner, with a hairline separator above it. Brand
   green so it still reads as WhatsApp, but as a real button in the flow. */
/* Centred hairline, ~50% wide, fading to transparent at both ends (not a solid
   full-width rule). */
.vsel-wa-sep { height: 1px; width: 85%; margin: 18px auto 16px; background: linear-gradient(90deg, transparent, #d5dde4 50%, transparent); }
.vsel-wa-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 18px; border-radius: 12px; background: #25D366; color: #fff; text-decoration: none; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; box-shadow: 0 2px 8px rgba(37,211,102,.28); transition: background .15s, box-shadow .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.vsel-wa-btn:hover, .vsel-wa-btn:focus-visible { background: #1ebe5a; color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,.38); transform: translateY(-1px); }
.vsel-wa-btn:focus-visible { outline: 3px solid rgba(37,211,102,.5); outline-offset: 2px; }
.vsel-wa-ico { width: 22px; height: 22px; flex-shrink: 0; display: block; }
.vsel-wa-legal { margin: 15px 0 0; text-align: center; font-size: 11.5px; line-height: 1.4; color: #9aa4b0; }
/* Desktop uses the normal bottom-right WhatsApp float; the in-column button is
   mobile-only. The legal line stays on both: mobile shows the short name + VAT
   variant, desktop the one with the company address. */
.vsel-wa-legal-full { display: none; }
@media (min-width: 992px) {
    .vsel-wa-legal-short { display: none; }
    .vsel-wa-legal-full { display: inline; }
    .vsel-wa-sep, .vsel-wa-btn { display: none; }
    /* The generic .booking-page 120px bottom cushion reads as a pointless empty
       gap under the legal line here (no fixed bar on desktop): trim it. */
    .vsel-step { padding-bottom: 28px; }
}
/* Backdrop for the mobile "Price & route" bottom sheet (#vselMSheet). The
   bkms component CSS itself lives in booking_process.css; it is SHARED with the
   checkout step, which renders the same design on its own sheet. */
.vsel-sheet-backdrop { position: fixed; inset: 0; z-index: 310; background: rgba(15,23,42,.5); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.vsel-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
/* No desktop hide: the backdrop also serves the edit-search modal there. */
/* ── Mobile view (≤991px = the single-column, 100%-width layout) ──
   The sidebar is NEVER shown in flow here: the purpose-built #vselMSheet above
   replaces it, the bar stacks ([Total | Price & route] over a full-width
   Continue), and the free-cancellation reassurance moves to the green banner
   under the vehicles. */
@media (max-width: 991px) {
    /* Clear the fixed bottom bar (stacked Total+route over a full-width Continue)
       PLUS a comfortable gap, so the last content (the WhatsApp button + legal
       line) can scroll fully clear of the bar. 132px only just reached the bar,
       which read as the page "stopping" a little short before it would scroll the
       rest. env() adds the iOS home-indicator inset on top. */
    .vsel-step { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
    .vsel-desk-barwrap { display: none; }
    /* Passenger spec drops the "Up to" label on mobile - just the number + icon, like bags. */
    .vsel-spec-lbl { display: none; }
    /* Cap the mobile layout at 700px and centre it (requirement: never wider than 700). */
    .vsel-step .booking-layout { max-width: 700px; margin-left: auto; margin-right: auto; }
    /* Bottom bar is the shared .bkbar (shown at ≤991px by booking_process.css). */
    /* Free-cancellation banner replaces the sidebar cancellation card. */
    .vsel-cancel-banner { display: flex; }
    /* Desktop sidebar is fully replaced by the #vselMSheet bottom sheet. */
    .vsel-step .booking-sidebar-column { display: none; }
}
@media (max-width: 600px) {
    .vsel-row { gap: 11px; padding: 12px; }
    /* Smaller vehicle thumb on phones so the name/specs get the room. */
    .vsel-thumb { width: 76px; height: 50px; }
    /* Name shrinks and is kept to ONE line (ellipsis) - at the desktop 19.5px it
       wrapped "Berlina Economy" onto two lines and pushed the row tall. The badge,
       if any, wraps to the next line under it rather than forcing the name to wrap. */
    .vsel-name { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    /* Phones: the badge leaves the name line and drops UNDER the specs (owner, 6 Sep
       2026). .vsel-name-row dissolves (display: contents) so name, note, badge, specs
       and models are direct children of the .vsel-info column and can be reordered. */
    .vsel-name-row { display: contents; }
    .vsel-specs { order: 1; }
    .vsel-badge { order: 2; align-self: flex-start; margin-top: 1px; }
    .vsel-models { order: 3; }
    .vsel-specs { font-size: 13.5px; gap: 4px 9px; }
    .vsel-spec svg { width: 18px; height: 18px; }
    /* Price: prominent (owner request 24 Jul 2026) but with a smaller caption so
       the row still reads name-first. */
    .vsel-price-final { font-size: 21px; font-weight: 700; }
    .vsel-price-cap { font-size: 11px; }
    /* Compact mobile rows: keep the pax/luggage specs, hide only the models list. */
    .vsel-models { display: none; }
    /* The selected row is already shown by its highlighted border - drop the check circle. */
    .vsel-check { display: none; }
}
/* The left column is a grid track: without min-width:0 it refuses to shrink below
   its content, so the full-bleed (100vw) map forces the track wider than the
   viewport → horizontal scroll + broken left/right gutters. This keeps the track
   at the container width while the map still bleeds edge-to-edge. */
.vsel-step .booking-form-column { min-width: 0; }
.vsel-map-card { position: relative; width: 100%; margin-bottom: 16px; border-radius: 14px; overflow: hidden; border: 1px solid #e5ebf1; background: #eef1f4; box-shadow: 0 1px 3px rgba(16,24,40,0.05); }
/* High-demand hot badge (top-left of the map): pops in, flickers, then auto-collapses
   to just the flame; hovering expands it back. */
.vsel-demand { position: absolute; top: 12px; left: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 7px; max-width: 280px; padding: 7px 12px 7px 9px; background: linear-gradient(135deg, #ff7a18, #ff2d55); color: #fff; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; cursor: default; user-select: none; box-shadow: 0 6px 18px rgba(255,45,85,.38), inset 0 1px 0 rgba(255,255,255,.28); opacity: 0; transition: max-width .45s ease, padding .45s ease, gap .45s ease, box-shadow .3s ease; }
/* Appear together WITH the map (when the card is marked ready), not before it. */
.vsel-map-card.vsel-map-ready .vsel-demand { animation: vselDemandPop .5s cubic-bezier(.2,1.35,.4,1) forwards; }
.vsel-demand-ico { flex: 0 0 auto; display: inline-flex; }
.vsel-demand-ico svg { display: block; width: 16px; height: 16px; transform-origin: 50% 85%; animation: vselFlame 1.5s ease-in-out infinite; }
.vsel-demand-txt { overflow: hidden; text-overflow: ellipsis; max-width: 240px; opacity: 1; transition: max-width .45s ease, opacity .35s ease; }
.vsel-demand.collapsed { max-width: 38px; padding: 7px; gap: 0; }
.vsel-demand.collapsed .vsel-demand-txt { max-width: 0; opacity: 0; }
.vsel-demand.collapsed:hover { max-width: 280px; padding: 7px 12px 7px 9px; gap: 7px; }
.vsel-demand.collapsed:hover .vsel-demand-txt { max-width: 240px; opacity: 1; }
/* JS moves the pill to the bottom-left corner when a pick-up/drop-off map card
   would overlap it at top-left (the corner is picked by measured overlap). */
.vsel-demand--bottom { top: auto; bottom: 12px; }
.vsel-map-card.vsel-map-ready .vsel-demand--bottom { animation-name: vselDemandPopUp; }
@keyframes vselDemandPop { 0% { opacity: 0; transform: translateY(-9px) scale(.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes vselDemandPopUp { 0% { opacity: 0; transform: translateY(9px) scale(.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes vselFlame { 0%,100% { transform: scale(1) rotate(0); } 32% { transform: scale(1.14) rotate(-4deg); } 64% { transform: scale(.95) rotate(3deg); } }
/* Mobile: break the map out of the container's side padding so it runs edge-to-edge
   (more width = more room for the cards), and drop the top gap so it meets the navbar.
   Desktop keeps the padded, rounded card with its normal top spacing. */
@media (max-width: 600px) {
    .vsel-step { padding-top: 0; }
    .vsel-map-card { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); border-radius: 0; border-left: 0; border-right: 0; }
}
/* Hidden until the fit + card-clamp settle, so the user never sees the zoom
   correction - it fades in already at the final position. Still has layout/size
   at opacity 0, so Google Maps renders + projects normally underneath. */
.vsel-map { width: 100%; height: 360px; opacity: 0; transition: opacity .35s ease; }
.vsel-map.vsel-map-ready { opacity: 1; }
/* Taller on mobile so the reserved top/bottom padding (≈22% of height) is enough
   room for the cards - 240px was too short and forced vertical clipping. */
@media (max-width: 600px) { .vsel-map { height: 300px; } }
/* Accepted payment methods row (under the last sidebar card). Rendered greyscale
   and slightly dimmed so it reads as a quiet trust cue, not a colourful banner. */
.vsel-paywrap { padding: 8px 6px 2px; }
.vsel-paylogos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.vsel-paylogos .pay-ic { height: 24px; width: auto; display: block; filter: grayscale(1); opacity: .55; }
/* Sticky action bar in the left (vehicle) column: your choice + continue (desktop).
   The wrapper is the sticky element, filled with the page background colour so
   vehicle cards scrolling underneath are fully hidden (not peeking through). The
   floating pill carries a soft elevation shadow instead of a fade gradient. */
.vsel-desk-barwrap { position: sticky; bottom: 0; z-index: 20; margin-top: 10px; padding: 12px 0 14px; background: #f1f3f5; }
.vsel-desk-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; border: 1px solid #e5ebf1; border-radius: 14px; box-shadow: 0 6px 22px rgba(16,24,40,0.16), 0 2px 6px rgba(16,24,40,0.08); }
.vsel-desk-bar .vsel-continue { flex: 0 0 auto; width: 350px; max-width: 60%; height: 50px; font-size: 16px; }
/* Pick up / drop-off info cards drawn on the map (Google Maps OverlayView).
   Positioned by JS: the div is centred (translate -50%,-50%) on a point pushed
   outward from the route, so the card never sits over the route line. */
.vsel-mk-wrap { position: absolute; pointer-events: none; z-index: 5; }
.vsel-mk { display: flex; align-items: stretch; background: #fff; border-radius: 12px; box-shadow: 0 5px 18px rgba(16,24,40,0.22); overflow: hidden; max-width: 100%; }
.vsel-mk-body { padding: 7px 11px; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.vsel-mk-label { font-size: 10.5px; font-weight: 600; color: #98a2b3; }
.vsel-mk-place { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1d2430; line-height: 1.2; min-width: 0; }
.vsel-mk-place svg { width: 15px; height: 15px; flex: 0 0 auto; }
.vsel-mk-place span { white-space: nowrap; }
.vsel-mk-time { display: flex; align-items: center; justify-content: center; padding: 0 13px; font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; flex: 0 0 auto; }
/* Card max-width is set per-card in JS (= reserved side padding − margin), so the
   card can never be wider than the room fitBounds left for it. Mobile only tunes type. */
@media (max-width: 600px) {
    .vsel-mk { border-radius: 10px; }
    .vsel-mk-body { padding: 5px 9px; }
    .vsel-mk-label { font-size: 9px; }
    .vsel-mk-place { font-size: 11px; gap: 5px; }
    .vsel-mk-place svg { width: 13px; height: 13px; }
    .vsel-mk-time { font-size: 11.5px; padding: 0 9px; }
}
/* A card whose full address is longer than the shown line becomes tappable. The
   card wrap is pointer-events:none so it never blocks the map; re-enable it just
   for the tappable card so the tap registers. */
.vsel-mk--tappable { pointer-events: auto; cursor: pointer; }
/* Full-address bubble (fixed + body-anchored, so it is never clipped by the map). */
.vsel-mk-tip { position: fixed; z-index: 12000; max-width: min(280px, 86vw); padding: 9px 12px; background: #1d2430; color: #fff; border-radius: 9px; font-size: 12.5px; font-weight: 600; line-height: 1.4; box-shadow: 0 8px 24px rgba(16,24,40,.28); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
.vsel-mk-tip.is-open { opacity: 1; transform: translateY(0); }
/* Caret pointing back to the card. Sits at the card's centre (JS sets --caret-x)
   and flips to the top edge when the bubble has been placed below the card. */
.vsel-mk-tip::after { content: ''; position: absolute; left: var(--caret-x, 50%); transform: translateX(-50%); width: 0; height: 0; border: 6px solid transparent; }
.vsel-mk-tip:not(.vsel-mk-tip--below)::after { top: 100%; border-top-color: #1d2430; }
.vsel-mk-tip--below::after { bottom: 100%; border-bottom-color: #1d2430; }

/* ── Vehicle details modal ─────────────────────────────────────────────── */
.vsel-details-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(15,23,42,.5); display: none; align-items: center; justify-content: center; padding: 20px; }
.vsel-details-overlay.is-open { display: flex; }
.vsel-details { background: #fff; border-radius: 18px; width: 100%; max-width: 460px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.vsel-details-scroll { overflow-y: auto; padding: 26px 30px 8px; }
.vsel-details-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vsel-details-title { font-size: 30px; font-weight: 800; color: #111827; margin: 0; letter-spacing: -.01em; }
.vsel-details-x { background: none; border: none; color: #111827; cursor: pointer; padding: 4px; line-height: 0; }
.vsel-details-x svg { width: 24px; height: 24px; }
.vsel-details-class { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.vsel-details-classname { font-size: 18px; font-weight: 800; color: #111827; }
.vsel-details-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 3px 10px 3px 8px; border-radius: 999px; background: #eef1f4; color: #5a6872; }
.vsel-details-badge svg { width: 13px; height: 13px; }
.vsel-details-badge:empty { display: none; }
.vsel-details-badge.vsel-badge--best_value { background: #e7f6ec; color: #1f8a44; }
.vsel-details-badge.vsel-badge--popular { background: #fdecec; color: #d32933; }
.vsel-details-badge.vsel-badge--recommended { background: #fdf3e0; color: #b7791f; }
.vsel-details-hr { border: none; border-top: 1px solid #eef1f4; margin: 18px 0; }
.vsel-details-h { font-size: 17px; font-weight: 800; color: #111827; margin: 22px 0 12px; }
.vsel-details-h:first-of-type { margin-top: 0; }
.vsel-details-list, .vsel-details-incl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vsel-details-list li, .vsel-details-incl li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: #4a5568; line-height: 1.35; }
.vsel-details-list li svg, .vsel-details-incl li svg { width: 20px; height: 20px; flex-shrink: 0; color: #7a8798; margin-top: 1px; }
.vsel-details-incl li svg { color: #1f8a44; }
.vsel-details-prices { display: flex; flex-direction: column; }
.vsel-details-prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 17px; color: #4a5568; border-top: 1px solid #eef1f4; }
.vsel-details-prow:first-child { border-top: none; }
.vsel-details-prow span:last-child { font-weight: 700; color: #111827; white-space: nowrap; }
.vsel-details-total span { font-weight: 800 !important; }
.vsel-details-foot { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid #eef1f4; }
.vsel-details-close-btn { flex: 1 1 auto; height: 48px; border: 1px solid #cfd6dd; border-radius: 12px; background: #fff; color: #111827; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s; }
.vsel-details-close-btn:hover { background: #f7f9fb; }
.vsel-details-foot .vsel-continue { flex: 1 1 auto; height: 48px; }
.vsel-details-foot.only-close .vsel-continue { display: none; }
.vsel-details-foot.only-close .vsel-details-close-btn { flex: 1 1 100%; }
@media (max-width: 600px) { .vsel-details-scroll { padding: 22px 20px 6px; } .vsel-details-title { font-size: 26px; } }