/* ==========================================================================
   SERVICE FLOW KIT (2026-10-29): private car, airport fast track, visa,
   transport and things to do. Prefix .sv-. Loads after flight-flow.css
   (--fx-* tokens, .fx-chip, .fx-steps, .fx-sheet) and hotel-flow.css (.hx-*
   cards, buttons, fields, bar). Macros: templates/partials/_sv.html.
   JS: static/js/hotel_flow.js + static/js/service_flow.js.
   Phone first (390), two columns from 900px. Light only, like the site.
   ========================================================================== */

/* --- Page frame --- */
body.sv-page { background: var(--fx-soft); }
.sv { --pad: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.sv-head { margin-bottom: 0; }
.sv-steps { margin: 0 calc(-1 * var(--hx-pad)) 12px; }
.sv-head + .sv-steps { border-top: 0; }
.sv-lead { margin: 4px 0 10px; }
.sv-h1 { margin: 6px 0 2px; font-weight: 800; color: var(--fx-ink); line-height: 1.25; }
.sv-section { margin: 18px 0 0; }
.sv-section > h2 { margin: 0 0 8px; font-weight: 800; }
.sv-grid { display: grid; gap: var(--hx-gap); }

/* --- Option cards (Choose) --- */
.sv-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: var(--hx-gap); }
.sv-opt { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.sv-opt[hidden] { display: none; }
.sv-opt.is-chosen { border-color: var(--fx-blue); box-shadow: 0 0 0 1px var(--fx-blue) inset; }
.sv-opt__media { background: var(--fx-soft); aspect-ratio: 16 / 9; overflow: hidden; }
.sv-opt__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-opt__media--art { display: flex; align-items: center; justify-content: center; padding: 12px 18px; aspect-ratio: 16 / 7; background: linear-gradient(180deg, #f3f6fb, #e8effd); }
.sv-opt__media--art img { object-fit: contain; }
.sv-opt__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--fx-blue-soft); color: var(--fx-blue); display: inline-flex; align-items: center; justify-content: center; margin: 12px 12px 0; }
.sv-opt__icon .hx-i { width: 26px; height: 26px; }
.sv-opt__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sv-opt__title { margin: 0; font-weight: 800; color: var(--fx-ink); line-height: 1.25; }
.sv-opt__sub { margin: 0; }
.sv-opt__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; border-top: 1px solid var(--fx-line); padding-top: 10px; margin-top: auto; }
.sv-opt__go { flex: none; }
.sv-price { display: flex; flex-direction: column; min-width: 0; }
.sv-price .fx-price { display: block; }
.sv-price small { display: block; }
.sv-free { color: var(--fx-ok) !important; }
.sv-ask { font-weight: 800; color: var(--fx-ink); }
.sv-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sv-facts li { display: flex; gap: 6px; align-items: flex-start; color: var(--fx-ink); }
.sv-facts .hx-i { color: var(--fx-ok); margin-top: 2px; }
.sv-mini-steps { margin: 0; padding: 0 0 0 18px; display: grid; gap: 2px; color: var(--fx-muted); }
.sv-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--fx-muted); }
.sv-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sv-small-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sv-small-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #fff; border: 1px dashed var(--fx-line); border-radius: 10px; color: var(--fx-muted); }

/* --- Request, empty and includes cards --- */
.sv-request { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 12px; align-items: start; margin-top: var(--hx-gap); }
.sv-request p { margin: 2px 0 0; }
.sv-request .hx-btn { grid-column: 1 / -1; }
.sv-request__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--fx-blue-soft); color: var(--fx-blue); display: inline-flex; align-items: center; justify-content: center; }
.sv-empty { display: grid; gap: 6px; justify-items: start; }
.sv-empty p { margin: 0; }
.sv-includes { margin-top: var(--hx-gap); display: grid; gap: 8px; }

/* --- How it works --- */
.sv-how__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-how__list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; }
.sv-how__list strong { display: block; }
.sv-how__list small { display: block; }
.sv-how__n { width: 28px; height: 28px; border-radius: 50%; background: var(--fx-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sv-trust { margin-top: 16px; }
.sv-aside .hx-trust { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.sv .hx-field input::placeholder, .sv .hx-field textarea::placeholder, .sv-form .hx-field input::placeholder { font-weight: 500; color: #8a93a3; }

/* --- Search sheet fields --- */
.sv-form { display: grid; gap: 8px; }
.sv-head .hx-head__open { background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; align-items: flex-start; }
.sv-head .hx-head__open b { max-width: 100%; }
.sv-head__h1 { margin: 0; font-size: inherit; font-weight: 800; line-height: 1.25; color: var(--fx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv .hx-field input, .sv .hx-field select, .sv .hx-field textarea,
.sv-form .hx-field input, .sv-form .hx-field select, .sv-form .hx-field textarea { border: 0; padding: 0; font: inherit; font-weight: 700; background: transparent; width: 100%; min-height: 26px; color: var(--fx-ink); }
.sv .hx-field select, .sv-form .hx-field select { appearance: auto; }
.sv .hx-field input:focus, .sv .hx-field select:focus, .sv .hx-field textarea:focus { outline: none; box-shadow: none; }
.sv .hx-field textarea, .sv-form .hx-field textarea { font-weight: 500; resize: vertical; }
.sv .hx-field:focus-within, .sv-form .hx-field:focus-within { border-color: var(--fx-blue); box-shadow: 0 0 0 1px var(--fx-blue) inset; }
.sv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sv-counter { border: 1px solid var(--fx-line); border-radius: 10px; padding: 6px 10px; background: #fff; }

/* --- Details step --- */
.sv-summary { display: flex; gap: 12px; padding: 10px; align-items: center; }
.sv-summary img { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; flex: none; }
.sv-summary__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-summary__copy b { line-height: 1.25; }
.sv-summary__copy a { color: var(--fx-blue); font-weight: 700; text-decoration: none; }
.sv-box { padding: 12px; display: grid; gap: 10px; margin-top: var(--hx-gap); }
.sv-box > h2 { margin: 0; font-weight: 800; }
.sv-box .hx-muted { margin: 0; }
.sv-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.sv-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--fx-blue); flex: none; }
.sv-radio { display: grid; gap: 8px; }
.sv-radio label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--fx-line); border-radius: 12px; cursor: pointer; background: #fff; }
.sv-radio label:has(input:checked) { border-color: var(--fx-blue); box-shadow: 0 0 0 1px var(--fx-blue) inset; }
.sv-radio input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--fx-blue); flex: none; }
.sv-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sv-lines li { display: flex; justify-content: space-between; gap: 12px; }
.sv-lines li span:last-child { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-lines .sv-lines__total { border-top: 1px solid var(--fx-line); padding-top: 8px; font-weight: 800; }
.sv-errs { margin: 0; padding: 0 0 0 18px; }
.sv-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sv-guarantee { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin-top: var(--hx-gap); background: var(--fx-ok-soft); border-color: transparent; color: var(--fx-ink); }
.sv-guarantee .hx-i { color: var(--fx-ok); width: 22px; height: 22px; }

/* --- Home pages: product strip, city cards, airport list --- */
.sv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sv-cards > a { display: flex; flex-direction: column; overflow: hidden; color: var(--fx-ink); text-decoration: none; }
.sv-cards img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--fx-soft); }
.sv-cards__copy { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.sv-cards__copy small { color: var(--fx-muted); }
.sv-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sv-rows a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--fx-line); border-radius: 12px; color: var(--fx-ink); text-decoration: none; }
.sv-rows a:hover { border-color: var(--fx-blue); }
.sv-rows small { color: var(--fx-muted); }
.sv-rows b.hx-num { color: var(--fx-blue); white-space: nowrap; }

/* --- Desktop --- */
@media (min-width: 900px) {
    .sv-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
    .sv-split > aside { position: sticky; top: 70px; display: grid; gap: var(--hx-gap); }
    .sv-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sv-opt--row { flex-direction: row; }
    .sv-opt--row .sv-opt__media { width: 260px; aspect-ratio: auto; flex: none; }
    .sv-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sv-rows--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-request { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    .sv-request .hx-btn { grid-column: auto; }
    .sv .hx-bar { position: sticky; }
}
@media (max-width: 360px) {
    .sv-opt__foot { flex-wrap: wrap; }
    .sv-opt__go { width: 100%; }
    .sv-two { grid-template-columns: 1fr; }
}