/* Montivo booking UI - VN Media, rebuilt compact 18.09.2026 */
.mv-book{--mv-gold:#b8954a;--mv-gold-d:#9c7e3e;--mv-ink:#12120e;--mv-line:rgba(255,255,255,.14);
  --mv-text:#f4f1ea;--mv-muted:#a9a396;--mv-ok:#5fa777;--mv-err:#e2857a;--mv-r:14px;
  /* The bottom margin is for the route, hub and area pages, where the form is
     followed straight away by the next heading and had nothing between them.
     The two places the form is not free-standing - the modal and the in-post
     block - reset it below. (VN Media, 22.09.2026) */
  position:relative;max-width:1180px;margin:0 auto 38px;color:var(--mv-text);font-family:inherit;
  background:rgba(14,14,11,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--mv-line);border-radius:var(--mv-r);box-shadow:0 22px 56px rgba(0,0,0,.45);padding:14px}
.mv-book *,.mv-book *::before,.mv-book *::after{box-sizing:border-box}
.mv-book label,.mv-book span,.mv-book p,.mv-book td,.mv-book th,.mv-book h2,.mv-book button{color:inherit}
.mv-book [hidden]{display:none!important}
.mv-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* option pills */
.mv-opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.mv-seg{display:inline-flex;background:rgba(255,255,255,.06);border:1px solid var(--mv-line);border-radius:999px;padding:3px}
.mv-seg button{appearance:none;border:0;background:transparent;color:var(--mv-muted);font:inherit;font-size:13.5px;
  padding:7px 15px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s;white-space:nowrap;line-height:1.2}
.mv-seg button b{font-weight:600}
.mv-seg button em{font-style:normal;opacity:.75;font-size:12px;margin-left:5px}
.mv-seg button[aria-pressed="true"]{background:var(--mv-gold);color:#17170f}
.mv-seg button[aria-pressed="true"] em{opacity:.85}
.mv-seg button:focus-visible{outline:2px solid var(--mv-gold);outline-offset:2px}
.mv-seg button.is-off{opacity:.45;cursor:not-allowed}

/* the single search bar */
.mv-bar{display:grid;grid-template-columns:1.45fr 34px 1.45fr 1fr 1fr .9fr auto;gap:0;align-items:stretch;
  background:rgba(255,255,255,.05);border:1px solid var(--mv-line);border-radius:12px;overflow:visible}
.mv-bar.is-oneway{grid-template-columns:1.6fr 34px 1.6fr 1.1fr .95fr auto}
.mv-cell{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:9px 13px;min-width:0;border-right:1px solid var(--mv-line);transition:background .16s}
.mv-cell:hover{background:rgba(255,255,255,.04)}
.mv-cell>label,.mv-cell>.mv-lab{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mv-muted);line-height:1.4}
.mv-cell input.mv-in,.mv-cell .mv-val{width:100%;border:0;background:transparent;color:var(--mv-text);
  font:inherit;font-size:15.5px;line-height:1.35;padding:0;text-align:left;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-cell input.mv-in{cursor:text}
.mv-cell input.mv-in:focus,.mv-cell .mv-val:focus{outline:none}
.mv-cell:focus-within{background:rgba(255,255,255,.08)}
.mv-cell input::placeholder,.mv-val.is-empty{color:#8b8578}
.mv-cell[aria-invalid="true"]{box-shadow:inset 0 -2px 0 var(--mv-err)}
.mv-swapcell{display:flex;align-items:center;justify-content:center;border-right:1px solid var(--mv-line)}

/* A page on this site loads 82 stylesheets and OUR one is ninth: the theme styles
   every `button` on the page with `:is(.btn, .button, button, [type="submit"])`,
   one class of specificity - the same as a bare `.mv-cta`, and 72 sheets later in
   the cascade. So the Continue button and the swap arrow came out as the theme's
   grey rectangles. Scoping these two under `.mv-book` puts them a class ahead,
   and load order stops deciding what the booking form looks like.
   It only showed up once the stylesheet moved into the head (47-blog-booking.php
   asks for it early so a blog post does not flash an unstyled form); when it was
   enqueued from inside the shortcode it was printed last and won the ties by
   accident. */
.mv-book .mv-swap{width:30px;height:30px;min-height:0;border-radius:50%;border:1px solid var(--mv-line);
  background:rgba(255,255,255,.06);color:var(--mv-gold);cursor:pointer;font-size:14px;line-height:1;
  transition:background .18s,transform .3s;padding:0}
.mv-book .mv-swap:hover{background:rgba(255,255,255,.12)}
.mv-book .mv-swap.is-turn{transform:rotate(180deg)}
.mv-book .mv-cta{appearance:none;border:0;border-radius:0 11px 11px 0;background:var(--mv-gold);color:#17170f;font:inherit;
  font-size:15.5px;font-weight:700;letter-spacing:.01em;padding:0 26px;min-height:0;cursor:pointer;
  transition:background .18s,opacity .18s;white-space:nowrap}
.mv-book .mv-cta:hover:not(:disabled){background:var(--mv-gold-d)}
.mv-book .mv-cta:disabled{opacity:.45;cursor:not-allowed}
.mv-book .mv-cta:focus-visible{outline:2px solid #fff;outline-offset:-3px}

/* passengers stepper inside its cell */
.mv-pax{display:flex;align-items:center;gap:6px}
.mv-pax button{width:24px;height:24px;border-radius:50%;border:1px solid var(--mv-line);background:rgba(255,255,255,.06);
  color:var(--mv-text);font-size:14px;line-height:1;cursor:pointer;padding:0;flex:0 0 auto}
.mv-pax button:hover:not(:disabled){background:rgba(255,255,255,.14)}
.mv-pax button:disabled{opacity:.3;cursor:not-allowed}
.mv-pax output{font-size:15.5px;min-width:18px;text-align:center}

/* the strip under the bar */
.mv-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:0 2px}
.mv-priceline{font-size:14px;color:var(--mv-muted);min-height:20px}
.mv-priceline b{font-size:19px;color:var(--mv-text);font-weight:700;font-variant-numeric:tabular-nums;margin-right:7px}
.mv-priceline.is-load{opacity:.5}
.mv-priceline.mv-err{color:var(--mv-err)}
.mv-strip .mv-link{background:none;min-height:0;border:0;color:var(--mv-gold);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:0}

/* combobox dropdown */
.mv-combo__list{position:absolute;z-index:60;top:calc(100% + 8px);left:-1px;min-width:270px;width:calc(100% + 2px);
  max-height:290px;overflow:auto;background:#16160f;border:1px solid var(--mv-line);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);padding:6px;margin:0;list-style:none}
.mv-combo__list[hidden]{display:none}
.mv-combo__opt{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14.5px;display:flex;justify-content:space-between;gap:10px}
.mv-combo__opt[aria-selected="true"],.mv-combo__opt:hover{background:rgba(184,149,74,.24)}
.mv-combo__opt small{color:var(--mv-muted)}
.mv-combo__group{padding:9px 12px 4px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mv-gold)}
.mv-combo__empty{padding:12px;color:var(--mv-muted);font-size:14px}

/* the calendar, identical in every browser */
.mv-cal{position:absolute;z-index:70;top:calc(100% + 8px);left:-1px;width:302px;background:#16160f;
  border:1px solid var(--mv-line);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.55);padding:12px}
.mv-cal[hidden]{display:none}
/* Opened upwards, when there is no room below (montivo-booking.js placePop). */
.mv-cal.is-up,.mv-combo__list.is-up{top:auto;bottom:calc(100% + 8px)}
.mv-cal__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mv-cal__top b{font-size:15px;font-weight:600}
.mv-cal__nav{width:30px;height:30px;border-radius:8px;border:1px solid var(--mv-line);background:rgba(255,255,255,.05);
  color:var(--mv-text);cursor:pointer;font-size:15px;line-height:1;padding:0}
.mv-cal__nav:hover:not(:disabled){background:rgba(255,255,255,.12)}
.mv-cal__nav:disabled{opacity:.25;cursor:not-allowed}
.mv-cal__grid{display:block}
/* One element per week, so the grid has rows a screen reader can read. */
.mv-cal__row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mv-cal__row+.mv-cal__row{margin-top:2px}
.mv-cal__day:focus-visible{outline:2px solid var(--mv-gold);outline-offset:2px}
.mv-cal__dow{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mv-muted);text-align:center;padding:4px 0}
.mv-cal__day{height:36px;border:0;border-radius:8px;background:transparent;color:var(--mv-text);font:inherit;font-size:14px;
  cursor:pointer;transition:background .14s;padding:0}
.mv-cal__day:hover:not(:disabled){background:rgba(255,255,255,.12)}
.mv-cal__day:disabled{color:#5d584e;cursor:not-allowed}
.mv-cal__day.is-blocked{color:#5d584e;text-decoration:line-through;cursor:not-allowed}
.mv-cal__day.is-sel{background:var(--mv-gold);color:#17170f;font-weight:700}
.mv-cal__day.is-today{box-shadow:inset 0 0 0 1px var(--mv-line)}
.mv-cal__foot{margin-top:8px;font-size:12px;color:var(--mv-muted);text-align:center}

/* modal */
.mv-modal[hidden]{display:none}
.mv-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:18px}
/* The modal carries .mv-book so it inherits the booking colours - but it must not
   inherit the booking panel's own box with them: a 1180px-wide translucent card
   with a blur, a border and a shadow. On a wide screen that card showed as a large
   dark square sitting behind the dialog and stopping short of the window edges,
   because max-width:1180px + margin:auto also capped the backdrop (VN Media, 21.09.2026). */
.mv-modal.mv-book{max-width:none;margin:0;background:none;border:0;border-radius:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.mv-modal__bg{position:absolute;inset:0;background:rgba(6,6,4,.74);backdrop-filter:blur(3px)}
.mv-modal__box{position:relative;width:100%;max-width:640px;max-height:92vh;overflow:auto;background:#16160f;
  border:1px solid var(--mv-line);border-radius:16px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.mv-modal__x{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--mv-muted);font-size:26px;line-height:1;cursor:pointer}
.mv-modal__x:hover{color:#fff}
/* Room for the close button: on a phone the heading wrapped under the X. */
.mv-modal h2{margin:0 0 6px;font-size:22px;padding-right:34px}
.mv-modal p.mv-lead{margin:0 0 18px;color:var(--mv-muted);font-size:14.5px}
.mv-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
/* Two fields side by side leave about 150px each on a phone - not enough for a
   resort name or an address, which then read "Airport, resor...". One per row. */
@media (max-width:430px){.mv-row{grid-template-columns:1fr;gap:10px}}
.mv-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.mv-f>label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mv-muted)}
.mv-modal .mv-in,.mv-modal textarea.mv-in{width:100%;height:48px;padding:0 13px;border-radius:9px;border:1px solid var(--mv-line);
  background:rgba(255,255,255,.05);color:var(--mv-text);font:inherit;font-size:15.5px}
.mv-modal textarea.mv-in{height:104px;padding:11px 13px;resize:vertical}
.mv-modal .mv-in:focus{outline:none;border-color:var(--mv-gold)}
.mv-modal .mv-cta{border-radius:10px;padding:15px 24px;width:100%}
.mv-note{margin:8px 0 0;font-size:13.5px;color:var(--mv-muted);min-height:18px}
.mv-note--err{color:var(--mv-err)}
.mv-note--ok{color:var(--mv-ok)}
.mv-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

@media(max-width:1080px){
  .mv-bar,.mv-bar.is-oneway{grid-template-columns:1fr 34px 1fr 1fr 1fr;}
  .mv-book .mv-cta{grid-column:1/-1;border-radius:0 0 11px 11px;padding:15px 24px}
  .mv-cell:nth-last-of-type(1){border-right:0}
}
@media(max-width:720px){
  .mv-book{padding:12px;margin-bottom:26px}
  .mv-bar,.mv-bar.is-oneway{grid-template-columns:1fr}
  .mv-cell{border-right:0;border-bottom:1px solid var(--mv-line);padding:11px 13px}
  .mv-swapcell{border-right:0;border-bottom:1px solid var(--mv-line);padding:6px}
  .mv-book .mv-swap{transform:rotate(90deg)}
  .mv-book .mv-swap.is-turn{transform:rotate(270deg)}
  .mv-combo__list,.mv-cal{left:0;width:100%;min-width:0}
  .mv-cal{width:100%}
  .mv-strip{justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){.mv-book *{transition:none!important}}

/* ---- the search bar states its own metrics -----------------------------
   Every control in the bar is a <button> or an <input>, and the theme styles
   both globally: `:is(.btn, .button, button, …)` gives a button
   min-height:42px and justify-content:center. That is why "Select date" sat
   centred while Pick-up and Destination sat left, and why the Date and
   Passengers cells put their label and value 3px out of line with their
   neighbours. One line-box for every control, scoped, so the theme cannot
   decide the layout of this form. (VN Media, 22.09.2026) */
.mv-book .mv-cell{padding:8px 13px;gap:4px}
.mv-book .mv-cell>label,.mv-book .mv-cell>.mv-lab{display:block;height:14px;line-height:14px;margin:0}
.mv-book .mv-cell input.mv-in,
.mv-book .mv-cell .mv-val{display:block;width:100%;height:26px;min-height:0;line-height:26px;
  margin:0;padding:0;border:0;background:transparent;font-size:15.5px;
  text-align:left;justify-content:flex-start;align-items:center}

/* An empty field is the thing the visitor has to act on, so it must not be
   quieter than its own caption - and it was: the label rendered #a9a396
   against a placeholder of #8b8578, so every field on an untouched form read
   as a label with dim text under it rather than something to fill in. Three
   steps now: caption, prompt, chosen value. */
.mv-book .mv-cell>label,.mv-book .mv-cell>.mv-lab{color:#8f897d}
.mv-book .mv-cell input.mv-in::placeholder{color:#cfc9bc;opacity:1}
.mv-book .mv-cell .mv-val.is-empty{color:#cfc9bc}
.mv-book .mv-cell input.mv-in{color:var(--mv-text)}
.mv-book .mv-cell .mv-val{color:var(--mv-text)}

/* the passenger stepper, on the same 26px line as every other value */
.mv-book .mv-pax{height:26px;min-height:0;gap:9px;align-items:center}
.mv-book .mv-pax button{width:26px;height:26px;min-height:0;padding:0;flex:0 0 26px;line-height:1}
.mv-book .mv-pax output{min-width:16px;text-align:center;line-height:26px}

/* Same complaint, different form: in the custom-request modal nine fields read
   left and Passengers read centred, because the theme's base.min.css carries a
   bare `input[type="number"]{text-align:center}`. Ours is one class more
   specific, so it wins wherever that sheet ends up in the cascade. */
.mv-book input[type="number"]{text-align:left}

/* In a blog post (47-blog-booking.php). These blocks sit on the post's own white
   page, outside `.mv-book`, so they cannot use the --mv-* variables: those are
   declared on `.mv-book` itself and resolve to nothing out here, which is how the
   priced line first went out with no border and a 3%-white background nobody
   could see. Everything below is stated in full. */
.mv-inpost{margin:28px 0;clear:both;width:100%;flex:1 1 100%;font-family:inherit}
.mv-inpost--form{padding:20px;border-radius:14px;background:#12120e;border:1px solid rgba(255,255,255,.14)}
.mv-inpost__h{margin:0 0 4px;font-size:20px;line-height:1.3;color:#f4f1ea;font-weight:600}
.mv-inpost__sub{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:#a9a396}
.mv-inpost--form .mv-book{max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}

/* "Getting to X" after every later place: the same facts without a second form */
.mv-inpost--strip{padding:18px 20px;border:1px solid rgba(0,0,0,.09);border-left:3px solid #b8954a;
  border-radius:10px;background:#faf8f3;color:#3a382f}
.mv-inpost__h3{margin:0 0 6px;font-size:18px;line-height:1.3;font-weight:600;color:#26241e}
.mv-inpost__line{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:#4a4740}

/* the airports, nearest first */
.mv-routes{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.mv-routes li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:9px 12px;border-radius:8px;background:rgba(0,0,0,.035);font-size:15px;line-height:1.45}
.mv-routes a{font-weight:600;color:#8a6c2f;text-decoration:none;border-bottom:1px solid rgba(138,108,47,.35)}
.mv-routes a:hover,.mv-routes a:focus-visible{color:#6d5525;border-bottom-color:currentColor}
.mv-routes__t{color:#6a665c}
.mv-routes__p{margin-left:auto;font-weight:600;color:#26241e;white-space:nowrap}
.mv-inpost--strip .mv-inpost__line strong{color:#26241e}

/* inside the dark form card the same list has to read the other way round */
.mv-inpost--form .mv-routes li{background:rgba(255,255,255,.05)}
.mv-inpost--form .mv-routes a{color:#d3ad63;border-bottom-color:rgba(211,173,99,.4)}
.mv-inpost--form .mv-routes a:hover{color:#e8c87f}
.mv-inpost--form .mv-routes__t{color:#a9a396}
.mv-inpost--form .mv-routes__p{color:#f4f1ea}
.mv-inpost--form .mv-inpost__sub strong{color:#f4f1ea}
.mv-inpost__sub--form{margin:14px 0 12px}

@media(max-width:720px){
  .mv-inpost{margin:22px 0}
  .mv-inpost--form{padding:14px}
  .mv-inpost--strip{padding:14px 15px}
  .mv-inpost__h{font-size:18px}
  .mv-inpost__h3{font-size:17px}
  .mv-routes__p{margin-left:0}
}