/* THE VEHICLE PART OF A GUIDE'S TRIP (12 Nov 2026). A service card that opens and closes, the last part of the
   itinerary. Every value is taken from the real service card on the trip page (measured 12 Nov 2026): card border
   1px #E8E8EE, radius 11px, grey left bar like the airport service, 44px tile, 10.5px capital label, 15px/700 title,
   12.5px location line, pill chips. Photos are 16:9 everywhere. */
.sstv { display: block; background: #fff; border: 1px solid #E8E8EE; border-radius: 11px; margin: 16px 0 11px;
    box-shadow: 0 1px 2px rgba(20,20,30,.04); font-family: 'Google Sans', system-ui, -apple-system, sans-serif; color: #1A1A1D;
    position: relative; overflow: hidden; }
/* THE LEFT STRIPE, exactly as the real service cards draw it (measured 12 Nov 2026 on the airport service card): a
   straight 4px bar from top to bottom, cut only by the card's own rounded corner. My first version was a shadow that
   bent along the corner; Chiran saw the difference. */
.sstv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #5B5B73; border-radius: 0; }
.sstv > summary { list-style: none; cursor: pointer; }
.sstv > summary::-webkit-details-marker { display: none; }
.sstv .sstv-head { display: flex; align-items: center; gap: 13px; padding: 12px 14px 12px 18px; }
.sstv .sstv-chev { flex: none; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid #DCDCD9; border-radius: 7px; color: #5B5B73; display: grid; place-items: center; }
.sstv .sstv-chev svg { width: 14px; height: 14px; transition: transform .15s ease; }
.sstv[open] .sstv-chev svg { transform: rotate(180deg); }
.sstv .sstv-tile { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #F1F1F5; color: #5B5B73; display: grid; place-items: center; }
.sstv .sstv-tile svg { width: 24px; height: 24px; }
.sstv .sstv-titles { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sstv .sstv-label { line-height: 1.5; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5B5B73; }
.sstv .sstv-title { font-size: 15px; font-weight: 700; color: #090902; line-height: 1.3; }
.sstv .sstv-sub { font-size: 12.5px; color: #6A6A73; line-height: 1.45; }
.sstv .sstv-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #3A3A40; background: #fff; border: 1px solid #DCDCD9; border-radius: 999px; padding: 5px 11px; }
.sstv .sstv-chip svg { width: 15px; height: 15px; }
.sstv .sstv-body { padding: 4px 16px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sstv .sstv-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6A6A73; }
.sstv .sstv-caprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.sstv .sstv-navs { display: inline-flex; gap: 6px; }
/* two-class selectors + a reset: the parent theme paints every bare button gold */
.sstv .sstv-navs button.sstv-nav { all: unset; box-sizing: border-box; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #CDB3FF; background: #fff; color: #7700FF; display: grid; place-items: center; }
.sstv .sstv-navs button.sstv-nav:hover { background: #F6F0FF; }
.sstv .sstv-navs button.sstv-nav:focus-visible { outline: 2px solid #7700FF; outline-offset: 2px; }
.sstv .sstv-navs button.sstv-nav[disabled] { opacity: .35; cursor: default; }
.sstv .sstv-navs button.sstv-nav svg { width: 16px; height: 16px; }
.sstv .sstv-fleet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }   /* 3 in a row (12 Nov 2026) */
/* more than 3 vehicles: one row that slides, 3 in view (2 on a phone), moved by the arrows or by a finger */
.sstv .sstv-fleet--slide { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.sstv .sstv-fleet--slide::-webkit-scrollbar { display: none; }
.sstv .sstv-fleet--slide .sstv-veh { flex: 0 0 calc((100% - 20px) / 3); scroll-snap-align: start; box-sizing: border-box; }
.sstv .sstv-veh { background: #F7F7FA; border: 1px solid #EFEDF5; border-radius: 12px; padding: 10px 12px; min-width: 0; }
.sstv .sstv-veh__name { font-size: 14px; font-weight: 700; color: #090920; margin-top: 8px; }
.sstv .sstv-veh__meta { font-size: 12.5px; color: #6A6A73; margin: 2px 0 6px; }
.sstv .sstv-veh__line { font-size: 12.5px; color: #3A3A40; }
.sstv .sstv-photo { display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; border-radius: 8px; overflow: hidden; background: #ECECF1; font-size: 11px; color: #6A6A73; text-align: center; }
.sstv .sstv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sstv .sstv-wait { font-size: 12.5px; color: #3A3A40; background: #FAF6FF; border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.sstv .sstv-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12.5px; color: #6A6A73; line-height: 1.5; }
.sstv a.sstv-link { flex: none; height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 700; color: #5A00C8; background: #fff; border: 1px solid #D9C6FF; border-radius: 999px; padding: 0 15px; text-decoration: none; }
.sstv a.sstv-link:hover { background: #F6F0FF; }
@media (max-width: 782px) {
    .sstv .sstv-head { flex-wrap: wrap; padding: 12px; }
    .sstv .sstv-titles { flex: 1 1 calc(100% - 100px); }
    .sstv .sstv-fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sstv .sstv-fleet--slide .sstv-veh { flex-basis: calc((100% - 10px) / 2); }
    .sstv .sstv-foot { flex-direction: column; align-items: flex-start; }
    .sstv .sstv-body { padding: 4px 12px 14px; }
}

/* ---- the trip page: the vehicles this group is offered ---- */
.sstv--trip { margin-top: 16px; }
.sstv .sstv-intro { font-size: 13px; color: #3A3A40; line-height: 1.5; }
.sstv .sstv-choices { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sstv .sstv-choices--1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sstv .sstv-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* two-class selectors + a reset: the parent theme paints every bare button gold */
/* !important on the box values: the trip page restyles every button inside the itinerary (padding 0, square corners) */
.sstv .sstv-choices button.sstv-choice { all: unset; box-sizing: border-box !important; cursor: pointer; display: flex !important; flex-direction: column; gap: 8px; padding: 12px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid #E8E8EE !important; min-width: 0; font-family: inherit; text-align: left; color: #1A1A1D; height: auto !important; width: auto !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; }
.sstv .sstv-choices button.sstv-choice:hover { border-color: #CDB3FF !important; }
.sstv .sstv-choices button.sstv-choice:focus-visible { outline: 2px solid #7700FF; outline-offset: 2px; }
.sstv .sstv-choices button.sstv-choice.is-on { border: 2px solid #7700FF !important; background: #FAF6FF !important; padding: 11px !important; }
.sstv .sstv-choice__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sstv .sstv-choice__name { font-size: 15px; font-weight: 700; color: #090902; }
.sstv .sstv-badge { font-size: 11.5px; font-weight: 700; color: #1F7A00; background: #EAF7E5; border-radius: 999px; padding: 3px 10px; }
.sstv .sstv-choice__meta { font-size: 12.5px; color: #6A6A73; }
.sstv .sstv-choice__price { font-size: 13px; font-weight: 600; color: #090920; }
.sstv .sstv-choice__price.is-in { color: #1F7A00; }
.sstv .sstv-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sstv .sstv-later { font-size: 12.5px; color: #6A6A73; line-height: 1.5; }
@media (max-width: 782px) {
    .sstv .sstv-choices, .sstv .sstv-choices--3 { grid-template-columns: minmax(0, 1fr); }
    .sstv .sstv-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* who drives, the distance of the trip and each vehicle's charge (Chiran, 12 Nov 2026) */
.sstv .sstv-tripline { font-size: 12.5px; color: #3A3A40; line-height: 1.5; }
.sstv .sstv-veh__who { font-weight: 600; color: #090920; }
.sstv .sstv-veh__sum { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E3E3EA; font-size: 12.5px; color: #3A3A40; line-height: 1.6; }
.sstv .sstv-veh__total { font-weight: 700; color: #090920; }
.sstv .sstv-choice__who { font-size: 12.5px; color: #3A3A40; }

/* The details of each vehicle box on the trip page (Chiran, 12 Nov 2026: "not quite catchy... add icons"). The
   border and the photo stay; below the photo: the name, the model, 2 facts with icons from the canonical sheet,
   and a price row. */
.sstv .sstv-choice__name { font-size: 16px; }
.sstv .sstv-choice__meta { margin-top: -4px; }
.sstv .sstv-facts { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.sstv .sstv-fact { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3A3A40; line-height: 1.3; }
.sstv .sstv-fact__i { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #F4F3F8; color: #5B5B73; display: grid; place-items: center; }
.sstv .sstv-fact__i svg { width: 15px; height: 15px; }
.sstv .sstv-choice.is-on .sstv-fact__i { background: #EDE3FF; color: #5A00C8; }
.sstv .sstv-pay { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed #E3E3EA; }
.sstv .sstv-pay__l { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6A6A73; }
.sstv .sstv-pay__v { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #090920; white-space: nowrap; }
.sstv .sstv-pay.is-in .sstv-pay__l { color: #5A00C8; }
.sstv .sstv-pay.is-in .sstv-pay__v { font-size: 13px; color: #1F7A00; }
.sstv .sstv-pay__i { display: inline-grid; place-items: center; color: #30B300; }
.sstv .sstv-pay__i svg { width: 16px; height: 16px; }
.sstv .sstv-choice__row { min-height: 30px; }   /* the same height with or without the "Suggested" badge, so the 3 boxes line up */

/* ---- the request page: the vehicle this booking carries; after the deposit the plate and the front and back ---- */
.sstv--request { margin-top: 16px; }
.sstv .sstv-chip--ok { color: #1F7A00; background: #EAF7E5; border-color: #EAF7E5; }
.sstv .sstv-strip--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sstv .sstv-plate { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #F7F7FA; border: 1px solid #EFEDF5; border-radius: 12px; padding: 12px 14px; }
.sstv .sstv-plate > span { display: flex; flex-direction: column; gap: 3px; }
.sstv .sstv-plate__hint { font-size: 12.5px; color: #6A6A73; }
.sstv .sstv-plate strong { font-size: 20px; font-weight: 700; letter-spacing: .08em; color: #090920; }
@media (max-width: 782px) { .sstv .sstv-strip--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the guide changes the vehicle of a request */
.sstv .sstv-change { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px dashed #E3E3EA; }
.sstv .sstv-change[data-busy] .sstv-picks { pointer-events: none; }
.sstv .sstv-change[data-busy] .sstv-pick:not(.is-on) { opacity: .55 !important; }

/* The guide's choice on the request page (Chiran, 12 Nov 2026, his screenshot of the builder card): the same card as
   in the builder. Photo on top (16:9), then the vehicle, then the details one under the other. ONE row of 3 cards;
   every card has the same fixed width whether there is 1, 2 or 3 (1 sits left, 2 sit left and middle); a 4th and a
   5th are reached with the arrows or a finger. The vehicle on the trip: violet border, filled radio dot. */
.sstv .sstv-change { position: relative; border-top: 0; padding-top: 0; padding-bottom: 12px; border-bottom: 1px dashed #E3E3EA; }
.sstv .sstv-navs--picks { position: absolute; right: 0; top: -6px; }
.sstv .sstv-picks { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px; margin: -2px; }
.sstv .sstv-picks::-webkit-scrollbar { display: none; }
.sstv .sstv-picks button.sstv-pick { all: unset; box-sizing: border-box !important; flex: 0 0 calc((100% - 24px) / 3) !important; width: calc((100% - 24px) / 3) !important; min-width: 0; scroll-snap-align: start; cursor: pointer; display: flex !important; flex-direction: column; gap: 6px; padding: 12px !important; border-radius: 12px !important; background: #F7F7FA !important; border: 1px solid #EFEDF5 !important; font-family: inherit; text-align: left; color: #1A1A1D; height: auto !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; opacity: 1 !important; }
.sstv .sstv-picks button.sstv-pick:hover { border-color: #CDB3FF !important; }
.sstv .sstv-picks button.sstv-pick:focus-visible { outline: 2px solid #7700FF; outline-offset: 2px; }
.sstv .sstv-picks button.sstv-pick.is-on { border: 2px solid #7700FF !important; background: #FAF6FF !important; padding: 11px !important; cursor: default; }
.sstv .sstv-pick .sstv-photo { margin-bottom: 4px; }
.sstv .sstv-pick .sstv-choice__name { font-size: 14px; }
.sstv .sstv-pick .sstv-choice__row { min-height: 22px; }
.sstv .sstv-pick__meta { font-size: 12.5px; color: #6A6A73; }
.sstv .sstv-pick__who { font-size: 12.5px; font-weight: 600; color: #090920; margin-top: 4px; }
.sstv .sstv-pick__line { font-size: 12.5px; color: #3A3A40; }
.sstv .sstv-pick__sum { display: flex; flex-direction: column; margin-top: 6px; padding-top: 8px; border-top: 1px dashed #E3E3EA; font-size: 12.5px; color: #3A3A40; line-height: 1.6; }
.sstv .sstv-pick__sum strong { font-weight: 700; color: #090920; }
.sstv .sstv-pick__state { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 700; color: #5A00C8; }
.sstv .sstv-pick.is-on .sstv-pick__state { color: #1F7A00; }
.sstv .sstv-radio { flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 2px solid #C9C9D6; background: #fff; }
.sstv .sstv-pick.is-on .sstv-radio { border-color: #7700FF; background: radial-gradient(circle, #7700FF 0 5px, #fff 6px); }
@media (max-width: 782px) {
    .sstv .sstv-picks button.sstv-pick { flex-basis: 78% !important; width: 78% !important; }
    .sstv .sstv-navs--picks { position: static; align-self: flex-end; }
}

/* A vehicle that is no longer right for the booking: said to the guide and Sarisara's team only. Light purple, never yellow. */
.sstv .sstv-flag { margin: 0 20px 14px; padding: 11px 14px; border-radius: 10px; background: #F3EBFF; color: #090920; font-size: 13.5px; line-height: 1.5; border-left: 3px solid #FF0A1F; }
.sstv .sstv-chip.sstv-chip--flag { background: #F3EBFF; color: #FF0A1F; }