/* ==========================================================================
   Velafiri – styles (scoped under .vf-shell so it can sit inside WordPress)
   Layout: one column of full-width bands; content on a 1200px grid.
   Headings: Manrope · Body, navigation, buttons, forms: Nunito
   ========================================================================== */

html[data-vf-text="1"] { font-size: 112.5%; }
html[data-vf-text="2"] { font-size: 125%; }
html[data-vf-text="3"] { font-size: 140%; }
html.vf-lock { overflow: hidden; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
html.vf-pause { scroll-behavior: auto; }
body { top: 0 !important; }

.vf-shell {
  --navy: #0B1F3A;
  --navy-2: #13305A;
  --navy-3: #1C3F72;
  --night: #061328;
  --gold: #E2BE52;
  --gold-2: #EDCB6A;
  --gold-soft: #F6EBCB;
  --gold-ink: #6F540B;
  --ink: #0F1A2D;
  --text: #2A3346;
  --muted: #566176;
  --bg: #FBFAF7;
  --ivory: #F4F0E7;
  --surface: #FFFFFF;
  --line: #E6E0D3;
  --on-dark: #FFFFFF;
  --on-dark-2: #C9D3E4;
  --danger: #B42318;
  --ok: #157347;
  --ok-soft: #E6F4EC;
  --warn: #8A5A00;
  --warn-soft: #FFF2D6;
  --r: 18px;
  --r-sm: 12px;
  --sh-1: 0 1px 2px rgba(11, 31, 58, .05), 0 8px 24px -14px rgba(11, 31, 58, .22);
  --sh-2: 0 2px 4px rgba(11, 31, 58, .05), 0 22px 44px -22px rgba(11, 31, 58, .35);
  --sh-3: 0 34px 70px -32px rgba(6, 19, 40, .6);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --f-head: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --f-body: "Nunito", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Dark mode and high contrast (accessibility menu) */
.vf-shell.a11y-dark {
  --ink: #F4F0E6; --text: #D9DFEA; --muted: #A9B4C8; --bg: #08142A; --ivory: #0C1B33; --surface: #0F213D;
  --line: #22395E; --gold-ink: #E2BE52; --gold-soft: #1B3157; --navy: #0E274A; --night: #040C1A; --ok-soft: #0F2E22; --warn-soft: #3A2A05; --warn: #F2C45A;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6); --sh-2: var(--sh-1);
  color-scheme: dark;
}
.vf-shell.a11y-contrast {
  --ink: #fff; --text: #fff; --muted: #fff; --bg: #000; --ivory: #000; --surface: #000; --line: #fff;
  --navy: #000; --navy-2: #000; --navy-3: #000; --night: #000; --gold: #FFE14D; --gold-2: #FFE14D; --gold-ink: #FFE14D; --gold-soft: #000;
  --on-dark-2: #fff; --ok-soft: #000; --warn-soft: #000; --warn: #FFE14D; --ok: #7CFFB2; --sh-1: none; --sh-2: none; --sh-3: none; color-scheme: dark;
}
.vf-shell.a11y-contrast a:not(.vf-btn):not(.vf-actionbar-main) { color: #FFE14D !important; text-decoration: underline !important; }
.vf-shell.a11y-contrast :is(.vf-btn, .vf-hero-card, .vf-svc, .vf-vcard, .vf-pay-card, .vf-ccard, .vf-book-card, .vf-chat, .vf-profile, .vf-bubble, .vf-pick span, input, select, textarea, .vf-fab, .vf-sheet, .vf-a11y, .vf-card, .vf-panel) { border: 2px solid #fff !important; }
.vf-shell.a11y-contrast :is(.vf-btn-gold, .vf-btn-navy, .vf-actionbar-main) { background: #FFE14D !important; color: #000 !important; }
.vf-shell.a11y-contrast :is(.vf-hero-bg, .vf-art) { filter: grayscale(1) contrast(1.2); }

/* --------------------------------------------------------------------------
   Reset inside the app (low specificity, protects against theme styles)
   ----------------------------------------------------------------------- */
.vf-shell *, .vf-shell *::before, .vf-shell *::after { box-sizing: border-box; }
.vf-shell :where(h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, fieldset, legend, pre, table) { margin: 0; padding: 0; }
.vf-shell :where(ul, ol) { list-style: none; }
.vf-shell :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
.vf-shell :where(button) { cursor: pointer; background: none; border: 0; padding: 0; text-transform: none; box-shadow: none; }
.vf-shell :where(img, svg) { max-width: 100%; }
.vf-shell :where(a) { color: var(--gold-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vf-shell :where(a):hover { color: var(--ink); }
.vf-shell :where(fieldset) { border: 0; min-width: 0; }
.vf-shell :where(h1, h2, h3, h4, h5) { font-family: var(--f-head); color: var(--ink); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.vf-shell :where(em) { font-style: normal; color: var(--gold-ink); font-weight: 700; }
.vf-shell kbd { font: 700 .8em var(--f-body); padding: .05em .45em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); }
.vf-gold { color: var(--gold-ink); }

.vf-ic { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.22em; }
[dir="rtl"] .vf-ic-arrow, [dir="rtl"] .vf-ic-back, [dir="rtl"] .vf-ic-send { transform: scaleX(-1); }
.vf-ltr { direction: ltr; unicode-bidi: isolate; }
.vf-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vf-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.vf-muted { color: var(--muted); font-size: .95rem; }
.vf-center { text-align: center; }

.vf-skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 300; padding: 12px 18px; border-radius: 12px; background: var(--gold); color: #0B1F3A !important; font-weight: 800; text-decoration: none; transition: top .2s; }
.vf-skip:focus { top: 12px; }
.vf-shell :focus { outline: none; }
.vf-shell :focus-visible { outline: 3px solid #0B1F3A; outline-offset: 2px; box-shadow: 0 0 0 6px #E2BE52; border-radius: 10px; }
.vf-shell.a11y-contrast :focus-visible { outline-color: #FFE14D; box-shadow: 0 0 0 6px #fff; }
.vf-shell [tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   Buttons, chips, fields
   ----------------------------------------------------------------------- */
.vf-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.35em; border-radius: 999px; border: 1.5px solid transparent;
  font: 800 .96rem/1.15 var(--f-body); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .2s, color .2s, border-color .2s;
}
.vf-btn:hover { transform: translateY(-1px); }
.vf-btn:active { transform: translateY(0) scale(.98); }
.vf-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.vf-btn .vf-ic-arrow { transition: transform .3s var(--ease-out); }
.vf-btn:hover .vf-ic-arrow { transform: translateX(3px); }
.vf-btn-lg { min-height: 54px; padding: .8em 1.6em; font-size: 1rem; }
.vf-btn-sm { min-height: 40px; padding: .45em 1em; font-size: .88rem; }
.vf-btn-block { width: 100%; }
.vf-grow { flex: 1 1 auto; }
.vf-btn-gold { background: var(--gold); color: #0B1F3A !important; box-shadow: 0 10px 24px -14px rgba(226, 190, 82, .95); }
.vf-btn-gold:hover { background: var(--gold-2); }
.vf-btn-navy { background: var(--navy); color: #fff !important; }
.vf-btn-navy:hover { background: var(--navy-3); }
.vf-btn-glass { background: rgba(255, 255, 255, .08); color: #fff !important; border-color: rgba(255, 255, 255, .3); }
.vf-btn-glass:hover { background: rgba(255, 255, 255, .16); }
.vf-btn-line { background: var(--surface); color: var(--ink) !important; border-color: var(--line); }
.vf-btn-line:hover { border-color: var(--ink); }
.vf-btn-text { background: transparent; color: var(--ink) !important; padding-inline: .7em; }
.vf-btn-text:hover { background: var(--ivory); transform: none; }
.vf-icon-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line) !important; background: var(--surface); color: var(--ink); transition: background-color .2s; }
.vf-icon-btn:hover { background: var(--ivory); }
.vf-linkbtn { padding: 0; text-align: start; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

.vf-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--f-head); font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.vf-eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
.vf-eyebrow-dark { color: var(--gold-ink); }

.vf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.vf-field label, .vf-fs legend { font-size: .88rem; font-weight: 800; color: var(--ink); }
.vf-hint { font-weight: 600; font-size: .84rem; color: var(--muted); }
.vf-req { color: var(--danger); }
.vf-out { font-family: var(--f-head); font-size: 1.05rem; font-weight: 800; color: var(--gold-ink); margin-inline-start: 6px; }
.vf-shell :is(input[type="text"], input:not([type]), input[type="tel"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="number"], select, textarea) {
  width: 100%; min-height: 50px; margin: 0; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background-color: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 1rem; line-height: 1.35; box-shadow: none;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.vf-shell input[type="file"] { font-size: .9rem; padding: 8px 0; }
.vf-shell select {
  appearance: none; -webkit-appearance: none; padding-inline-end: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236F540B' stroke-width='2.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
[dir="rtl"] .vf-shell select { background-position: left 14px center; }
.vf-shell textarea { min-height: 92px; resize: vertical; }
.vf-shell ::placeholder { color: #697286; opacity: 1; }
.vf-shell :is(input, select, textarea):hover:not(:disabled) { border-color: #CDC3AC; }
.vf-shell :is(input, select, textarea):focus-visible { border-color: var(--navy); background-color: var(--surface); box-shadow: 0 0 0 4px rgba(226, 190, 82, .45); outline: none; border-radius: var(--r-sm); }
.vf-shell :is(input, select, textarea):disabled { opacity: .7; }
.vf-shell [aria-invalid="true"] { border-color: var(--danger) !important; }
.vf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.vf-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.vf-fs { margin-bottom: 16px; }
.vf-fs legend { margin-bottom: 8px; }

.vf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-chips-2 { display: grid; grid-template-columns: 1fr 1fr; }
.vf-chips-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.vf-chips-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.vf-pick { position: relative; display: block; cursor: pointer; }
.vf-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.vf-pick span {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 100%; min-height: 44px; padding: 8px 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font-size: .92rem; font-weight: 700; text-align: center; line-height: 1.25;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.vf-chips-2 .vf-pick span, .vf-chips-3 .vf-pick span, .vf-chips-4 .vf-pick span { border-radius: 12px; }
.vf-pick-sm span { min-height: 40px; padding: 6px 12px; font-size: .88rem; }
.vf-pick span i { font-style: normal; }
.vf-pick:hover span { border-color: var(--gold); }
.vf-pick input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 8px 18px -12px rgba(11, 31, 58, .9); }
.vf-shell.a11y-contrast .vf-pick input:checked + span { background: #FFE14D; color: #000; }
.vf-pick input:focus-visible + span { outline: 3px solid #0B1F3A; outline-offset: 2px; box-shadow: 0 0 0 6px #E2BE52; }
.vf-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: .94rem; font-weight: 700; color: var(--ink); cursor: pointer; line-height: 1.4; }
.vf-check input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--navy); }
.vf-check-mid { align-self: center; margin-top: 18px; }

.vf-range { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; cursor: pointer; --p: 50%; }
.vf-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold) var(--p), var(--line) var(--p)); }
.vf-range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold) var(--p), var(--line) var(--p)); }
.vf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--navy); border: 4px solid var(--surface); box-shadow: 0 2px 8px rgba(11, 31, 58, .4); }
.vf-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); border: 4px solid var(--surface); }
.vf-range:focus-visible { box-shadow: none !important; outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Top bar + header
   ----------------------------------------------------------------------- */
.vf-topbar { background: var(--night); color: var(--on-dark-2); font-size: .85rem; }
.vf-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.vf-topbar-list { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.vf-topbar-list :is(a, span) { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark-2) !important; text-decoration: none; }
.vf-topbar-list a:hover { color: #fff !important; }
.vf-topbar .vf-ic { color: var(--gold); }
.vf-lang { display: flex; align-items: center; gap: 8px; color: var(--gold); }
.vf-shell .vf-lang select { min-height: 30px; width: auto; padding: 3px 30px 3px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background-color: rgba(255, 255, 255, .06); color: #fff; font-size: .84rem; font-weight: 700; background-position: right 10px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E2BE52' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.vf-lang option { color: #101A2E; background: #fff; }

.vf-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 90; background: rgba(251, 250, 247, .92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.vf-shell.a11y-dark .vf-header { background: rgba(8, 20, 42, .92); }
.vf-shell.a11y-contrast .vf-header { background: #000; border-bottom-color: #fff; }
.vf-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(11, 31, 58, .5); }
.vf-header-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.vf-brand { display: inline-flex; align-items: center; gap: 11px; flex: none; text-decoration: none; color: var(--ink) !important; }
.vf-brand-mark { width: 42px; height: 42px; }
.vf-brand-txt { display: flex; flex-direction: column; line-height: 1; }
.vf-brand-name { font-family: var(--f-head); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.vf-brand-sub { margin-top: 4px; font-family: var(--f-head); font-size: .6rem; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-ink); }
.vf-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 auto; }
.vf-nav-links { display: flex; align-items: center; justify-content: center; gap: 2px; flex: 1 1 auto; }
.vf-nav-links a { position: relative; padding: 10px 12px; border-radius: 999px; color: var(--ink) !important; font-size: .95rem; font-weight: 700; text-decoration: none; transition: background-color .2s; }
.vf-nav-links a:hover { background: var(--ivory); }
.vf-nav-links a[aria-current="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--gold); }
.vf-nav-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.vf-nav-actions .vf-btn { min-height: 42px; padding: .5em 1.05em; font-size: .9rem; }
.vf-avatar-sm { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--gold); font: 800 .7rem var(--f-head); }
.vf-con-actions { display: flex; gap: 8px; }
.vf-burger { display: none; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line) !important; background: var(--surface); color: var(--ink); }
.vf-burger .vf-ic { width: 24px; height: 24px; }
.vf-nav-scrim { display: none; }

/* --------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------- */
.vf-hero { position: relative; overflow: hidden; overflow: clip; color: var(--on-dark); background: var(--navy); isolation: isolate; }
.vf-hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(1200px 600px at 100% -10%, #1b3a6b 0%, transparent 60%), linear-gradient(160deg, #0B1F3A 0%, #071630 100%); }
.vf-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: vf-float 18s ease-in-out infinite alternate; }
.vf-orb-a { width: 520px; height: 520px; right: -140px; top: -180px; background: radial-gradient(circle, rgba(226, 190, 82, .5), transparent 65%); }
.vf-orb-b { width: 460px; height: 460px; left: -160px; bottom: -220px; background: radial-gradient(circle, rgba(64, 120, 200, .45), transparent 65%); animation-delay: -6s; }
@keyframes vf-float { to { transform: translate3d(-40px, 30px, 0) scale(1.08); } }
.vf-route { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(226, 190, 82, .45); }
.vf-route path { animation: vf-dash 40s linear infinite; }
@keyframes vf-dash { to { stroke-dashoffset: -800; } }
.vf-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 112px); }
.vf-hero h1 { color: #fff; font-size: clamp(2.5rem, 5.6vw, 4.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; margin-bottom: 22px; }
.vf-hero h1 .vf-gold { display: block; color: var(--gold); }
.vf-hero-lead { max-width: 34em; margin-bottom: 30px; font-size: clamp(1.04rem, 1.4vw, 1.16rem); line-height: 1.65; color: var(--on-dark-2); }
.vf-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.vf-hero-trust { display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--on-dark-2); font-size: .93rem; font-weight: 700; }
.vf-hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.vf-hero-trust .vf-ic { color: var(--gold); }
.vf-anim { animation: vf-rise .8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 80ms); }
@keyframes vf-rise { from { opacity: .35; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.vf-hero-card { min-width: 0; padding: 10px; border-radius: 26px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--sh-3); }
.vf-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin-bottom: 10px; border-radius: 16px; background: rgba(0, 0, 0, .24); }
.vf-seg-3 { grid-template-columns: repeat(3, 1fr); }
.vf-seg-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 12px; background: var(--surface); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); transition: transform .45s var(--ease-out); }
.vf-seg-3 .vf-seg-pill { width: calc(33.333% - 3.33px); }
.vf-seg-pill.is-plan { transform: translateX(100%); }
.vf-seg-pill.is-car { transform: translateX(200%); }
[dir="rtl"] .vf-seg-pill { left: auto; right: 5px; }
[dir="rtl"] .vf-seg-pill.is-plan { transform: translateX(-100%); }
[dir="rtl"] .vf-seg-pill.is-car { transform: translateX(-200%); }
.vf-seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 6px; border-radius: 12px; font-weight: 800; font-size: .92rem; color: rgba(255, 255, 255, .82); transition: color .3s; }
.vf-seg button[aria-selected="true"] { color: var(--ink); }
.vf-seg-light { background: var(--ivory); border: 1px solid var(--line); }
.vf-seg-light button { color: var(--muted); }
.vf-seg-light .vf-seg-pill { background: var(--navy); }
.vf-seg-light button[aria-selected="true"] { color: #fff; }
.vf-quick { padding: 20px; border-radius: 18px; background: var(--surface); color: var(--text); }
.vf-quick-lead { margin-bottom: 12px; color: var(--muted); font-size: .95rem; }
.vf-ideas { display: grid; gap: 8px; margin-bottom: 14px; }
.vf-idea { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 1.5px solid var(--line) !important; border-radius: 14px; background: var(--bg) !important; color: var(--ink); text-align: start; font-size: .93rem; font-weight: 700; line-height: 1.35; transition: border-color .2s, background-color .2s; }
.vf-idea:hover { border-color: var(--gold) !important; background: var(--surface) !important; }
.vf-idea span { font-size: 1.15rem; }
.vf-idea-sm { width: auto; padding: 7px 12px; font-size: .86rem; border-radius: 999px; }

/* Strip */
.vf-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.vf-strip-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.vf-strip-item { display: flex; flex-direction: column; gap: 2px; padding: 24px 22px; border-inline-start: 1px solid var(--line); }
.vf-strip-item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.vf-strip-item strong { font-family: var(--f-head); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink); }
.vf-strip-item span { font-size: .9rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Sections
   ----------------------------------------------------------------------- */
.vf-section { padding-block: clamp(64px, 9vw, 112px); }
.vf-section-ivory { background: var(--ivory); }
.vf-section-navy { position: relative; background: var(--navy); color: var(--on-dark-2); overflow: hidden; overflow: clip; isolation: isolate; }
.vf-section-navy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 420px at 100% 0%, rgba(226, 190, 82, .14), transparent 60%); }
.vf-section-navy h2 { color: #fff; }
.vf-section-navy .vf-gold, .vf-head-light .vf-gold { color: var(--gold); }
.vf-head { max-width: 700px; margin-bottom: 44px; }
.vf-head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; }
.vf-head p:last-child { color: var(--muted); font-size: 1.08rem; }
.vf-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.vf-head-row > div { max-width: 700px; }
.vf-head-light h2 { color: #fff; }
.vf-head-light p:last-child { color: var(--on-dark-2); }
.vf-sub { margin-bottom: 16px; font-size: 1.2rem; }

.vf-reveal { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.vf-reveal.vf-pre { opacity: 0; transform: translateY(22px); }

/* Art */
.vf-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-art svg { display: block; width: 100%; height: 100%; }
div.vf-art { line-height: 0; }

/* Services */
.vf-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vf-svc-grid > li { display: flex; min-width: 0; }
.vf-svc { display: flex; flex-direction: column; width: 100%; text-align: start; border-radius: 22px; border: 1px solid var(--line) !important; background: var(--surface) !important; box-shadow: var(--sh-1); overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; }
.vf-svc:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--gold) !important; }
.vf-svc-img { display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; }
.vf-svc-img .vf-art { transition: transform .8s var(--ease-out); }
.vf-svc:hover .vf-svc-img .vf-art { transform: scale(1.04); }
.vf-svc-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 20px 22px; }
.vf-svc-name { font-family: var(--f-head); font-size: 1.15rem; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.vf-svc-lead { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.vf-svc-who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.vf-svc-who span { padding: 3px 9px; border-radius: 999px; background: var(--ivory); font-size: .78rem; font-weight: 700; color: var(--ink); }
.vf-svc-more { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 800; color: var(--gold-ink); }
.vf-svc-more .vf-ic { transition: transform .3s var(--ease-out); }
.vf-svc:hover .vf-svc-more .vf-ic { transform: translateX(4px); }

/* Fleet */
.vf-fleet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vf-vcard { display: flex; flex-direction: column; min-width: 0; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.vf-vcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.vf-vcard-img { aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; }
.vf-vcard-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.vf-vcard h3 { font-size: 1.1rem; font-weight: 800; }
.vf-vcard-ex { font-size: .86rem; color: var(--muted); }
.vf-vcard-blurb { font-size: .93rem; color: var(--text); margin-bottom: 6px; }
.vf-vcard .vf-btn { margin-top: auto; align-self: flex-start; }
.vf-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-specs li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--ivory); font-size: .8rem; font-weight: 800; color: var(--ink); }
.vf-specs .vf-ic { width: 14px; height: 14px; color: var(--gold-ink); }
.vf-chauffeurs { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; margin-top: 56px; padding: 28px; border-radius: 24px; background: var(--navy); color: var(--on-dark-2); }
.vf-chauffeur-pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 18px; }
.vf-chauffeur-pics figure { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 16px; overflow: hidden; }
.vf-chauffeur-pics figure:nth-child(2) { transform: translateY(18px); }
.vf-chauffeur-copy h3 { margin-bottom: 16px; color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; }
.vf-chauffeur-copy .vf-eyebrow { color: var(--gold); }
.vf-chauffeur-copy .vf-ticks li { color: var(--on-dark-2); }
.vf-chauffeur-copy .vf-ticks .vf-ic { background: var(--gold); color: #0B1F3A; }

/* --------------------------------------------------------------------------
   Trip Curator
   ----------------------------------------------------------------------- */
.vf-section-curate { position: relative; background: linear-gradient(180deg, #0B1F3A 0%, #0A1C36 100%); color: var(--on-dark-2); overflow: hidden; overflow: clip; isolation: isolate; }
.vf-section-curate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 400px at 0% 0%, rgba(226, 190, 82, .14), transparent 60%), radial-gradient(800px 500px at 100% 100%, rgba(64, 120, 200, .22), transparent 60%); }
.vf-shell.a11y-contrast .vf-section-curate { background: #000; }
.vf-studio { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 20px; align-items: stretch; }
.vf-profile, .vf-chat { min-width: 0; border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: var(--sh-3); }
.vf-profile { padding: 22px 24px 26px; }
.vf-profile .vf-seg { margin-bottom: 18px; }
.vf-chat { display: flex; flex-direction: column; min-height: 600px; max-height: 860px; overflow: hidden; }
.vf-chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.vf-chat-head h3 { font-size: 1.02rem; font-weight: 800; }
.vf-chat-head > div { flex: 1; min-width: 0; }
.vf-chat-mode { font-size: .82rem; color: var(--muted); }
.vf-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(140deg, var(--navy), var(--navy-3)); color: var(--gold); }
.vf-chat-log { flex: 1; overflow-y: auto; padding: 20px; overscroll-behavior: contain; }
.vf-chat-empty { color: var(--muted); }
.vf-chat-empty p { margin-bottom: 10px; }
.vf-chat-hello { font-family: var(--f-head); font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.vf-msgs { display: flex; flex-direction: column; gap: 14px; }
.vf-msg { display: flex; min-width: 0; }
.vf-msg-user { justify-content: flex-end; }
.vf-bubble { max-width: 88%; min-width: 0; padding: 11px 15px; border-radius: 18px; font-size: .97rem; line-height: 1.55; overflow-wrap: anywhere; }
.vf-msg-user .vf-bubble { background: var(--navy); color: #fff; border-end-end-radius: 6px; }
.vf-bubble-ai { max-width: 100%; width: 100%; background: var(--bg); border: 1px solid var(--line); border-end-start-radius: 6px; color: var(--text); }
.vf-msg-note { margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: .86rem; font-weight: 700; }
.vf-md :is(p, ul, ol) { margin-bottom: 10px; }
.vf-md :is(p, ul, ol):last-child { margin-bottom: 0; }
.vf-md ul { list-style: disc; padding-inline-start: 20px; }
.vf-md ol { list-style: decimal; padding-inline-start: 22px; }
.vf-md h5 { margin: 14px 0 6px; font-size: 1rem; }
.vf-typing { display: inline-flex; gap: 6px; width: auto; padding: 15px 18px; }
.vf-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: vf-blink 1.2s infinite ease-in-out; }
.vf-typing span:nth-child(2) { animation-delay: .15s; }
.vf-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes vf-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

.vf-plan { margin-top: 4px; }
.vf-plan-head { padding: 16px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(140deg, var(--navy), var(--navy-3)); color: var(--on-dark-2); }
.vf-plan-kicker { font-family: var(--f-head); font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.vf-plan-head .vf-plan-kicker { color: var(--gold); }
.vf-plan-head h4 { margin: 4px 0 6px; font-size: 1.3rem; font-weight: 800; color: #fff; }
.vf-plan-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vf-plan-meta li { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: .78rem; font-weight: 700; }
.vf-days { display: grid; gap: 10px; }
.vf-day { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vf-day-n { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 54px; border-radius: 12px; background: var(--gold-soft); font-family: var(--f-head); font-size: 1.3rem; font-weight: 800; line-height: 1; color: #0B1F3A; }
.vf-shell.a11y-dark .vf-day-n { color: var(--gold); }
.vf-day-n span { font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }
.vf-day h5 { margin-bottom: 6px; font-size: .98rem; }
.vf-day ul { display: grid; gap: 6px; }
.vf-day li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; font-size: .93rem; line-height: 1.45; }
.vf-slot { font-family: var(--f-head); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); padding-top: 3px; }
.vf-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.vf-plan-box { min-width: 0; padding: 13px 15px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vf-plan-box h5 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .9rem; }
.vf-plan-box h5 .vf-ic { color: var(--gold-ink); }
.vf-plan-box ul { list-style: disc; padding-inline-start: 18px; display: grid; gap: 4px; font-size: .9rem; line-height: 1.45; }
.vf-plan-box p { font-size: .92rem; }
.vf-plan-note { margin-top: 12px; font-size: .82rem; color: var(--muted); font-style: italic; }
.vf-carrec h5 { margin: 12px 0 8px; font-size: .92rem; }
.vf-carrec-top { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 4px; }
.vf-carrec-img { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 12px; overflow: hidden; }
.vf-carrec h4 { margin: 2px 0 4px; font-size: 1.25rem; font-weight: 800; }
.vf-carrec-ex { font-size: .88rem; color: var(--muted); }
.vf-alts { margin-top: 10px; }
.vf-alts ul { display: grid; gap: 6px; font-size: .92rem; }
.vf-sources { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.vf-sources a { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .78rem; text-decoration: none; }
.vf-msg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vf-followups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vf-chat-input { display: flex; align-items: flex-end; gap: 10px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.vf-shell .vf-chat-input textarea { min-height: 50px; max-height: 140px; resize: none; border-radius: 16px; }
.vf-send { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 15px; background: var(--gold) !important; color: #0B1F3A; transition: transform .3s var(--ease-out), opacity .2s; }
.vf-send:hover:not(:disabled) { transform: translateY(-2px); }
.vf-send:disabled { opacity: .45; cursor: not-allowed; }
.vf-curate-foot { margin-top: 20px; text-align: center; font-size: .88rem; color: var(--on-dark-2); }

/* Common lists */
.vf-ticks { display: grid; gap: 10px; }
.vf-ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.vf-ticks .vf-ic { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--navy); color: #fff; stroke-width: 3; }
.vf-ticks-sm { gap: 6px; font-size: .93rem; }
.vf-ticks-sm .vf-ic { width: 20px; height: 20px; }
.vf-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-tags li { padding: 6px 12px; border-radius: 999px; background: var(--ivory); border: 1px solid var(--line); font-size: .88rem; font-weight: 700; color: var(--ink); }
.vf-mini { margin: 20px 0 10px; font-size: .74rem !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink) !important; }

/* Steps */
.vf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vf-steps li { padding: 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.vf-step-n { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--f-head); font-weight: 800; }
.vf-steps h3 { font-size: 1.06rem; margin-bottom: 6px; }
.vf-steps p { color: var(--muted); font-size: .95rem; }

/* Booking */
.vf-book { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.vf-book-intro { position: sticky; top: 110px; }
.vf-book-intro h2 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; }
.vf-book-intro > p { font-size: 1.04rem; margin-bottom: 10px; }
.vf-book-contacts { display: grid; gap: 10px; margin-top: 22px; }
.vf-book-contacts a { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: #fff !important; font-weight: 700; text-decoration: none; transition: background-color .2s; overflow-wrap: anywhere; }
.vf-book-contacts a:hover { background: rgba(255, 255, 255, .1); }
.vf-book-contacts .vf-ic { color: var(--gold); }
.vf-book-card { min-width: 0; padding: 30px; border-radius: 26px; background: var(--surface); color: var(--text); box-shadow: var(--sh-3); overflow: hidden; overflow: clip; }
.vf-stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.vf-stepper li { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 800; color: var(--muted); }
.vf-stepper span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); font-size: .82rem; transition: all .3s var(--ease-out); }
.vf-stepper .is-on { color: var(--ink); }
.vf-stepper .is-on span { background: var(--navy); border-color: var(--navy); color: #fff; }
.vf-stepper .is-done span { background: var(--gold); border-color: var(--gold); color: #0B1F3A; }
.vf-progress { height: 4px; margin-bottom: 22px; border-radius: 4px; background: var(--line); overflow: hidden; }
.vf-progress span { display: block; height: 100%; border-radius: 4px; background: var(--gold); transition: width .5s var(--ease-out); }
.vf-svc-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vf-svc-opt { position: relative; cursor: pointer; }
.vf-svc-opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.vf-svc-opt span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 88px; padding: 10px 6px; border: 1.5px solid var(--line); border-radius: 16px; text-align: center; font-size: .88rem; color: var(--ink); background: var(--bg); transition: all .25s var(--ease-out); }
.vf-svc-opt .vf-ic { width: 26px; height: 26px; color: var(--gold-ink); }
.vf-svc-opt:hover span { border-color: var(--gold); }
.vf-svc-opt input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.vf-svc-opt input:checked + span .vf-ic { color: var(--gold); }
.vf-svc-opt input:focus-visible + span { outline: 3px solid #0B1F3A; outline-offset: 2px; box-shadow: 0 0 0 6px #E2BE52; }
.vf-inline-help { font-size: .9rem; color: var(--muted); }
.vf-attached { display: flex; align-items: center; gap: 8px; padding: 11px 14px; margin-top: 6px; border-radius: 12px; background: var(--gold-soft); color: var(--ink); font-size: .9rem; font-weight: 700; }
.vf-summary { padding: 12px 15px; margin-bottom: 8px; border-radius: 12px; background: var(--ivory); font-size: .92rem; color: var(--ink); }
.vf-summary-t { font-family: var(--f-head); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.vf-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vf-err { margin: 6px 0; color: var(--danger); font-weight: 800; font-size: .93rem; }
.vf-err a { margin-inline-start: 6px; }
.vf-shell.a11y-contrast .vf-err { color: #FFE14D; }
.vf-form-nav { display: flex; gap: 10px; margin-top: 10px; }
.vf-done { padding: 20px 4px; text-align: center; }
.vf-done-badge { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); animation: vf-pop .6s var(--ease-out); }
.vf-done-badge .vf-ic { width: 36px; height: 36px; stroke-width: 2.6; }
@keyframes vf-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.vf-done h3, .vf-done h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 10px; }
.vf-done p { margin-bottom: 10px; }
.vf-ref { padding: 2px 9px; border-radius: 8px; background: var(--gold-soft); color: var(--ink); letter-spacing: .03em; white-space: nowrap; }
.vf-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }

/* Payments */
.vf-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vf-pay-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.vf-pay-card h3 { font-size: 1.3rem; font-weight: 800; }
.vf-pay-card p { color: var(--muted); }
.vf-pay-card .vf-btn { margin-top: auto; }
.vf-pay-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--gold-soft); color: #0B1F3A; }
.vf-shell.a11y-dark .vf-pay-ic { color: var(--gold); }
.vf-pay-feature { background: var(--navy); border-color: var(--navy); }
.vf-pay-feature h3 { color: #fff; }
.vf-pay-feature p { color: var(--on-dark-2); }
.vf-pay-feature .vf-pay-ic { background: rgba(226, 190, 82, .16); color: var(--gold); }
.vf-dl { display: grid; gap: 8px; }
.vf-dl div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ivory); }
.vf-dl dt { color: var(--muted); font-weight: 700; }
.vf-dl dd { font-weight: 800; color: var(--ink); }
.vf-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: var(--muted); font-size: .92rem; text-align: center; }
.vf-secure .vf-ic { color: var(--ok); }

/* Partners */
.vf-ptypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.vf-ptypes li { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.vf-ptypes h3 { font-size: 1.08rem; font-weight: 800; }
.vf-ptypes p { color: var(--muted); font-size: .93rem; }
.vf-ptypes .vf-btn { margin-top: auto; align-self: flex-start; }
.vf-verify { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.vf-verify li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px dashed var(--line); font-size: .9rem; font-weight: 700; color: var(--ink); }
.vf-verify strong { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--f-head); font-size: .85rem; }
.vf-listings { margin-top: 40px; }
.vf-listings ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vf-listing { display: flex; gap: 14px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.vf-listing > div { min-width: 0; }
.vf-listing-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--gold-soft); color: #0B1F3A; overflow: hidden; }
.vf-listing-ic img { width: 100%; height: 100%; object-fit: cover; }
.vf-listing h4 { font-size: 1rem; margin-bottom: 4px; }
.vf-listing p { font-size: .9rem; color: var(--muted); }
.vf-listing-type { font-family: var(--f-head); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink) !important; margin-bottom: 2px; }

/* About + contact */
.vf-about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vf-about h2 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 18px; }
.vf-about-lead { font-size: 1.15rem; color: var(--ink); margin-bottom: 12px; }
.vf-values { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vf-values li { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.vf-values .vf-ic { width: 26px; height: 26px; color: var(--gold-ink); }
.vf-values h3 { font-size: 1.02rem; }
.vf-values p { color: var(--muted); font-size: .94rem; }
.vf-contact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vf-ccard { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink) !important; transition: transform .4s var(--ease-out), border-color .3s; }
a.vf-ccard:hover { transform: translateY(-3px); border-color: var(--gold); }
.vf-ccard .vf-ic { width: 26px; height: 26px; margin-bottom: 8px; color: var(--gold-ink); }
.vf-clabel { font-family: var(--f-head); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vf-cval { font-weight: 800; font-size: 1.02rem; overflow-wrap: anywhere; }

/* Footer */
.vf-footer { padding-top: 64px; background: var(--night); color: var(--on-dark-2); font-size: .95rem; }
.vf-foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 44px; }
.vf-foot-logo { font-family: var(--f-head); font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.vf-foot-logo span { font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); vertical-align: middle; margin-inline-start: 8px; }
.vf-foot-tag { margin-top: 8px; color: var(--gold); font-weight: 700; }
.vf-foot-t { margin-bottom: 14px !important; font-size: .76rem !important; font-weight: 800 !important; letter-spacing: .18em; text-transform: uppercase; color: #fff !important; }
.vf-footer ul { display: grid; gap: 9px; }
.vf-footer :is(a, .vf-linkbtn) { color: var(--on-dark-2) !important; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.vf-footer :is(a, .vf-linkbtn):hover { color: #fff !important; text-decoration: underline; }
.vf-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px 26px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .86rem; }

/* --------------------------------------------------------------------------
   Account + console
   ----------------------------------------------------------------------- */
.vf-account, .vf-console { min-height: 70vh; }
.vf-console { padding-block: 40px 80px; }
.vf-card { min-width: 0; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.vf-card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.vf-gate { max-width: 520px; margin: 0 auto; text-align: center; padding-block: 40px; }
.vf-gate h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; margin-bottom: 10px; }
.vf-gate > p { color: var(--muted); margin-bottom: 20px; }
.vf-gate-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.vf-gate-staff .vf-pay-ic { margin: 0 auto 14px; }
.vf-staff-form { text-align: start; }
.vf-demo-note { margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: .88rem; font-weight: 700; }
.vf-acc-head, .vf-con-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 18px; }
.vf-acc-head h1, .vf-con-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; }
.vf-acc-head .vf-eyebrow, .vf-con-head .vf-eyebrow { margin-bottom: 4px; }
.vf-acc-who { flex: 1; min-width: 180px; }
.vf-acc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-con-head > div:first-child { flex: 1; min-width: 200px; }
.vf-con-tools { display: flex; gap: 8px; align-items: center; }
.vf-shell .vf-con-tools input { min-height: 44px; width: min(320px, 60vw); }
.vf-avatar-lg { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 18px; background: var(--navy); color: var(--gold); font: 800 1.2rem var(--f-head); }
.vf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.vf-tiles li { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.vf-tiles strong { font-family: var(--f-head); font-size: 1.7rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.vf-tiles span { font-size: .88rem; color: var(--muted); font-weight: 700; }
.vf-tabs { display: flex; gap: 6px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--line); }
.vf-tabs button, .vf-tab-link { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 46px; padding: 8px 14px; font-weight: 800; font-size: .92rem; color: var(--muted) !important; text-decoration: none; border-bottom: 3px solid transparent !important; transition: color .2s, border-color .2s; }
.vf-tabs button[aria-selected="true"] { color: var(--ink) !important; border-bottom-color: var(--gold) !important; }
.vf-tabs button:hover, .vf-tab-link:hover { color: var(--ink) !important; }
.vf-tabpanel { animation: vf-fadein .35s var(--ease); }
@keyframes vf-fadein { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vf-empty { padding: 26px; border-radius: 16px; border: 1px dashed var(--line); color: var(--muted); text-align: center; display: grid; gap: 12px; justify-items: center; }
.vf-reqs, .vf-plans { display: grid; gap: 12px; }
.vf-req-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.vf-req-top > div { min-width: 0; }
.vf-req-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vf-status { display: inline-flex; align-items: center; flex: none; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; background: var(--ivory); color: var(--ink); border: 1px solid var(--line); }
.vf-status.is-new, .vf-status.is-pending { background: #E8F0FB; color: #1C3F72; border-color: #C9D8F0; }
.vf-status.is-quoted, .vf-status.is-verifying { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.vf-status.is-confirmed, .vf-status.is-in_progress { background: #E7EEF8; color: #13305A; border-color: transparent; }
.vf-status.is-paid, .vf-status.is-completed, .vf-status.is-approved { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.vf-status.is-cancelled, .vf-status.is-rejected, .vf-status.is-suspended { background: #FDECEA; color: var(--danger); border-color: transparent; }
.vf-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 14px; }
.vf-track li { display: flex; flex-direction: column; gap: 6px; font-size: .74rem; font-weight: 700; color: var(--muted); }
.vf-track li span { height: 6px; border-radius: 6px; background: var(--line); }
.vf-track li.is-done { color: var(--ink); }
.vf-track li.is-done span { background: var(--gold); }
.vf-track-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ivory); font-size: .92rem; color: var(--ink); }
.vf-track-note .vf-ic { color: var(--gold-ink); margin-top: 2px; }
.vf-doclist { display: grid; gap: 10px; }
.vf-doclist li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.vf-doclist li > .vf-ic { width: 24px; height: 24px; color: var(--gold-ink); }
.vf-doclist li > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vf-doclist span { font-size: .88rem; color: var(--muted); }
.vf-pretext { margin-top: 8px; padding: 12px; max-height: 260px; overflow: auto; border-radius: 12px; background: var(--ivory); font: 600 .84rem/1.5 var(--f-body); white-space: pre-wrap; color: var(--ink); }
.vf-profile-form { max-width: 720px; }
.vf-checklist { display: grid; gap: 6px; margin-bottom: 14px; }
.vf-checklist li { display: flex; gap: 8px; align-items: center; font-size: .93rem; color: var(--muted); }
.vf-checklist li.is-done { color: var(--ink); font-weight: 700; }
.vf-checklist li.is-done .vf-ic { color: var(--ok); }
.vf-con-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vf-rows { display: grid; gap: 6px; }
.vf-rows li > button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--surface) !important; border: 1px solid var(--line) !important; text-align: start; transition: border-color .2s; }
.vf-rows li > button:hover { border-color: var(--gold) !important; }
.vf-rows li > button > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.vf-rows strong { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.vf-rows small { font-size: .82rem; color: var(--muted); }
.vf-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vf-card .vf-rows li > button { background: var(--bg) !important; }
.vf-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vf-filters button { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line) !important; background: var(--surface) !important; font-size: .84rem; font-weight: 800; color: var(--muted); }
.vf-filters button[aria-pressed="true"] { background: var(--navy) !important; color: #fff; border-color: var(--navy) !important; }
.vf-add { max-width: 860px; }
.vf-add h3 { font-size: 1.2rem; }
.vf-add .vf-muted { margin-bottom: 14px; }


/* Fleet tabs, availability, photos */
.vf-fleet-tabs { display: flex; gap: 8px; margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.vf-fleet-tabs::-webkit-scrollbar { display: none; }
.vf-fleet-tabs button { flex: none; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--line) !important; background: var(--surface) !important; color: var(--ink); font-weight: 800; font-size: .93rem; transition: background-color .2s, color .2s, border-color .2s; }
.vf-fleet-tabs button:hover { border-color: var(--gold) !important; }
.vf-fleet-tabs button[aria-selected="true"] { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff; }
.vf-vcard-img { position: relative; }
img.vf-photo { background: var(--ivory); }
.vf-avail-tag { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ok); font-size: .74rem; font-weight: 800; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3); }
.vf-avail-tag span { width: 7px; height: 7px; border-radius: 50%; background: #1FA45B; }
.vf-list-enter-active, .vf-list-leave-active { transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.vf-list-enter-from, .vf-list-leave-to { opacity: 0; transform: translateY(12px); }
.vf-list-leave-active { position: absolute; visibility: hidden; }
.vf-fleet-intro { margin-bottom: 12px; }
.vf-fleetadmin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.vf-fleetadmin li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: opacity .25s, background-color .25s; }
.vf-fleetadmin li.is-off { background: var(--ivory); }
.vf-fleetadmin li.is-off .vf-fa-img { opacity: .45; filter: grayscale(1); }
.vf-fa-img, .vf-sp-img { aspect-ratio: 16 / 10; max-width: 100%; border-radius: 10px; overflow: hidden; }
.vf-fa-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vf-fa-body strong { color: var(--ink); line-height: 1.25; }
.vf-fa-body small { color: var(--muted); font-size: .82rem; }
.vf-fa-actions { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.vf-fa-actions .vf-btn-sm { min-height: 34px; padding: 4px 10px; font-size: .8rem; }
.vf-upload { position: relative; cursor: pointer; }
.vf-upload:focus-within { outline: 3px solid #0B1F3A; outline-offset: 2px; box-shadow: 0 0 0 6px #E2BE52; }
.vf-upload.is-busy { opacity: .6; pointer-events: none; }
.vf-switch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.vf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vf-switch > span[aria-hidden] { position: relative; width: 48px; height: 28px; border-radius: 999px; background: #C9CED8; transition: background-color .25s; }
.vf-switch > span[aria-hidden]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .3s var(--ease-out); }
.vf-switch input:checked + span { background: #1FA45B; }
.vf-switch input:checked + span::after { transform: translateX(20px); }
.vf-switch input:focus-visible + span { outline: 3px solid #0B1F3A; outline-offset: 2px; box-shadow: 0 0 0 6px #E2BE52; }
.vf-switch em { font-style: normal; font-size: .74rem; font-weight: 800; color: var(--muted); }
.vf-fleet-extra { margin-top: 18px; }
.vf-fleet-extra .vf-muted { margin-bottom: 12px; }
.vf-sitephotos { display: grid; gap: 10px; }
.vf-sitephotos li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.vf-sitephotos strong { font-size: .93rem; color: var(--ink); }
@media (max-width: 960px) { .vf-fleetadmin { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .vf-fleetadmin li { grid-template-columns: 80px minmax(0, 1fr); } .vf-fleetadmin .vf-switch { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; } }


/* Photo editor (super admin) */
.vf-fleet-note { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--ink); font-size: .9rem; font-weight: 700; }
.vf-fleet-note .vf-ic { color: var(--gold-ink); }
img.vf-photo.is-contain { object-fit: contain; background: var(--ivory); }
.vf-sheet.vf-editor { width: min(1040px, calc(100% - 32px)); }
.vf-ed-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vf-ed-stage { position: sticky; top: 0; min-width: 0; }
.vf-ed-frame { position: relative; width: min(100%, calc(var(--edr, 1.78) * 58vh)); max-width: 100%; margin-inline: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--sh-1);
  background: repeating-conic-gradient(#E9E4D8 0% 25%, #F7F4EC 0% 50%) 50% / 20px 20px; }
.vf-ed-frame canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.vf-ed-frame canvas:active { cursor: grabbing; }
.vf-ed-frame canvas:focus-visible { outline: 3px solid #0B1F3A; outline-offset: -3px; box-shadow: inset 0 0 0 6px #E2BE52; border-radius: 14px; }
.vf-ed-meta { margin-top: 10px; font-size: .88rem; color: var(--muted); }
.vf-ed-meta strong { color: var(--ink); }
.vf-ed-warn { margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: .85rem; font-weight: 700; }
.vf-ed-tip { margin-top: 6px; font-size: .84rem; color: var(--muted); }
.vf-ed-controls { min-width: 0; }
.vf-ed-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: -4px 0 16px; }
.vf-ed-sizes button { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 48px; padding: 6px 4px; border-radius: 12px; border: 1.5px solid var(--line) !important; background: var(--surface) !important; font-weight: 800; font-size: .85rem; color: var(--ink); line-height: 1.2; }
.vf-ed-sizes button small { font-weight: 700; font-size: .72rem; color: var(--muted); }
.vf-ed-sizes button[aria-pressed="true"] { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff; }
.vf-ed-sizes button[aria-pressed="true"] small { color: var(--on-dark-2); }
.vf-ed-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 16px; }
.vf-ed-swatches { display: flex; gap: 10px; }
.vf-ed-swatches button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line) !important; box-shadow: inset 0 0 0 3px var(--surface); }
.vf-ed-swatches button[aria-pressed="true"] { border-color: var(--gold) !important; box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 2px var(--gold); }
.vf-ed-link { margin-top: 14px; }
.vf-ed-link .vf-muted { margin: 8px 0; }
.vf-ed-linkrow { display: flex; gap: 8px; }
@media (max-width: 860px) {
  .vf-sheet.vf-editor { width: 100%; }
  .vf-ed-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Keep the preview in view while scrolling through the controls. */
  .vf-ed-stage { position: sticky; top: -1px; z-index: 3; margin-inline: -18px; padding: 10px 18px 8px; background: var(--surface); box-shadow: 0 10px 16px -14px rgba(11, 31, 58, .5); }
  .vf-ed-frame { width: min(100%, calc(var(--edr, 1.78) * 30vh)); }
  .vf-ed-tip { display: none; }
  .vf-ed-meta { margin-top: 6px; font-size: .8rem; }
}
@media (max-width: 420px) { .vf-ed-sizes { grid-template-columns: repeat(2, 1fr); } .vf-ed-linkrow { flex-direction: column; } }


/* Date picker button */
.vf-datebtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line) !important; border-radius: var(--r-sm); background: var(--bg) !important; color: var(--ink); font: 600 1rem/1.3 var(--f-body); text-align: start; transition: border-color .2s, background-color .2s; }
.vf-datebtn:hover { border-color: #CDC3AC !important; }
.vf-datebtn .vf-ic { color: var(--gold-ink); }
.vf-datebtn.is-empty span { color: #697286; font-weight: 600; }
.vf-quick .vf-datebtn { background: var(--bg) !important; }
.vf-date-note { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: #FDECEA; color: var(--danger); font-weight: 700; font-size: .92rem; }
.vf-avail-hint { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; font-size: .86rem; color: var(--muted); }
.vf-avail-hint .vf-ic { color: var(--gold-ink); flex: none; }
.vf-stepper-in { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; }
.vf-stepper-in button { min-height: 50px; border-radius: var(--r-sm); border: 1.5px solid var(--line) !important; background: var(--surface) !important; font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.vf-stepper-in button:hover { border-color: var(--gold) !important; }
.vf-shell .vf-stepper-in input { text-align: center; font-weight: 800; font-size: 1.1rem; }
.vf-day-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vf-day-quick button { min-height: 34px; min-width: 42px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line) !important; background: var(--surface) !important; font-size: .82rem; font-weight: 800; color: var(--muted); }
.vf-day-quick button[aria-pressed="true"] { background: var(--navy) !important; color: #fff; border-color: var(--navy) !important; }
.vf-showall { margin-top: 10px; }

/* Calendar dialog */
.vf-sheet.vf-cal { width: min(460px, calc(100% - 32px)); }
.vf-cal-head { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
.vf-shell .vf-cal-month { flex: 1; min-height: 44px; font-weight: 800; text-align: center; }
.vf-cal-grid, .vf-concal { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.vf-cal-grid th, .vf-concal th { padding: 4px 0; font-size: .74rem; font-weight: 800; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.vf-cal-grid td, .vf-concal td { padding: 0; text-align: center; }
.vf-cal-grid button { position: relative; width: 100%; aspect-ratio: 1; max-height: 52px; border-radius: 12px; font-weight: 800; font-size: .95rem; color: var(--ink); background: var(--surface) !important; border: 1.5px solid transparent !important; transition: background-color .15s, border-color .15s, color .15s; }
.vf-cal-grid button:hover { border-color: var(--gold) !important; }
.vf-cal-grid button.is-today { border-color: var(--line) !important; }
.vf-cal-grid button.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold-ink); }
.vf-cal-grid button.is-range { background: var(--gold-soft) !important; border-radius: 6px; }
.vf-cal-grid button.is-edge { background: var(--gold-soft) !important; }
.vf-cal-grid button.is-sel { background: var(--navy) !important; color: #fff; border-color: var(--navy) !important; }
.vf-cal-grid button.is-off { color: #B4B9C4; background: transparent !important; cursor: not-allowed; }
.vf-cal-grid button.is-full { color: #A8303A; background: repeating-linear-gradient(135deg, #FBE9EA 0 6px, #F6DADC 6px 12px) !important; text-decoration: line-through; cursor: not-allowed; }
.vf-shell.a11y-dark .vf-cal-grid button.is-full { background: #3A1A20 !important; color: #F2A7AE; }
.vf-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .84rem; color: var(--muted); }
.vf-cal-legend li { display: inline-flex; align-items: center; gap: 6px; }
.vf-cal-legend i { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); }
.vf-cal-legend i.is-full { background: repeating-linear-gradient(135deg, #FBE9EA 0 4px, #F0C9CC 4px 8px); border-color: #E7B3B8; }
.vf-cal-legend i.is-sel { background: var(--navy); border-color: var(--navy); }
.vf-cal-legend i.is-part { background: var(--gold-soft); border-color: var(--gold); }
.vf-cal-legend i.is-blocked { background: #3A4152; border-color: #3A4152; }
.vf-cal-sum { margin-top: 8px; font-size: .88rem; color: var(--ink); font-weight: 700; }

/* Staff calendar */
.vf-concal-bar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 14px; }
.vf-concal-caprow { display: flex; gap: 8px; }
.vf-concal-head h3 { flex: 1; text-align: center; font-size: 1.15rem; }
.vf-concal button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 64px; border-radius: 12px; background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--ink); }
.vf-concal button strong { font-size: 1rem; }
.vf-concal button small { font-size: .72rem; font-weight: 800; color: var(--muted); }
.vf-concal button.is-part { background: var(--gold-soft) !important; border-color: var(--gold) !important; }
.vf-concal button.is-full { background: #FBE9EA !important; border-color: #E7B3B8 !important; }
.vf-concal button.is-full small { color: #A8303A; }
.vf-concal button.is-blocked { background: #3A4152 !important; border-color: #3A4152 !important; color: #fff; }
.vf-concal button.is-blocked small { color: #DCE1EA; }
.vf-concal button:disabled { opacity: .45; cursor: default; }
@media (max-width: 640px) {
  .vf-sheet.vf-cal { width: 100%; }
  .vf-concal-bar { grid-template-columns: 1fr; }
  .vf-concal { border-spacing: 2px; }
  .vf-concal button { min-height: 52px; border-radius: 8px; }
  .vf-concal button small { font-size: .62rem; }
}

/* Language */
.vf-lang-busy { font-size: .78rem; font-weight: 700; color: var(--gold); animation: vf-blink 1.2s infinite ease-in-out; }
.vf-sheet.vf-langnote { width: min(480px, calc(100% - 32px)); }
.vf-langnote h2 { display: flex; align-items: center; gap: 10px; }
.vf-langnote h2 .vf-ic { color: var(--gold-ink); }
.vf-langnote p { color: var(--text); }
@media (max-width: 860px) { .vf-sheet.vf-langnote { width: 100%; } }


/* Secure executive travel */
.vf-section-secure { position: relative; background: linear-gradient(160deg, #0A1A31 0%, #0B1F3A 60%, #10284A 100%); color: var(--on-dark-2); overflow: hidden; overflow: clip; isolation: isolate; }
.vf-section-secure::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 360px at 90% 10%, rgba(226, 190, 82, .16), transparent 60%); }
.vf-shell.a11y-contrast .vf-section-secure { background: #000; }
.vf-sec-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
.vf-sec-wrap h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; }
.vf-sec-wrap h2 .vf-gold { color: var(--gold); }
.vf-secure-lead { font-size: 1.08rem; margin-bottom: 20px; max-width: 36em; }
.vf-partner-card { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(226, 190, 82, .35); }
.vf-partner-card .vf-pay-ic { flex: none; background: rgba(226, 190, 82, .16); color: var(--gold); }
.vf-partner-card strong { display: block; margin-bottom: 4px; color: #fff; font-family: var(--f-head); }
.vf-partner-card p { font-size: .94rem; }
.vf-sec-wrap .vf-ticks { margin-bottom: 24px; }
.vf-sec-wrap .vf-ticks li { color: var(--on-dark-2); }
.vf-sec-wrap .vf-ticks .vf-ic { background: var(--gold); color: #0B1F3A; }
.vf-sec-wrap .vf-hero-cta { margin-bottom: 0; }
.vf-secure-opts { display: grid; gap: 12px; }
.vf-secure-opts li { padding: 18px 20px; border-radius: 18px; background: var(--surface); color: var(--text); }
.vf-secure-opts h3 { font-size: 1.05rem; margin-bottom: 4px; }
.vf-secure-opts p { font-size: .93rem; color: var(--muted); margin-bottom: 8px; }
.vf-secure-opts .vf-linkbtn { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-ink); text-decoration: none; font-weight: 800; font-size: .9rem; }
.vf-secure-note { margin-top: 28px; font-size: .84rem; color: var(--on-dark-2); opacity: .9; }
.vf-secpick legend { display: flex; align-items: center; gap: 8px; }
.vf-secpick legend .vf-ic { color: var(--gold-ink); }
.vf-partner-badge { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; padding: 9px 12px; border-radius: 12px; background: var(--gold-soft); font-size: .86rem; color: var(--ink); }
.vf-partner-badge .vf-ic { flex: none; margin-top: 2px; color: var(--gold-ink); }
.vf-secopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.vf-secopt { position: relative; cursor: pointer; }
.vf-secopt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vf-secopt > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 11px 13px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); transition: border-color .2s, background-color .2s; }
.vf-secopt strong { font-size: .93rem; color: var(--ink); }
.vf-secopt small { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.vf-secopt:hover > span { border-color: var(--gold); }
.vf-secopt input:checked + span { border-color: var(--navy); background: #EEF2F8; box-shadow: inset 0 0 0 1px var(--navy); }
.vf-shell.a11y-dark .vf-secopt input:checked + span { background: #16325C; }
.vf-secopt input:focus-visible + span { outline: 3px solid #0B1F3A; outline-offset: 2px; box-shadow: 0 0 0 6px #E2BE52; }
.vf-kv-sec { background: var(--gold-soft); }

/* Fleet: show more (desktop) and swipe row (phones) */
.vf-swipe-bar { display: none; }
.vf-more-row { display: flex; justify-content: center; margin-top: 22px; }

/* Back to top */
.vf-totop { position: fixed; z-index: 150; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface) !important; color: var(--ink); border: 1px solid var(--line) !important; box-shadow: var(--sh-2); transition: transform .3s var(--ease-out); }
.vf-totop .vf-ic { transform: rotate(-90deg); }
.vf-totop:hover { transform: translateY(-2px); }
[dir="rtl"] .vf-totop { right: auto; left: calc(22px + env(safe-area-inset-left, 0px)); }

@media (max-width: 1279px) { html.vf-nav-open { overflow: hidden; } }
@media (max-width: 960px) { .vf-sec-wrap { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 860px) { .vf-totop { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; right: calc(12px + env(safe-area-inset-right, 0px)); } }
@media (max-width: 640px) {
  .vf-swipe-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -6px 0 10px; font-size: .86rem; font-weight: 700; color: var(--muted); }
  .vf-swipe-btns { display: flex; gap: 6px; }
  .vf-swipe-btns .vf-icon-btn { width: 40px; height: 40px; border-radius: 12px; }
  .vf-shell .vf-fleet { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 4px max(16px, env(safe-area-inset-left, 0px)) 10px; scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .vf-shell .vf-fleet::-webkit-scrollbar { display: none; }
  .vf-fleet .vf-vcard { scroll-snap-align: start; }
  .vf-fleet .vf-vcard:hover { transform: none; }
  .vf-more-row { display: none; }
  .vf-secure-opts li { padding: 16px; }
}


/* Place search (type-ahead) */
.vf-place { position: relative; display: flex; gap: 8px; }
.vf-place > input { flex: 1; min-width: 0; }
.vf-place-map { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 50px; padding: 0 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line) !important; background: var(--surface) !important; color: var(--ink); font-weight: 800; font-size: .9rem; }
.vf-place-map .vf-ic { color: var(--gold-ink); }
.vf-place-map:hover { border-color: var(--gold) !important; }
.vf-place-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.vf-place-list li[role="option"] { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.vf-place-list li[role="option"] .vf-ic { flex: none; margin-top: 3px; color: var(--gold-ink); }
.vf-place-list li[role="option"] span { display: flex; flex-direction: column; min-width: 0; }
.vf-place-list strong { color: var(--ink); font-size: .95rem; }
.vf-place-list small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-place-list li.is-active, .vf-place-list li[role="option"]:hover { background: var(--ivory); }
.vf-place-status { padding: 8px 10px; font-size: .84rem; color: var(--muted); }
.vf-sublabel { font-weight: 700 !important; color: var(--muted) !important; font-size: .82rem !important; }
.vf-when { margin-bottom: 4px; }
.vf-when .vf-field { margin-bottom: 10px; }

/* Map dialog */
.vf-sheet.vf-mapsheet { width: min(760px, calc(100% - 32px)); }
.vf-map-search { margin-bottom: 10px; }
.vf-map-search input { width: 100%; }
.vf-map-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vf-map-chips li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .86rem; font-weight: 700; }
.vf-map-chips button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; }
.vf-map-chips button:hover { background: rgba(255, 255, 255, .15); }
.vf-map-chips .vf-ic { width: 14px; height: 14px; }
.vf-map-box { position: relative; z-index: 0; isolation: isolate; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.vf-map-search { position: relative; z-index: 5; }
.vf-leaflet { width: 100%; height: min(52vh, 420px); background: #DDE6EE; }
.vf-mapsvg { background: #E7EEF5; }
.vf-mapsvg svg { display: block; width: 100%; max-height: min(52vh, 440px); margin: 0 auto; }
.vf-ms-sea { fill: #DCE7F1; }
.vf-ms-land { fill: #F4EFE2; stroke: #B9AD8E; stroke-width: 1.5; }
.vf-ms-pin { cursor: pointer; outline: none; }
.vf-ms-hit { fill: transparent; }
.vf-ms-dot { fill: #fff; stroke: var(--navy); stroke-width: 2.5; transition: fill .2s; }
.vf-ms-pin:hover .vf-ms-dot, .vf-ms-pin:focus-visible .vf-ms-dot { fill: var(--gold); }
.vf-ms-pin:focus-visible .vf-ms-hit { stroke: var(--navy); stroke-width: 2; }
.vf-ms-pin.is-on .vf-ms-dot { fill: var(--navy); stroke: var(--gold); stroke-width: 3; }
.vf-ms-label { font: 700 11px var(--f-body); fill: var(--ink); paint-order: stroke; stroke: #F4EFE2; stroke-width: 3px; }
.vf-mapnote { padding: 10px 14px; font-size: .84rem; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); }
.vf-map-attr { margin-top: 6px; font-size: .74rem; color: var(--muted); }
.vf-mpin span { display: block; width: 26px; height: 26px; margin: 2px 0 0; border-radius: 50% 50% 50% 0; background: var(--navy); border: 3px solid var(--gold); transform: rotate(-45deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.vf-shell .leaflet-container { font-family: var(--f-body); }
.vf-cal-year { flex: none; width: 108px !important; min-height: 44px; font-weight: 800; }
@media (max-width: 860px) { .vf-sheet.vf-mapsheet { width: 100%; } }
@media (max-width: 420px) { .vf-place-map span { display: none; } .vf-place-map { padding: 0 12px; } }

/* Panels and dialogs */
.vf-backdrop { position: fixed; inset: 0; z-index: 180; background: rgba(4, 12, 26, .55); }
.vf-sheet {
  position: fixed; z-index: 190; left: 50%; top: 50%; width: min(660px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto; overscroll-behavior: contain;
  transform: translate(-50%, -50%); border-radius: 26px; background: var(--surface); color: var(--text); box-shadow: var(--sh-3);
}
.vf-sheet-img { aspect-ratio: 16 / 7; max-width: 100%; overflow: hidden; border-radius: 26px 26px 0 0; }
.vf-sheet-body { padding: 28px 30px 30px; }
.vf-sheet h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 8px; padding-inline-end: 44px; }
.vf-sheet-lead { color: var(--muted); font-size: 1.02rem; margin-bottom: 14px; }
.vf-sheet-close { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; }
.vf-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.vf-auth .vf-seg { margin-bottom: 18px; }
.vf-panel { position: fixed; z-index: 190; top: 0; bottom: 0; inset-inline-end: 0; width: min(560px, 100%); overflow-y: auto; padding: 22px 24px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--surface); color: var(--text); box-shadow: var(--sh-3); }
.vf-panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.vf-panel-head h2 { font-size: 1.4rem; font-weight: 800; }
.vf-kv { display: grid; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.vf-kv div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: .92rem; }
.vf-kv div:first-child { border-top: 0; }
.vf-kv dt { color: var(--muted); font-weight: 700; }
.vf-kv dd { color: var(--ink); overflow-wrap: anywhere; }
.vf-kv-img { max-width: 200px; border-radius: 10px; }
.vf-details { margin-bottom: 14px; }
.vf-details summary { cursor: pointer; font-weight: 800; color: var(--gold-ink); }
.vf-panel-form { padding-top: 14px; border-top: 1px solid var(--line); }
.vf-invite { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); }
.vf-invite .vf-muted { margin-bottom: 10px; }
.vf-invite-out { margin-top: 12px; display: grid; gap: 6px; }
.vf-invite-out label { font-weight: 800; font-size: .88rem; color: var(--ink); }
.vf-doc { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); }
.vf-doc-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px solid var(--gold); }
.vf-doc-brand { font-family: var(--f-head); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.vf-doc-title { text-align: end; }
.vf-doc-title h2 { padding: 0; font-size: 1.2rem; margin-bottom: 2px; }
.vf-doc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; font-size: .9rem; }
.vf-doc-meta dt { color: var(--muted); font-weight: 700; font-size: .8rem; }
.vf-doc-meta dd { font-weight: 700; color: var(--ink); }
.vf-doc-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: .93rem; }
.vf-doc-table th, .vf-doc-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.vf-doc-table thead th { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.vf-doc-table .vf-num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vf-doc-table tfoot th { text-align: end; }
.vf-doc-pay p { font-size: .92rem; margin-bottom: 4px; }
.vf-doc-foot { margin-top: 14px; font-size: .8rem; color: var(--muted); }

.vf-a11y { position: fixed; z-index: 200; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 100%); overflow-y: auto; padding: 22px 22px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--surface); color: var(--text); box-shadow: var(--sh-3); }
.vf-a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vf-a11y-head h2 { font-size: 1.5rem; font-weight: 800; }
.vf-a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 18px; }
.vf-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 10px 6px; border: 1.5px solid var(--line) !important; border-radius: 16px; background: var(--bg) !important; color: var(--ink); font-size: .8rem; font-weight: 800; line-height: 1.2; text-align: center; transition: background-color .2s, color .2s, border-color .2s; }
.vf-tile:hover { border-color: var(--gold) !important; }
.vf-tile[aria-pressed="true"] { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff; }
.vf-shell.a11y-contrast .vf-tile[aria-pressed="true"] { background: #FFE14D !important; color: #000; }
.vf-tile-g { display: grid; place-items: center; min-height: 26px; font-family: var(--f-head); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.vf-tile-g .vf-ic { width: 24px; height: 24px; }
.vf-tile small { font-size: .7rem; opacity: .85; }
.vf-voice { padding: 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 16px; }
.vf-voice h3 { margin-bottom: 10px; font-size: 1rem; }
.vf-voice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.vf-voice-row label { font-weight: 800; font-size: .86rem; }
.vf-shell .vf-voice-row select { width: auto; min-height: 40px; padding-block: 6px; }
.vf-voice-row .vf-btn[aria-pressed="true"] { background: var(--navy); color: #fff !important; }

.vf-fab { position: fixed; z-index: 150; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); inset-inline-start: calc(22px + env(safe-area-inset-left, 0px)); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--navy) !important; color: var(--gold); border: 2px solid var(--gold) !important; box-shadow: 0 12px 30px -10px rgba(4, 12, 26, .6); transition: transform .3s var(--ease-out); }
.vf-fab:hover { transform: scale(1.06); }
.vf-fab .vf-ic { width: 26px; height: 26px; }
.vf-actionbar { display: none; }
.vf-toasts { position: fixed; z-index: 220; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; width: max-content; max-width: calc(100% - 32px); pointer-events: none; }
.vf-toast { padding: 11px 18px; border-radius: 14px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: .92rem; box-shadow: var(--sh-2); text-align: center; }
.vf-guide { position: fixed; z-index: 170; left: 0; right: 0; height: 3.2em; transform: translateY(-50%); box-shadow: 0 0 0 100vmax rgba(4, 12, 26, .45); border-block: 2px solid var(--gold); pointer-events: none; }

/* Vue transitions */
.vf-fade-enter-active, .vf-fade-leave-active { transition: opacity .3s var(--ease); }
.vf-fade-enter-from, .vf-fade-leave-to { opacity: 0; }
.vf-slide-enter-active, .vf-slide-leave-active, .vf-slide-back-enter-active, .vf-slide-back-leave-active { transition: opacity .3s var(--ease), transform .4s var(--ease-out); }
.vf-slide-enter-from, .vf-slide-back-leave-to { opacity: 0; transform: translateX(24px); }
.vf-slide-leave-to, .vf-slide-back-enter-from { opacity: 0; transform: translateX(-24px); }
.vf-msg-enter-active { transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); }
.vf-msg-enter-from { opacity: 0; transform: translateY(12px); }
.vf-sheet-enter-active, .vf-sheet-leave-active { transition: opacity .3s var(--ease), transform .45s var(--ease-out); }
.vf-sheet-enter-from, .vf-sheet-leave-to { opacity: 0; transform: translate(-50%, -46%) scale(.98); }
.vf-drawer-enter-active, .vf-drawer-leave-active { transition: transform .4s var(--ease-out), opacity .3s; }
.vf-drawer-enter-from, .vf-drawer-leave-to { transform: translateX(32px); opacity: 0; }
[dir="rtl"] .vf-drawer-enter-from, [dir="rtl"] .vf-drawer-leave-to { transform: translateX(-32px); }
.vf-toast-enter-active, .vf-toast-leave-active { transition: all .35s var(--ease-out); }
.vf-toast-enter-from, .vf-toast-leave-to { opacity: 0; transform: translateY(10px); }

/* Accessibility feature classes */
.vf-shell.a11y-spacing * { letter-spacing: .1em !important; word-spacing: .18em !important; }
.vf-shell.a11y-lineheight * { line-height: 2 !important; }
.vf-shell.a11y-dyslexia, .vf-shell.a11y-dyslexia *:not(.vf-tile-g) { font-family: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif !important; }
.vf-shell.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; outline: 2px dashed currentColor; outline-offset: 2px; }
.vf-shell.a11y-lowsat :is(.vf-topbar, .vf-header, main, .vf-footer) { filter: saturate(.25); }
.vf-shell.a11y-align :is(main, footer) * { text-align: start !important; }
html.vf-pause .vf-shell *, html.vf-pause .vf-shell *::before, html.vf-pause .vf-shell *::after { animation: none !important; transition: none !important; }
html.vf-pause .vf-shell .vf-reveal { opacity: 1 !important; transform: none !important; }
html.vf-cursor, html.vf-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3 7z' fill='%230B1F3A' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important; }
.vf-speaking { background: rgba(226, 190, 82, .35) !important; outline: 2px solid #E2BE52 !important; border-radius: 4px; }
html.vf-click-read #vf-main :is(h1, h2, h3, p, li):hover { outline: 1px dashed #E2BE52; cursor: help; }

/* Google Translate clean-up */
.goog-te-banner-frame, iframe.skiptranslate, .goog-te-balloon-frame, #goog-gt-tt, .goog-te-spinner-pos, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* --------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .vf-burger { display: grid; }
  .vf-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 95; flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - 120px); overflow-y: auto;
    padding: 8px max(20px, env(safe-area-inset-right, 0px)) 22px max(20px, env(safe-area-inset-left, 0px)); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--sh-2);
    visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .25s, transform .35s var(--ease-out), visibility 0s linear .35s;
  }
  .vf-nav.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .25s, transform .35s var(--ease-out), visibility 0s; }
  .vf-nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .vf-nav-links a { padding: 15px 6px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .vf-nav-links a[aria-current="true"]::after { display: none; }
  .vf-nav-actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 16px; }
  .vf-nav-actions .vf-btn { min-height: 48px; font-size: .98rem; }
  .vf-nav-scrim { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(4, 12, 26, .35); }
  .vf-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .vf-fleet { grid-template-columns: repeat(2, 1fr); }
  .vf-studio { grid-template-columns: 1fr; }
  .vf-chat { min-height: 540px; }
  .vf-foot-grid { grid-template-columns: 1fr 1fr; }
  .vf-ptypes { grid-template-columns: repeat(2, 1fr); }
  .vf-verify, .vf-listings ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .vf-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .vf-book { grid-template-columns: 1fr; gap: 28px; }
  .vf-book-intro { position: static; }
  .vf-steps, .vf-contact { grid-template-columns: 1fr 1fr; }
  .vf-pay { grid-template-columns: 1fr; }
  .vf-about { grid-template-columns: 1fr; gap: 32px; }
  .vf-strip-in { grid-template-columns: 1fr 1fr; }
  .vf-strip-item:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .vf-strip-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .vf-chauffeurs { grid-template-columns: 1fr; gap: 28px; }
  .vf-con-cols { grid-template-columns: 1fr; }
  .vf-head-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 860px) {
  .vf-hide-md { display: none !important; }
  .vf-actionbar {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(4, 12, 26, .35);
  }
  .vf-actionbar > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 14px; color: var(--ink) !important; font-size: .76rem; font-weight: 800; text-decoration: none; }
  .vf-actionbar .vf-ic { width: 22px; height: 22px; color: var(--gold-ink); }
  .vf-actionbar .vf-actionbar-main { flex-direction: row; gap: 8px; background: var(--gold); color: #0B1F3A !important; font-size: .95rem; }
  .vf-actionbar .vf-actionbar-main .vf-ic { color: #0B1F3A; }
  .vf-shell { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .vf-fab { width: 46px; height: 46px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); inset-inline-start: max(12px, env(safe-area-inset-left, 0px)); }
  .vf-fab .vf-ic { width: 22px; height: 22px; }
  .vf-toasts { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .vf-sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 90%; transform: none; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .vf-sheet-img { border-radius: 24px 24px 0 0; }
  .vf-sheet-enter-from, .vf-sheet-leave-to { opacity: 1; transform: translateY(100%); }
}
@media (max-width: 640px) {
  .vf-shell { font-size: 1rem; }
  .vf-container { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .vf-hide-sm { display: none !important; }
  .vf-header-in { min-height: 64px; }
  .vf-brand-name { font-size: 1.3rem; }
  .vf-brand-mark { width: 38px; height: 38px; }
  .vf-hero-cta .vf-btn { flex: 1 1 100%; }
  .vf-seg button { font-size: .84rem; gap: 5px; }
  .vf-seg-3 button .vf-ic { display: none; }
  .vf-quick { padding: 16px; }
  .vf-head { margin-bottom: 30px; }
  .vf-svc-grid, .vf-fleet, .vf-ptypes, .vf-verify, .vf-listings ul { grid-template-columns: 1fr; }
  .vf-row2, .vf-row3 { grid-template-columns: 1fr; }
  .vf-chips-2, .vf-chips-4, .vf-svc-pick { grid-template-columns: 1fr 1fr; }
  .vf-profile { padding: 18px 16px 22px; border-radius: 20px; }
  .vf-chat { border-radius: 20px; min-height: 480px; max-height: 78vh; }
  .vf-chat-log { padding: 14px; }
  .vf-day { grid-template-columns: 1fr; gap: 8px; }
  .vf-day-n { flex-direction: row; gap: 6px; justify-content: flex-start; height: auto; padding: 6px 12px; width: max-content; font-size: 1.1rem; }
  .vf-day-n span { margin: 0; }
  .vf-day li { grid-template-columns: 1fr; gap: 0; }
  .vf-plan-grid { grid-template-columns: 1fr; }
  .vf-carrec-top { grid-template-columns: 1fr; }
  .vf-book-card { padding: 20px 16px; border-radius: 20px; }
  .vf-stepper li { font-size: .78rem; gap: 5px; }
  .vf-form-nav .vf-btn { flex: 1; }
  .vf-steps, .vf-contact, .vf-values { grid-template-columns: 1fr; }
  .vf-foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .vf-a11y-grid { grid-template-columns: repeat(2, 1fr); }
  .vf-msg-actions .vf-btn { flex: 1 1 auto; }
  .vf-chauffeurs { padding: 18px; }
  .vf-chauffeur-pics { gap: 8px; }
  .vf-sheet-body { padding: 22px 18px 24px; }
  .vf-track { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
  .vf-doc { padding: 16px; }
  .vf-doc-meta { grid-template-columns: 1fr 1fr; }
  .vf-kv div { grid-template-columns: 1fr; gap: 2px; }
  .vf-panel { padding-inline: 16px; }
  .vf-req-top { flex-direction: column; }
}
@media (max-width: 360px) {
  .vf-chips-3 { grid-template-columns: 1fr 1fr; }
  .vf-actionbar { grid-template-columns: repeat(4, 1fr); }
  .vf-actionbar .vf-actionbar-main { flex-direction: column; gap: 2px; font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-shell *, .vf-shell *::before, .vf-shell *::after { animation: none !important; transition: none !important; }
  .vf-shell .vf-reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* Print: only the chosen plan or document */
@media print {
  body.vf-printing * { visibility: hidden !important; }
  body.vf-printing .vf-print-target, body.vf-printing .vf-print-target * { visibility: visible !important; }
  body.vf-printing .vf-print-target { position: absolute; left: 0; top: 0; width: 100%; border: 0; }
  body.vf-printing .vf-plan-head { background: #fff !important; color: #000 !important; border: 1px solid #000; }
  body.vf-printing .vf-plan-head :is(h4, li, .vf-plan-kicker) { color: #000 !important; }
  body.vf-printing .vf-msg-actions, body.vf-printing .vf-followups { display: none !important; }
}

/* --------------------------------------------------------------------------
   v4 · Trip cart, packages, plans, tracking, billing
   ----------------------------------------------------------------------- */
.vf-shell { --green: #1E7A4F; --green-soft: #E3F3EA; --green-ink: #145C3A; }
.vf-shell.a11y-dark { --green-soft: #0F2E22; --green-ink: #7FD6A6; }

/* Header trip button */
.vf-cartbtn { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line) !important; background: var(--surface); color: var(--ink); font: 800 .9rem var(--f-head); cursor: pointer; }
.vf-cartbtn:hover { border-color: var(--gold) !important; }
.vf-cartbtn .vf-ic { width: 20px; height: 20px; }
.vf-cartbtn-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #0B1F3A; font-size: .75rem; }

/* Packages */
.vf-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.vf-pkg { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.vf-pkg.is-featured { border-color: var(--gold); box-shadow: var(--sh-2); }
.vf-pkg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vf-pkg-tag { padding: 4px 10px; border-radius: 999px; background: var(--ivory); color: var(--gold-ink); font: 800 .72rem var(--f-head); letter-spacing: .08em; text-transform: uppercase; }
.vf-pkg h3 { font-size: 1.2rem; font-weight: 800; }
.vf-pkg-lead { color: var(--muted); font-size: .95rem; }
.vf-pkg-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding: 10px 0; border-block: 1px dashed var(--line); color: var(--muted); font-size: .9rem; }
.vf-pkg-price strong { font: 800 1.45rem var(--f-head); color: var(--ink); }
.vf-pkg-price em { flex-basis: 100%; font-style: normal; font-weight: 700; color: var(--gold-ink); }
.vf-pkg .vf-ticks { flex: 1; }
.vf-pkg-terms { border-radius: 12px; background: var(--ivory); padding: 10px 14px; font-size: .88rem; }
.vf-pkg-terms summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.vf-pkg-terms ul { margin: 8px 0 2px; padding-inline-start: 18px; display: grid; gap: 4px; color: var(--text); }
.vf-ratecard { margin-top: 22px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.vf-ratecard > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 800; color: var(--ink); }
.vf-ratecard > p { margin-top: 12px; font-size: .9rem; }
.vf-table-wrap { max-width: 100%; overflow-x: auto; margin-top: 12px; -webkit-overflow-scrolling: touch; }
.vf-rates { width: 100%; border-collapse: collapse; font-size: .88rem; }
.vf-rates th, .vf-rates td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.vf-rates thead th { font: 800 .72rem var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.vf-rates tbody th { font-weight: 700; color: var(--ink); }
.vf-rates .vf-num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vf-rates tr.is-sel td { background: var(--gold-soft); }
.vf-rates small { color: var(--muted); }
.vf-promo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-top: 18px; }
.vf-promo-strip > div { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--gold-soft); color: var(--ink); font-size: .92rem; }
.vf-promo-strip .vf-ic { flex: none; color: var(--gold-ink); }

/* Green */
.vf-section-green { background: var(--ivory); }
.vf-green-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.vf-green-stats li { display: grid; gap: 4px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.vf-green-stats strong { font: 800 1.7rem var(--f-head); color: var(--green-ink); }
.vf-green-stats span { font-size: .9rem; color: var(--muted); }
.vf-green-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.vf-green-grid li { display: grid; align-content: start; gap: 10px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.vf-green-grid h3 { font-size: 1.05rem; font-weight: 800; }
.vf-green-grid p { font-size: .93rem; }
.vf-green-note { margin-top: 18px; font-size: .84rem; }
.vf-green-tag { display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font: 800 .7rem var(--f-head); letter-spacing: .04em; vertical-align: middle; font-style: normal; }
.vf-co2 { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.vf-co2 .vf-ic { width: 16px; height: 16px; color: var(--green-ink); }
.vf-green-note2 { display: flex; gap: 6px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--green-soft); color: var(--green-ink); font-size: .85rem; font-weight: 700; }
.vf-vcard-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.vf-vcard .vf-vcard-btns .vf-btn { margin-top: 0; }
.vf-bundle-hint { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--gold-soft); color: var(--ink); font-size: .9rem; }
.vf-bundle-hint .vf-ic { flex: none; color: var(--gold-ink); }

/* Item editor */
.vf-itemed { width: min(880px, calc(100% - 32px)); }
.vf-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-kind { position: relative; }
.vf-kind input { position: absolute; opacity: 0; pointer-events: none; }
.vf-kind span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: .88rem; cursor: pointer; }
.vf-kind span .vf-ic { width: 18px; height: 18px; }
.vf-kind input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.vf-kind input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.vf-ie-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 8px; }
.vf-ie-form { display: grid; gap: 4px; min-width: 0; }
.vf-ie-est { position: sticky; top: 0; min-width: 0; padding: 18px; border-radius: 18px; background: var(--ivory); border: 1px solid var(--line); }
.vf-ie-est h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.vf-estlines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.vf-estlines li { display: flex; justify-content: space-between; gap: 10px; }
.vf-estlines li span { min-width: 0; }
.vf-estlines small { color: var(--muted); }
.vf-estlines strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vf-est-sub { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .92rem; }
.vf-est-sub.is-total { margin-top: 0; border-top: 0; padding-top: 4px; font-size: 1.02rem; color: var(--ink); }

/* Cart */
.vf-panel.vf-cart, .vf-panel.vf-panel-wide { width: min(640px, 100%); }
.vf-cart-items { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.vf-cart-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.vf-cart-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gold-soft); color: #0B1F3A; }
.vf-shell.a11y-dark .vf-cart-ic { color: var(--gold); }
.vf-cart-body { display: grid; gap: 2px; min-width: 0; }
.vf-cart-body strong { color: var(--ink); }
.vf-cart-body small { color: var(--muted); }
.vf-cart-amt { font: 800 .98rem var(--f-head); color: var(--ink); margin-top: 4px; }
.vf-cart-act { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.vf-cart-add { margin-bottom: 18px; }
.vf-cart-sum { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--ivory); }
.vf-coupon { display: flex; gap: 8px; }
.vf-coupon input { flex: 1; min-width: 0; text-transform: uppercase; }
.vf-coupon-msg { font-size: .88rem; font-weight: 700; color: var(--danger); }
.vf-coupon-msg.is-ok { color: var(--ok); }
.vf-totals { display: grid; gap: 6px; margin: 0; }
.vf-totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: .93rem; }
.vf-totals dt { color: var(--text); }
.vf-totals dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vf-totals .is-disc dd, .vf-totals .is-disc dt { color: var(--ok); font-weight: 700; }
.vf-totals .is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); font: 800 1.1rem var(--f-head); color: var(--ink); }
.vf-totals .is-total dt { color: var(--ink); }
.vf-totals-mini { margin: 14px 0; }
.vf-cart-meta { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--text); }
.vf-cart-meta .vf-ic { flex: none; width: 18px; height: 18px; color: var(--gold-ink); }
.vf-cart-co { display: grid; gap: 4px; }
.vf-corp { margin-top: 6px; }

/* Orders, approval, quotation builder */
.vf-order-items { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ivory); }
.vf-order-items .vf-estlines { margin-bottom: 4px; }
.vf-approve { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--gold); background: var(--gold-soft); }
.vf-approve p { color: var(--ink); font-size: .92rem; }
.vf-inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.vf-inline-form input { flex: 1 1 200px; min-width: 0; }
.vf-kv-corp { margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--ink); font-size: .9rem; }
.vf-qb { margin: 18px 0; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--ivory); }
.vf-qb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.vf-qb-head h3 { font-size: 1.05rem; font-weight: 800; }
.vf-qlines { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.vf-qline { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vf-qline .vf-field { margin-bottom: 0; }
.vf-ql-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.vf-ql-nums label { font-size: .78rem; }
.vf-ql-amt { display: flex; align-items: center; min-height: 44px; font: 800 .95rem var(--f-head); color: var(--ink); white-space: nowrap; }
.vf-ql-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .85rem; }
.vf-ql-flags .vf-check { margin: 0; }
.vf-payrec { display: grid; gap: 6px; margin-top: 14px; padding: 14px; border-radius: 14px; border: 1px dashed var(--line); }

/* Car plan & live tracker */
.vf-plancard { display: grid; gap: 14px; }
.vf-live { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.vf-live-map { min-width: 0; }
.vf-live-map svg { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 16px; border: 1px solid var(--line); }
.vf-lm-bg { fill: var(--ivory); }
.vf-lm-route { fill: none; stroke: var(--line); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.vf-lm-track { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.vf-lm-halo { fill: var(--navy); opacity: .18; }
.vf-lm-dot { fill: var(--navy); stroke: #fff; stroke-width: 2; }
.vf-shell.a11y-dark .vf-lm-dot, .vf-shell.a11y-dark .vf-lm-halo { fill: var(--gold); }
.vf-live-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: .85rem; color: var(--muted); }
.vf-live-cap em { font-style: normal; opacity: .8; }
.vf-live-dot { display: inline-block; width: 9px; height: 9px; margin-inline-end: 6px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.vf-live-dot.is-on { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.vf-live-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.vf-live-kv div { padding: 10px 12px; border-radius: 12px; background: var(--ivory); }
.vf-live-kv dt { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vf-live-kv dd { margin: 2px 0 0; font: 800 1.05rem var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.vf-bars { display: flex; align-items: flex-end; gap: 3px; height: 72px; padding: 6px; border-radius: 12px; background: var(--ivory); }
.vf-bars span { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--gold); }
.vf-statement { padding: 14px; border-radius: 14px; border: 1px solid var(--line); }
.vf-statement h4 { font-size: .95rem; font-weight: 800; margin-bottom: 8px; }
.vf-events { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.vf-events li { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; }
.vf-events li > span:last-child { text-align: end; color: var(--muted); }
.vf-ev { padding: 2px 8px; border-radius: 999px; background: var(--ivory); font-weight: 800; font-size: .74rem; text-transform: capitalize; }
.vf-ev.is-trip_start, .vf-ev.is-trip_end { background: var(--ok-soft); color: var(--ok); }
.vf-ev.is-overspeed, .vf-ev.is-harsh_brake { background: #FDECEA; color: var(--danger); }
.vf-ev.is-low_fuel, .vf-ev.is-geofence_exit { background: var(--warn-soft); color: var(--warn); }

/* Miles & partner jobs */
.vf-miles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: center; margin-bottom: 16px; }
.vf-miles-card { display: grid; gap: 4px; padding: 22px; border-radius: 22px; background: linear-gradient(135deg, var(--navy), var(--navy-3)); color: #fff; }
.vf-miles-card span { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.vf-miles-card strong { font: 800 2.4rem var(--f-head); color: #fff; }
.vf-miles-card em { font-style: normal; color: #C9D3E4; }
.vf-jobbill { display: grid; gap: 4px; margin-top: 12px; }

/* Console extras */
.vf-track-cols { align-items: start; }
.vf-adddev { margin-top: 10px; }
.vf-code { display: block; padding: 10px 12px; border-radius: 10px; background: var(--ivory); border: 1px solid var(--line); font: 600 .84rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; color: var(--ink); }
.vf-mapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px; margin-top: 8px; }
.vf-mapgrid .vf-field { margin-bottom: 0; }
.vf-caps { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.vf-caps li { font-size: .88rem; }
.vf-caps .vf-check { align-items: flex-start; }
.vf-caps small { display: block; color: var(--muted); }
.vf-testev { display: grid; gap: 8px; }
.vf-codearea { width: 100%; min-height: 170px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--ivory); color: var(--ink); font: 500 .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.vf-sample-out { padding: 10px 12px; border-radius: 12px; background: var(--ivory); font: 500 .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.vf-newcoupon { display: grid; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.vf-maint td { vertical-align: middle; }
.vf-maint-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.vf-subrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

@media (max-width: 860px) {
  .vf-ie-grid, .vf-live, .vf-miles { grid-template-columns: 1fr; }
  .vf-ie-est { position: static; }
  .vf-itemed { width: 100%; }
}
@media (max-width: 560px) {
  .vf-cartbtn-l { display: none; }
  .vf-cartbtn { padding: 0 12px; }
  .vf-ql-nums { grid-template-columns: 1fr 1fr; }
  .vf-cart-item { grid-template-columns: auto minmax(0, 1fr); }
  .vf-cart-act { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}
@media (max-width: 1279px) { .vf-cartbtn { margin-inline-start: auto; } }
@media (max-width: 1279px) { .vf-header-in { gap: 10px; } }
/* Keep the booking form steady when a step grows (browsers' scroll anchoring would otherwise push it up). */
html:has(.vf-shell) { overflow-anchor: none; }
.vf-field-err { display: block; margin-top: 6px; color: var(--danger); font-weight: 800; font-size: .88rem; }
.vf-shell.a11y-contrast .vf-field-err { color: #FFE14D; }
.vf-toasts.is-top { top: calc(16px + env(safe-area-inset-top, 0px)); bottom: auto; }
/* Currency picker */
.vf-topbar-tools { display: flex; align-items: center; gap: 8px; }
.vf-shell .vf-curpick select { width: 82px; }
.vf-topbar-list a { white-space: nowrap; }
.vf-shell .vf-lang select option { color: #0F1A2D; background: #fff; }
.vf-cart-cur { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: .92rem; }
.vf-cart-cur select { max-width: 60%; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.vf-doc-fx { font-size: .85rem; color: var(--muted); }
.vf-export { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vf-export-acct { display: flex; justify-content: flex-end; margin: 0 0 12px; font-size: .88rem; }
.vf-plan-budget { grid-column: 1 / -1; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.vf-plan-budget h5 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; margin-bottom: 6px; }
.vf-budget { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.vf-budget li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vf-budget li span { flex: 1 1 14em; min-width: 0; }
.vf-budget li small { display: block; color: var(--muted); font-size: .8rem; }
.vf-budget li strong { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.vf-budget li.is-total { font-weight: 800; border-bottom: 0; }
.vf-budget-note { font-size: .82rem; margin-top: 8px; }
.vf-search-toggle { margin: 0 16px 8px; font-size: .86rem; }
.vf-fxcard summary { cursor: pointer; }
.vf-fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin-top: 10px; align-items: end; }
.vf-fxgrid .vf-req-actions { grid-column: 1 / -1; }
.vf-nav-links a { white-space: nowrap; }

.vf-auth-switch { margin-top: 14px; text-align: center; color: var(--muted, #5b6472); }
.vf-err .vf-auth-hint { margin-top: 6px; }
.vf-err p { margin: 0; }

.vf-budget-amt { display: grid; gap: 6px; margin-bottom: 10px; }
.vf-budget-amt label { font-weight: 600; }
.vf-budget-amt-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.vf-budget-amt-row input { flex: 1 1 140px; min-width: 0; }
.vf-budget-amt-row select { flex: 0 1 auto; }
.vf-budget-cur { display: inline-flex; align-items: center; padding: 0 12px; border-radius: 10px; background: rgba(201,162,39,.14); font-weight: 700; }
.vf-budget-amt-note { margin: 0; }
.vf-fit { border-radius: 12px; padding: 10px 12px; margin: 6px 0 10px; display: grid; gap: 4px; font-size: .92rem; background: rgba(34,139,84,.10); border: 1px solid rgba(34,139,84,.35); }
.vf-fit.is-tight { background: rgba(201,162,39,.12); border-color: rgba(201,162,39,.45); }
.vf-fit.is-over { background: rgba(190,60,50,.08); border-color: rgba(190,60,50,.4); }
.vf-fit ul { margin: 4px 0 0; padding-left: 18px; }
.vf-budget small.vf-calc { font-variant-numeric: tabular-nums; opacity: .8; font-size: .78rem; }

/* ===== Sleek pass (Oct 2026) ===== */
.vf-nav-a11y { display: none; }
@media (max-width: 1279px) { .vf-nav-a11y { display: inline-flex; } }
.vf-hero-visual { position: relative; margin: 0; min-width: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--sh-3); }
.vf-hero-visual .vf-art, .vf-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-stock { position: absolute; inset-inline-end: 10px; bottom: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(4, 12, 26, .62); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em; pointer-events: none; }
.vf-vcard-img { position: relative; }
.vf-strip-item { flex-direction: row; align-items: center; gap: 12px; }
.vf-strip-item > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vf-strip-item > .vf-ic { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: var(--ivory); color: var(--gold-ink); }
.vf-strip-item strong { font-size: 1.02rem; }
.vf-addons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.vf-addons-t { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-inline-end: 4px; }
.vf-addon { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 8px 16px 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink) !important; font: inherit; font-size: 1.04rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color .2s, transform .2s; }
.vf-addon:hover { border-color: var(--gold-ink); transform: translateY(-1px); }
.vf-addon .vf-ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); flex: none; }
@media (max-width: 640px) { .vf-addons-t { flex-basis: 100%; } .vf-addon { font-size: 1rem; } }
.vf-pkg-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.vf-pkg-termsbtn { font-weight: 700; color: var(--muted); }
.vf-pkg-swipe { display: none; }
.vf-terms-list { margin: 0 0 16px; padding-inline-start: 20px; display: grid; gap: 8px; color: var(--text); font-size: .93rem; }
.vf-tsteps { display: flex; gap: 6px; margin: 4px 0 16px; padding: 0; list-style: none; }
.vf-tsteps li { flex: 1; min-width: 0; }
.vf-tsteps button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 6px; border: 0; border-bottom: 3px solid var(--line); background: none; color: var(--muted); font: 700 .8rem var(--f-body, inherit); text-align: start; cursor: pointer; }
.vf-tsteps button span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ivory); color: var(--ink); font-size: .72rem; }
.vf-tsteps .is-on button { border-color: var(--gold); color: var(--ink); }
.vf-tsteps .is-on button span, .vf-tsteps .is-done button span { background: var(--navy); color: #fff; }
.vf-tstep { display: grid; gap: 4px; }
.vf-tstep-nav { display: flex; gap: 10px; margin-top: 8px; }
.vf-tstep-skip { display: block; margin: 10px auto 0; font-size: .86rem; color: var(--muted); }
.vf-pick-more { padding: 7px 12px; border-radius: 999px; border: 1px dashed var(--line); background: none; color: var(--ink); font-weight: 700; font-size: .85rem; cursor: pointer; }
.vf-reviews { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.vf-rev-main { min-width: 0; display: grid; gap: 16px; }
.vf-rev-new { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.vf-rev-new h3 { font-size: 1.05rem; margin-bottom: 4px; }
.vf-rev-new p { color: var(--muted); font-size: .93rem; }
.vf-rev-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vf-rev-score { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); }
.vf-rev-score strong { font: 800 2rem var(--f-head); color: var(--ink); }
.vf-stars { --r: 0; --sz: 20px; display: inline-block; width: calc(var(--sz) * 5); height: var(--sz); background: linear-gradient(90deg, var(--gold) calc(var(--r) / 5 * 100%), var(--line) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") 0 0 / var(--sz) var(--sz) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") 0 0 / var(--sz) var(--sz) repeat-x; }
.vf-stars-sm { --sz: 15px; }
.vf-rev-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vf-rev { padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; }
.vf-rev-by { font-size: .84rem; color: var(--muted); }
.vf-rev-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 700; }
.vf-rev-ok .vf-ic { width: 14px; height: 14px; }
.vf-trust { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vf-trust li { display: flex; gap: 12px; align-items: flex-start; }
.vf-trust .vf-ic { flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: var(--ivory); color: var(--gold-ink); }
.vf-trust strong { display: block; color: var(--ink); }
.vf-trust span { color: var(--muted); font-size: .9rem; }
.vf-rate-pick { display: flex; gap: 6px; }
.vf-rate-pick button { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--line); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.vf-rate-pick button.is-on { color: var(--gold); border-color: var(--gold); }
.vf-rev-admin li { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.vf-rev-admin p { margin-top: 6px; color: var(--text); }
.vf-rev-admin-btns { display: flex; gap: 8px; }
.vf-page-back { padding-top: 18px; }
.vf-page-back .vf-linkbtn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.vf-page-back .vf-ic { width: 18px; height: 18px; }
.vf-vcard-btns .vf-grow { flex: 1; }
@media (max-width: 980px) {
  .vf-hero-in { grid-template-columns: 1fr; gap: 28px; }
  .vf-hero-visual { aspect-ratio: 16 / 9; }
  .vf-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vf-hero-in { padding-block: 40px 44px; }
  .vf-strip-in { grid-template-columns: 1fr 1fr; }
  .vf-strip-item { padding: 16px 10px; border-inline-start: 0; }
  .vf-strip-item:first-child { padding-inline-start: 10px; }
  .vf-pkg-swipe { display: flex; }
  .vf-pkgs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 4px max(16px, env(safe-area-inset-left, 0px)) 12px; scrollbar-width: none; }
  .vf-pkgs::-webkit-scrollbar { display: none; }
  .vf-pkg { flex: 0 0 84%; scroll-snap-align: center; }
  .vf-tsteps button { flex-direction: column; align-items: flex-start; gap: 4px; font-size: .74rem; }
}
.vf-section-navy .vf-book-intro a { color: var(--gold); font-weight: 700; }
@media (max-width: 640px) {
  .vf-svc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vf-svc-body { padding: 12px 12px 14px; gap: 6px; }
  .vf-svc-name { font-size: .95rem; }
  .vf-svc-lead { display: none; }
  .vf-svc-more { font-size: .8rem; }
  .vf-steps { grid-template-columns: 1fr; gap: 0; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
  .vf-steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border: 0; border-radius: 0; border-top: 1px solid var(--line); }
  .vf-steps li:first-child { border-top: 0; }
  .vf-steps .vf-step-n { grid-row: span 2; width: 34px; height: 34px; margin: 0; font-size: .9rem; }
  .vf-steps h3 { font-size: 1rem; margin: 0; }
  .vf-steps p { margin: 0; font-size: .88rem; }
}

.vf-pkg .vf-ticks { flex: none; display: grid; gap: 8px; align-content: start; }
.vf-pkg .vf-ticks li { align-items: flex-start; }
.vf-hero-visual { aspect-ratio: 16 / 9; }

/* Help me choose stays navy */
.vf-choose, .vf-choose:hover, .vf-choose:focus-visible { background: var(--navy); color: #fff !important; border-color: var(--navy); }
.vf-choose .vf-ic { color: var(--gold); }

/* Why choose us */
.vf-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.vf-why li { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.vf-why-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-ink); }
.vf-why h3 { font-size: 1.04rem; margin-bottom: 4px; }
.vf-why p { color: var(--muted); font-size: .94rem; }
@media (max-width: 900px) { .vf-why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .vf-why { grid-template-columns: 1fr; gap: 10px; } .vf-why li { flex-direction: row; align-items: flex-start; padding: 16px; } .vf-why-ic { flex: none; width: 38px; height: 38px; } }

/* FAQs */
.vf-faq-wrap { max-width: 860px; }
.vf-faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vf-faq-tabs button { min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.vf-faq-tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.vf-faq { display: grid; gap: 10px; }
.vf-faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.vf-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; }
.vf-faq-item summary::-webkit-details-marker { display: none; }
.vf-faq-item summary .vf-ic { flex: none; width: 20px; height: 20px; color: var(--gold-ink); transition: transform .2s; }
.vf-faq-item[open] summary .vf-ic { transform: rotate(45deg); }
.vf-faq-item p { padding: 0 18px 16px; color: var(--text); line-height: 1.6; }

/* Console: team */
.vf-team-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: end; margin-top: 12px; }
.vf-team-form .vf-check, .vf-team-form .vf-err, .vf-team-form .vf-btn { grid-column: 1 / -1; justify-self: start; }
.vf-team-link { display: grid; gap: 8px; margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--gold-soft); }
.vf-team-link input { font-size: .9rem; }
.vf-team-link .vf-btn { justify-self: start; }
@media (max-width: 640px) { .vf-team-form { grid-template-columns: 1fr; } }

/* Overland 4x4 rules note in the trip editor */
.vf-ov-rules { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--ivory); color: var(--ink); font-size: .9rem; line-height: 1.5; }
.vf-ov-rules .vf-ic { flex: none; color: var(--gold-ink); margin-top: 2px; }
.vf-vcard-kit { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; padding: 0; list-style: none; }
.vf-vcard-kit li { padding: 3px 9px; border-radius: 999px; background: var(--gold-soft); color: var(--ink); font-size: .78rem; font-weight: 700; }
/* Phone: keep the top bar inside the screen */
@media (max-width: 420px) {
  .vf-topbar-in { gap: 8px; }
  .vf-topbar-list { min-width: 0; }
  .vf-topbar .vf-lang > .vf-ic { display: none; }
  .vf-topbar-tools { gap: 6px; flex: none; }
  .vf-shell .vf-curpick select { width: 72px; }
  .vf-shell .vf-topbar .vf-lang:not(.vf-curpick) select { max-width: 112px; }
}

/* Legal pages */
.vf-legal { max-width: 760px; }
.vf-legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; }
.vf-legal h2 { font-size: 1.2rem; margin: 28px 0 8px; }
.vf-legal p, .vf-legal li { color: var(--text); line-height: 1.7; }
.vf-legal ul { list-style: disc; padding-inline-start: 22px; display: grid; gap: 6px; }
.vf-legal-lead { font-size: 1.08rem; color: var(--ink) !important; }
.vf-consent { font-size: .84rem; color: var(--muted); margin: 6px 0 4px; }

/* Careers */
.vf-careers { max-width: 900px; }
.vf-careers h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 14px; }
.vf-jobs { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.vf-job { padding: 22px 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.vf-job-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px 20px; }
.vf-job-head > div { flex: 1 1 420px; min-width: 0; display: grid; gap: 6px; }
.vf-job h2 { font-size: 1.3rem; font-weight: 800; }
.vf-job-meta { font-size: .9rem; color: var(--muted); }
.vf-job-pay { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 800; color: var(--ink); }
.vf-job-pay .vf-ic { color: var(--gold-ink); margin-top: 3px; }
.vf-job-body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.vf-job-body h3 { font-size: 1.02rem; margin: 18px 0 8px; color: var(--gold-ink); }
.vf-job-body h3:first-child { margin-top: 0; }
.vf-job-body ul { list-style: disc; padding-inline-start: 22px; display: grid; gap: 6px; }
.vf-job-body p, .vf-job-body li { line-height: 1.6; }
.vf-table-wrap { overflow-x: auto; }
.vf-kpis td:last-child { white-space: nowrap; font-weight: 700; }
.vf-job-apply { margin-top: 16px; }
.vf-careers-foot { margin-top: 32px; display: grid; gap: 10px; }
.vf-careers-foot h2 { font-size: 1.3rem; }
.vf-jobs > li, .vf-job-body { min-width: 0; }
.vf-job-body .vf-rates { min-width: 0; width: 100%; }
.vf-kpis td:last-child { white-space: normal; }

/* ===================== Operations: trips, tickets, applications, finance, audit, support ===================== */
.vf-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.vf-card-head h3 { margin: 0; }
.vf-ops-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--gold-soft); color: var(--ink); font-size: .92rem; }
.vf-ops-note .vf-icon { flex: none; margin-top: 3px; }
.vf-chip-sm { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ivory); border: 1px solid var(--line); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.vf-danger { color: var(--danger) !important; }
.vf-urgent { color: var(--danger); font-weight: 800; }
.vf-ok-msg { color: var(--ok); font-weight: 700; margin-top: 8px; }
.vf-rows-lg li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vf-rows-lg li small, .vf-rows li small { display: block; color: var(--muted); font-size: .82rem; }
.vf-row-btn { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.vf-con-cols.vf-trip-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.vf-trip-side { display: grid; gap: 16px; min-width: 0; }
.vf-trip-day + .vf-trip-day { margin-top: 18px; }
.vf-trip-day h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.vf-trip-list { display: grid; gap: 10px; }
.vf-trip-list > li { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.vf-trip-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.vf-flight { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .9rem; }
.vf-flight-no { display: inline-flex; gap: 6px; align-items: center; font-family: var(--f-head); font-weight: 800; color: var(--ink); }
.vf-fstat { padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.vf-fstat.is-ok { background: var(--ok-soft); color: var(--ok); }
.vf-fstat.is-done { background: #E7EEF8; color: var(--navy-2); }
.vf-fstat.is-warn { background: var(--warn-soft); color: var(--warn); }
.vf-fstat.is-bad { background: #FDECEA; color: var(--danger); }
.vf-fstat.is-muted { background: var(--ivory); color: var(--muted); }
.vf-ftimes { color: var(--text); font-variant-numeric: tabular-nums; }
.vf-factions { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-inline-start: auto; }
.vf-flight-edit { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; align-items: end; }
.vf-alerts { display: grid; gap: 8px; }
.vf-alerts li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: .9rem; }
.vf-alerts small { color: var(--muted); }
.vf-status.is-tk-open { background: #E8F0FB; color: #1C3F72; border-color: transparent; }
.vf-status.is-tk-in_progress { background: #E7EEF8; color: #13305A; border-color: transparent; }
.vf-status.is-tk-waiting { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.vf-status.is-tk-resolved, .vf-status.is-tk-closed { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.vf-tk-log { margin-bottom: 14px; }
.vf-tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.vf-tk-list li.is-sel > button { border-color: var(--gold) !important; box-shadow: 0 0 0 2px var(--gold-soft); }
.vf-tk-list .vf-row-end { display: grid; justify-items: end; gap: 2px; text-align: end; }
.vf-tk-meta { margin-bottom: 10px; }
.vf-tk-thread { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; padding: 4px; margin-bottom: 12px; }
.vf-tk-thread li { max-width: 88%; padding: 10px 12px; border-radius: 14px; background: var(--ivory); }
.vf-tk-thread li.is-staff { justify-self: end; background: #E7EEF8; }
.vf-tk-thread li.is-system { justify-self: center; max-width: 100%; background: transparent; color: var(--muted); font-size: .85rem; text-align: center; }
.vf-tk-thread li.is-internal { background: var(--warn-soft); border: 1px dashed var(--warn); }
.vf-tk-thread small { display: block; color: var(--muted); font-size: .76rem; margin-bottom: 2px; }
.vf-tk-thread p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vf-tk-reply, .vf-tk-rate { display: grid; gap: 8px; }
.vf-tk-reply textarea, .vf-tk-rate input { width: 100%; }
.vf-tk-rated { color: var(--ok); font-weight: 700; }
.vf-stars-in { display: flex; gap: 4px; }
.vf-stars-in button { font-size: 1.7rem; line-height: 1; padding: 4px; color: var(--line); background: none !important; border: 0 !important; transition: color .15s, transform .15s; }
.vf-stars-in button.is-on { color: var(--gold); }
.vf-stars-in button:hover { transform: scale(1.12); }
.vf-stars-lg button { font-size: 2.4rem; }
.vf-ap-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.vf-ap-tools input[type="search"] { flex: 1 1 220px; min-width: 0; }
.vf-ap-bulk { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 700; font-size: .9rem; }
.vf-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.vf-kcol { min-width: 0; padding: 10px; border-radius: 16px; background: var(--ivory); border: 1px solid var(--line); min-height: 160px; }
.vf-kcol h4 { display: flex; justify-content: space-between; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.vf-kcol.is-hired h4, .vf-kcol.is-approved h4 { color: var(--ok); }
.vf-kcol.is-rejected h4 { color: var(--danger); }
.vf-kcol ul { display: grid; gap: 8px; }
.vf-kcard { position: relative; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); cursor: grab; transition: border-color .15s, box-shadow .15s; }
.vf-kcard:hover, .vf-kcard.is-sel { border-color: var(--gold); box-shadow: var(--sh-1); }
.vf-kcard > button { display: grid; gap: 2px; width: 100%; padding: 10px 12px; padding-inline-start: 34px; text-align: start; background: none !important; border: 0 !important; }
.vf-kcard strong { font-size: .95rem; color: var(--ink); }
.vf-kcard small { color: var(--muted); font-size: .8rem; }
.vf-kpick { position: absolute; top: 10px; inset-inline-start: 10px; }
.vf-kmeta { display: flex; flex-wrap: wrap; gap: 4px; font-size: .74rem; color: var(--muted); }
.vf-kstars { color: var(--gold-ink); }
.vf-kdup { color: var(--warn); font-weight: 800; }
.vf-ktag { display: inline-flex; gap: 4px; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); font-size: .74rem; font-weight: 800; }
.vf-ktag button { background: none !important; border: 0 !important; padding: 0; color: inherit; }
.vf-ap-drawer { margin-top: 14px; display: grid; gap: 12px; }
.vf-ap-cover { white-space: pre-wrap; padding: 12px; border-radius: 12px; background: var(--ivory); }
.vf-ap-score { display: flex; gap: 2px; align-items: center; }
.vf-ap-score span { font-weight: 800; margin-inline-end: 6px; }
.vf-ap-score button { font-size: 1.4rem; padding: 2px; color: var(--line); background: none !important; border: 0 !important; }
.vf-ap-score button[aria-pressed="true"] { color: var(--gold); }
.vf-ap-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vf-ap-tags input { width: 130px; min-height: 32px; }
.vf-ap-move { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-ap-reject, .vf-ap-notify { padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 8px; }
.vf-ap-notify { background: var(--ok-soft); border-color: transparent; }
.vf-ap-note { display: flex; gap: 8px; }
.vf-ap-note input { flex: 1; min-width: 0; }
.vf-ap-activity { display: grid; gap: 6px; font-size: .88rem; border-inline-start: 2px solid var(--line); padding-inline-start: 12px; }
.vf-ap-activity small { color: var(--muted); }
.vf-job-ed { margin-top: 14px; display: grid; gap: 10px; }
.vf-fin-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; margin-bottom: 12px; }
.vf-fin-top .vf-field { max-width: 200px; }
.vf-fin-tiles strong { font-size: 1.25rem; }
.vf-fin-import { margin-bottom: 14px; }
.vf-fin-go { display: flex; align-items: end; }
.vf-fin-table td { vertical-align: top; }
.vf-fin-table input { min-width: 130px; width: 100%; margin-top: 4px; }
.vf-fin-sug { display: block; }
.vf-fin-sug small { display: block; color: var(--muted); }
.vf-fin-act { white-space: nowrap; }
.vf-fin-table tr.is-suggested td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.vf-audit code { font-size: .8rem; background: var(--ivory); padding: 1px 6px; border-radius: 6px; }
.vf-audit td { font-size: .88rem; }
.vf-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.vf-role-ed { margin-top: 14px; display: grid; gap: 12px; }
.vf-rate-req { margin: 14px 0; padding: 14px; border-radius: 14px; background: var(--gold-soft); display: grid; gap: 8px; }
.vf-rate-req p { margin: 0; }
.vf-contact-more { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.vf-job-applybtn { margin-inline-start: 6px; }
.vf-appstatus { margin-top: 18px; display: grid; gap: 10px; }
.vf-appstatus-out { padding: 12px; border-radius: 12px; background: var(--ok-soft); }
.vf-sup-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.vf-sup-head p { margin: 0; }
.vf-sup-new, .vf-trip-alerts { margin-bottom: 14px; display: grid; gap: 10px; }
.vf-sup-done { display: grid; gap: 10px; }
.vf-sup-done input { width: 100%; }
.vf-sheet.vf-supsheet, .vf-sheet.vf-ratesheet { width: min(560px, calc(100% - 32px)); }
.vf-sheet.vf-applysheet { width: min(680px, calc(100% - 32px)); }
@media (max-width: 860px) {
  .vf-con-cols.vf-trip-cols, .vf-tk-grid { grid-template-columns: minmax(0, 1fr); }
  .vf-factions { margin-inline-start: 0; }
}


/* ===================== Console side menu & dashboard ===================== */
.vf-console .vf-container { max-width: 1440px; }
.vf-con-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }
.vf-con-main { min-width: 0; }
.vf-side { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); scrollbar-width: thin; }
.vf-tabs.vf-tabs-side { flex-direction: column; gap: 2px; margin: 0; border: 0; overflow: visible; }
.vf-tabs-side button, .vf-tabs-side .vf-tab-link { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 12px; border-bottom: 0 !important; justify-content: flex-start; font-size: .9rem; }
.vf-tabs-side button[aria-selected="true"] { background: var(--navy) !important; color: #fff !important; }
.vf-tabs-side button[aria-selected="true"] .vf-ic { color: var(--gold); }
.vf-tabs-side button:hover:not([aria-selected="true"]) { background: var(--ivory) !important; }
.vf-side-g { display: block; margin: 12px 12px 4px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vf-side-n { margin-inline-start: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--gold); color: #0B1F3A; font-size: .74rem; font-weight: 800; text-align: center; }
.vf-dash { display: grid; gap: 16px; margin-bottom: 22px; }
.vf-dkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.vf-fab.is-console { inset-inline-start: auto; inset-inline-end: calc(22px + env(safe-area-inset-right, 0px)); }
.vf-dkpis li { position: relative; display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.vf-dkpis li::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); }
.vf-dkpis .vf-ic { width: 20px; height: 20px; color: var(--gold-ink); }
.vf-kpi-l { font-size: .8rem; font-weight: 800; color: var(--muted); }
.vf-dkpis strong { font-family: var(--f-head); font-size: 1.6rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.vf-dkpis small { font-size: .8rem; color: var(--muted); }
.vf-dkpis small.is-up { color: var(--ok); font-weight: 700; }
.vf-dkpis small.is-down { color: var(--danger); font-weight: 700; }
.vf-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.vf-dash-grid .vf-card { margin: 0; }
.vf-chart figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vf-chart figcaption h3 { margin: 0; font-size: 1rem; }
.vf-dash-todo h3, .vf-dash-trips h3 { font-size: 1rem; margin-bottom: 10px; }
.vf-dash-todo ul { display: grid; gap: 6px; }
.vf-dash-todo li button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; background: var(--bg) !important; border: 1px solid var(--line) !important; text-align: start; font-weight: 700; color: var(--ink); }
.vf-dash-todo li button:hover { border-color: var(--gold) !important; }
.vf-dash-todo li button .vf-ic { margin-inline-start: auto; width: 16px; height: 16px; color: var(--muted); }
.vf-todo-n { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; font-family: var(--f-head); font-weight: 800; background: var(--ivory); color: var(--ink); }
.vf-dash-todo .is-warn .vf-todo-n { background: var(--warn-soft); color: var(--warn); }
.vf-dash-todo .is-bad .vf-todo-n { background: #FDECEA; color: var(--danger); }
.vf-dash-clear { display: flex; gap: 8px; align-items: center; color: var(--ok); font-weight: 700; }
.vf-dash-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vf-dbars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; height: 170px; padding-bottom: 22px; position: relative; border-bottom: 1px solid var(--line); }
.vf-dbar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.vf-dbar-f { width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: var(--navy-3); transition: height .5s var(--ease-out); }
.vf-dbar.is-today .vf-dbar-f { background: var(--gold); }
.vf-dbar-v { font-size: .7rem; font-weight: 800; color: var(--muted); margin-bottom: 2px; }
.vf-dbar-l { position: absolute; bottom: -20px; font-size: .64rem; color: var(--muted); white-space: nowrap; }
.vf-hbars { display: grid; gap: 6px; }
.vf-hbars button { display: grid; grid-template-columns: 96px minmax(0, 1fr) 46px; gap: 10px; align-items: center; width: 100%; padding: 4px 0; background: none !important; border: 0 !important; text-align: start; color: var(--text); font-size: .86rem; }
.vf-hb-l { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-hb-t { height: 12px; border-radius: 999px; background: var(--ivory); overflow: hidden; }
.vf-hb-f { display: block; height: 100%; border-radius: 999px; background: var(--navy-3); transition: width .5s var(--ease-out); }
.vf-hb-f.is-new { background: #6D8FC7; } .vf-hb-f.is-quoted { background: var(--gold); } .vf-hb-f.is-confirmed { background: var(--navy-3); }
.vf-hb-f.is-paid, .vf-hb-f.is-completed { background: var(--ok); } .vf-hb-f.is-in_progress { background: #8E5BB5; } .vf-hb-f.is-cancelled { background: var(--danger); }
.vf-hb-v { font-weight: 800; text-align: end; font-variant-numeric: tabular-nums; color: var(--ink); }
.vf-hbars button:hover .vf-hb-l { color: var(--ink); text-decoration: underline; }
.vf-donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.vf-donut { width: 150px; height: 150px; max-width: 100%; flex: none; transform: rotate(0deg); }
.vf-legend { display: grid; gap: 6px; flex: 1 1 140px; min-width: 0; font-size: .86rem; }
.vf-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.vf-legend i { width: 12px; height: 12px; border-radius: 4px; }
.vf-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-perm-matrix td, .vf-perm-matrix th { padding: 8px 10px; }
.vf-perm-matrix input { width: 18px; height: 18px; }
.vf-perm-matrix tr.is-off th { color: var(--muted); font-weight: 600; }
@media (max-width: 1080px) {
  .vf-con-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vf-side { position: static; max-height: none; padding: 6px; overflow-x: auto; }
  .vf-tabs.vf-tabs-side { flex-direction: row; overflow-x: auto; }
  .vf-tabs-side button, .vf-tabs-side .vf-tab-link { width: auto; flex: none; }
  .vf-side-g { display: none; }
}

/* ===================== Partner portal ===================== */
.vf-portal-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 24px; }
.vf-portal-intro h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; text-wrap: balance; }
.vf-portal-points { display: grid; gap: 10px; margin-top: 18px; }
.vf-portal-points li { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--ink); }
.vf-portal-points .vf-ic { color: var(--gold-ink); }
.vf-portal-form { display: grid; gap: 12px; padding: 28px; }
.vf-portal-form h2 { font-size: 1.4rem; font-weight: 800; }
.vf-portal-links { font-size: .9rem; text-align: center; }
.vf-portal-note { font-size: .85rem; }
.vf-portal-addr { margin-top: 10px; font-size: .85rem; }
.vf-portal-users { margin-top: 12px; }
.vf-pt-add { display: grid; gap: 10px; margin-bottom: 14px; }
.vf-pt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.vf-pt-area { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.vf-pt-members { display: grid; gap: 10px; }
.vf-pt-members li { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.vf-pt-members li.is-off { opacity: .6; }
.vf-pt-who small { display: block; color: var(--muted); }
.vf-pt-acc { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; }
@media (max-width: 860px) { .vf-portal-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ===================== Chat assistant ===================== */
.vf-sheet.vf-chatsheet { width: min(560px, calc(100% - 32px)); }
.vf-chatsheet h2 { display: flex; gap: 8px; align-items: center; }
.vf-chatsheet h2 .vf-ic { color: var(--gold-ink); }
.vf-asst-log { display: grid; gap: 8px; max-height: min(46vh, 420px); min-height: 140px; overflow-y: auto; padding: 4px; margin-bottom: 10px; }
.vf-asst-log li { max-width: 86%; padding: 10px 14px; border-radius: 16px; background: var(--ivory); color: var(--ink); }
.vf-asst-log li.is-user { justify-self: end; background: var(--navy); color: #fff; border-end-end-radius: 4px; }
.vf-asst-log li.is-assistant { border-end-start-radius: 4px; }
.vf-asst-log p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vf-asst-log .is-typing { display: flex; gap: 4px; }
.vf-asst-log .is-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: vf-dot 1s infinite; }
.vf-asst-log .is-typing span:nth-child(2) { animation-delay: .15s; } .vf-asst-log .is-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes vf-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.vf-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vf-chat-chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line) !important; background: var(--surface) !important; font-size: .85rem; font-weight: 700; color: var(--ink); }
.vf-chat-chips button:hover { border-color: var(--gold) !important; }
.vf-chat-handoff { padding: 12px; border-radius: 14px; background: var(--gold-soft); margin-bottom: 10px; display: grid; gap: 8px; }
.vf-chat-handoff p { margin: 0; font-weight: 700; }
.vf-chat-form { display: flex; gap: 8px; }
.vf-chat-form input { flex: 1; min-width: 0; }
.vf-chat-foot { margin-top: 8px; font-size: .78rem; color: var(--muted); }
.vf-chat-cta { display: flex; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--gold-soft) !important; border: 1px solid transparent !important; text-align: start; color: var(--ink); }
.vf-chat-cta .vf-ic { color: var(--gold-ink); flex: none; }

/* ===================== Get the app ===================== */
.vf-appcard { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(226, 190, 82, .45); color: var(--on-dark); }
.vf-appcard div { display: grid; flex: 1 1 160px; min-width: 0; }
.vf-appcard span { color: var(--on-dark-2); font-size: .9rem; }
.vf-appcard strong { color: #fff; }
.vf-appcard-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--gold); color: #0B1F3A !important; }
.vf-appcard-ic .vf-ic { width: 22px; height: 22px; }
.vf-foot-app { margin-top: 14px; }
.vf-appbar { position: fixed; z-index: 139; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 10px; padding-inline-start: 64px; border-radius: 18px; background: var(--navy); color: #fff; box-shadow: var(--sh-3); }
.vf-appbar .vf-appcard-ic { display: none; }
.vf-appbar-t { flex: 1; min-width: 0; font-size: .85rem; line-height: 1.3; color: var(--on-dark-2); }
.vf-appbar-t strong { display: block; color: #fff; }
.vf-appbar-x { width: 36px; height: 36px; min-height: 36px; color: #fff !important; background: transparent !important; border-color: transparent !important; }
@media (min-width: 861px) { .vf-appbar { left: auto; right: 24px; bottom: 24px; width: 380px; padding-inline-start: 10px; } .vf-appbar .vf-appcard-ic { display: grid; } }

/* ===================== Accessibility extras ===================== */
.vf-tsize { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 10px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg); }
.vf-tsize-b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line) !important; background: var(--surface) !important; font-family: var(--f-head); font-weight: 800; font-size: 1rem; color: var(--ink); }
.vf-tsize-b.is-big { font-size: 1.5rem; }
.vf-tsize-b:disabled { opacity: .4; }
.vf-tsize-bar { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vf-tsize-bar i { height: 8px; border-radius: 999px; background: var(--line); }
.vf-tsize-bar i.is-on { background: var(--navy); }
.vf-voice-set { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 10px; }
.vf-voice-set .vf-field { margin: 0; }
.vf-flabel { display: block; font-size: .85rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.vf-vseg { display: flex; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.vf-vseg button { flex: 1; min-height: 40px; background: var(--surface) !important; border: 0 !important; font-weight: 800; font-size: .85rem; color: var(--muted); }
.vf-vseg button[aria-pressed="true"] { background: var(--navy) !important; color: #fff; }
.vf-va { margin-top: 12px; }
.vf-va-msg { margin-top: 6px; font-size: .88rem; font-weight: 700; color: var(--ink); }
.vf-va-pill { position: fixed; z-index: 151; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); inset-inline-start: calc(86px + env(safe-area-inset-left, 0px)); display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--navy) !important; color: #fff; border: 2px solid var(--gold) !important; font-weight: 800; font-size: .85rem; box-shadow: var(--sh-2); }
.vf-va-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); animation: vf-pulse 1.6s infinite; }
.vf-va-pill.is-awake .vf-va-dot { background: #4ADE80; }
@keyframes vf-pulse { 0% { box-shadow: 0 0 0 0 rgba(226, 190, 82, .7); } 70% { box-shadow: 0 0 0 10px rgba(226, 190, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 190, 82, 0); } }
.vf-shell.a11y-align-center :is(main, footer) * { text-align: center !important; }
.vf-shell.a11y-align-right :is(main, footer) * { text-align: right !important; }
@media (max-width: 860px) { .vf-va-pill { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); inset-inline-start: calc(68px + env(safe-area-inset-left, 0px)); } }
@media (prefers-reduced-motion: reduce) { .vf-va-dot, .vf-asst-log .is-typing span { animation: none; } }

.vf-careers-intro { font-weight: 700; color: var(--ink); }
.vf-deadline, .vf-job-dl { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--ink); }
.vf-deadline { margin-top: 6px; padding: 8px 14px; border-radius: 999px; background: var(--gold-soft); }
.vf-job-dl { font-size: .9rem; color: var(--gold-ink); }

/* ===================== Posts: jobs, adverts, announcements ===================== */
.vf-notice { background: var(--gold-soft); color: var(--ink); border-bottom: 1px solid var(--line); font-size: .92rem; }
.vf-notice-in { display: flex; align-items: center; gap: 10px; padding-block: 8px; min-width: 0; }
.vf-notice-in > .vf-icon { flex: none; color: var(--gold-ink); }
.vf-notice-in p { margin: 0; flex: 1; min-width: 0; line-height: 1.4; }
.vf-notice-link { flex: none; font-weight: 800; color: var(--navy) !important; white-space: nowrap; }
.vf-notice-x { flex: none; width: 32px; height: 32px; min-height: 32px; }
.vf-notice-static { border-radius: 14px; margin-bottom: 10px; }
.vf-notice-static .vf-notice-in { padding: 10px 14px; }
@media (max-width: 600px) { .vf-notice-in { flex-wrap: wrap; } .vf-notice-in p { flex-basis: calc(100% - 70px); } }
.vf-news { padding-block: 40px 10px; }
.vf-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.vf-news-card { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--gold); box-shadow: var(--sh-1); }
.vf-news-card h3 { margin: 0; font-size: 1.15rem; }
.vf-news-card p { margin: 0; }
.vf-news-card .vf-btn { justify-self: start; }
.vf-news-end { font-size: .85rem; }
.vf-posts-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.vf-posts-top .vf-filters { margin: 0; }
.vf-post-main { min-width: 0; flex: 1 1 260px; }
.vf-post-main small { overflow-wrap: anywhere; }
.vf-post-actions { flex-wrap: wrap; align-items: center; }
.vf-del-ask { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 800; color: var(--danger); }
.vf-post-help { margin-top: 10px; font-size: .88rem; }
.vf-status.is-post-draft { background: var(--ivory); color: var(--muted); border-color: var(--line); }
.vf-status.is-post-open { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.vf-status.is-post-paused { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.vf-status.is-post-closed { background: #FDECEA; color: var(--danger); border-color: transparent; }
.vf-sheet.vf-postprev { width: min(720px, calc(100% - 32px)); }
.vf-job-preview { list-style: none; }

/* Social handles */
.vf-social { margin-top: 22px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.vf-social-t { margin: 0; font-weight: 700; color: var(--muted); }
.vf-social-t strong { color: var(--ink); }
.vf-social-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vf-social-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 800; font-size: .9rem; text-decoration: none; transition: border-color .2s, transform .2s; }
.vf-social-list a:hover { border-color: var(--gold); transform: translateY(-1px); }
.vf-social-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--f-head); font-size: .72rem; font-weight: 800; }
.vf-social-foot { justify-items: start; text-align: start; margin: 14px 0; }
.vf-social-foot .vf-social-t { color: var(--on-dark-2); }
.vf-social-foot .vf-social-t strong { color: #fff; }
.vf-social-foot .vf-social-list { justify-content: flex-start; }
.vf-social-foot .vf-social-list a { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.vf-footer .vf-social-foot .vf-social-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.vf-footer .vf-social-foot .vf-social-list a { padding-inline-end: 12px; font-size: .84rem; min-height: 36px; }

/* ---------- sign-up codes and password reset ---------- */
.vf-auth-info { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--green-soft, #E7F6EE); color: var(--green-ink, #13633B); font-size: .95rem; line-height: 1.45; }
.vf-auth-info .vf-ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.vf-code-in { font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.vf-auth-resend { margin-top: 12px; text-align: center; font-size: .92rem; color: var(--muted, #5b6472); }
.vf-dash-verify .vf-hbars { margin-top: 10px; }
.vf-dash-verify p { margin: 4px 0; }

/* ---------- accessibility: side tab + scrolling sidebar (WaData-style) ---------- */
.vf-fab.vf-a11y-tab { top: 50%; bottom: auto; inset-inline-start: auto; inset-inline-end: 0; transform: translateY(-50%); width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 9px 16px; border-radius: 0; border-start-start-radius: 14px; border-end-start-radius: 14px; border-inline-end: 0 !important; transition: inset-inline-end .4s var(--ease-out), padding .2s; }
.vf-fab.vf-a11y-tab:hover { transform: translateY(-50%); padding-inline-end: 13px; }
.vf-fab.vf-a11y-tab .vf-ic { width: 24px; height: 24px; }
.vf-a11y-tab-t { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.vf-fab.vf-a11y-tab.is-open { z-index: 201; inset-inline-end: min(420px, 100%); }
.vf-a11y.is-side { box-shadow: -18px 0 40px -18px rgba(4, 12, 26, .45); border-inline-start: 1px solid var(--line); }
.vf-a11y-head { position: sticky; top: -22px; z-index: 2; margin: -22px -22px 6px; padding: 18px 22px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.vf-a11y-foot { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom, 0px)); z-index: 2; margin: 16px -22px calc(-24px - env(safe-area-inset-bottom, 0px)); padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
.vf-a11y { overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 759px) {
  .vf-fab.vf-a11y-tab { width: auto; height: auto; bottom: auto; inset-inline-start: auto; padding: 11px 7px; gap: 0; }
  .vf-fab.vf-a11y-tab .vf-ic { width: 22px; height: 22px; }
  .vf-a11y-tab-t { display: none; }
  .vf-fab.vf-a11y-tab.is-open { display: none; }
}

/* ---------- hub: list bars, predictive search, users, roles, broadcasts, analytics, pricing ---------- */
.vf-listbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.vf-shell .vf-listbar > select, .vf-shell .vf-listbar > input[type="date"], .vf-shell .vf-listbar > input[type="time"] { width: auto; max-width: 100%; min-height: 42px; padding-block: 8px; }
.vf-listbar .vf-export { margin-inline-start: auto; }
.vf-listbar-in { margin-bottom: 8px; }
.vf-psearch { position: relative; flex: 1 1 240px; min-width: 0; max-width: 460px; }
.vf-psearch input { min-height: 42px !important; padding-block: 8px !important; }
.vf-psearch-list { position: absolute; z-index: 40; top: calc(100% + 4px); inset-inline: 0; max-height: 280px; overflow-y: auto; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.vf-psearch-list li { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .92rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-psearch-list li:hover, .vf-psearch-list li.is-hi { background: var(--ivory); }
.vf-con-tools .vf-psearch { flex: 0 1 300px; }
.vf-sort-sel { width: auto !important; min-height: 42px !important; padding-block: 8px !important; }
.vf-th-sort { padding: 0; background: none !important; border: 0 !important; font: inherit; font-weight: 800; color: inherit; text-align: inherit; cursor: pointer; }
.vf-th-sort:hover { text-decoration: underline; }
.vf-block { display: block; }
.vf-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.vf-card-head h3 { margin: 0; }
.vf-notice-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-weight: 700; font-size: .92rem; }
.vf-notice-inline .vf-ic { width: 18px; height: 18px; }
.vf-btn-danger { color: var(--danger) !important; }
.vf-btn-danger-solid { background: var(--danger); color: #fff !important; }
.vf-btn-danger-solid:hover { background: #8E1B12; }
.vf-ok-msg { color: var(--ok); font-weight: 700; margin: 6px 0; }
/* users */
.vf-user-kpis { margin-bottom: 14px; }
.vf-user-kpis li { padding: 0; }
.vf-kpi-btn { display: grid; gap: 2px; width: 100%; padding: 14px 18px; background: none !important; border: 0 !important; text-align: start; color: inherit; }
.vf-kpi-btn strong { font-family: var(--f-head); font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1.15; }
.vf-user-kpis li:has(.vf-kpi-btn[aria-pressed="true"]) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.vf-users td small, .vf-users td .vf-del-flag { display: block; color: var(--muted); font-size: .8rem; }
.vf-users td .vf-del-flag { color: var(--warn); font-weight: 800; }
.vf-user-name { font-weight: 800; color: var(--ink) !important; text-decoration: none; }
.vf-user-name:hover { text-decoration: underline; }
.vf-users tr.is-off td { opacity: .55; }
.vf-user-dl { margin: 12px 0; }
.vf-user-acts { margin: 12px 0; }
.vf-user-act, .vf-del-req { margin: 12px 0; }
.vf-del-req { background: var(--warn-soft); border-color: transparent; }
.vf-timeline { display: grid; gap: 6px; font-size: .88rem; }
.vf-timeline code { font-size: .82rem; }
.vf-user-activity { margin-top: 18px; }
/* roles */
.vf-role-list li > div:first-child { min-width: 0; }
.vf-hub-matrix th[scope="row"] { min-width: 200px; text-align: start; }
.vf-hub-matrix td, .vf-hub-matrix thead th { text-align: center; }
.vf-hub-matrix tr.is-off th[scope="row"] { color: var(--muted); }
.vf-perm-g th { padding-top: 14px !important; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: start !important; background: transparent !important; }
.vf-na { color: var(--line); }
.vf-pa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.vf-pa-row { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.vf-pa-row legend { padding: 0 4px; font-size: .86rem; font-weight: 800; color: var(--ink); }
.vf-pa-row .vf-check { margin: 6px 0 0; }
/* broadcasts */
.vf-bc-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vf-chip { min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--line) !important; background: var(--surface) !important; font-size: .84rem; font-weight: 800; color: var(--ink); }
.vf-chip:hover { border-color: var(--gold) !important; }
.vf-bc-list { display: grid; gap: 12px; }
.vf-bc-list li { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.vf-bc-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.vf-bc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.vf-pick-people { max-height: 220px; overflow-y: auto; margin: 6px 0; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); }
.vf-pick-people .vf-check { margin: 4px 0; }
/* analytics */
.vf-chart-wide { grid-column: 1 / -1; }
.vf-mbars { height: 190px; }
.vf-dbar-pair { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 100%; }
.vf-dbar-pair .vf-dbar-f { width: 45%; max-width: 14px; }
.vf-dbar-f.is-alt { background: var(--gold); }
.vf-hbars .vf-hrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 52px; gap: 10px; align-items: center; padding: 4px 0; font-size: .86rem; }
.vf-top-list { display: grid; gap: 6px; padding: 0; list-style: none; counter-reset: top; }
.vf-top-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; counter-increment: top; }
.vf-top-list li::before { content: counter(top); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--ivory); font-weight: 800; font-size: .8rem; }
.vf-top-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--ink); }
.vf-top-list li small { grid-column: 2; color: var(--muted); }
.vf-top-list li strong { grid-column: 3; grid-row: 1; }
/* pricing */
.vf-adj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.vf-num-in { width: 120px !important; text-align: end; }
.vf-charges input:not([type="checkbox"]), .vf-charges select { min-height: 40px !important; padding-block: 6px !important; }
.vf-adv { margin: 10px 0 14px; }
.vf-adv summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.vf-ag-form { margin: 12px 0 16px; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.vf-doc-terms { margin-top: 8px; font-size: .9rem; }
/* account side layout, dashboard, messages, security */
.vf-acc-layout { margin-top: 18px; }
.vf-acc-kpis { margin: 16px 0; }
.vf-next h3 { margin: 4px 0 6px; font-size: 1.2rem; }
.vf-next .vf-ic { width: 16px; height: 16px; vertical-align: -3px; }
.vf-dash-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vf-meter { height: 8px; margin: 10px 0 6px; border-radius: 999px; background: var(--ivory); overflow: hidden; }
.vf-meter span { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.vf-inbox-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.vf-inbox { display: grid; gap: 8px; }
.vf-inbox li { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.vf-inbox-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: none !important; border: 0 !important; text-align: start; color: inherit; }
.vf-inbox-row .vf-ic { margin-inline-start: auto; width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
.vf-inbox-row[aria-expanded="true"] .vf-ic { transform: rotate(90deg); }
.vf-inbox-t { display: grid; min-width: 0; }
.vf-inbox-t strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 700; }
.vf-inbox-t small { color: var(--muted); font-size: .8rem; }
.vf-inbox-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.vf-inbox li.is-unread .vf-inbox-dot { background: var(--gold); }
.vf-inbox li.is-unread .vf-inbox-t strong { font-weight: 800; }
.vf-inbox-body { padding: 0 14px 14px 35px; }
.vf-sec-form, .vf-sec-danger { margin-top: 16px; }
.vf-sec-danger { border-color: #F3C9C4; }
.vf-del-form { margin-top: 10px; }
@media (max-width: 1023px) {
  .vf-listbar .vf-export { margin-inline-start: 0; }
  .vf-psearch { flex-basis: 100%; max-width: none; }
  .vf-hbars .vf-hrow { grid-template-columns: 96px minmax(0, 1fr) 46px; }
}
.vf-rows-tight li { padding: 8px 12px; }

.vf-staging-bar { position: relative; z-index: 120; padding: 6px max(16px, env(safe-area-inset-left, 0px)); background: repeating-linear-gradient(135deg, #8A5A00 0 14px, #6F4800 14px 28px); color: #fff; font-weight: 800; font-size: .85rem; text-align: center; letter-spacing: .02em; }

/* Leaflet 1.9.4 – BSD-2-Clause, (c) Vladimir Agafonkin, (c) CloudMade */
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}