/* ==========================================================================
   VISA (service flow 2026-10-29): the /visa home (templates/travel/visa.html)
   and the Choose step (templates/travel/sv_choose_visa.html). Only what
   service-flow.css, hotel-flow.css and flight-flow.css do not have.
   Prefix .sv-v* / .sv-answer / .sv-dest / .sv-ways. Phone first, light only.
   ========================================================================== */

/* --- Home --- */
.sv-vhome { padding-bottom: 8px; }
.sv-vhome .tv-h2 { text-align: left; margin: 0; }
.sv-vhome .hx-sec { margin-top: 22px; }
.sv-vhome .hx-sec > .hx-row { align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.sv-vhome .hx-sec > h2 { margin-bottom: 8px; }

.sv-vcheck { padding: 14px; display: grid; gap: 10px; margin-top: 18px; }
.sv-vcheck__head p { margin: 4px 0 0; }
.sv-vcheck__form { display: grid; gap: 8px; }
.sv-vcheck .hx-field select, .sv-vcheck .hx-field input { border: 0; padding: 0; font: inherit; font-weight: 700; background: transparent; width: 100%; min-height: 26px; color: var(--fx-ink); min-width: 0; }
.sv-vcheck .hx-field:focus-within { border-color: var(--fx-blue); box-shadow: 0 0 0 1px var(--fx-blue) inset; }
.sv-vcheck .hx-field select:focus, .sv-vcheck .hx-field input:focus { outline: none; }

.sv-dest { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.sv-dest__card { padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sv-dest__top { display: flex; align-items: center; gap: 10px; }
.sv-dest__top .fx-tag { margin-left: auto; }
.sv-dest__ico, .sv-useful__ico { width: 40px; height: 40px; border-radius: 12px; background: var(--fx-blue-soft); color: var(--fx-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sv-dest__name { display: flex; flex-direction: column; min-width: 0; }
.sv-dest__name b { color: var(--fx-ink); }
.sv-dest__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sv-dest__facts li { display: flex; justify-content: space-between; gap: 10px; }
.sv-dest__facts b { color: var(--fx-ink); text-align: right; }
.sv-dest__by { margin: 0; }
.sv-dest__go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--fx-line); }
.sv-dest__link { display: inline-flex; align-items: center; gap: 6px; color: var(--fx-blue); font-weight: 700; text-decoration: none; min-height: 38px; }
.sv-dest__link:hover { text-decoration: underline; }

.sv-ways { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.sv-ways__card { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.sv-ways__card p { margin: 0; }
.sv-ways__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--fx-line); padding-top: 10px; margin-top: auto; }
.sv-vlaw { margin-top: var(--hx-gap); display: grid; gap: 6px; background: var(--fx-blue-soft); border-color: transparent; color: var(--fx-ink); }
.sv-vlaw p { margin: 0; }
.sv-vhome .sv-how { margin-top: 22px; }

.sv-vn__card { max-width: none; display: grid; gap: 10px; }
.sv-vn__card > p { margin: 0; }
.sv-vn__card .tp-check__answer { margin: 0; border-left-color: var(--fx-blue); background: var(--fx-blue-soft); border-radius: 10px; }
.sv-vn__card .tp-check__answer--free { border-left-color: var(--fx-ok); background: var(--fx-ok-soft); }
.sv-vn__card .tp-check__list { margin-top: 0; }
.sv-vn__card .tv-fine { margin: 0; overflow-wrap: anywhere; }
.sv-vn__scroll { overflow-x: auto; }
.sv-vn__card .tp-table--fees { max-width: 720px; }
.sv-vn__card .tp-table--fees th, .sv-vn__card .tp-table--fees td { padding: 6px 4px; }
.sv-vn__go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* --- Choose: the answer --- */
.sv-answer { display: flex; gap: 12px; padding: 14px; margin-top: 10px; align-items: flex-start; }
.sv-answer__ico { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--fx-blue); color: #fff; }
.sv-answer__body { min-width: 0; flex: 1; display: grid; gap: 6px; }
.sv-answer__title { margin: 0; font-weight: 800; color: var(--fx-ink); line-height: 1.25; }
.sv-answer__text, .sv-answer__also { margin: 0; }
.sv-answer--need { background: var(--fx-blue-soft); border-color: #c9d8fa; }
.sv-answer--free { background: var(--fx-ok-soft); border-color: #bfe0cc; }
.sv-answer--free .sv-answer__ico { background: var(--fx-ok); }
.sv-answer--free .sv-answer__title, .sv-answer--free .sv-answer__also b { color: var(--fx-ok); }
.sv-answer--unknown .sv-answer__ico { background: #f0f2f5; color: var(--fx-muted); }
.sv-answer__facts { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.sv-answer__facts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 8px 10px; background: #fff; border-radius: 10px; }
.sv-answer__facts b { color: var(--fx-ink); text-align: right; }
.sv-answer__facts small { grid-column: 1 / -1; }
.sv-answer__portal { display: inline-flex; align-items: center; gap: 6px; color: var(--fx-blue-deep); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; min-height: 32px; }
.sv-answer__portal:hover { text-decoration: underline; }
.sv-answer__pick { display: grid; gap: 8px; margin-top: 4px; }
.sv-answer__pick .hx-field select { border: 0; padding: 0; font: inherit; font-weight: 700; background: transparent; width: 100%; min-height: 26px; color: var(--fx-ink); appearance: auto; }

.sv-vh2 { margin: 20px 0 0; font-weight: 800; color: var(--fx-ink); }
.sv-vlines { margin-top: 2px; padding: 8px 10px; background: var(--fx-soft); border-radius: 10px; color: var(--fx-muted); }
.sv-vlines li span:last-child { color: var(--fx-ink); }
.sv-vnote { margin: 10px 0 0; }
.sv-vnote a { color: var(--fx-blue); font-weight: 700; }
.sv-useful { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sv-useful > li > * { display: flex; gap: 12px; align-items: center; padding: 10px 12px; color: var(--fx-ink); text-decoration: none; }
.sv-useful > li > a:hover { border-color: var(--fx-blue); }
.sv-useful span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sv-vseg span { padding: 0 10px; }
.sv-vgood ul { margin: 6px 0 0; padding: 0 0 0 18px; display: grid; gap: 4px; color: var(--fx-muted); }
.sv-vdisc { margin: 0; }
.sv-aside .to-disclosures { margin: 0; }
.sv-choose .sv-aside { display: grid; gap: var(--hx-gap); margin-top: 18px; }
.sv-choose .sv-aside .sv-includes, .sv-choose .sv-aside .sv-trust { margin-top: 0; }

/* --- Wider screens --- */
@media (min-width: 600px) {
    .sv-dest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-vcheck__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-vcheck__form .hx-btn { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
    .sv-vcheck { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .sv-vcheck__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: stretch; }
    .sv-vcheck__form .hx-btn { grid-column: auto; }
    .sv-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sv-useful { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sv-useful > li > * { height: 100%; }
}
@media (min-width: 900px) {
    .sv-dest { grid-template-columns: 1fr; }
    .sv-dest__card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; grid-template-areas: "top facts go" "by facts go"; gap: 4px 20px; align-items: center; padding: 14px 16px; }
    .sv-dest__top { grid-area: top; }
    .sv-dest__by { grid-area: by; padding-left: 50px; }
    .sv-dest__facts { grid-area: facts; }
    .sv-dest__go { grid-area: go; flex-direction: column; align-items: stretch; border-top: 0; padding-top: 0; margin: 0; gap: 2px; }
    .sv-dest__go .sv-dest__link { justify-content: center; }
}

/* --- 2026-10-30: every passport, all of Asia and East Africa --- */
.sv-vpromise { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sv-vpromise > li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; }
.sv-vpromise > li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sv-vpromise b { color: var(--fx-ink); }
.sv-vpromise__ico { width: 40px; height: 40px; border-radius: 12px; background: var(--fx-blue-soft); color: var(--fx-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }

.sv-vpop { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sv-vpop__card { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-decoration: none; color: var(--fx-ink); height: 100%; }
.sv-vpop__card:hover { border-color: var(--fx-blue); }
.sv-vpop__card img, .sv-vpop__blank { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.sv-vpop__blank { display: flex; align-items: center; justify-content: center; font-size: 44px; background: var(--fx-blue-soft); }
.sv-vpop__name { padding: 8px 10px; font-weight: 800; overflow-wrap: anywhere; }

.sv-vall { display: grid; gap: 8px; margin-top: 8px; }
.sv-vall__region h3 { margin: 0 0 6px; font-size: 1rem; color: var(--fx-ink); }
.sv-vall__region ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.sv-vall__region a { display: flex; gap: 6px; align-items: center; min-height: 36px; color: var(--fx-blue-deep, var(--fx-blue)); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.sv-vall__region a:hover { text-decoration: underline; }

.sv-vtable-wrap { padding: 0; overflow-x: auto; margin-top: 8px; }
.sv-vtable { width: 100%; border-collapse: collapse; font-size: .95em; }
.sv-vtable th, .sv-vtable td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--fx-line); vertical-align: top; }
.sv-vtable thead th { color: var(--fx-muted); font-weight: 700; background: var(--fx-soft); }
.sv-vtable tbody th { font-weight: 700; color: var(--fx-ink); white-space: nowrap; }
.sv-vtable td a { color: var(--fx-blue); font-weight: 800; text-decoration: none; white-space: nowrap; }
.sv-vtable td a:hover { text-decoration: underline; }
.sv-vtable tr[data-need="free"] td:nth-child(2) { color: var(--fx-ok); font-weight: 700; }

.sv-answer__src { display: block; }
.sv-vlines small { color: var(--fx-muted); font-weight: 400; }
.sv-vbook h2 { display: flex; align-items: center; gap: 6px; }
.sv-vbook .sv-mini-steps { margin: 0 0 10px; }
.sv-vconsent { display: grid; gap: 8px; margin: 6px 0 8px; }
.sv-vconsent .sv-check { align-items: flex-start; }
.sv-vconsent .sv-check input { margin-top: 3px; flex: none; }
.sv-vcountry .sv-dest { margin-top: 8px; }

@media (min-width: 600px) {
    .sv-vpromise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sv-vpop { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sv-vall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .sv-vhome .sv-vcheck__form { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .7fr) auto; }
    .sv-vcountry .sv-vcheck__form { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .7fr) auto; }
    .sv-vpop { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .sv-vall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sv-vall__region ul { grid-template-columns: 1fr 1fr; }
}

/* Legal lines (partials/_visa_legal.html) */
.sv-vgov { display: grid; gap: 2px; padding: 10px 12px; margin-top: 10px; background: #fff8e6; border-color: #f1d9a0; color: var(--fx-ink); }
.sv-vgov a { color: var(--fx-blue-deep, var(--fx-blue)); font-weight: 700; overflow-wrap: anywhere; }
.sv-vterms { margin: 6px 0 0; font-size: .92em; color: var(--fx-muted); }
.sv-vterms b { color: var(--fx-ink); }
.sv-vbook .sv-vgov { margin: 0 0 10px; }

/* The "we price it for you" line has one span: let it wrap (it pushed the aside off screen). */
.sv-book .sv-lines li span:only-child { white-space: normal; }