/*
 * Loaded on every page after the other stylesheets (partials/vx-theme.php, layout.php):
 *   1. Transparent header over the dark hero (header.vx-hdr-overlay, navbar.php + layout.php)
 *   2. Light / dark theme (html[data-theme="dark"], button in navbar.php)
 *   3. "At a glance" box (partials/at-a-glance.php)
 * Plain CSS on purpose: the Tailwind bundles are pre-built per page, so new utility classes would
 * not exist in them. Selectors carry #page (an id) where they must beat tema.css' !important rules.
 * Was an inline <style> until 2026-10-21; as a file it is cached instead of repeated in every page.
 */
/* ---------- Header controls ---------- */
.vx-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.18);cursor:pointer;transition:background-color .2s,border-color .2s;flex-shrink:0}
.vx-theme-toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.vx-theme-toggle:focus-visible{outline:2px solid var(--vx-accent,#f6b12c);outline-offset:2px}
.vx-theme-toggle svg{display:block}
.vx-theme-toggle .vx-theme-sun{display:none}
html[data-theme="dark"] .vx-theme-toggle .vx-theme-sun{display:block}
html[data-theme="dark"] .vx-theme-toggle .vx-theme-moon{display:none}
.vx-mobile-actions{align-items:center;gap:10px}
.vx-mobile-actions .vx-theme-toggle{width:36px;height:36px}

/* ---------- Transparent header ---------- */
html{--vx-hdr-h:60px}
@media (min-width:640px){html{--vx-hdr-h:64px}}
@media (min-width:1024px){html{--vx-hdr-h:72px}}
html body header.sticky.vx-hdr-overlay{margin-bottom:calc(-1 * var(--vx-hdr-h));box-shadow:none!important}
html body header.sticky.vx-hdr-overlay>nav{transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
html body header.sticky.vx-hdr-overlay:not(.is-scrolled)>nav{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important}
html body header.sticky.vx-hdr-overlay.is-scrolled>nav{box-shadow:0 10px 30px rgba(0,0,0,.25)}
/* The page's first visible block extends up under the header (its dark background shows through) */
/* Two separate rules: a browser that does not know ":nth-child(of …)" would drop the whole list */
.vx-hdr-overlay~main>.vx-under-hdr{border-top:var(--vx-hdr-h) solid transparent!important;background-origin:border-box!important}
.vx-hdr-overlay~main>:nth-child(1 of :not(style,script,link,template,meta)){border-top:var(--vx-hdr-h) solid transparent!important;background-origin:border-box!important}
/* Photo heroes: the photo itself continues under the header (ids in the selectors beat tema.css,
   whose ::before uses inset:0 and whose background shorthand resets background-origin) */
html body.vx-page-home #page #main-content>div.relative:first-child::before{top:calc(-1 * var(--vx-hdr-h))!important}
html body #page #main-content>.vx-under-hdr{background-origin:border-box!important}
/* Home hero: heading sits closer to the header (tema.css: 40px phone / 96px desktop) so the
   heading, search bar and "free cancellation" line fit in the first screen */
html body.vx-page-home #page #main-content>div.relative:first-child>div{padding-top:24px!important}
@media (min-width:640px){html body.vx-page-home #page #main-content>div.relative:first-child>div{padding-top:40px!important}}
@media (min-width:1024px){html body.vx-page-home #page #main-content>div.relative:first-child>div{padding-top:56px!important}}

/* ---------- Home hero: airports under the H1 (home.php) ---------- */
.vx-hero-airports{margin:14px 0 0;padding:0 16px;max-width:880px}
.vx-hero-airports ul{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.vx-hero-airports li{margin:0;padding:0}
.vx-hero-airports a{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.86);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.vx-hero-airports a:hover{color:#fff;border-bottom-color:var(--vx-accent,#f6b12c)}
.vx-hero-airports .vx-code{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--vx-accent,#f6b12c);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (max-width:639px){.vx-hero-airports{margin-top:12px}.vx-hero-airports ul{gap:6px 14px}.vx-hero-airports a{font-size:13.5px}}

/* ---------- "At a glance" ---------- */
.vx-glance-wrap{padding:28px 0;background:var(--vx-bg,#f5f4f0);border-bottom:1px solid var(--vx-border,#e2e0da)}
.vx-glance{max-width:80rem;margin:0 auto;padding:0 1rem}
@media (min-width:640px){.vx-glance{padding:0 1.5rem}}
@media (min-width:1024px){.vx-glance{padding:0 2rem}}
.vx-glance-card{background:var(--vx-surface,#fff);border:1px solid var(--vx-border,#e2e0da);border-left:4px solid var(--vx-accent,#f6b12c);border-radius:16px;padding:20px 22px}
.vx-glance-title{margin:0 0 6px;font-size:13px;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-accent-text,#8f5a00)}
.vx-glance-answer{margin:0 0 16px;font-size:17px;line-height:1.6;color:var(--vx-text,#151515)}
.vx-glance-facts{display:grid;grid-template-columns:1fr;gap:0;margin:0;border-top:1px solid var(--vx-border,#e2e0da)}
@media (min-width:768px){.vx-glance-facts{grid-template-columns:1fr 1fr;column-gap:32px}}
.vx-glance-facts>div{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--vx-border,#e2e0da)}
.vx-glance-facts dt{margin:0;font-size:13px;font-weight:600;color:var(--vx-muted,#67655f)}
.vx-glance-facts dd{margin:0;font-size:14px;font-weight:600;color:var(--vx-text,#151515);line-height:1.5}
.vx-glance-updated{margin:12px 0 0;font-size:12.5px;color:var(--vx-muted,#67655f)}

/* =====================================================================
   Dark theme
   ===================================================================== */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"],html[data-theme="dark"] body{
  --vx-bg:#0f0f10;--vx-bg-alt:#161618;--vx-surface:#1b1b1e;--vx-surface-2:#232327;--vx-panel:#1b1b1e;
  --vx-border:#2d2d32;--vx-border-strong:#3d3d43;--vx-text:#ecebe6;--vx-muted:#a9a7a1;--vx-ink:#2a2a2f;
  --vx-accent-text:#f6b12c;--vx-ok:#4ade80;--vx-ok-strong:#86efac;
  --d-bg:#0f0f10;--d-alt:#161618;--d-surface:#1b1b1e;--d-surface-2:#232327;--d-border:#2d2d32;--d-border-strong:#3d3d43;--d-text:#ecebe6;--d-muted:#a9a7a1;--d-faint:#7d7b76
}
html[data-theme="dark"] body,html[data-theme="dark"] #page{background-color:var(--d-bg)!important;color:var(--d-text)}

/* Surfaces */
html[data-theme="dark"] #page .bg-white,
html[data-theme="dark"] #page .bg-white\/95{background-color:var(--d-surface)!important}
html[data-theme="dark"] #page #main-content>section.bg-white,
html[data-theme="dark"] #page #main-content>div.bg-white,
html[data-theme="dark"] #page #main-content>article.bg-white{background-color:var(--d-bg)!important}
html[data-theme="dark"] #page .bg-gray-50,html[data-theme="dark"] #page .bg-gray-100,
html[data-theme="dark"] #page .bg-slate-50,html[data-theme="dark"] #page .bg-slate-100,
html[data-theme="dark"] #page [class~="bg-gray-50/50"],html[data-theme="dark"] #page [class~="bg-gray-50/80"]{background-color:var(--d-alt)!important}
html[data-theme="dark"] #page .bg-gray-200,html[data-theme="dark"] #page .bg-gray-300{background-color:var(--d-surface-2)!important}
html[data-theme="dark"] #page .bg-amber-50,html[data-theme="dark"] #page .bg-amber-100,html[data-theme="dark"] #page .bg-orange-50,
html[data-theme="dark"] #page .bg-yellow-50,html[data-theme="dark"] #page [class~="bg-amber-50/40"],
html[data-theme="dark"] #page [class~="bg-amber-50/70"],html[data-theme="dark"] #page [class~="bg-amber-50/20"]{background-color:rgba(246,177,44,.10)!important}
html[data-theme="dark"] #page .bg-green-100,html[data-theme="dark"] #page .bg-emerald-50,
html[data-theme="dark"] #page .bg-green-50{background-color:rgba(34,197,94,.14)!important}
html[data-theme="dark"] #page .bg-blue-50{background-color:rgba(59,130,246,.14)!important}
html[data-theme="dark"] #page .to-white{--tw-gradient-to:var(--d-bg)!important}

/* Text */
html[data-theme="dark"] #page .text-gray-950,html[data-theme="dark"] #page .text-gray-900,
html[data-theme="dark"] #page .text-gray-800,html[data-theme="dark"] #page .text-gray-700,
html[data-theme="dark"] #page .text-slate-900,html[data-theme="dark"] #page .text-slate-700,
html[data-theme="dark"] #page h1.text-black,html[data-theme="dark"] #page h2.text-black,
html[data-theme="dark"] #page h3.text-black,html[data-theme="dark"] #page p.text-black{color:var(--d-text)!important}
html[data-theme="dark"] #page .text-gray-600,html[data-theme="dark"] #page .text-gray-500,
html[data-theme="dark"] #page .text-slate-600,html[data-theme="dark"] #page .text-slate-500{color:var(--d-muted)!important}
html[data-theme="dark"] #page .text-amber-600,html[data-theme="dark"] #page .text-amber-700,
html[data-theme="dark"] #page .text-amber-800,html[data-theme="dark"] #page .text-amber-900,
html[data-theme="dark"] #page .text-trf-orange{color:#f6b12c!important}
html[data-theme="dark"] #page .text-green-600,html[data-theme="dark"] #page .text-green-700,
html[data-theme="dark"] #page .text-green-800,html[data-theme="dark"] #page .text-emerald-600,
html[data-theme="dark"] #page .text-emerald-700{color:#4ade80!important}
html[data-theme="dark"] #page .text-blue-600{color:#60a5fa!important}
html[data-theme="dark"] #page .text-teal-600{color:#2dd4bf!important}
html[data-theme="dark"] #page .text-purple-600{color:#c084fc!important}
/* Buttons on the accent colour keep dark text */
html[data-theme="dark"] #page .bg-trf-orange,html[data-theme="dark"] #page .bg-amber-400,
html[data-theme="dark"] #page .bg-amber-500,html[data-theme="dark"] #page .bg-yellow-400{color:#141414}

/* Borders */
html[data-theme="dark"] #page .border-gray-50,html[data-theme="dark"] #page .border-gray-100,
html[data-theme="dark"] #page .border-gray-200,html[data-theme="dark"] #page .border-gray-300,
html[data-theme="dark"] #page [class~="border-gray-200/80"],html[data-theme="dark"] #page [class~="border-gray-200/90"],
html[data-theme="dark"] #page .divide-gray-100>*,html[data-theme="dark"] #page .divide-gray-200>*{border-color:var(--d-border)!important}
html[data-theme="dark"] #page .border-amber-100,html[data-theme="dark"] #page .border-amber-200,
html[data-theme="dark"] #page [class~="border-amber-100/60"]{border-color:rgba(246,177,44,.28)!important}
html[data-theme="dark"] #page .ring-gray-200{--tw-ring-color:var(--d-border)!important}
html[data-theme="dark"] #page .shadow-sm,html[data-theme="dark"] #page .shadow,html[data-theme="dark"] #page .shadow-md{box-shadow:0 1px 3px rgba(0,0,0,.5)!important}

/* Form fields */
html[data-theme="dark"] #page input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=image]):not([type=hidden]),
html[data-theme="dark"] #page select,html[data-theme="dark"] #page textarea{background-color:var(--d-surface-2)!important;color:var(--d-text)!important;border-color:var(--d-border-strong)!important}
html[data-theme="dark"] #page input::placeholder,html[data-theme="dark"] #page textarea::placeholder{color:var(--d-faint)!important}
html[data-theme="dark"] #page option{background:var(--d-surface);color:var(--d-text)}
html[data-theme="dark"] #page label{color:inherit}

/* Home search tabs, help page WhatsApp button (tema.css: white backgrounds) */
html[data-theme="dark"] .vx-page-home .vx-search .trip-type-btn.active{background:var(--vx-accent)!important;color:#141414!important}
html[data-theme="dark"] .vx-page-help #faq-container~.bg-gradient-to-br a.bg-emerald-500{color:#151515!important}
html[data-theme="dark"] #page .trip-type-btn:not(.active){background-color:var(--d-surface-2);color:var(--d-text)}
/* Home search bar: the bar is the field, inputs inside stay borderless */
html[data-theme="dark"] #page #main-content .vx-search .search-bar{border:1px solid var(--d-border-strong)!important}
html[data-theme="dark"] #page #main-content .vx-search .search-bar input,
html[data-theme="dark"] #page #main-content .vx-search .search-bar select{background-color:transparent!important;border-color:transparent!important}
/* Focused field (tema.css: light #f2f1ec behind the light text, so what was typed disappeared); also the
   same search bar on route and hotel pages (partials/mobile-booking.php) */
html[data-theme="dark"] #page .vx-search .seg:focus-within{background:var(--d-surface-2)!important}

/* Airport page fare table (styles.css) */
html[data-theme="dark"] #page .rate-matrix{background:var(--d-alt)!important;border-color:var(--d-border)!important}
html[data-theme="dark"] #page .rate-matrix-table-wrap,html[data-theme="dark"] #page .rate-matrix-empty{background:var(--d-surface)!important;border-color:var(--d-border)!important}
html[data-theme="dark"] #page .rate-matrix-table thead th{background:var(--d-surface-2)!important;color:var(--d-muted)!important}
html[data-theme="dark"] #page .rate-matrix-table td{border-color:var(--d-border)!important}
html[data-theme="dark"] #page .rate-matrix-intro h2,html[data-theme="dark"] #page .rate-matrix-table .rm-dest a,
html[data-theme="dark"] #page .rate-matrix-table td.rm-price{color:var(--d-text)!important}
html[data-theme="dark"] #page .rate-matrix-table .rm-chip{background:var(--d-surface-2)!important;color:var(--d-text)!important}
html[data-theme="dark"] #page .rate-matrix-more button{background:var(--d-surface)!important;color:var(--d-text)!important;border-color:var(--d-border-strong)!important}
/* Row hover (tema.css: light #faf9f6) and the phone cards (styles.css: white): light text on them was unreadable */
html[data-theme="dark"] #page .rate-matrix-table tbody tr:hover td{background:var(--d-surface-2)!important}
html[data-theme="dark"] #page .rate-matrix-table tbody tr:hover td.rm-featured{background:rgba(246,177,44,.1)!important}
@media (max-width:767px){
html[data-theme="dark"] #page .rate-matrix-table tbody tr{background:var(--d-surface)!important;border-color:var(--d-border)!important}
html[data-theme="dark"] #page .rate-matrix-table tbody tr:hover td{background:none!important}
html[data-theme="dark"] #page .rate-matrix-table tbody tr:hover td.rm-price{background:var(--d-bg)!important}
html[data-theme="dark"] #page .rate-matrix-table tbody tr:hover td.rm-featured{background:rgba(246,177,44,.14)!important}
}

/* Blog article body */
html[data-theme="dark"] #page .blog-content h1,html[data-theme="dark"] #page .blog-content h2,html[data-theme="dark"] #page .blog-content h3,
html[data-theme="dark"] #page .blog-content h4,html[data-theme="dark"] #page .blog-content strong{color:var(--d-text)!important}
html[data-theme="dark"] #page .blog-content p,html[data-theme="dark"] #page .blog-content li,html[data-theme="dark"] #page .prose{color:#d6d4ce!important}
html[data-theme="dark"] #page .blog-content code,html[data-theme="dark"] #page .blog-content table th{background:var(--d-surface-2)!important}
html[data-theme="dark"] #page .blog-content table td,html[data-theme="dark"] #page .blog-content table th{border-color:var(--d-border)!important}

/* Address suggestions (Yandex / form-styles.css) */
html[data-theme="dark"] .yandex-suggestions,html[data-theme="dark"] [class*="-suggest__list"]{background:var(--d-surface)!important;border-color:var(--d-border)!important}
html[data-theme="dark"] .suggestion-item,html[data-theme="dark"] [class*="-suggest__item"]{color:var(--d-text)!important;border-color:var(--d-border)!important}
html[data-theme="dark"] .suggestion-item:hover,html[data-theme="dark"] [class*="-suggest__item"]:hover,
html[data-theme="dark"] [class*="-suggest__item_selected"]{background:rgba(246,177,44,.14)!important;color:#fff!important}
/* yandex-autocomplete.js colours the item under the mouse or arrow keys inline (#fffbeb) and every item it
   leaves white: in dark mode the light names on them disappeared. Its grey address line (#6b7280) is lifted. */
html[data-theme="dark"] .suggestion-item{background-color:transparent!important}
html[data-theme="dark"] .suggestion-item[style*="255, 251, 235"],html[data-theme="dark"] .suggestion-item[style*="fffbeb"]{background:rgba(246,177,44,.14)!important;color:#fff!important}
html[data-theme="dark"] .suggestion-item span[style*="6b7280"]{color:var(--d-muted)!important}
html[data-theme="dark"] #page .search-form{background:var(--d-surface)!important}
html[data-theme="dark"] #page .form-group label{color:var(--d-muted)!important}

/* Booking form (inline styles in booking-form.php / hourly-search.php) */
html[data-theme="dark"] #page .bk-card,html[data-theme="dark"] #page .hs-card{background:var(--d-surface)!important;box-shadow:0 10px 30px rgba(0,0,0,.4)!important;border-color:var(--d-border)!important}
html[data-theme="dark"] #page .bk-tile{background:var(--d-surface-2)!important;border-color:var(--d-border)!important}
html[data-theme="dark"] #page .bk-value,html[data-theme="dark"] #page .bk-row strong,html[data-theme="dark"] #page .bk-extra-name,
html[data-theme="dark"] #page .bk-stepper output,html[data-theme="dark"] #page .bk-step.is-current,
html[data-theme="dark"] #page .hs-name,html[data-theme="dark"] #page .hs-price{color:var(--d-text)!important}
html[data-theme="dark"] #page .bk-extra-icon{background:rgba(246,177,44,.12)!important}
html[data-theme="dark"] #page .bk-stepper button,html[data-theme="dark"] #page .bk-stepper button:hover:not(:disabled){background:var(--d-surface-2)!important;color:var(--d-text)!important;border-color:var(--d-border-strong)!important}
html[data-theme="dark"] #page .bk-stop::before{background:var(--d-surface)!important;border-color:var(--d-text)!important}
html[data-theme="dark"] #page .hs-empty{background:rgba(246,177,44,.08)!important;color:var(--d-text)!important;border-color:var(--d-border)!important}
html[data-theme="dark"] #page .vehicle-card.is-selected{background-color:rgba(246,177,44,.10)!important}

/* Hourly chauffeur pages (inline styles in chauffeur-hire.php) */
html[data-theme="dark"] #page .ch-form{background:var(--d-surface)!important;color:var(--d-text)!important}
html[data-theme="dark"] #page .ch-form label,html[data-theme="dark"] #page .ch-facts dd,html[data-theme="dark"] #page .ch-table td,
html[data-theme="dark"] #page .ch-glance-lead{color:#d6d4ce!important}
html[data-theme="dark"] #page .ch-sec h2,html[data-theme="dark"] #page .ch-sight h3,html[data-theme="dark"] #page .ch-table td strong,
html[data-theme="dark"] #page .ch-facts dt,html[data-theme="dark"] #page .ch-faq summary{color:var(--d-text)!important}
html[data-theme="dark"] #page .ch-table td{border-color:var(--d-border)!important}
html[data-theme="dark"] #page .ch-table tr:nth-child(even) td{background:var(--d-alt)!important}
html[data-theme="dark"] #page .ch-card,html[data-theme="dark"] #page .ch-sight,html[data-theme="dark"] #page .ch-faq details{background:var(--d-surface)!important;border-color:var(--d-border)!important}
html[data-theme="dark"] #page .ch-note{background:rgba(246,177,44,.08)!important;border-color:rgba(246,177,44,.28)!important;color:#f3d79a!important}

/* Generic: tables and horizontal rules */
html[data-theme="dark"] #page table th,html[data-theme="dark"] #page table td{border-color:var(--d-border)}
html[data-theme="dark"] #page hr{border-color:var(--d-border)}
html[data-theme="dark"] #page details{border-color:var(--d-border)}