/* ============================================================
   Vietnam tour detail page.

   Colours, radii and fonts all come from the tokens in 20.sondax-common.css.
   Nothing here invents a colour.

   The one rule in this file that exists because of a real failure is
   `min-width: 0` on the grid children. A horizontal hotel strip inside a `1fr`
   grid column pushed the whole page out to 1131px on a phone: `overflow-x: auto`
   could not contain it, because a `1fr` track takes the min-content width of what
   is inside it as its floor, and a row of 235px cards has a large min-content.
   Setting min-width: 0 lets the track shrink and the strip scroll on its own.
   ============================================================ */

/* ---- layout ---------------------------------------------------------- */
.st-vt-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; padding-top: 16px; }
/* Every grid child, or the widest block inside decides the page width. */
.st-vt-layout > * { min-width: 0; }

.st-vt-crumb { font-size: 0.8125rem; color: var(--color-muted); padding-top: 16px; }
.st-vt-crumb a { color: var(--color-muted); }
.st-vt-title { font-size: clamp(1.7rem, 2.9vw, 2.5rem); line-height: 1.22; margin: 10px 0 8px; }

/* The route under the H1: Hanoi . Ba Vi . Halong Bay. Built from the days, so it
   says where the tour actually goes rather than what someone typed. */
.st-vt-route { font-size: 0.9375rem; color: var(--color-secondary); font-weight: 600; margin-bottom: 8px; }
.st-vt-route span { color: var(--color-border); margin: 0 6px; font-weight: 400; }
.st-vt-lead { font-size: 0.9375rem; line-height: 1.7; color: var(--color-muted); max-width: 70ch; margin-bottom: 18px; }

/* ---- gallery --------------------------------------------------------- */
.st-vt-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; }
.st-vt-gallery > * { min-width: 0; }
.st-vt-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); }
/* A tour with one photograph gets the whole width for it rather than a main image beside
   two empty tiles; with two, the single side tile is full height instead of half. The
   markup only ever holds photographs that exist, so these two are all the shapes there are. */
.st-vt-gallery-solo { grid-template-columns: 1fr; }
.st-vt-gal-main { height: 380px; }
.st-vt-gal-side { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; height: 380px; }
.st-vt-gal-side-one { grid-template-rows: 1fr; }
.st-vt-gal-side > a { position: relative; min-height: 0; }
.st-vt-gal-more { position: absolute; inset: 0; background: rgba(6,41,91,.55); color: #fff; display: flex;
                  align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; }

/* ---- fact bar -------------------------------------------------------- */
.st-vt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0;
               background: var(--color-card); border: 1px solid var(--color-border); border-top: 0; }
.st-vt-facts > div { padding: 13px 16px; border-right: 1px solid var(--color-border); min-width: 0; }
.st-vt-facts > div:last-child { border-right: 0; }
.st-vt-facts dt { font-size: 0.6875rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.st-vt-facts dd { margin: 3px 0 0; font-size: 0.875rem; font-weight: 600; }

/* ---- anchor nav ------------------------------------------------------ */
/* Scrolls sideways rather than wrapping to three lines on a phone. */
.st-vt-nav { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
             border-bottom: 1px solid var(--color-border); margin-top: 26px; }
.st-vt-nav::-webkit-scrollbar { display: none; }
.st-vt-nav a { padding: 12px 18px; font-size: 0.875rem; font-weight: 600; color: var(--color-muted);
               white-space: nowrap; text-decoration: none; border-bottom: 3px solid transparent; }
.st-vt-nav a:hover { color: var(--color-secondary); border-bottom-color: var(--color-border); }

/* ---- sections -------------------------------------------------------- */
/* Every block is a white panel on the grey page, which is how TourRadar reads and what
   section.blk does in the mockup. The airport, day tour, workshop and transfer pages use
   flat sections divided by a hairline instead; that is deliberate, not an oversight. Those
   pages are one long article and the hairline keeps them reading as one. A tour page is
   nine unrelated blocks - itinerary, hotels, transport, price, FAQ - that a reader skips
   between rather than reads through, and a panel is what tells them where one stops. */
.st-vt-section { background: var(--color-card); border: 1px solid var(--color-border);
                 padding: 20px 24px; margin-bottom: 16px; }
.st-vt-section-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 16px; }
.st-vt-section-title::before { content: ''; display: block; width: 34px; height: 3px;
                               background: var(--color-accent); margin-bottom: 12px; }

/* ---- itinerary ------------------------------------------------------- */
/* <details> rather than a JS accordion, so every day's text is in the HTML the
   crawler receives whether it is open or shut. A 20-day tour loaded by script
   would be 19 days of content nobody but a browser ever sees. */
.st-vt-day { border: 1px solid var(--color-border); background: var(--color-card); margin-bottom: 8px; }
.st-vt-day > summary { padding: 14px 16px; cursor: pointer; display: flex; gap: 12px; align-items: baseline;
                       list-style: none; font-weight: 600; flex-wrap: wrap; }
.st-vt-day > summary::-webkit-details-marker { display: none; }
.st-vt-daynum { background: var(--color-secondary); color: #fff; font-size: 0.6875rem; font-weight: 700;
                padding: 3px 10px; white-space: nowrap; border-radius: var(--radius); }
.st-vt-daybody { padding: 14px 16px 16px; border-top: 1px solid var(--color-border); }
.st-vt-daymeta { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 0.8125rem; margin: 12px 0 0; }
.st-vt-daymeta div { display: flex; gap: 6px; }
.st-vt-daymeta dt { color: var(--color-muted); margin: 0; }
.st-vt-daymeta dd { margin: 0; font-weight: 500; }
.st-vt-expand { margin-bottom: 12px; }

/* ---- hotels ---------------------------------------------------------- */
.st-vt-hotels { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px;
                scroll-snap-type: x mandatory; min-width: 0; max-width: 100%; }
.st-vt-hotel { flex: 0 0 240px; scroll-snap-align: start; border: 1px solid var(--color-border);
               background: var(--color-card); }
.st-vt-hotel[open] { flex: 0 0 340px; }
.st-vt-hotel > summary { list-style: none; cursor: pointer; }
.st-vt-hotel > summary::-webkit-details-marker { display: none; }
.st-vt-hotel img { width: 100%; height: 140px; object-fit: cover; display: block; }
.st-vt-hotel-meta { padding: 12px 14px; }
.st-vt-hotel-name { font-weight: 700; font-size: 0.875rem; margin: 0 0 3px; }
.st-vt-hotel-sub { font-size: 0.75rem; color: var(--color-muted); margin: 0; }
.st-vt-nights { display: inline-block; margin-top: 8px; font-size: 0.6875rem; background: var(--color-muted-bg);
                border: 1px solid var(--color-border); padding: 2px 8px; border-radius: var(--radius); }
.st-vt-hotel-open { border-top: 1px solid var(--color-border); padding: 12px 14px; font-size: 0.8125rem; }
.st-vt-hotel-open ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; }
.st-vt-hotel-open li { margin-bottom: 4px; }

/* ---- transport, related ---------------------------------------------- */
.st-vt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.st-vt-grid > * { min-width: 0; }
.st-vt-card { border: 1px solid var(--color-border); padding: 14px 16px; background: var(--color-card); }
.st-vt-card b { display: block; margin-bottom: 4px; }
.st-vt-card span { font-size: 0.8125rem; color: var(--color-muted); }
.st-vt-note { font-size: 0.8125rem; color: var(--color-muted); margin-top: 12px; }

/* ---- included / not included ----------------------------------------- */
.st-vt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.st-vt-two > * { min-width: 0; }
.st-vt-tick, .st-vt-cross { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
.st-vt-tick li, .st-vt-cross li { padding-left: 24px; position: relative; margin-bottom: 7px; line-height: 1.6; }
.st-vt-tick li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-success); font-weight: 700; }
.st-vt-cross li::before { content: '\00D7'; position: absolute; left: 0; color: var(--color-muted); font-weight: 700; }

/* ---- TourRadar ------------------------------------------------------- */
.st-vt-radar { background: var(--color-muted-bg); border-left: 3px solid var(--color-accent);
               padding: 16px 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.st-vt-radar p { margin: 0; font-size: 0.875rem; flex: 1; min-width: 240px; }

/* ---- trust ----------------------------------------------------------- */
.st-vt-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.st-vt-trust > div { font-size: 0.8125rem; color: var(--color-muted); min-width: 0; }
.st-vt-trust b { display: block; font-size: 0.875rem; color: var(--color-text); margin-bottom: 3px; }

/* ---- FAQ ------------------------------------------------------------- */
.st-vt-faq { border: 1px solid var(--color-border); background: var(--color-card); }
.st-vt-faq + .st-vt-faq { margin-top: 8px; }
.st-vt-faq > summary { list-style: none; cursor: pointer; padding: 15px 50px 15px 18px; position: relative;
                       font-weight: 700; font-size: 0.9375rem; }
.st-vt-faq > summary::-webkit-details-marker { display: none; }
.st-vt-faq > summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px;
                              margin-top: -6px; border-right: 2px solid var(--color-secondary);
                              border-bottom: 2px solid var(--color-secondary); transform: rotate(45deg); }
.st-vt-faq[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.st-vt-faq-a { padding: 0 18px 16px; font-size: 0.875rem; color: var(--color-muted); line-height: 1.75; }

/* ---- booking box ----------------------------------------------------- */
/* 88px, not 20px, and not by taste: .st-header is position:fixed and 68px tall, so a box
   pinned at 20px parks its first 48px underneath the header, which paints over it at
   z-index 1000. 88px is the offset .st-booking-card already uses for the same reason. */
.st-vt-book { background: var(--color-card); border: 1px solid var(--color-border); padding: 20px;
              position: sticky; top: 88px; }
.st-vt-from { font-size: 0.75rem; color: var(--color-muted); }
.st-vt-price { font-size: 1.75rem; font-weight: 800; color: var(--color-secondary); line-height: 1.1; }
.st-vt-basis { font-size: 0.75rem; color: var(--color-muted); margin-bottom: 14px; }
.st-vt-row { display: flex; justify-content: space-between; padding: 8px 0;
             border-bottom: 1px solid var(--color-border); font-size: 0.875rem; }
.st-vt-row:last-of-type { border-bottom: 0; }
.st-vt-deposit { background: var(--color-muted-bg); border: 1px solid var(--color-border); padding: 9px 12px;
                 font-size: 0.8125rem; margin: 12px 0; text-align: center; }
.st-vt-book .st-btn { width: 100%; justify-content: center; }
.st-vt-book .st-btn + .st-btn { margin-top: 9px; }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 959px) {
    /* The price has to be above the reading, not a screen below it. */
    .st-vt-layout { grid-template-columns: 1fr; gap: 20px; }
    .st-vt-layout > aside { order: -1; }
    .st-vt-book { position: static; }
}
@media (max-width: 768px) {
    .st-vt-gallery { grid-template-columns: 1fr; }
    .st-vt-gal-main { height: 220px; }
    .st-vt-gal-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; height: 110px; }
    .st-vt-gal-side-one { grid-template-columns: 1fr; }
    .st-vt-section { padding: 16px 15px; margin-bottom: 13px; }
    .st-vt-section-title { font-size: 1.125rem; margin-bottom: 14px; }
    .st-vt-section-title::before { width: 28px; margin-bottom: 11px; }
    .st-vt-two { grid-template-columns: 1fr; gap: 18px; }
    .st-vt-hotel { flex: 0 0 215px; }
    .st-vt-hotel[open] { flex: 0 0 280px; }
}

/* ============================================================
   Category page, /vietnam-tours.

   Same two rules as above: every colour is a token from 20.sondax-common.css, and every
   grid child carries min-width: 0 so a long destination string cannot push the page wider
   than the screen.
   ============================================================ */

.st-vt-cols { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; padding-top: 16px; }
.st-vt-cols > * { min-width: 0; }

.st-vt-cat-title { font-size: clamp(1.7rem, 2.9vw, 2.3rem); line-height: 1.25; margin: 10px 0 6px; }
.st-vt-cat-lede { color: var(--color-muted); max-width: 72ch; margin-bottom: 4px; font-size: 0.9375rem; line-height: 1.7; }

/* Copy below the list, never above it: someone who came for tours should meet tours first. */
.st-vt-cat-seo { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--color-border);
                 max-width: 72ch; font-size: 0.9375rem; line-height: 1.75; }

/* ---- filter column --------------------------------------------------- */
.st-vt-filters { position: sticky; top: 88px; }   /* clears the fixed header; see .st-vt-book */
.st-vt-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 13px; }
.st-vt-chip { background: var(--color-card); border: 1px solid var(--color-border);
              padding: 5px 11px; font-size: 0.8125rem; border-radius: var(--radius); }
.st-vt-chip b { color: var(--color-secondary); }

.st-vt-fdrawer { border: 0; background: none; margin-bottom: 13px; }
/* Opened by the script on a wide screen; the summary is the button on a phone. */
.st-vt-fsum { display: none; }

.st-vt-fbox { background: var(--color-card); border: 1px solid var(--color-border);
              padding: 14px 16px; margin-bottom: 13px; }
.st-vt-fhead { font-size: 0.8125rem; margin: 0 0 9px; text-transform: uppercase;
               letter-spacing: .04em; color: var(--color-muted); font-weight: 700; }

/* An option is a link that behaves as a checkbox, so filtering needs no script at all.
   The square is drawn here rather than being a real input, because a real input inside a
   link is not clickable in any useful way. */
.st-vt-fopt { display: flex; align-items: center; gap: 9px; padding: 5px 0;
              font-size: 0.8125rem; text-decoration: none; color: var(--color-text); }
.st-vt-fopt:hover .st-vt-fname { color: var(--color-secondary); }
.st-vt-fbox-mark { flex: 0 0 15px; width: 15px; height: 15px; border: 1px solid var(--color-border);
                   background: var(--color-card); border-radius: var(--radius); position: relative; }
.st-vt-fopt.on .st-vt-fbox-mark { background: var(--color-secondary); border-color: var(--color-secondary); }
.st-vt-fopt.on .st-vt-fbox-mark::after { content: ''; position: absolute; left: 4px; top: 1px;
                   width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.st-vt-fname { flex: 1; min-width: 0; }
.st-vt-fopt.on .st-vt-fname { font-weight: 600; }
.st-vt-fcount { color: var(--color-muted); font-size: 0.75rem; }
.st-vt-clear { margin: 0 0 13px; font-size: 0.8125rem; }

/* ---- sort bar -------------------------------------------------------- */
/* Scrolls sideways rather than wrapping to two lines on a phone. */
.st-vt-sort { display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 13px;
              scrollbar-width: none; -ms-overflow-style: none; }
.st-vt-sort::-webkit-scrollbar { display: none; }
.st-vt-sortopt { background: var(--color-card); border: 1px solid var(--color-border);
                 padding: 5px 11px; font-size: 0.8125rem; border-radius: var(--radius);
                 text-decoration: none; color: var(--color-muted); white-space: nowrap; }
.st-vt-sortopt.on { color: var(--color-secondary); font-weight: 700; border-color: var(--color-secondary); }

/* ---- tour card ------------------------------------------------------- */
.st-vt-tcard { background: var(--color-card); border: 1px solid var(--color-border);
              display: grid; grid-template-columns: 250px 1fr 180px; margin-bottom: 13px; }
/* A tour with no photograph yet renders two children, not three. Without this the grid
   still holds the 250px image column open, so the text drops into it and the price block
   takes the wide one - the card reads as broken rather than as merely unillustrated. */
.st-vt-tcard-noimg { grid-template-columns: 1fr 180px; }
.st-vt-tcard > * { min-width: 0; }
.st-vt-card-img { display: block; min-height: 160px; }
.st-vt-card-img img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; display: block; }
.st-vt-card-body { padding: 15px 17px; }
.st-vt-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.st-vt-badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 2px 8px;
               border-radius: var(--radius); background: var(--color-muted-bg);
               color: var(--color-muted); border: 1px solid var(--color-border); }
.st-vt-card-title { font-size: 1.0625rem; margin: 0 0 9px; line-height: 1.35; }
.st-vt-card-title a { text-decoration: none; color: var(--color-text); }
.st-vt-card-title a:hover { color: var(--color-secondary); }
.st-vt-card-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: 0.8125rem; }
.st-vt-card-meta div { display: flex; gap: 6px; min-width: 0; }
.st-vt-card-meta dt { color: var(--color-muted); margin: 0; }
.st-vt-card-meta dd { margin: 0; font-weight: 500; overflow-wrap: break-word; }
.st-vt-card-price { border-left: 1px solid var(--color-border); padding: 15px;
                    display: flex; flex-direction: column; justify-content: center;
                    align-items: flex-start; gap: 3px; }
.st-vt-card-from { font-size: 0.71875rem; color: var(--color-muted); }
.st-vt-card-amount { font-size: 1.4375rem; font-weight: 800; color: var(--color-secondary); line-height: 1.1; }
.st-vt-card-unit { font-size: 0.71875rem; color: var(--color-muted); margin-bottom: 8px; }
.st-vt-card-price .st-btn { width: 100%; justify-content: center; }

.st-vt-empty { background: var(--color-card); border: 1px solid var(--color-border);
               padding: 26px 20px; text-align: center; color: var(--color-muted); }

/* ---- closing CTA ----------------------------------------------------- */
.st-vt-cta { background: var(--color-muted-bg); border-left: 3px solid var(--color-accent);
             padding: 20px 22px; margin-top: 20px; }
.st-vt-cta h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 8px; }
.st-vt-cta p { margin: 0 0 14px; font-size: 0.875rem; max-width: 62ch; }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 959px) {
    .st-vt-cols { grid-template-columns: 1fr; gap: 15px; }
    .st-vt-filters { position: static; }
    /* The drawer is shut by default here and is opened by its own summary. */
    .st-vt-fsum { display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer;
                  background: var(--color-secondary); color: #fff; padding: 11px 15px;
                  font-size: 0.875rem; font-weight: 600; border-radius: var(--radius); }
    .st-vt-fsum::-webkit-details-marker { display: none; }
    .st-vt-caret { margin-left: auto; font-size: 0.6875rem; }
    .st-vt-fdrawer[open] .st-vt-fsum { margin-bottom: 11px; }
    /* A finger is not a mouse pointer. The filter rows and the sort pills are 31 and 33px
       tall on the desktop sidebar, which is dense but fine to click; on a touch screen they
       are the two things on this page a reader taps most, so give them 44. */
    .st-vt-fopt { min-height: 44px; }
    .st-vt-sortopt { display: flex; align-items: center; min-height: 44px; }
}
@media (max-width: 800px) {
    .st-vt-tcard { grid-template-columns: 1fr; }
    .st-vt-card-img, .st-vt-card-img img { min-height: 150px; }
    .st-vt-card-price { border-left: 0; border-top: 1px solid var(--color-border); }
}

/* ============================================================
   Booking form and the page after it.

   Same rules again: colours are tokens, grid children carry min-width: 0. The one thing
   here that only exists for phones is .st-vt-mbar, the price pinned to the bottom of the
   screen. On a phone the summary sits a screen below the form, so without it the reader
   changes the party size and never sees the total move.
   ============================================================ */

.st-vt-steps { display: flex; gap: 0; margin: 14px 0 0; font-size: 0.8125rem;
               flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.st-vt-steps::-webkit-scrollbar { display: none; }
.st-vt-steps span { padding: 7px 15px; background: var(--color-card); border: 1px solid var(--color-border);
                    border-right: 0; color: var(--color-muted); white-space: nowrap; }
.st-vt-steps span:last-child { border-right: 1px solid var(--color-border); }
.st-vt-steps span.on { background: var(--color-secondary); color: #fff;
                       border-color: var(--color-secondary); font-weight: 600; }

/* ---- form fields ------------------------------------------------------ */
.st-vt-field { margin-bottom: 13px; }
.st-vt-lbl { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 5px; }
.st-vt-req { color: var(--color-accent-dark, var(--color-accent)); font-weight: 700; }
.st-vt-inp { width: 100%; padding: 9px 11px; border: 1px solid var(--color-border);
             background: var(--color-card); color: var(--color-text);
             font-family: inherit; font-size: 0.875rem; border-radius: var(--radius); }
textarea.st-vt-inp { resize: vertical; }

/* The two date fields, with the rule between them stated once and visibly. */
.st-vt-either { border: 2px solid var(--color-accent); background: var(--color-muted-bg);
                padding: 14px 15px; margin-bottom: 14px; }
.st-vt-either-head { margin: 0 0 10px; font-size: 0.875rem; font-weight: 700; }
.st-vt-or { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--color-muted);
            text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 10px; }
.st-vt-err { color: #b3261e; font-size: 0.8125rem; font-weight: 600; margin: 0 0 10px; }

/* ---- extras ----------------------------------------------------------- */
.st-vt-extra { display: flex; gap: 11px; align-items: flex-start; flex-wrap: wrap;
               border: 1px solid var(--color-border); background: var(--color-card);
               padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.st-vt-extra input { margin: 3px 0 0; accent-color: var(--color-secondary); }
.st-vt-extra-text { flex: 1; min-width: 180px; font-size: 0.875rem; }
.st-vt-extra-text b { display: block; }
.st-vt-extra-text span { color: var(--color-muted); font-size: 0.8125rem; }
.st-vt-extra-px { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }

.st-vt-ctarow { display: flex; gap: 11px; flex-wrap: wrap; }
.st-vt-ctarow .st-btn { flex: 1; min-width: 210px; justify-content: center; }

/* ---- the quote -------------------------------------------------------- */
.st-vt-quote-img { width: 100%; height: 110px; object-fit: cover; display: block; margin-bottom: 12px; }
.st-vt-quote-name { display: block; font-size: 0.90625rem; line-height: 1.35; margin-bottom: 4px; }
.st-vt-quote-sub { font-size: 0.8125rem; color: var(--color-muted); margin: 0 0 11px; }
.st-vt-total { display: flex; justify-content: space-between; padding: 11px 0 0; margin-top: 7px;
               border-top: 2px solid var(--color-secondary); font-size: 1rem; font-weight: 700; }
.st-vt-quote-note { font-size: 0.8125rem; color: var(--color-muted); margin-top: 9px; }
.st-vt-quote-tick { margin-top: 13px; font-size: 0.8125rem; }
.st-vt-muted { color: var(--color-muted); font-weight: 400; }
.st-vt-summary { position: static; }

/* ---- price bar pinned to the bottom of a phone screen ----------------- */
.st-vt-mbar { display: none; }
@media (max-width: 959px) {
    .st-vt-mbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
                  background: var(--color-card); border-top: 2px solid var(--color-secondary);
                  padding: 9px 14px; padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
                  box-shadow: 0 -4px 14px rgba(6, 41, 91, .13); }
    .st-vt-mbar-in { display: flex; gap: 11px; align-items: center; max-width: 640px; margin: 0 auto; }
    .st-vt-mtot { font-size: 0.71875rem; line-height: 1.3; color: var(--color-muted); white-space: nowrap; }
    .st-vt-mtot b { display: block; font-size: 1.0625rem; color: var(--color-secondary); }
    .st-vt-mbar .st-btn { flex: 1; padding: 10px 12px; font-size: 0.8125rem; justify-content: center;
                          min-height: 44px; }
    /* Room for the bar, so it never covers the last field. Added by script, because with
       no script there is no bar to make room for. */
    body.st-vt-hasbar { padding-bottom: 88px; }
    /* 16px stops iOS zooming the page in when a field is focused; 44px is the height
       that makes a field, and the select's own drop-down, easy to hit with a thumb. */
    .st-vt-inp { font-size: 16px; min-height: 44px; }
}

/* ---- confirmation ----------------------------------------------------- */
.st-vt-okhero { background: var(--color-card); border: 1px solid var(--color-border);
                border-top: 4px solid var(--color-success); padding: 30px; text-align: center;
                margin-top: 14px; }
.st-vt-okmark { width: 46px; height: 46px; border-radius: 50%; background: var(--color-success);
                color: #fff; font-size: 1.5rem; line-height: 46px; margin: 0 auto 12px; }
.st-vt-okhero h1 { font-size: clamp(1.3rem, 2.4vw, 1.625rem); margin: 0 0 8px; line-height: 1.3; }
.st-vt-reflabel { font-size: 0.8125rem; color: var(--color-muted); margin: 14px 0 6px; }
.st-vt-refbox { display: inline-block; background: var(--color-muted-bg);
                border: 1px dashed var(--color-border); padding: 9px 19px;
                font-family: ui-monospace, Menlo, monospace; font-size: 0.9375rem; font-weight: 700; }

.st-vt-nextlist { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.st-vt-nextlist li { counter-increment: s; padding-left: 38px; position: relative;
                     margin-bottom: 14px; font-size: 0.875rem; color: var(--color-muted); }
.st-vt-nextlist li::before { content: counter(s); position: absolute; left: 0; top: 0;
                             width: 25px; height: 25px; background: var(--color-secondary); color: #fff;
                             border-radius: 50%; display: flex; align-items: center;
                             justify-content: center; font-size: 0.78125rem; font-weight: 700; }
.st-vt-nextlist b { display: block; color: var(--color-text); }

.st-vt-card-plain { border: 1px solid var(--color-border); padding: 14px 16px; background: var(--color-card); }
.st-vt-card-plain b { display: block; margin-bottom: 4px; }
.st-vt-card-plain span { font-size: 0.8125rem; color: var(--color-muted); }

@media (max-width: 768px) {
    .st-vt-okhero { padding: 22px 16px; }
    .st-vt-nextlist li { padding-left: 33px; }
    /* Two buttons cannot share a 360px line. .st-btn is white-space: nowrap
       site-wide and the labels are fixed strings from section 11, so the widest
       of them needs 289px on its own; letting the pair shrink side by side made
       the text spill out of the buttons and pushed the page 24px wider than the
       screen. One per row, each the full width of the column. */
    .st-vt-ctarow { flex-direction: column; }
    .st-vt-ctarow .st-btn { min-width: 0; white-space: normal; }
}