/*
Theme Name: Rayago
Theme URI: https://nrcityrometours.com/
Author: Al Mamun Rayhan
Author URI: https://instagram.com/ryan_pinnacle/
Description: Rayago is a modern tour & activity booking theme built for travel operators. It ships with a Tour post type, destination taxonomy, a marketplace-style front page, sticky booking box, itinerary timeline, review blocks, a currency switcher and 8 native Elementor widgets. Fully customizable from the WordPress Customizer.
Version: 2.12.1
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rayago
Tags: travel, booking, tours, elementor, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Every value below is overridden live by the Customizer (Appearance >
   Customize > Colors / Typography). Do not hardcode colors elsewhere.
   ========================================================================== */
:root {
  --vg-primary:      #0f66e0;
  --vg-primary-dark: #0a4fb3;
  --vg-primary-soft: #e8f0fe;
  --vg-accent:       #d92e2e;
  --vg-ink:          #14243f;
  --vg-body:         #38455c;
  --vg-muted:        #6b7a91;
  --vg-line:         #e3e8ef;
  --vg-bg:           #ffffff;
  --vg-surface:      #f6f8fb;
  --vg-hero-from:    #dbe9fb;
  --vg-hero-to:      #ffffff;
  --vg-footer-bg:    #17233f;
  --vg-footer-text:  #ffffff;
  --vg-star:         #14243f;

  --vg-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --vg-font-head:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --vg-fs-base:      16px;

  --vg-radius:       12px;
  --vg-radius-sm:    8px;
  --vg-radius-pill:  999px;
  --vg-shadow:       0 1px 2px rgba(20,36,63,.06), 0 4px 16px rgba(20,36,63,.07);
  --vg-shadow-lg:    0 8px 40px rgba(20,36,63,.14);
  --vg-container:    1220px;
  --vg-gap:          20px;
  --vg-header-h:     64px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--vg-font-body);
  font-size: var(--vg-fs-base);
  line-height: 1.55;
  color: var(--vg-body);
  background: var(--vg-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vg-font-head);
  color: var(--vg-ink);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 800;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--vg-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol { padding-left: 1.2em; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--vg-primary); outline-offset: 2px; border-radius: 4px; }
.vg-sr, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 999999; width: auto; height: auto;
  clip: auto; padding: 12px 20px; background: #fff; border-radius: 8px; box-shadow: var(--vg-shadow-lg);
}

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.vg-container { width: 100%; max-width: var(--vg-container); margin: 0 auto; padding: 0 20px; }
.vg-section { padding: 44px 0; }
.vg-section--tight { padding: 26px 0; }
.vg-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.vg-section-head h2 { margin: 0; }
.vg-section-head .vg-seeall { font-weight: 600; font-size: .92rem; white-space: nowrap; }
.vg-lead { color: var(--vg-muted); max-width: 62ch; margin-top: -6px; }

.vg-grid { display: grid; gap: var(--vg-gap); }
.vg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vg-grid--4 { grid-template-columns: repeat(4, 1fr); }
.vg-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* Horizontal scroll rail (used on mobile + destination row) */
.vg-rail { position: relative; }
.vg-rail__track {
  display: grid; grid-auto-flow: column; gap: var(--vg-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.vg-rail__track::-webkit-scrollbar { display: none; }
/* Inside a slider the cards must not shrink, so they keep a floor width.
   Everywhere else they follow whatever the grid gives them. */
.vg-rail__track > * { scroll-snap-align: start; }
.vg-rail__track > .vg-card { min-width: 262px; }
.vg-rail__track > .vg-attr { min-width: 220px; }
.vg-rail__track > .vg-dest { min-width: 168px; }

@media (max-width: 520px) {
  .vg-rail__track > .vg-card { min-width: 78vw; }
  .vg-rail__track > .vg-attr { min-width: 62vw; }
  .vg-rail__track > .vg-dest { min-width: 42vw; }
}
.vg-rail__nav {
  position: absolute; top: 40%; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--vg-line); color: var(--vg-primary);
  display: grid; place-items: center; box-shadow: var(--vg-shadow);
  transition: transform .18s ease, opacity .18s ease;
}
.vg-rail__nav:hover { transform: scale(1.08); }
.vg-rail__nav[hidden] { display: none; }
.vg-rail__nav--prev { left: -14px; }
.vg-rail__nav--next { right: -14px; }

/* Buttons */
.vg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: 1px solid transparent; border-radius: var(--vg-radius-pill);
  font-weight: 700; font-size: .95rem; line-height: 1; text-decoration: none;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.vg-btn:hover { text-decoration: none; transform: translateY(-1px); }
.vg-btn--primary { background: var(--vg-primary); color: #fff; }
.vg-btn--primary:hover { background: var(--vg-primary-dark); color: #fff; }
.vg-btn--ghost { background: #fff; color: var(--vg-primary); border-color: var(--vg-primary); }
.vg-btn--block { width: 100%; }
.vg-btn--lg { padding: 15px 30px; font-size: 1rem; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.vg-header {
  position: sticky; top: 0; z-index: 500;
  background: transparent;
  transition: background .2s ease, box-shadow .2s ease;
}
.vg-header.is-stuck { background: var(--vg-bg); box-shadow: 0 1px 0 var(--vg-line), 0 4px 18px rgba(20,36,63,.06); }

/* Over a hero photo the header gets its own scrim, so the menu stays legible
   in both colour schemes without depending on how bright the photo is. */
.vg-header--over-media:not(.is-stuck) {
  background: linear-gradient(180deg, rgba(9,16,28,.62) 0%, rgba(9,16,28,.34) 60%, rgba(9,16,28,0) 100%);
}
.vg-header--over-media:not(.is-stuck) .vg-brand__text,
.vg-header--over-media:not(.is-stuck) .vg-brand__tag,
.vg-header--over-media:not(.is-stuck) .vg-nav__list > li > a,
.vg-header--over-media:not(.is-stuck) .vg-iconbtn,
.vg-header--over-media:not(.is-stuck) .vg-burger {
  color: #fff;
}
.vg-header--over-media:not(.is-stuck) .vg-nav__list > li > a:hover,
.vg-header--over-media:not(.is-stuck) .vg-iconbtn:hover {
  color: #fff; background: rgba(255,255,255,.16);
}
.vg-header--over-media:not(.is-stuck) .vg-nav__list > li > a:hover { background: none; text-decoration: underline; text-underline-offset: 6px; }
/* Dropdown panels keep the normal surface colours. */
.vg-header--over-media:not(.is-stuck) .sub-menu a,
.vg-header--over-media:not(.is-stuck) .vg-pop__panel a,
.vg-header--over-media:not(.is-stuck) .vg-pop__panel button { color: var(--vg-ink); }
.vg-header__bar { display: flex; align-items: center; gap: 22px; min-height: var(--vg-header-h); }
.vg-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; text-decoration: none; }
.vg-brand img { max-height: 40px; width: auto; }
.vg-brand__text { font-family: var(--vg-font-head); font-weight: 900; font-size: 1.15rem; color: var(--vg-primary); letter-spacing: -.03em; line-height: 1.05; text-transform: uppercase; }
.vg-brand__tag { display: block; font-size: .68rem; font-weight: 600; color: var(--vg-muted); letter-spacing: .06em; text-transform: uppercase; }

/* Compact search that appears once you scroll past the hero */
.vg-header__search {
  flex: 0 1 300px; margin-left: auto;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.vg-header.is-stuck .vg-header__search,
.vg-header.no-hero .vg-header__search { opacity: 1; transform: none; pointer-events: auto; }
.vg-header__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/*
 * A gap between the search box and the buttons — but only while the search
 * box is on screen. It is display:none on phones, and a hidden element is
 * still a sibling, so this selector kept matching and its margin-left
 * overrode the `auto` above, leaving the buttons stranded mid-bar instead of
 * pushed to the right edge.
 */
@media (min-width: 769px) {
  .vg-header__search + .vg-header__actions { margin-left: 12px; }
}

.vg-iconbtn {
  background: none; border: 0; padding: 6px 9px; border-radius: var(--vg-radius-sm);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--vg-ink); font-size: .72rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.vg-iconbtn:hover { background: var(--vg-primary-soft); color: var(--vg-primary); text-decoration: none; }
.vg-iconbtn svg { width: 20px; height: 20px; }

/* Primary nav — inline, on the same row as the logo */
.vg-nav { flex: 0 1 auto; min-width: 0; }
.vg-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; flex-wrap: nowrap; }
.vg-nav__list li { position: relative; }
.vg-nav__list a { color: var(--vg-ink); font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: 5px; padding: 8px 0; white-space: nowrap; }
.vg-nav__list a:hover { color: var(--vg-primary); text-decoration: none; }
.vg-nav__list .menu-item-has-children > a::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.vg-nav__list li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.vg-nav__list .sub-menu {
  position: absolute; top: 100%; left: -14px; min-width: 220px; list-style: none;
  margin: 0; padding: 8px; background: var(--vg-bg); border: 1px solid var(--vg-line);
  border-radius: var(--vg-radius); box-shadow: var(--vg-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .18s ease; z-index: 60;
}
.vg-nav__list .sub-menu a { display: block; padding: 9px 12px; border-radius: var(--vg-radius-sm); font-weight: 600; font-size: .9rem; }
.vg-nav__list .sub-menu a:hover { background: var(--vg-primary-soft); }
.vg-nav__list .current-menu-item > a { color: var(--vg-primary); }

/* When the compact search appears there is less room, so drop the menu */
@media (max-width: 1180px) {
  .vg-header.is-stuck .vg-nav, .vg-header.no-hero .vg-nav { display: none; }
}

/* When the header floats over a hero photo, dark text vanishes. Give it a
   backdrop and flip everything to white until the header sticks. */

/* Backdrop styles, chosen in Customize → Header */
.vg-header--over-media-gradient:not(.is-stuck) {
  background: linear-gradient(180deg, rgba(8,16,30,.62) 0%, rgba(8,16,30,.28) 60%, rgba(8,16,30,0) 100%);
}
.vg-header--over-media-solid:not(.is-stuck) {
  background: rgba(8,16,30,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vg-header--over-media-bar:not(.is-stuck) { background: var(--vg-ink); }
/* "none" keeps the header fully transparent — text still turns white. */

/* Mobile toggle */
.vg-burger { display: none; background: none; border: 0; padding: 8px; color: var(--vg-ink); }
.vg-burger svg { width: 24px; height: 24px; }

/* ==========================================================================
   5. SEARCH FORM
   ========================================================================== */
.vg-search { position: relative; }
.vg-search__form {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border-radius: var(--vg-radius-pill); padding: 6px 6px 6px 18px;
  box-shadow: var(--vg-shadow); border: 1px solid var(--vg-line);
}
.vg-search__form input[type="search"], .vg-search__form input[type="text"] {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font-size: .95rem; color: var(--vg-ink); padding: 8px 0;
}
.vg-search__form input::placeholder { color: var(--vg-muted); }
.vg-search__form button {
  flex: 0 0 auto; background: var(--vg-primary); color: #fff; border: 0;
  border-radius: var(--vg-radius-pill); padding: 11px 24px; font-weight: 700; font-size: .92rem;
}
.vg-search__form button:hover { background: var(--vg-primary-dark); }
.vg-search__icon { width: 18px; height: 18px; color: var(--vg-muted); flex: 0 0 auto; }
.vg-search--hero .vg-search__form { padding: 10px 10px 10px 26px; box-shadow: var(--vg-shadow-lg); border-color: transparent; }
.vg-search--hero input { font-size: 1.05rem; padding: 12px 0; }
.vg-search--hero button { padding: 15px 34px; font-size: 1rem; }
.vg-search--sm .vg-search__form { padding: 3px 3px 3px 14px; }
.vg-search--sm button { padding: 8px 18px; font-size: .85rem; }

/* Live suggestions */
.vg-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 90;
  background: #fff; border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
  box-shadow: var(--vg-shadow-lg); overflow: hidden; display: none;
}
.vg-suggest.is-open { display: block; }
.vg-suggest a { display: flex; gap: 12px; align-items: center; padding: 10px 16px; color: var(--vg-ink); font-size: .92rem; }
.vg-suggest a:hover { background: var(--vg-surface); text-decoration: none; }
.vg-suggest img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.vg-suggest__empty { padding: 14px 16px; color: var(--vg-muted); font-size: .9rem; }

/* ==========================================================================
   6. HERO
   ========================================================================== */
.vg-hero {
  --vg-hero-h: 460px;
  --vg-hero-overlay: .45;
  position: relative;
  margin-top: calc(var(--vg-header-h) * -1);
  padding: calc(var(--vg-header-h) + 56px) 0 60px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.vg-hero--inline { margin-top: 0; padding-top: 60px; }

/* Plain gradient */
.vg-hero--gradient { background: linear-gradient(180deg, var(--vg-hero-from) 0%, var(--vg-hero-to) 100%); }

/* Photo or slideshow behind the search bar */
.vg-hero--media {
  min-height: var(--vg-hero-h);
  display: flex; align-items: center;
  background: var(--vg-ink);
}
.vg-hero__bg, .vg-hero__slides { position: absolute; inset: 0; z-index: -2; }
.vg-hero__bg { background-size: cover; background-position: center; }

.vg-hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s ease-in-out;
}
.vg-hero__slide.is-active { opacity: 1; }
.vg-hero--zoom .vg-hero__slide.is-active,
.vg-hero--zoom .vg-hero__bg { animation: vg-kenburns 14s ease-out forwards; }
@keyframes vg-kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) {
  .vg-hero--zoom .vg-hero__slide.is-active, .vg-hero--zoom .vg-hero__bg { animation: none; }
  .vg-hero__slide { transition: none; }
}

.vg-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(10,20,40, calc(var(--vg-hero-overlay) * 1.15)) 0%,
    rgba(10,20,40, calc(var(--vg-hero-overlay) * .75)) 100%);
}

.vg-hero__inner { position: relative; z-index: 1; width: 100%; }
.vg-hero__title { margin: 0 0 12px; }
.vg-hero__sub { color: var(--vg-body); font-size: 1.05rem; margin: 0 auto 26px; max-width: 60ch; }
.vg-hero__search { max-width: 720px; margin: 0 auto; }

.vg-hero__trust { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 24px; font-size: .88rem; font-weight: 600; color: var(--vg-body); }
.vg-hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.vg-hero__trust svg { width: 16px; height: 16px; color: var(--vg-primary); }

/* Text goes white once there is a photo behind it */
.vg-hero--media .vg-hero__title,
.vg-hero--media .vg-hero__sub,
.vg-hero--media .vg-hero__trust { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.34); }
.vg-hero--media .vg-hero__trust svg { color: #fff; }

/* Slideshow dots */
.vg-hero__dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.vg-hero__dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.5); transition: background .2s ease, width .2s ease;
}
.vg-hero__dot:hover { background: rgba(255,255,255,.8); }
.vg-hero__dot.is-active { background: #fff; width: 24px; border-radius: var(--vg-radius-pill); }

/* ==========================================================================
   7. CARDS
   ========================================================================== */
/* -- Destination card (square photo + name underneath) -- */
.vg-dest { display: block; min-width: 0; }
.vg-dest:hover { text-decoration: none; }
.vg-dest__img { position: relative; aspect-ratio: 1 / 1; border-radius: var(--vg-radius); overflow: hidden; background: var(--vg-surface); }
.vg-dest__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vg-dest:hover .vg-dest__img img { transform: scale(1.06); }
.vg-dest__name { margin: 10px 0 0; font-weight: 800; color: var(--vg-ink); font-size: 1.02rem; }
.vg-dest__count { font-size: .82rem; color: var(--vg-muted); }

/* -- Attraction card (wide photo, title below) -- */
.vg-attr { display: block; min-width: 0; }
.vg-attr:hover { text-decoration: none; }
.vg-attr__img { aspect-ratio: 16 / 11; border-radius: var(--vg-radius); overflow: hidden; background: var(--vg-surface); }
.vg-attr__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vg-attr:hover .vg-attr__img img { transform: scale(1.06); }
.vg-attr__title { margin: 9px 0 2px; font-weight: 800; color: var(--vg-ink); font-size: .98rem; }
.vg-attr__meta { font-size: .8rem; color: var(--vg-muted); }

/* -- Tour card (the main product card) -- */
.vg-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
  overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.vg-card:hover { box-shadow: var(--vg-shadow-lg); transform: translateY(-2px); }
.vg-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--vg-surface); }
.vg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.vg-card:hover .vg-card__media img { transform: scale(1.05); }
.vg-card__link { position: absolute; inset: 0; z-index: 2; }
.vg-card__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vg-card__badge {
  position: absolute; top: 0; left: 0; z-index: 3;
  background: var(--vg-accent); color: #fff; font-size: .72rem; font-weight: 800;
  padding: 6px 10px; border-radius: 0 0 var(--vg-radius-sm) 0; letter-spacing: .01em;
}
.vg-card__badge--soft { background: var(--vg-ink); }
.vg-wish {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94);
  display: grid; place-items: center; color: var(--vg-ink); box-shadow: 0 2px 8px rgba(0,0,0,.14);
  transition: transform .16s ease;
}
.vg-wish:hover { transform: scale(1.1); }
.vg-wish svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.vg-wish.is-active { color: var(--vg-accent); }
.vg-wish.is-active svg { fill: currentColor; }

.vg-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1 1 auto; }
.vg-card__eyebrow { font-size: .78rem; color: var(--vg-muted); font-weight: 600; margin-bottom: 4px; }
.vg-card__title { font-size: .97rem; font-weight: 800; line-height: 1.32; margin: 0 0 8px; }
.vg-card__title a { color: var(--vg-ink); }
.vg-card__title a:hover { color: var(--vg-primary); text-decoration: none; }
.vg-card__facts { font-size: .8rem; color: var(--vg-muted); margin-bottom: 12px; }
.vg-card__facts span + span::before { content: "·"; margin: 0 6px; }
.vg-card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.vg-rating { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--vg-ink); font-weight: 700; }
.vg-rating svg { width: 13px; height: 13px; fill: var(--vg-star); }
.vg-rating em { font-style: normal; color: var(--vg-muted); font-weight: 500; }
.vg-price { text-align: right; font-size: .8rem; color: var(--vg-muted); line-height: 1.35; }
.vg-price del { color: var(--vg-muted); margin-right: 5px; }
.vg-price strong { display: inline-block; font-size: 1.06rem; color: var(--vg-ink); font-weight: 800; }
.vg-price.is-sale strong { color: var(--vg-accent); }

.vg-card__cta {
  margin-top: 12px; width: 100%; padding: 10px 18px; font-size: .88rem;
  position: relative; z-index: 3;
}
.vg-card__cta svg { width: 15px; height: 15px; }

/* Card list (search / archive results) */
.vg-results { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   8. TRUST / USP BLOCK
   ========================================================================== */
.vg-usps { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.vg-usp {
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
  padding: 28px 24px; text-align: center; background: #fff;
}
.vg-usp__icon { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--vg-primary); }
.vg-usp__icon svg { width: 100%; height: 100%; }
.vg-usp h3 { font-size: 1rem; margin-bottom: 6px; }
.vg-usp p { font-size: .88rem; color: var(--vg-muted); margin: 0; }

/* ==========================================================================
   8b. CLIENT REVIEW SLIDER
   ========================================================================== */
.vg-revslider { --vg-rev-per-view: 3; position: relative; }
.vg-revslider__score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.vg-revslider__score strong { font-size: 1.9rem; color: var(--vg-ink); line-height: 1; font-weight: 800; }
.vg-revslider__score span { font-size: .86rem; color: var(--vg-muted); }

.vg-revslider__viewport { overflow: hidden; margin: 0 -6px; padding: 6px; }
.vg-revslider__track {
  display: flex; gap: var(--vg-gap);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .vg-revslider__track { transition: none; } }

.vg-revcard {
  flex: 0 0 calc((100% - (var(--vg-gap) * (var(--vg-rev-per-view) - 1))) / var(--vg-rev-per-view));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
  padding: 20px; box-shadow: var(--vg-shadow);
}
.vg-revcard .vg-stars { margin: 0 0 12px; }
.vg-revcard__text {
  margin: 0 0 16px; padding: 0; border: 0;
  font-size: .93rem; line-height: 1.6; color: var(--vg-body); flex: 1 1 auto;
}
.vg-revcard__text::before { content: "\201C"; }
.vg-revcard__text::after  { content: "\201D"; }
.vg-revcard__foot { display: flex; align-items: center; gap: 12px; }
.vg-revcard__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.vg-revcard__avatar--initial {
  display: grid; place-items: center; background: var(--vg-primary-soft);
  color: var(--vg-primary); font-weight: 800; font-size: 1rem;
}
.vg-revcard__name { display: block; font-weight: 700; color: var(--vg-ink); font-size: .9rem; }
.vg-revcard__meta { display: block; font-size: .78rem; color: var(--vg-muted); }
.vg-revcard__tour {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vg-line);
  font-size: .8rem; font-weight: 600;
}

.vg-revslider__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--vg-line); color: var(--vg-primary);
  display: grid; place-items: center; box-shadow: var(--vg-shadow);
  transition: transform .18s ease;
}
.vg-revslider__nav:hover { transform: translateY(-50%) scale(1.08); }
.vg-revslider__nav[disabled] { opacity: .35; cursor: default; }
.vg-revslider__nav[disabled]:hover { transform: translateY(-50%); }
.vg-revslider__nav--prev { left: -18px; }
.vg-revslider__nav--next { right: -18px; }

.vg-revslider__dots { display: flex; justify-content: center; gap: 7px; margin-top: 20px; }
.vg-revslider__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--vg-line); cursor: pointer; transition: background .2s ease, width .2s ease;
}
.vg-revslider__dots button.is-active { background: var(--vg-primary); width: 22px; border-radius: var(--vg-radius-pill); }

@media (max-width: 900px) { .vg-revslider { --vg-rev-per-view: 2; } .vg-revslider__nav { display: none; } }
@media (max-width: 620px) { .vg-revslider { --vg-rev-per-view: 1; } }

/* ==========================================================================
   9. SINGLE TOUR
   ========================================================================== */
.vg-crumbs { font-size: .82rem; color: var(--vg-muted); padding: 14px 0; }
.vg-crumbs a { color: var(--vg-muted); }
.vg-crumbs a:hover { color: var(--vg-primary); }
.vg-crumbs span + span::before { content: "›"; margin: 0 7px; }

.vg-tour__head { margin-bottom: 16px; }
.vg-tour__title { margin: 0 0 10px; }
.vg-tour__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .88rem; color: var(--vg-muted); }
.vg-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--vg-ink); color: #fff;
  font-size: .74rem; font-weight: 800; padding: 5px 10px; border-radius: var(--vg-radius-sm);
}
.vg-chip--accent { background: var(--vg-accent); }
.vg-chip--soft { background: var(--vg-primary-soft); color: var(--vg-primary); }

/* Gallery mosaic */
/*
 * Gallery mosaic. The layout follows how many photos a tour actually has, so
 * a tour with two images does not leave gaps where three more should be.
 */
.vg-gallery {
  display: grid; gap: 8px; margin-bottom: 26px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.vg-gallery--1 { grid-template-columns: 1fr; grid-template-rows: auto; }
.vg-gallery--2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.vg-gallery--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.vg-gallery--4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }

.vg-gallery__item { position: relative; overflow: hidden; border-radius: var(--vg-radius-sm); background: var(--vg-surface); }
.vg-gallery__item:first-child { grid-row: span 2; }
.vg-gallery--1 .vg-gallery__item:first-child,
.vg-gallery--2 .vg-gallery__item:first-child { grid-row: auto; }
/* With four photos the second one fills the tall gap the fifth would leave. */
.vg-gallery--4 .vg-gallery__item:nth-child(2) { grid-row: span 2; }

.vg-gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; cursor: zoom-in; transition: transform .4s ease; }
.vg-gallery__item:first-child img { aspect-ratio: 4/3.4; }
.vg-gallery--1 .vg-gallery__item:first-child img,
.vg-gallery--2 .vg-gallery__item:first-child img { aspect-ratio: 16/9; }
.vg-gallery__item:hover img { transform: scale(1.04); }
.vg-gallery__more {
  position: absolute; right: 12px; bottom: 12px; background: rgba(255,255,255,.95);
  border: 0; border-radius: var(--vg-radius-pill); padding: 8px 16px; font-size: .82rem; font-weight: 700; color: var(--vg-ink);
  display: inline-flex; align-items: center; gap: 7px;
}

.vg-tour__layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 40px; align-items: start; padding-bottom: 50px; }
.vg-tour__aside { position: sticky; top: calc(var(--vg-header-h) + 16px); }

/* Booking box */
.vg-book {
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 18px;
  box-shadow: var(--vg-shadow); background: #fff; position: relative;
}
.vg-book__badge { position: absolute; top: -12px; left: 14px; }
.vg-book__price { font-size: .84rem; color: var(--vg-muted); margin-bottom: 14px; }
.vg-book__price del { display: block; font-size: .82rem; }
.vg-book__price strong { font-size: 1.55rem; color: var(--vg-accent); font-weight: 800; margin-right: 6px; }
.vg-book__field { margin-bottom: 10px; }
.vg-book__field label { display: block; font-size: .78rem; font-weight: 700; color: var(--vg-ink); margin-bottom: 5px; }
.vg-book__field select, .vg-book__field input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--vg-line); border-radius: var(--vg-radius-pill);
  font-size: .9rem; color: var(--vg-ink); background: #fff; appearance: none;
}
/*
 * Dropdown arrows.
 *
 * The arrow is drawn with currentColor rather than a hardcoded hex, because a
 * CSS variable cannot be interpolated inside a data: URI — the browser treats
 * the whole url() as an opaque string. currentColor does resolve, so the
 * arrow simply follows the field's text colour in either theme.
 *
 * The repeat and size are forced because any rule elsewhere using the
 * `background` shorthand resets them, which tiles the arrow across the field.
 */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  padding-right: 38px;
}
select::-ms-expand { display: none; }
.vg-book .vg-btn { margin-top: 6px; }
.vg-book__perks { list-style: none; margin: 16px 0 0; padding: 0; }
.vg-book__perks li { display: flex; gap: 10px; font-size: .82rem; margin-bottom: 12px; color: var(--vg-body); }
.vg-book__perks strong { display: block; color: var(--vg-ink); font-size: .86rem; }
.vg-book__perks svg { width: 17px; height: 17px; color: #1a9e5c; flex: 0 0 auto; margin-top: 2px; }

/* Quick facts strip */
.vg-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 30px; padding: 22px 0; border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line); margin-bottom: 26px; }
.vg-fact { display: flex; gap: 12px; }
.vg-fact__icon { width: 34px; height: 34px; border-radius: var(--vg-radius-sm); background: var(--vg-surface); color: var(--vg-ink); display: grid; place-items: center; flex: 0 0 auto; }
.vg-fact__icon svg { width: 18px; height: 18px; }
.vg-fact strong { display: block; font-size: .88rem; color: var(--vg-ink); }
.vg-fact span { font-size: .82rem; color: var(--vg-muted); }

/* Definition rows (Highlights / Includes / Not suitable ...) */
.vg-rows { border-top: 1px solid var(--vg-line); }
.vg-row { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--vg-line); }
.vg-row__label { font-weight: 800; color: var(--vg-ink); font-size: .98rem; }
.vg-row__body { font-size: .93rem; }
.vg-row__body ul { margin: 0; padding-left: 20px; }
.vg-row__body li { margin-bottom: 7px; }
.vg-check { list-style: none; padding: 0; margin: 0; }
.vg-check li { display: flex; gap: 10px; margin-bottom: 8px; }
.vg-check li::before { content: "✓"; color: #1a9e5c; font-weight: 800; flex: 0 0 auto; }
.vg-check li.is-no::before { content: "✕"; color: var(--vg-accent); }

/* Itinerary timeline */
.vg-itin { list-style: none; margin: 0; padding: 0; position: relative; }
.vg-itin::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; border-left: 2px dotted var(--vg-accent); }
.vg-itin li { position: relative; padding: 0 0 22px 40px; }
.vg-itin__dot {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid var(--vg-accent); color: var(--vg-accent);
  display: grid; place-items: center; font-size: .68rem; font-weight: 800;
}
.vg-itin__ttl { font-weight: 800; color: var(--vg-ink); font-size: .93rem; }
.vg-itin__sub { font-size: .84rem; color: var(--vg-muted); }

/* Reviews */
.vg-reviews { padding: 30px 0; border-top: 1px solid var(--vg-line); }
.vg-rev-top { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 30px; align-items: start; margin-bottom: 24px; }
.vg-rev-score { font-size: 2.4rem; font-weight: 800; color: var(--vg-ink); line-height: 1; }
.vg-rev-score sup { font-size: 1rem; color: var(--vg-muted); font-weight: 600; }
.vg-stars { display: inline-flex; gap: 2px; margin: 8px 0 6px; }
.vg-stars svg { width: 18px; height: 18px; fill: var(--vg-star); }
.vg-stars svg.is-empty { fill: var(--vg-line); }
.vg-rev-summary { background: var(--vg-surface); border-radius: var(--vg-radius); padding: 18px 20px; font-size: .92rem; }
.vg-rev-summary h4 { margin: 0 0 8px; font-size: .92rem; }
.vg-rev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.vg-rev { border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 16px; font-size: .9rem; }
.vg-rev__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vg-rev__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--vg-accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.vg-rev__name { font-weight: 700; color: var(--vg-ink); font-size: .86rem; }
.vg-rev__date { font-size: .76rem; color: var(--vg-muted); }
.vg-rev p { margin: 0; }

/* ==========================================================================
   10. ARCHIVE / SIDEBAR FILTERS
   ========================================================================== */
.vg-archive { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 34px; padding: 24px 0 60px; }
.vg-filters { border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 18px; position: sticky; top: calc(var(--vg-header-h) + 16px); }
.vg-filters h3 { font-size: .95rem; margin-bottom: 12px; }
.vg-filters ul { list-style: none; padding: 0; margin: 0 0 18px; }
.vg-filters li { margin-bottom: 8px; }
.vg-filters a { font-size: .89rem; color: var(--vg-body); }
.vg-filters a:hover { color: var(--vg-primary); }
.vg-archive__head { margin-bottom: 18px; }
.vg-count { color: var(--vg-muted); font-size: .9rem; }

/* Pagination */
.vg-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.vg-pagination .page-numbers {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--vg-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--vg-line); color: var(--vg-ink); font-weight: 700; font-size: .9rem;
}
.vg-pagination .page-numbers:hover { border-color: var(--vg-primary); color: var(--vg-primary); text-decoration: none; }
.vg-pagination .page-numbers.current { background: var(--vg-primary); border-color: var(--vg-primary); color: #fff; }

/* ==========================================================================
   11. MODALS (language / currency / profile)
   ========================================================================== */
.vg-modal { position: fixed; inset: 0; z-index: 900; display: none; }
.vg-modal.is-open { display: block; }
.vg-modal__overlay { position: absolute; inset: 0; background: rgba(20,36,63,.55); }
.vg-modal__box {
  position: relative; z-index: 2; max-width: 720px; width: calc(100% - 32px); max-height: 82vh; overflow: auto;
  margin: 8vh auto 0; background: #fff; border-radius: var(--vg-radius); box-shadow: var(--vg-shadow-lg); padding: 22px 26px 30px;
}
.vg-modal__close { position: absolute; top: 14px; right: 14px; background: none; border: 0; color: var(--vg-ink); padding: 6px; }
.vg-modal__close svg { width: 20px; height: 20px; }
.vg-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--vg-line); margin: 6px 0 20px; }
.vg-tab { background: none; border: 0; padding: 10px 2px; font-weight: 700; font-size: .93rem; color: var(--vg-muted); display: inline-flex; gap: 7px; align-items: center; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.vg-tab.is-active { color: var(--vg-primary); border-bottom-color: var(--vg-primary); }
.vg-tab svg { width: 17px; height: 17px; }
.vg-tabpanel { display: none; }
.vg-tabpanel.is-active { display: block; }
.vg-modal__box--wide { max-width: 880px; }
.vg-modal__search { position: relative; margin-bottom: 16px; }
.vg-modal__search input {
  width: 100%; padding: 12px 16px 12px 44px; font: inherit; font-size: .93rem;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-pill); color: var(--vg-ink);
}
.vg-modal__search input:focus { border-color: var(--vg-primary); outline: none; }
.vg-modal__search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--vg-muted); }
.vg-modal__empty { color: var(--vg-muted); font-size: .9rem; padding: 20px 4px; }
.vg-modal__note { font-size: .78rem; color: var(--vg-muted); margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--vg-line); }

.vg-optgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 14px; }
.vg-optgrid .vg-opt {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 10px 12px; font-size: .9rem; color: var(--vg-ink); border-radius: var(--vg-radius-sm);
  line-height: 1.3;
}
.vg-optgrid .vg-opt:hover { background: var(--vg-surface); text-decoration: none; }
.vg-optgrid .vg-opt[hidden] { display: none; }
.vg-opt__label { display: block; font-weight: 600; }
.vg-opt__sub { display: block; font-size: .76rem; color: var(--vg-muted); margin-top: 1px; }
.vg-optgrid .is-current { background: var(--vg-primary-soft); }
.vg-optgrid .is-current .vg-opt__label { color: var(--vg-primary); font-weight: 800; }
.vg-optgrid .is-current .vg-opt__label::after { content: " ✓"; }
.vg-modal__subhead { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vg-muted); font-weight: 700; margin: 20px 0 6px; padding-top: 14px; border-top: 1px solid var(--vg-line); }

/* Profile dropdown */
.vg-pop { position: relative; }
.vg-pop__panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 268px; background: #fff;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius); box-shadow: var(--vg-shadow-lg);
  padding: 8px 0; display: none; z-index: 80;
}
.vg-pop.is-open .vg-pop__panel { display: block; }
.vg-pop__title { font-weight: 800; color: var(--vg-ink); padding: 10px 18px 12px; font-size: 1.05rem; }
.vg-pop__panel a, .vg-pop__panel button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 18px; font-size: .9rem; color: var(--vg-ink); background: none; border: 0;
  border-top: 1px solid var(--vg-line); cursor: pointer;
}
.vg-pop__tick { margin-left: auto; color: var(--vg-primary); font-weight: 800; opacity: 0; }
.vg-pop__panel button.is-active .vg-pop__tick { opacity: 1; }
.vg-pop__panel button.is-active { color: var(--vg-primary); font-weight: 700; }
.vg-pop__panel a:hover, .vg-pop__panel button:hover { background: var(--vg-surface); text-decoration: none; }
.vg-pop__panel svg { width: 18px; height: 18px; color: var(--vg-body); flex: 0 0 auto; }
.vg-pop__val { margin-left: auto; color: var(--vg-muted); font-size: .82rem; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.vg-footer { background: var(--vg-footer-bg); color: var(--vg-footer-text); padding: 44px 0 24px; margin-top: 40px; }
.vg-footer a { color: var(--vg-footer-text); }
.vg-footer__cols {
  display: grid;
  /* Brand column is wider; the rest share the remaining space evenly, so the
     columns line up instead of drifting apart when a menu is short. */
  grid-template-columns: 1.4fr repeat(auto-fit, minmax(150px, 1fr));
  gap: 34px 30px;
  align-items: start;
}
.vg-footer__cols > div { min-width: 0; }
.vg-footer h4 {
  color: var(--vg-footer-text); font-size: .92rem;
  margin: 0 0 14px; line-height: 1.3; min-height: 1.3em;
}
.vg-footer ul { list-style: none; padding: 0; margin: 0; }
.vg-footer li { margin-bottom: 10px; }
.vg-footer li a { font-size: .87rem; text-decoration: underline; text-underline-offset: 3px; opacity: .92; }
.vg-footer li a:hover { opacity: 1; }
.vg-footer select {
  width: 100%; max-width: 210px; padding: 11px 14px; border-radius: var(--vg-radius-sm);
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--vg-footer-text); font-size: .87rem;
}
.vg-footer select option { color: #14243f; }
.vg-footer__label { font-size: .92rem; font-weight: 800; margin-bottom: 8px; }
.vg-footer__stores { display: flex; flex-direction: column; gap: 10px; }
.vg-footer__stores img { max-width: 138px; }
.vg-pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vg-pay img, .vg-pay span {
  height: 24px; min-width: 38px; border-radius: 4px; background: #fff; color: #14243f;
  font-size: .58rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; letter-spacing: .02em;
}
.vg-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.16); margin-top: 32px; padding-top: 20px; font-size: .82rem; opacity: .9;
}
.vg-social { display: flex; gap: 14px; }
.vg-social a { display: grid; place-items: center; width: 22px; height: 22px; }
.vg-social svg { width: 18px; height: 18px; fill: currentColor; }

/* Newsletter band */
.vg-news { display: grid; grid-template-columns: 1fr 1.1fr; border-radius: var(--vg-radius); overflow: hidden; background: #bcdcff; margin: 40px 0 10px; }
.vg-news__img { min-height: 190px; background-size: cover; background-position: center; background-color: var(--vg-primary-soft); }
.vg-news__body { padding: 30px 32px; }
.vg-news__body h3 { font-size: 1.5rem; margin-bottom: 8px; }
.vg-news__body p { font-size: .9rem; color: var(--vg-ink); opacity: .8; }
.vg-news__form { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.vg-news__form input { flex: 1 1 220px; padding: 13px 16px; border-radius: var(--vg-radius-sm); border: 1px solid var(--vg-line); background: #fff; font-size: .92rem; }
.vg-news__note { font-size: .72rem; color: var(--vg-ink); opacity: .75; margin-top: 10px; }

/* ==========================================================================
   13. GENERIC PAGE / POST CONTENT
   ========================================================================== */
.vg-page { padding: 30px 0 60px; }
.vg-page--narrow .vg-entry { max-width: 760px; margin: 0 auto; }
.vg-entry img { border-radius: var(--vg-radius); }
.vg-entry > *:last-child { margin-bottom: 0; }
.vg-entry blockquote { border-left: 4px solid var(--vg-primary); margin: 0 0 1em; padding: 4px 0 4px 18px; color: var(--vg-ink); font-size: 1.05rem; }
.vg-entry table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.vg-entry th, .vg-entry td { border: 1px solid var(--vg-line); padding: 10px 12px; text-align: left; font-size: .92rem; }
.vg-entry th { background: var(--vg-surface); }
.vg-entry code { background: var(--vg-surface); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.vg-postmeta { color: var(--vg-muted); font-size: .86rem; margin-bottom: 18px; }
.vg-thumb { border-radius: var(--vg-radius); overflow: hidden; margin-bottom: 22px; }
.alignwide { max-width: min(100%, 1100px); margin-left: auto; margin-right: auto; }
.alignfull { max-width: 100%; }
.alignleft { float: left; margin: 0 22px 14px 0; }
.alignright { float: right; margin: 0 0 14px 22px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .wp-block-image figcaption { font-size: .82rem; color: var(--vg-muted); text-align: center; }

/* Widgets */
.vg-widget { margin-bottom: 26px; }
.vg-widget h3, .widget-title { font-size: 1rem; margin-bottom: 12px; }
.vg-widget ul { list-style: none; padding: 0; margin: 0; }
.vg-widget li { margin-bottom: 8px; font-size: .9rem; }

/* Comments */
.vg-comments { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--vg-line); }
.vg-comments ol { list-style: none; padding: 0; }
.vg-comments .comment-body { border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 16px; margin-bottom: 14px; }
.vg-comments input[type=text], .vg-comments input[type=email], .vg-comments input[type=url], .vg-comments textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--vg-line); border-radius: var(--vg-radius-sm); font: inherit; font-size: .92rem;
}
.vg-comments .submit { background: var(--vg-primary); color: #fff; border: 0; padding: 12px 26px; border-radius: var(--vg-radius-pill); font-weight: 700; }

/* 404 */
.vg-404 { text-align: center; padding: 80px 0; }
.vg-404 .vg-search { max-width: 520px; margin: 24px auto 0; }

/* Lightbox */
.vg-lightbox { position: fixed; inset: 0; background: rgba(10,18,32,.94); z-index: 1000; display: none; place-items: center; }
.vg-lightbox.is-open { display: grid; }
.vg-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--vg-radius-sm); }
.vg-lightbox__close, .vg-lightbox__nav { position: absolute; background: rgba(255,255,255,.14); border: 0; color: #fff; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.vg-lightbox__close { top: 22px; right: 22px; }
.vg-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 1.5rem; }
.vg-lightbox__nav--prev { left: 20px; }
.vg-lightbox__nav--next { right: 20px; }

/* Elementor: kill theme container inside builder pages */
.vg-elementor-canvas .vg-page { padding: 0; }

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .vg-footer__cols { grid-template-columns: repeat(3, 1fr); }
  .vg-tour__layout { grid-template-columns: minmax(0,1fr) 300px; gap: 28px; }
  .vg-results { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .vg-tour__layout { grid-template-columns: 1fr; }
  .vg-tour__aside { position: static; order: -1; }
  .vg-archive { grid-template-columns: 1fr; }
  .vg-filters { position: static; }
  .vg-news { grid-template-columns: 1fr; }
  .vg-rev-top { grid-template-columns: 1fr; }
  .vg-usps { grid-template-columns: 1fr; }
  .vg-optgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
  body.admin-bar .vg-header { top: 46px; }
}
@media (max-width: 768px) {
  :root { --vg-gap: 14px; }
  .vg-burger { display: inline-flex; }
  .vg-nav { position: fixed; inset: var(--vg-header-h) 0 auto; background: var(--vg-bg); border-bottom: 1px solid var(--vg-line); box-shadow: var(--vg-shadow-lg); display: none; max-height: calc(100vh - var(--vg-header-h)); overflow: auto; padding: 10px 20px 20px; }
  .vg-nav.is-open { display: block; }
  .vg-header.is-stuck .vg-nav.is-open { display: block; }
  .vg-nav__list { flex-direction: column; gap: 0; flex-wrap: wrap; }
  .vg-nav__list > li { border-bottom: 1px solid var(--vg-line); }
  .vg-nav__list a { padding: 13px 0; width: 100%; justify-content: space-between; }
  .vg-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 8px 12px; display: none; }
  .vg-nav__list li.is-expanded > .sub-menu { display: block; }
  .vg-header__search { display: none; }
  .vg-header__bar { gap: 10px; }
  .vg-iconbtn span:not(.vg-pop__val):not(.vg-pop__tick) { display: none; }
  .vg-iconbtn { padding: 8px; }
  .vg-results { grid-template-columns: repeat(2, 1fr); }
  .vg-grid--3, .vg-grid--4, .vg-grid--6 { grid-template-columns: repeat(2, 1fr); }
  /* Phones get the lead photo full width and the rest in pairs beneath it.
     The variant classes above must not reinstate the desktop columns.

     Nothing is hidden here. Cutting the gallery to three on a phone meant
     five photos uploaded to a tour showed as three, with no way to reach the
     others: the "View all" button is printed on the last tile, which was one
     of the ones being hidden. Most visitors are on a phone, so the photos
     they were missing were the photos most people would have seen. */
  .vg-gallery,
  .vg-gallery--1, .vg-gallery--2, .vg-gallery--3, .vg-gallery--4, .vg-gallery--5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .vg-gallery__item:first-child,
  .vg-gallery--4 .vg-gallery__item:nth-child(2) { grid-column: span 2; grid-row: auto; }
  .vg-gallery--4 .vg-gallery__item:nth-child(2) { grid-column: auto; }
  /* An odd one left over on the last row spans the width rather than
     sitting in half a row with a gap beside it. */
  .vg-gallery--3 .vg-gallery__item:nth-child(2) { grid-column: span 2; }
  .vg-gallery__item:first-child img,
  .vg-gallery--1 .vg-gallery__item:first-child img,
  .vg-gallery--2 .vg-gallery__item:first-child img { aspect-ratio: 16/10; }
  .vg-row { grid-template-columns: 1fr; gap: 10px; }
  .vg-facts { grid-template-columns: 1fr; }
  .vg-rev-grid { grid-template-columns: 1fr; }
  .vg-footer__cols { grid-template-columns: repeat(2, 1fr); }
  .vg-rail__nav { display: none; }
  .vg-hero { padding-bottom: 40px; }
  .vg-search--hero .vg-search__form { padding: 6px 6px 6px 18px; }
  .vg-search--hero input { font-size: .95rem; }
  .vg-search--hero button { padding: 12px 20px; font-size: .9rem; }
  .vg-tour__title { font-size: 1.5rem; }
}
@media (max-width: 520px) {
  .vg-results, .vg-grid--2, .vg-grid--3, .vg-grid--4, .vg-grid--6 { grid-template-columns: 1fr; }
  .vg-optgrid { grid-template-columns: 1fr; }
  .vg-footer__cols { grid-template-columns: 1fr; }
  .vg-modal__box { margin-top: 4vh; padding: 20px 18px 26px; }
}

/* ==========================================================================
   15. DARK MODE
   Applied when the visitor picks Dark, or picks "Use device setting" on a
   device that prefers dark. The attribute is set before paint, so there is
   no flash of the light theme.
   ========================================================================== */
html[data-vg-theme="dark"] {
  --vg-ink:          #eaf0f8;
  --vg-body:         #b6c2d2;
  --vg-muted:        #8b98ab;
  --vg-line:         #263243;
  --vg-bg:           #0f1620;
  --vg-surface:      #18212e;
  --vg-hero-from:    #16202c;
  --vg-hero-to:      #0f1620;
  --vg-footer-bg:    #0a1119;
  --vg-star:         #ffc531;
  --vg-shadow:       0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
  --vg-shadow-lg:    0 8px 40px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* Surfaces that were hardcoded white in the light theme */
html[data-vg-theme="dark"] .vg-card,
html[data-vg-theme="dark"] .vg-usp,
html[data-vg-theme="dark"] .vg-book,
html[data-vg-theme="dark"] .vg-revcard,
html[data-vg-theme="dark"] .vg-rev,
html[data-vg-theme="dark"] .vg-filters,
html[data-vg-theme="dark"] .vg-modal__box,
html[data-vg-theme="dark"] .vg-pop__panel,
html[data-vg-theme="dark"] .vg-nav__list .sub-menu,
html[data-vg-theme="dark"] .vg-suggest,
html[data-vg-theme="dark"] .vg-mobilebook,
html[data-vg-theme="dark"] .vg-search__form,
html[data-vg-theme="dark"] .vg-rail__nav,
html[data-vg-theme="dark"] .vg-revslider__nav {
  background: var(--vg-surface);
  border-color: var(--vg-line);
  color: var(--vg-body);
}

html[data-vg-theme="dark"] .vg-search__form input,
html[data-vg-theme="dark"] .vg-book__field select,
html[data-vg-theme="dark"] .vg-book__field input,
html[data-vg-theme="dark"] .vg-modal__search input,
html[data-vg-theme="dark"] .vg-news__form input,
html[data-vg-theme="dark"] .vg-comments input,
html[data-vg-theme="dark"] .vg-comments textarea {
  background: var(--vg-surface); color: var(--vg-ink); border-color: var(--vg-line);
}

html[data-vg-theme="dark"] .vg-wish { background: rgba(24,33,46,.94); color: var(--vg-ink); }
html[data-vg-theme="dark"] .vg-fact__icon,
html[data-vg-theme="dark"] .vg-rev-summary,
html[data-vg-theme="dark"] .vg-entry code,
html[data-vg-theme="dark"] .vg-entry th { background: var(--vg-surface); }
html[data-vg-theme="dark"] .vg-gallery__more { background: rgba(24,33,46,.94); color: var(--vg-ink); }
html[data-vg-theme="dark"] .vg-news { background: #16283d; }
html[data-vg-theme="dark"] .vg-news__body p,
html[data-vg-theme="dark"] .vg-news__note { color: var(--vg-body); }
html[data-vg-theme="dark"] .vg-pay span { background: var(--vg-surface); color: var(--vg-ink); }
html[data-vg-theme="dark"] .vg-header.is-stuck { box-shadow: 0 1px 0 var(--vg-line), 0 4px 18px rgba(0,0,0,.4); }
html[data-vg-theme="dark"] .vg-btn--ghost { background: transparent; }
html[data-vg-theme="dark"] .vg-card__ph,
html[data-vg-theme="dark"] .vg-dest__img,
html[data-vg-theme="dark"] .vg-attr__img,
html[data-vg-theme="dark"] .vg-card__media { background: var(--vg-surface); }

/* Photos are a touch bright against a dark page */
html[data-vg-theme="dark"] .vg-card__media img,
html[data-vg-theme="dark"] .vg-dest__img img,
html[data-vg-theme="dark"] .vg-attr__img img { filter: brightness(.92); }

/* --------------------------------------------------------------------------
   Dark mode: light surfaces that text was disappearing into.

   Two separate faults produced the same symptom. Some panels set a light
   background but took their text colour from the page, so in dark mode they
   became near-white text on a near-white block. Others — anything from
   WooCommerce or a plugin — bring their own light background for the same
   reason. Both are fixed by giving the panel the dark surface rather than by
   patching the text colour, so the panel matches the rest of the page.

   The brand colours themselves are re-mixed for dark in the Customizer CSS,
   which is what rescues the small primary-coloured controls such as the − and
   + in the traveller stepper.
   -------------------------------------------------------------------------- */

/* Skipping link, itinerary markers, sundry white blocks */
html[data-vg-theme="dark"] .skip-link:focus {
  background: var(--vg-surface); color: var(--vg-ink);
}
html[data-vg-theme="dark"] .vg-itin__dot { background: var(--vg-surface); }
html[data-vg-theme="dark"] .vg-btn--soft,
html[data-vg-theme="dark"] .vg-optgrid button,
html[data-vg-theme="dark"] .vg-chip { background: var(--vg-surface); color: var(--vg-ink); border-color: var(--vg-line); }

/*
 * Every text field, whoever printed it. The UA already draws its own controls
 * dark because color-scheme is set, but a field with an explicit light
 * background in someone else's stylesheet ignores that.
 */
html[data-vg-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html[data-vg-theme="dark"] select,
html[data-vg-theme="dark"] textarea {
  background-color: var(--vg-surface);
  color: var(--vg-ink);
  border-color: var(--vg-line);
}
html[data-vg-theme="dark"] input::placeholder,
html[data-vg-theme="dark"] textarea::placeholder { color: var(--vg-muted); opacity: 1; }

/* The native date picker's own icon is drawn black on black otherwise. */
html[data-vg-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-vg-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  opacity: .8;
  cursor: pointer;
}

/* WooCommerce: notices, tables and panels all ship a light background. */
html[data-vg-theme="dark"] .woocommerce-info,
html[data-vg-theme="dark"] .woocommerce-message,
html[data-vg-theme="dark"] .woocommerce-error,
html[data-vg-theme="dark"] .woocommerce-noreviews,
html[data-vg-theme="dark"] .woocommerce-Message,
html[data-vg-theme="dark"] .woocommerce .cart-collaterals .cart_totals,
html[data-vg-theme="dark"] .woocommerce-checkout-review-order,
html[data-vg-theme="dark"] .woocommerce-checkout #payment,
html[data-vg-theme="dark"] .woocommerce-order-details,
html[data-vg-theme="dark"] .woocommerce-customer-details address,
html[data-vg-theme="dark"] .woocommerce table.shop_table,
html[data-vg-theme="dark"] .woocommerce table.shop_table th,
html[data-vg-theme="dark"] .woocommerce table.shop_table td,
html[data-vg-theme="dark"] .woocommerce-account fieldset,
html[data-vg-theme="dark"] .select2-container--default .select2-selection--single,
html[data-vg-theme="dark"] .select2-dropdown {
  background-color: var(--vg-surface) !important;
  color: var(--vg-body) !important;
  border-color: var(--vg-line) !important;
}
html[data-vg-theme="dark"] .woocommerce-checkout #payment div.payment_box {
  background-color: var(--vg-bg) !important; color: var(--vg-body) !important;
}
/* The little arrow a payment box points at its method with. */
html[data-vg-theme="dark"] .woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--vg-bg) !important;
}
html[data-vg-theme="dark"] .woocommerce table.shop_table th,
html[data-vg-theme="dark"] .woocommerce-checkout-review-order strong,
html[data-vg-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--vg-ink) !important;
}
html[data-vg-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--vg-primary) !important; color: #fff !important;
}
.vg-mobilebook {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; display: none;
  background: #fff; border-top: 1px solid var(--vg-line); box-shadow: 0 -4px 20px rgba(20,36,63,.1);
  padding: 10px 16px; align-items: center; gap: 14px;
}
.vg-mobilebook strong { font-size: 1.05rem; color: var(--vg-ink); }
.vg-mobilebook .vg-btn { margin-left: auto; }
@media (max-width: 900px) {
  body.single-tour .vg-mobilebook { display: flex; }
  body.single-tour .vg-footer { padding-bottom: 80px; }
}

/* ==========================================================================
   16. CARD BUTTON, BLOG ROW, PAYMENTS, FLOATING CHAT
   ========================================================================== */

/* "Let's go" button on tour cards */
.vg-card__cta {
  margin-top: 12px; width: 100%; padding: 10px 18px; font-size: .88rem;
  position: relative; z-index: 3;
}
.vg-card__cta svg { width: 15px; height: 15px; }

/* Homepage blog row */
.vg-blogcard {
  display: flex; flex-direction: column;
  background: var(--vg-bg); border: 1px solid var(--vg-line);
  border-radius: var(--vg-radius); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.vg-blogcard:hover { box-shadow: var(--vg-shadow-lg); transform: translateY(-2px); }
.vg-blogcard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--vg-surface); }
.vg-blogcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vg-blogcard:hover .vg-blogcard__media img { transform: scale(1.05); }
.vg-blogcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.vg-blogcard__meta { font-size: .78rem; color: var(--vg-muted); margin-bottom: 6px; }
.vg-blogcard__title { font-size: 1.02rem; font-weight: 800; line-height: 1.35; margin: 0 0 8px; }
.vg-blogcard__title a { color: var(--vg-ink); }
.vg-blogcard__title a:hover { color: var(--vg-primary); text-decoration: none; }
.vg-blogcard__excerpt { font-size: .88rem; color: var(--vg-muted); margin: 0 0 14px; }
.vg-blogcard__more { margin-top: auto; font-size: .85rem; font-weight: 700; }

/* Payment badges */
.vg-pay { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vg-pay__badge {
  height: 26px; padding: 0 9px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .64rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.vg-pay__img { height: 26px; width: auto; border-radius: 5px; background: #fff; }

.vg-paydetails { margin-top: 18px; }
.vg-paydetails h4 { font-size: .92rem; margin-bottom: 8px; }
.vg-paydetails p { font-size: .85rem; margin-bottom: .5em; }

/* Floating chat */
.vg-chat { position: fixed; right: 20px; bottom: 20px; z-index: 700; }
.vg-chat__launch {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border: 0; border-radius: var(--vg-radius-pill);
  background: var(--vg-primary); color: #fff; font-weight: 700; font-size: .92rem;
  box-shadow: 0 6px 24px rgba(20,36,63,.28); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vg-chat__launch:hover { transform: translateY(-2px); color: #fff; text-decoration: none; box-shadow: 0 10px 30px rgba(20,36,63,.34); }
.vg-chat__launch svg { width: 21px; height: 21px; }
.vg-chat__launch--wa { position: fixed; right: 20px; bottom: 20px; z-index: 700; background: #25d366; }

.vg-chat__panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(370px, calc(100vw - 40px)); height: min(520px, calc(100vh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--vg-bg); border: 1px solid var(--vg-line);
  border-radius: var(--vg-radius); box-shadow: var(--vg-shadow-lg);
}
.vg-chat__panel[hidden] { display: none; }

.vg-chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--vg-line);
}
.vg-chat__head strong { display: block; color: var(--vg-ink); font-size: .96rem; }
.vg-chat__head span { font-size: .75rem; color: var(--vg-muted); }
.vg-chat__head button { background: none; border: 0; color: var(--vg-muted); padding: 4px; cursor: pointer; }
.vg-chat__head button:hover { color: var(--vg-ink); }

.vg-chat__log { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.vg-chat__msg {
  max-width: 88%; padding: 10px 13px; border-radius: 14px;
  font-size: .88rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.vg-chat__msg--bot  { align-self: flex-start; background: var(--vg-surface); color: var(--vg-body); border-bottom-left-radius: 4px; }
.vg-chat__msg--user { align-self: flex-end; background: var(--vg-primary); color: #fff; border-bottom-right-radius: 4px; }
.vg-chat__msg--error { align-self: flex-start; background: #fdecec; color: #a3271f; font-size: .84rem; }
html[data-vg-theme="dark"] .vg-chat__msg--error { background: #3a1d1c; color: #f3b0ab; }
.vg-chat__msg--typing span {
  display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%;
  background: var(--vg-muted); animation: vg-blink 1.2s infinite;
}
.vg-chat__msg--typing span:nth-child(2) { animation-delay: .2s; }
.vg-chat__msg--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes vg-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.vg-chat__prompts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vg-chat__prompt {
  background: none; border: 1px solid var(--vg-line); border-radius: var(--vg-radius-pill);
  padding: 7px 12px; font-size: .8rem; color: var(--vg-primary); cursor: pointer; text-align: left;
}
.vg-chat__prompt:hover { background: var(--vg-primary-soft); }

.vg-chat__form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--vg-line); }
.vg-chat__form input {
  flex: 1 1 auto; min-width: 0; padding: 11px 14px; font: inherit; font-size: .88rem;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-pill);
  background: var(--vg-bg); color: var(--vg-ink);
}
.vg-chat__form input:focus { outline: none; border-color: var(--vg-primary); }
.vg-chat__form button {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--vg-primary); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.vg-chat__form button:disabled { opacity: .5; cursor: default; }
.vg-chat__note { font-size: .7rem; color: var(--vg-muted); text-align: center; margin: 0; padding: 0 14px 12px; }

@media (max-width: 520px) {
  .vg-chat, .vg-chat__launch--wa { right: 14px; bottom: 14px; }
  .vg-chat__launch span { display: none; }
  .vg-chat__launch { padding: 15px; border-radius: 50%; }
  .vg-chat__panel { position: fixed; right: 12px; left: 12px; bottom: 84px; width: auto; }
}
body.single-tour .vg-chat, body.single-tour .vg-chat__launch--wa { bottom: 84px; }

html[data-vg-theme="dark"] .vg-mobilebook { background: var(--vg-surface); }

/* ==========================================================================
   17. LIQUID GLASS HEADER
   A floating rounded capsule rather than a full-width band, so the photo
   behind it stays visible either side. Needs backdrop-filter; browsers
   without it fall back to a solid capsule.
   ========================================================================== */
.vg-header .vg-container { max-width: var(--vg-header-w, var(--vg-container)); }
.vg-header--glass { background: none !important; box-shadow: none !important; }
.vg-header--glass::after { content: none; }

.vg-header--glass .vg-header__bar {
  position: relative;
  margin: 10px 0;
  padding: 4px 10px 4px 18px;
  border-radius: var(--vg-header-radius, var(--vg-radius-pill));
  background: rgba(255, 255, 255, var(--vg-glass-tint, .60));
  border: 1px solid rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(var(--vg-glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--vg-glass-blur)) saturate(180%);
  box-shadow: 0 8px 32px rgba(20, 36, 63, .12), 0 1px 0 rgba(255,255,255,.6) inset;
  transition: background .25s ease, box-shadow .25s ease;
}

/* Specular sheen along the top of the capsule */
.vg-header--glass .vg-header__bar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 45%);
}

/* Over a hero photo the capsule is barely tinted, so the image shows through */
.vg-header--glass.vg-header--over-media:not(.is-stuck) .vg-header__bar {
  background: rgba(255, 255, 255, calc(var(--vg-glass-tint, .6) * .22));
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18), 0 1px 0 rgba(255,255,255,.28) inset;
}
.vg-header--glass.vg-header--over-media:not(.is-stuck) .vg-header__bar::before {
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 45%);
}

/* Once stuck it firms up so text stays readable over page content */
.vg-header--glass.is-stuck .vg-header__bar {
  background: rgba(255, 255, 255, calc(var(--vg-glass-tint, .6) + .16));
  box-shadow: 0 10px 34px rgba(20, 36, 63, .16), 0 1px 0 rgba(255,255,255,.6) inset;
}

html[data-vg-theme="dark"] .vg-header--glass .vg-header__bar {
  background: rgba(15, 22, 32, calc(var(--vg-glass-tint, .6) * .95));
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45), 0 1px 0 rgba(255,255,255,.06) inset;
}
html[data-vg-theme="dark"] .vg-header--glass.is-stuck .vg-header__bar { background: rgba(15, 22, 32, calc(var(--vg-glass-tint, .6) + .2)); }
html[data-vg-theme="dark"] .vg-header--glass .vg-header__bar::before {
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 45%);
}

@supports not (backdrop-filter: blur(1px)) {
  .vg-header--glass .vg-header__bar { background: rgba(255,255,255,.93); }
  html[data-vg-theme="dark"] .vg-header--glass .vg-header__bar { background: rgba(15,22,32,.93); }
}

/* The hero sits under a floating capsule, so it needs a little more headroom */
.vg-header--glass ~ * .vg-hero, .vg-header--glass + .vg-hero { padding-top: calc(var(--vg-header-h) + 76px); }

/* ==========================================================================
   18. AIRPLANE INTRO
   The plane owns a fixed slot immediately after the logo, so the menu starts
   after it and nothing can ever be landed on. It descends onto a short
   dashed runway, the way the landing emoji reads.
   ========================================================================== */
.vg-brandwrap { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }

.vg-plane {
  position: relative;
  flex: 0 0 auto;
  width: 42px; height: 42px;
  margin: 0 14px 0 4px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .22));
}
.vg-plane__accent  { fill: var(--vg-plane-accent, #1899b4); }
.vg-plane__body    { fill: var(--vg-plane-body, #f2f4f7); }
.vg-plane__engine  { fill: var(--vg-plane-engine, #c9cfd8); }
.vg-plane__windows { fill: var(--vg-plane-window, #3c4a5c); }
.vg-plane__door    { fill: var(--vg-plane-engine, #c9cfd8); opacity: .75; }

/* The vapour trail follows the accent colour */
.vg-plane { color: var(--vg-plane-accent, #1899b4); }
.vg-plane svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Vapour trail streaming out behind it */
.vg-plane::before {
  content: ""; position: absolute; top: 42%; right: 100%;
  width: 54px; height: 2px; margin-right: 4px;
  background: linear-gradient(270deg, currentColor, transparent);
  border-radius: 2px; opacity: 0;
}
.vg-plane--trail.is-flying::before { animation: vg-plane-trail var(--vg-plane-duration, 1.8s) ease-out forwards; }

/* Dashed runway that appears underneath as it touches down */
.vg-plane::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 46px; height: 3px; margin-top: 1px;
  transform: translateX(-50%) scaleX(.3);
  border-radius: 2px; opacity: 0;
  background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 13px);
}
.vg-plane.is-flying::after { animation: vg-runway var(--vg-plane-duration, 1.8s) ease-out forwards; }

.vg-plane.is-flying { animation: vg-plane-fly var(--vg-plane-duration, 1.8s) cubic-bezier(.3, .7, .3, 1) forwards; }

/* A descending approach: high and far left, then a flare onto the runway. */
@keyframes vg-plane-fly {
  0%   { opacity: 0; transform: translate(-300px, -52px) rotate(14deg) scale(.62); }
  12%  { opacity: 1; }
  50%  { transform: translate(-150px, -30px) rotate(11deg) scale(.86); }
  78%  { transform: translate(-46px, -10px) rotate(7deg) scale(1); }
  92%  { transform: translate(-9px, 3px) rotate(-4deg) scale(1); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
/* Phone version of the approach: starts closer in so none of the flight
   happens off-screen. Selected by the media query further down. */
@keyframes vg-plane-fly-sm {
  0%   { opacity: 0; transform: translate(-150px, -34px) rotate(14deg) scale(.62); }
  12%  { opacity: 1; }
  50%  { transform: translate(-78px, -20px) rotate(11deg) scale(.86); }
  78%  { transform: translate(-30px, -7px) rotate(7deg) scale(1); }
  92%  { transform: translate(-6px, 2px) rotate(-4deg) scale(1); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes vg-plane-trail {
  0%, 10% { opacity: 0; }
  45%     { opacity: .5; }
  100%    { opacity: 0; }
}
@keyframes vg-runway {
  0%, 60% { opacity: 0; transform: translateX(-50%) scaleX(.3); }
  82%     { opacity: .8; transform: translateX(-50%) scaleX(1); }
  100%    { opacity: 0; transform: translateX(-50%) scaleX(1); }
}

/* Parked: a very slight drift so it does not look frozen */
.vg-plane.has-landed { opacity: 1; animation: vg-plane-idle 4.5s ease-in-out infinite; }
@keyframes vg-plane-idle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(0, -3px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vg-plane.is-flying, .vg-plane.has-landed,
  .vg-plane--trail.is-flying::before, .vg-plane.is-flying::after { animation: none; }
  .vg-plane { opacity: 1; }
}

/* Smaller on phones, but it still lands beside the logo */
@media (max-width: 768px) {
  .vg-plane { width: 28px; height: 28px; margin: 0 6px 0 2px; }

  /* A shorter approach, so the whole flight happens on screen. */
  .vg-plane.is-flying { animation-name: vg-plane-fly-sm; }
  .vg-plane::before { width: 30px; }
  .vg-plane::after { width: 28px; }
}

/* ==========================================================================
   19. MOBILE BOTTOM HEADER
   On phones the header is fixed in BOTH states and only its edge changes.
   Switching between sticky and fixed would pull it out of the document flow
   mid-scroll, the page would shorten, the scroll position would jump back
   above the threshold, and the bar would bounce between top and bottom.
   ========================================================================== */
@media (max-width: 768px) {

  .vg-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    transition: none;
  }
  body { padding-top: var(--vg-header-h); }

  /* The hero is tucked under the header, so it cancels that padding out. */
  .vg-hero { margin-top: calc(var(--vg-header-h) * -1); }

  body.admin-bar .vg-header { top: 46px; }
  body.admin-bar { padding-top: calc(var(--vg-header-h) + 46px); }

  .vg-header.is-bottom {
    top: auto; bottom: 0;
    box-shadow: 0 -4px 24px rgba(20, 36, 63, .16);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body.admin-bar .vg-header.is-bottom { top: auto; }

  /* Glass capsule floats just above the bottom edge */
  .vg-header--glass.is-bottom { box-shadow: none; }
  .vg-header--glass.is-bottom .vg-header__bar { margin: 8px 0 10px; }

  /* The menu has to open upward now */
  .vg-header.is-bottom .vg-nav {
    inset: auto 0 var(--vg-header-h) 0;
    border-bottom: 0; border-top: 1px solid var(--vg-line);
    box-shadow: 0 -8px 30px rgba(20, 36, 63, .18);
    max-height: calc(100vh - var(--vg-header-h) - 20px);
  }
  .vg-header--glass.is-bottom .vg-nav { bottom: calc(var(--vg-header-h) + 14px); border-radius: var(--vg-radius); margin: 0 12px; }

  /* Popovers flip upward too */
  .vg-header.is-bottom .vg-pop__panel { top: auto; bottom: calc(100% + 10px); }

  /* Keep the footer clear of the docked bar */
  body.vg-has-bottom-bar { padding-bottom: var(--vg-header-h); }

  /* Stack the tour booking bar above the header */
  body.vg-has-bottom-bar.single-tour .vg-mobilebook { bottom: var(--vg-header-h); }
  body.vg-has-bottom-bar.single-tour .vg-footer { padding-bottom: calc(80px + var(--vg-header-h)); }

  /* And lift the chat bubble clear of both */
  body.vg-has-bottom-bar .vg-chat,
  body.vg-has-bottom-bar .vg-chat__launch--wa { bottom: calc(var(--vg-header-h) + 14px); }
  body.vg-has-bottom-bar.single-tour .vg-chat,
  body.vg-has-bottom-bar.single-tour .vg-chat__launch--wa { bottom: calc(var(--vg-header-h) + 78px); }
}

/* ==========================================================================
   20. BOOKING FORM, FAQ, CONTACT, APP BAND, STORE BUTTONS
   ========================================================================== */

/* Honeypot — hidden from people, visible to bots */
.vg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Booking request form inside the sticky box */
.vg-bookform { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vg-line); }
.vg-bookform textarea {
  width: 100%; padding: 11px 14px; font: inherit; font-size: .9rem;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-sm);
  background: var(--vg-bg); color: var(--vg-ink); resize: vertical;
}
.vg-book__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vg-bookform__note { font-size: .72rem; color: var(--vg-muted); text-align: center; margin: 10px 0 0; }
.vg-bookform__done {
  display: flex; gap: 12px; align-items: flex-start;
  background: #e6f6ec; border-radius: var(--vg-radius); padding: 16px;
}
.vg-bookform__done svg { color: #1a7f43; flex: 0 0 auto; }
.vg-bookform__done p { margin: 0; font-size: .9rem; color: #14603a; }
html[data-vg-theme="dark"] .vg-bookform__done { background: #14301f; }
html[data-vg-theme="dark"] .vg-bookform__done p { color: #b7e5c8; }

/* FAQ accordion */
.vg-faq { border-top: 1px solid var(--vg-line); max-width: 820px; }
.vg-faq__item { border-bottom: 1px solid var(--vg-line); }
.vg-faq__q { margin: 0; font-size: 1rem; }
.vg-faq__q button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 18px 4px; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1rem; color: var(--vg-ink); text-align: left;
}
.vg-faq__q button:hover { color: var(--vg-primary); }
.vg-faq__q svg { flex: 0 0 auto; transition: transform .22s ease; color: var(--vg-muted); }
.vg-faq__q button[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--vg-primary); }
.vg-faq__a { padding: 0 4px 20px; font-size: .94rem; color: var(--vg-body); }
.vg-faq__a > .vg-entry > *:last-child { margin-bottom: 0; }

/* Contact page */
.vg-contact__head { max-width: 720px; margin-bottom: 28px; }
.vg-contact__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; }
.vg-contact__card {
  display: block; padding: 20px; border: 1px solid var(--vg-line);
  border-radius: var(--vg-radius); background: var(--vg-bg); color: var(--vg-body);
  transition: box-shadow .2s ease, transform .2s ease;
}
a.vg-contact__card:hover { box-shadow: var(--vg-shadow-lg); transform: translateY(-2px); text-decoration: none; }
.vg-contact__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px;
  border-radius: 50%; background: var(--vg-primary-soft); color: var(--vg-primary);
}
.vg-contact__card strong { display: block; color: var(--vg-ink); font-size: .95rem; margin-bottom: 3px; }
.vg-contact__card span { font-size: .85rem; color: var(--vg-muted); }

/*
 * A card holding several numbers. Each sits on its own line, left aligned
 * with the others, so a pair of support lines reads as a list rather than
 * running together into a paragraph.
 */
.vg-contact__numbers { list-style: none; margin: 8px 0 0; padding: 0; }
.vg-contact__numbers li + li { margin-top: 8px; }
.vg-contact__numbers a {
  display: flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 600; color: var(--vg-ink);
  font-variant-numeric: tabular-nums; text-decoration: none;
  overflow-wrap: anywhere;
}
.vg-contact__numbers a:hover { color: var(--vg-primary); text-decoration: underline; text-underline-offset: 3px; }
.vg-contact__numbers a svg { flex: 0 0 auto; opacity: .55; }
.vg-contact__numbers small {
  display: block; margin: 2px 0 0 22px;
  font-size: .76rem; color: var(--vg-muted);
}
/* The optional fourth column of a number line: "Groups", "9am–6pm". */
.vg-contact__note {
  display: block; margin-top: 5px; font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--vg-primary);
}

.vg-contact__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: start; }
.vg-contact__form { border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 26px; }
.vg-contact__form h2 { font-size: 1.25rem; margin-bottom: 18px; }
.vg-contact__form input, .vg-contact__form textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .92rem;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-sm);
  background: var(--vg-bg); color: var(--vg-ink);
}
.vg-contact__form textarea { resize: vertical; }
.vg-contact__form .vg-btn { margin-top: 6px; }

.vg-contact__hours { border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 22px; margin-bottom: 20px; }
.vg-contact__hours h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 14px; }
.vg-contact__hours dl { margin: 0; }
.vg-contact__hours dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--vg-line); font-size: .89rem; }
.vg-contact__hours dl > div:last-child { border-bottom: 0; }
.vg-contact__hours dt { color: var(--vg-body); }
.vg-contact__hours dd { margin: 0; font-weight: 700; color: var(--vg-ink); }
.vg-contact__map { border-radius: var(--vg-radius); overflow: hidden; border: 1px solid var(--vg-line); }

/* App promo band */
.vg-app {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  border-radius: var(--vg-radius); overflow: hidden;
  background: linear-gradient(135deg, var(--vg-primary-soft), var(--vg-bg));
  border: 1px solid var(--vg-line);
}
.vg-app__body { padding: 38px 40px; }
.vg-app__title { font-size: 1.7rem; margin-bottom: 10px; }
.vg-app__text { color: var(--vg-body); max-width: 46ch; }
.vg-app__points { list-style: none; padding: 0; margin: 18px 0 22px; }
.vg-app__points li { display: flex; align-items: center; gap: 9px; font-size: .9rem; margin-bottom: 9px; color: var(--vg-body); }
.vg-app__points svg { color: #1a9e5c; flex: 0 0 auto; }
.vg-app__soon { font-size: .85rem; color: var(--vg-muted); font-style: italic; }
.vg-app__media {
  background-size: cover; background-position: center; min-height: 260px;
  display: grid; place-items: center; background-color: var(--vg-surface);
}
.vg-app__phone { color: var(--vg-primary); opacity: .35; }

/* App store buttons */
.vg-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.vg-store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 13px; border-radius: 10px;
  background: var(--vg-ink); color: #fff; text-decoration: none;
  transition: transform .18s ease, opacity .18s ease;
}
.vg-store:hover { transform: translateY(-2px); color: #fff; text-decoration: none; opacity: .92; }
.vg-store svg { flex: 0 0 auto; }
.vg-store span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: .95rem; }
.vg-store small { font-size: .62rem; font-weight: 500; opacity: .8; text-transform: uppercase; letter-spacing: .04em; }
.vg-stores--footer .vg-store { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); }

@media (max-width: 900px) {
  .vg-contact__cards { grid-template-columns: repeat(2, 1fr); }
  .vg-contact__layout { grid-template-columns: 1fr; }
  .vg-app { grid-template-columns: 1fr; }
  .vg-app__media { min-height: 200px; order: -1; }
  .vg-app__body { padding: 28px 24px; }
}
@media (max-width: 560px) {
  .vg-contact__cards { grid-template-columns: 1fr; }
  .vg-book__row { grid-template-columns: 1fr; }
}

/* Developer credit beside the copyright */
.vg-footer__copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Registration and VAT numbers: present and findable, but not shouting. */
.vg-footer__legal { opacity: .8; }
.vg-footer__legal::before { content: "·"; margin-right: 6px; opacity: .55; }
.vg-credit::before { content: "·"; margin-right: 6px; opacity: .55; }
.vg-credit a {
  text-decoration: underline; text-underline-offset: 3px;
  opacity: .85; transition: opacity .18s ease;
}
.vg-credit a:hover { opacity: 1; }

/* ==========================================================================
   21. FOOTER BRAND, APP BLOCK AND PAYMENT STRIP
   ========================================================================== */
/* --------------------------------------------------------------------------
   A separate logo for dark mode (Customize → Header → Logo for dark mode,
   and the same under Footer).

   Both are in the markup and CSS picks one, so the right logo is painted on
   the first frame — the theme is settled from a cookie before paint, and a
   script that swapped the src afterwards would flash the wrong mark on every
   load. A hidden image is never fetched, so the unused one costs nothing.
   -------------------------------------------------------------------------- */
.vg-brand__img--dark { display: none; }
html[data-vg-theme="dark"] .vg-brand__img--light { display: none; }
html[data-vg-theme="dark"] .vg-brand__img--dark { display: block; }

/* The header logo sits in a flex row beside the tagline. */
html[data-vg-theme="dark"] .vg-brand .vg-brand__img--dark { display: inline-block; }

.vg-footer__logo { display: inline-block; margin-bottom: 12px; }
.vg-footer__logo img { max-width: 160px; height: auto; }
.vg-footer__logo--text {
  font-family: var(--vg-font-head); font-weight: 900; font-size: 1.15rem;
  letter-spacing: -.03em; text-transform: uppercase; color: var(--vg-footer-text);
  text-decoration: none;
}
.vg-footer__logo--text:hover { text-decoration: none; opacity: .85; }
.vg-footer__about { font-size: .85rem; opacity: .82; margin: 0 0 18px; max-width: 34ch; }
.vg-footer__apphead { margin: 0 0 10px; font-size: .92rem; }

/* Payments sit on their own strip, not under a menu column */
.vg-footer__pay {
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.vg-footer__pay h4 { margin-bottom: 12px; font-size: .92rem; }

.vg-stores--footer { flex-direction: column; align-items: flex-start; }
.vg-stores--footer .vg-store { min-width: 190px; }
.vg-store--img { padding: 0; background: none; border: 0; }
.vg-store--img:hover { background: none; }
.vg-store--img img { height: 44px; width: auto; display: block; }

@media (max-width: 900px) {
  .vg-stores--footer { flex-direction: row; flex-wrap: wrap; }
  .vg-stores--footer .vg-store { min-width: 0; }
}

/* ==========================================================================
   22. PHONE FIXES
   ========================================================================== */

/* Nothing may push the page sideways on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 768px) {

  /* --- Header: too many items were spilling past the right edge --- */
  .vg-header__bar { gap: 6px; min-width: 0; }
  .vg-header__actions { gap: 0; flex: 0 1 auto; min-width: 0; }
  .vg-brandwrap { min-width: 0; flex: 0 1 auto; }
  .vg-brand img { max-height: 34px; }
  .vg-iconbtn { padding: 8px 6px; }
  .vg-iconbtn svg { width: 22px; height: 22px; }
  .vg-header--glass .vg-header__bar { padding: 4px 8px 4px 12px; }

  /*
   * --- The open menu panel ---
   * Over a hero photo the header turns its text white. On a phone the menu
   * opens as a solid panel, so that same white text landed on a white
   * background and the menu looked empty. Inside the panel, text always uses
   * the normal ink colour.
   */
  .vg-nav {
    background: var(--vg-bg);
    border-radius: 0 0 var(--vg-radius) var(--vg-radius);
  }
  .vg-header--over-media:not(.is-stuck) .vg-nav__list > li > a,
  .vg-header--over-media .vg-nav__list > li > a,
  .vg-nav.is-open .vg-nav__list a {
    color: var(--vg-ink) !important;
    text-shadow: none !important;
  }
  .vg-nav.is-open .vg-nav__list a:hover { color: var(--vg-primary) !important; }

  /* Glass header: the panel should hang under the floating capsule */
  .vg-header--glass .vg-nav {
    inset: calc(var(--vg-header-h) + 6px) 12px auto 12px;
    border-radius: var(--vg-radius);
    border: 1px solid var(--vg-line);
  }

  /*
   * --- Review slider ---
   * The card count is written inline on the element, and an inline style
   * beats a stylesheet rule even inside a media query, so the phone kept
   * showing three cramped columns. These have to win explicitly.
   */
  .vg-revslider { --vg-rev-per-view: 1 !important; }
  .vg-revslider__nav { display: none; }
  .vg-revslider__viewport { overflow: hidden; }
  .vg-revcard { padding: 18px; }
  .vg-revcard__text { font-size: .95rem; }

  /* --- Sections were bleeding past the left edge --- */
  .vg-section, .vg-page { overflow: hidden; }
  .vg-rail__track { padding-left: 0; padding-right: 0; }

  /* --- Attractions were rendering far too tall --- */
  .vg-results { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .vg-attr__img, .vg-blogcard__media { aspect-ratio: 4 / 3; }
  .vg-attr__title { font-size: .9rem; }

  /* --- Blog cards --- */
  .vg-blogcard__body { padding: 14px 16px 16px; }
  .vg-blog-layout { grid-template-columns: 1fr !important; }
  .vg-el-grid, .vg-el-grid--blog { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vg-grid--2, .vg-grid--3, .vg-grid--4, .vg-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-card__title { font-size: .9rem; }
  .vg-card__body { padding: 10px 12px 12px; }

  /* --- Footer: one tidy column instead of a lopsided grid --- */
  .vg-footer { padding: 32px 0 20px; }
  .vg-footer__cols { grid-template-columns: 1fr; gap: 26px; }
  .vg-footer select { max-width: 100%; }
  .vg-footer__pay { margin-top: 26px; padding-top: 20px; }
  .vg-footer__bottom {
    flex-direction: column; align-items: center; text-align: center; gap: 16px;
  }
  .vg-footer__copy { justify-content: center; }
  .vg-social { justify-content: center; }
}

@media (max-width: 420px) {
  .vg-results { grid-template-columns: 1fr; }
  .vg-el-grid, .vg-el-grid--blog { grid-template-columns: 1fr !important; }
  .vg-grid--2, .vg-grid--3, .vg-grid--4, .vg-grid--6 { grid-template-columns: 1fr; }
  .vg-iconbtn { padding: 8px 4px; }
}

/* ==========================================================================
   23. SIGN IN / SIGN UP
   ========================================================================== */
.vg-auth { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px; align-items: start; padding: 20px 0 40px; }
.vg-auth__card {
  background: var(--vg-bg); border: 1px solid var(--vg-line);
  border-radius: var(--vg-radius); padding: 30px; box-shadow: var(--vg-shadow);
}
.vg-auth__card--center { text-align: center; max-width: 440px; margin: 0 auto; }
.vg-auth__card h1 { font-size: 1.6rem; margin: 0 0 8px; }
.vg-auth__lead { color: var(--vg-muted); font-size: .92rem; margin-bottom: 22px; }

.vg-auth__tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--vg-line); margin: -6px 0 22px; }
.vg-auth__tab {
  padding: 10px 2px; font-weight: 700; font-size: .95rem; color: var(--vg-muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none;
}
.vg-auth__tab:hover { color: var(--vg-ink); text-decoration: none; }
.vg-auth__tab.is-active { color: var(--vg-primary); border-bottom-color: var(--vg-primary); }

.vg-auth__form input[type="text"],
.vg-auth__form input[type="email"],
.vg-auth__form input[type="password"] {
  width: 100%; padding: 12px 15px; font: inherit; font-size: .93rem;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-sm);
  background: var(--vg-bg); color: var(--vg-ink);
}
.vg-auth__form input:focus { outline: none; border-color: var(--vg-primary); }
.vg-auth__hint { display: block; font-size: .76rem; color: var(--vg-muted); margin-top: 5px; }
.vg-auth__remember { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--vg-body); margin: 4px 0 18px; }
.vg-auth__alt { text-align: center; font-size: .88rem; margin: 18px 0 0; }
.vg-auth__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0; }

.vg-auth__notice { border-radius: var(--vg-radius-sm); padding: 12px 14px; font-size: .88rem; margin-bottom: 18px; }
.vg-auth__notice--ok { background: #e6f6ec; color: #14603a; }
.vg-auth__notice--error { background: #fdecec; color: #a3271f; }
html[data-vg-theme="dark"] .vg-auth__notice--ok { background: #14301f; color: #b7e5c8; }
html[data-vg-theme="dark"] .vg-auth__notice--error { background: #3a1d1c; color: #f3b0ab; }

.vg-auth__avatar {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--vg-primary-soft); color: var(--vg-primary);
  font-size: 1.6rem; font-weight: 800;
}
.vg-auth__aside { padding-top: 8px; }

@media (max-width: 900px) {
  .vg-auth { grid-template-columns: 1fr; gap: 28px; }
  .vg-auth__card { padding: 24px 20px; }
}

/* ==========================================================================
   24. FOOTER LAYOUT
   Five columns on desktop; on a phone the menu columns collapse behind their
   headings so the footer does not become an endless scroll.
   ========================================================================== */
.vg-footer__cols {
  display: grid;
  grid-template-columns: minmax(230px, 1.1fr) minmax(180px, 1fr) 1.6fr 1fr 1.2fr;
  gap: 34px 30px;
  align-items: start;
}
.vg-footer__col { min-width: 0; }

.vg-footer__heading { margin: 0 0 14px; }
.vg-footer__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 0; background: none; border: 0;
  font: inherit; font-family: var(--vg-font-head); font-weight: 800; font-size: .92rem;
  color: var(--vg-footer-text); text-align: left; cursor: default;
}
.vg-footer__toggle svg { display: none; }        /* Only a control on phones */
.vg-footer__panel ul { list-style: none; padding: 0; margin: 0; }
.vg-footer__panel li { margin-bottom: 10px; }
.vg-footer__panel a {
  font-size: .87rem; opacity: .92;
  text-decoration: underline; text-underline-offset: 3px;
}
.vg-footer__panel a:hover { opacity: 1; }

/*
 * Contact details in the footer. The rows are icon-plus-text rather than
 * plain links, so they need their own alignment: the icon holds its size and
 * sits against the first line of an address that wraps onto three.
 */
.vg-footer__contact li {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 12px; font-size: .87rem; line-height: 1.5;
}
.vg-footer__contact svg { flex: 0 0 auto; margin-top: 3px; opacity: .75; }
.vg-footer__contact a { text-decoration: none; }
.vg-footer__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* One label, then each number on its own line beneath it. */
.vg-footer__numlabel {
  display: block; font-size: .76rem; letter-spacing: .02em;
  opacity: .7; margin-bottom: 2px;
}
.vg-footer__nums a {
  display: block; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.vg-footer__nums a + a { margin-top: 2px; }
.vg-footer__contact small {
  display: block; font-size: .76rem; opacity: .65; margin-top: 1px;
}

.vg-footer__col--brand .vg-footer__logo { display: inline-block; margin-bottom: 14px; }
.vg-footer__apphead { margin: 0 0 12px; font-size: .92rem; }
.vg-footer__pay { margin-top: 26px; padding-top: 0; border-top: 0; }
.vg-footer__pay h4 { margin-bottom: 12px; }

@media (max-width: 1080px) {
  .vg-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .vg-footer__cols { grid-template-columns: 1fr; gap: 0; }

  .vg-footer__col { padding: 0; }
  .vg-footer__col:not(.vg-footer__col--menu) { margin-bottom: 26px; }

  /* Collapsible menu sections */
  .vg-footer__col--menu {
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding: 4px 0;
  }
  .vg-footer__heading { margin: 0; }
  .vg-footer__toggle { padding: 18px 0; cursor: pointer; font-size: 1.05rem; }
  .vg-footer__toggle svg { display: block; flex: 0 0 auto; transition: transform .22s ease; }
  .vg-footer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .vg-footer__panel { display: none; padding-bottom: 14px; }
  .vg-footer__panel.is-open { display: block; }
  .vg-footer__panel li { margin-bottom: 14px; }
  .vg-footer__panel a { font-size: .95rem; }

  /* Payments break out of the last column and sit on their own */
  .vg-footer__pay {
    margin: 0; padding: 20px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .vg-footer__pay h4 { font-size: 1.05rem; }

  .vg-footer__col--brand { text-align: left; }

  /*
   * Centred footer logo (Customize → Footer → Footer logo position on
   * phones). The store buttons are a flex row rather than inline text, so
   * text-align alone would leave them hugging the left edge while the logo
   * above them sat in the middle.
   */
  .vg-footer__col--brand.vg-footer__col--center { text-align: center; }
  .vg-footer__col--center .vg-footer__about { margin-left: auto; margin-right: auto; }
  .vg-footer__col--center .vg-stores--footer { justify-content: center; }

  .vg-stores--footer { flex-direction: row; flex-wrap: wrap; gap: 12px; }
}

/* ==========================================================================
   25. BOOKING WIDGET
   ========================================================================== */
.vg-booknow { margin-top: 4px; }
.vg-booknow__block { padding: 14px 0; border-top: 1px solid var(--vg-line); }
.vg-booknow__block:first-child { border-top: 0; padding-top: 4px; }
.vg-booknow__label {
  display: block; font-size: .78rem; font-weight: 700; color: var(--vg-ink);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}

/* Traveller rows */
.vg-pax { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.vg-pax__who strong { display: block; font-size: .93rem; color: var(--vg-ink); }
.vg-pax__who small { display: block; font-size: .76rem; color: var(--vg-muted); line-height: 1.4; }
.vg-pax__price { font-weight: 600; color: var(--vg-body) !important; }

.vg-stepper {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-pill); overflow: hidden;
}
.vg-stepper__btn {
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--vg-primary); font-weight: 700;
}
.vg-stepper__btn:hover { background: var(--vg-primary-soft); }
.vg-stepper input {
  width: 34px; height: 34px; border: 0; text-align: center;
  font: inherit; font-size: .93rem; font-weight: 700; color: var(--vg-ink);
  background: none; appearance: textfield; -moz-appearance: textfield;
}
.vg-stepper input::-webkit-outer-spin-button,
.vg-stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.vg-booknow__hint { font-size: .8rem; color: var(--vg-accent); margin: 6px 0 0; }

/* Date field */
.vg-booknow input[type="date"] {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .93rem;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-pill);
  background: var(--vg-bg); color: var(--vg-ink);
}
.vg-booknow input[type="date"]:focus { outline: none; border-color: var(--vg-primary); }

/* Time slots */
.vg-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.vg-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px; cursor: pointer; text-align: center;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-sm);
  transition: border-color .16s ease, background .16s ease;
}
.vg-slot:hover { border-color: var(--vg-primary); }
.vg-slot input { position: absolute; opacity: 0; pointer-events: none; }
.vg-slot__time { font-size: .88rem; font-weight: 700; color: var(--vg-ink); }
.vg-slot__price { font-size: .76rem; color: var(--vg-muted); }
.vg-slot:has(input:checked) {
  border-color: var(--vg-primary); background: var(--vg-primary-soft);
  box-shadow: inset 0 0 0 1px var(--vg-primary);
}
.vg-slot:has(input:checked) .vg-slot__price { color: var(--vg-primary); font-weight: 600; }

/* Running total */
.vg-booknow__total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 0 14px; border-top: 1px solid var(--vg-line);
  font-size: .88rem; color: var(--vg-body);
}
.vg-booknow__total strong { font-size: 1.5rem; font-weight: 800; color: var(--vg-ink); }
.vg-booknow__submit { margin-bottom: 10px; }
.vg-booknow__submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.vg-booknow__note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .74rem; color: var(--vg-muted); margin: 0; line-height: 1.45;
}
.vg-booknow__note svg { flex: 0 0 auto; margin-top: 1px; color: #1a9e5c; }

/* Meeting point box */
.vg-meetbox {
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
  padding: 18px; margin-top: 18px; background: var(--vg-surface);
}
.vg-meetbox h3 { display: flex; align-items: center; gap: 8px; font-size: .98rem; margin-bottom: 10px; }
.vg-meetbox__text { font-size: .88rem; }
.vg-meetbox__text p:last-child { margin-bottom: 0; }
.vg-meetbox__address { font-size: .85rem; color: var(--vg-body); margin: 8px 0 0; font-weight: 600; }
.vg-meetbox__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: .85rem; font-weight: 700;
}
.vg-meetbox__link svg { flex: 0 0 auto; }
.vg-meetbox__note { font-size: .74rem; color: var(--vg-muted); margin: 10px 0 0; }

/* WhatsApp card keeps its own brand colour */
.vg-contact__icon--wa { background: #e7f8ed; color: #1faa53; }
html[data-vg-theme="dark"] .vg-contact__icon--wa { background: #14301f; color: #46c97a; }

/* ==========================================================================
   25. DISCOUNTED SLOTS AND OPENING HOURS
   ========================================================================== */

/* A slot priced below the others has to be the one the eye lands on. */
.vg-slot { position: relative; }
.vg-slot__badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--vg-accent); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .02em;
  padding: 3px 8px; border-radius: var(--vg-radius-pill); white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.vg-slot--deal { border-color: var(--vg-accent); }
.vg-slot--deal:has(input:checked) { background: rgba(217, 46, 46, .07); }
.vg-slot__prices { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.vg-slot__prices del { font-size: .72rem; color: var(--vg-muted); }
.vg-slot--deal .vg-slot__price { color: var(--vg-accent); font-weight: 800; }

/* A time that has passed its cut-off: visibly out, and not clickable. */
.vg-slot.is-closed {
  opacity: .45;
  cursor: not-allowed;
  border-style: dashed;
}
.vg-slot.is-closed .vg-slot__time,
.vg-slot.is-closed .vg-slot__price { text-decoration: line-through; }
.vg-slot.is-closed:hover { border-color: var(--vg-line); }
.vg-slot__closed {
  display: block; margin-top: 4px;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--vg-muted);
}

.vg-slots__note {
  display: flex; align-items: center; gap: 7px;
  margin: 12px 0 0; font-size: .8rem; color: var(--vg-accent); font-weight: 600;
}
.vg-slots__note svg { flex: 0 0 auto; }

/* Opening hours of the place being visited */
.vg-hours__title { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 14px; }
.vg-hours__site {
  font-size: .92rem; margin: 18px 0 8px; color: var(--vg-ink);
  padding-bottom: 6px; border-bottom: 1px solid var(--vg-line);
}
.vg-hours__site:first-of-type { margin-top: 0; }
.vg-hours__list { margin: 0 0 6px; }
.vg-hours__list > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 8px 0; border-bottom: 1px solid var(--vg-line); font-size: .89rem;
}
.vg-hours__list > div:last-child { border-bottom: 0; }
.vg-hours__list dt { color: var(--vg-body); }
.vg-hours__list dd { margin: 0; font-weight: 700; color: var(--vg-ink); white-space: nowrap; }
.vg-hours__warn {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0; padding: 10px 12px;
  background: rgba(217, 46, 46, .07); border-radius: var(--vg-radius-sm);
  font-size: .84rem; color: var(--vg-accent);
}
.vg-hours__warn svg { flex: 0 0 auto; margin-top: 2px; }
html[data-vg-theme="dark"] .vg-hours__warn { background: rgba(217, 46, 46, .14); }

@media (max-width: 520px) {
  .vg-hours__list > div { flex-direction: column; gap: 2px; }
}

/* Itinerary beside its map, the way a route reads best */
.vg-itin-wrap--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: start; }
.vg-itin__map { border-radius: var(--vg-radius); overflow: hidden; border: 1px solid var(--vg-line); min-height: 300px; }
.vg-itin__map iframe { height: 100%; min-height: 300px; }
.vg-itin__note { font-size: .78rem; color: var(--vg-muted); margin-top: 14px; }

@media (max-width: 900px) {
  .vg-itin-wrap--split { grid-template-columns: 1fr; gap: 18px; }
  .vg-itin__map, .vg-itin__map iframe { min-height: 240px; }
}

/* ==========================================================================
   26. MEETING POINT
   ========================================================================== */
.vg-meet__text > *:last-child { margin-bottom: 0; }

.vg-meet__photo { margin: 16px 0 0; max-width: 420px; }
.vg-meet__photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--vg-radius); border: 1px solid var(--vg-line);
}
.vg-meet__photo figcaption,
.vg-meet__address {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 10px 0 0; font-size: .85rem; color: var(--vg-muted);
}
.vg-meet__photo figcaption svg,
.vg-meet__address svg { flex: 0 0 auto; margin-top: 2px; color: var(--vg-accent); }

.vg-meet__link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px; font-size: .9rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
}
.vg-meet__link:hover { text-decoration: underline; }
.vg-meet__link svg { transition: transform .18s ease; }
.vg-meet__link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   27. CHECKOUT, ACCOUNT AND PHONE SIZING
   ========================================================================== */

/* --- Traveller details at checkout --- */
.rayago-travellers { margin: 26px 0; }
.rayago-travellers h3 { font-size: 1.15rem; margin: 0 0 6px; }
.rayago-travellers__intro { font-size: .88rem; color: var(--vg-muted); margin-bottom: 18px; }
.rayago-travellers__tour {
  font-size: .95rem; margin: 22px 0 10px; color: var(--vg-ink);
  padding-bottom: 6px; border-bottom: 1px solid var(--vg-line);
}
.rayago-traveller {
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
  padding: 16px 18px; margin: 0 0 12px;
}
.rayago-traveller legend { font-weight: 700; font-size: .92rem; padding: 0 6px; }
.rayago-traveller__age { font-weight: 400; color: var(--vg-muted); font-size: .82rem; margin-left: 6px; }
.rayago-traveller__row { display: grid; grid-template-columns: 1fr 1fr 90px; gap: 12px; }
.rayago-traveller__row .form-row { margin: 0; padding: 0; }
.rayago-traveller__row label { display: block; font-size: .82rem; margin-bottom: 4px; }
.rayago-traveller__row input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .9rem;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-sm);
  background: var(--vg-bg); color: var(--vg-ink);
}

/* --- Profile photo on the account page --- */
.rayago-photo { border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 16px 18px; margin-bottom: 20px; }
.rayago-photo legend { font-weight: 700; font-size: .92rem; padding: 0 6px; }
.rayago-photo__row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.rayago-photo__preview {
  width: 78px; height: 78px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--vg-primary-soft); color: var(--vg-primary);
  font-size: 1.9rem; font-weight: 800;
}
.rayago-photo__preview img { width: 100%; height: 100%; object-fit: cover; }
.rayago-photo__controls { flex: 1 1 220px; min-width: 0; }
.rayago-photo__hint { display: block; font-size: .78rem; color: var(--vg-muted); margin-top: 6px; }
.rayago-photo__remove { display: flex; align-items: center; gap: 7px; font-size: .85rem; margin-top: 10px; }

/* --- Cart thumbnails --- */
.rayago-cart-thumb, .wc-block-cart-item__image img { border-radius: var(--vg-radius-sm); }

/* --- The booking box, when the mobile bar has jumped to it --- */
#vg-booking.is-target .vg-booknow,
#vg-booking.is-target .vg-book {
  outline: 3px solid var(--vg-primary);
  outline-offset: 4px;
  transition: outline-color .4s ease;
}

/* ==========================================================================
   28. PHONE AND TABLET SIZING
   Everything below stops long words, wide tables and WooCommerce's own
   markup from pushing the page sideways on a narrow screen.
   ========================================================================== */
@media (max-width: 1024px) {
  .rayago-traveller__row { grid-template-columns: 1fr 1fr 84px; gap: 10px; }
}

@media (max-width: 768px) {

  /* Nothing may overflow, however long the word or wide the table. */
  body { overflow-wrap: break-word; word-wrap: break-word; }
  img, table, iframe, pre { max-width: 100%; }

  /* WooCommerce lays its own pages out for a desktop; narrow them. */
  .woocommerce table.shop_table,
  .woocommerce table.shop_table thead,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td,
  .woocommerce table.shop_table tr { display: block; width: 100%; }
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table tr { border-bottom: 1px solid var(--vg-line); padding: 12px 0; }
  .woocommerce table.shop_table td { border: 0; padding: 4px 0; text-align: left; }

  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2 { float: none; width: 100%; }
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100%; float: none; margin-right: 0; }

  .woocommerce-checkout #customer_details,
  .woocommerce-cart .cart-collaterals { width: 100%; }

  /* Form controls at a size a thumb can actually hit, and at 16px so iOS
     does not zoom the whole page in when the field is focused. */
  .woocommerce input[type="text"],
  .woocommerce input[type="email"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="number"],
  .woocommerce input[type="password"],
  .woocommerce textarea,
  .woocommerce select,
  .rayago-traveller__row input,
  .vg-booknow input, .vg-booknow select,
  .vg-auth__form input, .vg-contact__form input, .vg-contact__form textarea {
    font-size: 16px !important;
    min-height: 46px;
  }
  .woocommerce textarea, .vg-contact__form textarea { min-height: 110px; }

  /* Traveller rows stack rather than squeezing three columns onto a phone. */
  .rayago-traveller__row { grid-template-columns: 1fr 1fr; }
  .rayago-traveller__age-field { grid-column: span 2; max-width: 130px; }

  /* Headings were running off the edge at desktop sizes. */
  h1 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 1rem + 1.4vw, 1.6rem); }
  .vg-tour__title { font-size: 1.4rem; line-height: 1.25; }
  .vg-hero__title { font-size: clamp(1.6rem, 1.1rem + 3.4vw, 2.2rem); }

  /* WooCommerce buttons full width, so they are not stranded mid-row. */
  .woocommerce .button, .woocommerce a.button, .woocommerce button.button { width: 100%; text-align: center; }
  .woocommerce .quantity { width: auto; }

  .rayago-photo__row { gap: 14px; }
  .rayago-photo__preview { width: 64px; height: 64px; font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .rayago-traveller { padding: 14px; }
  .rayago-traveller__row { grid-template-columns: 1fr; }
  .rayago-traveller__age-field { grid-column: auto; max-width: 120px; }
  .vg-container { padding: 0 14px; }
}

/* ==========================================================================
   29. CART BUTTON AND THE CUSTOMER'S BOOKINGS
   ========================================================================== */
.vg-cartbtn { position: relative; }
.vg-cartbtn__count {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--vg-accent); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center;
}
.vg-cartbtn__count[hidden] { display: none; }
.vg-header--over-media:not(.is-stuck) .vg-cartbtn__count { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

/* A customer looking at one of their own bookings */
.rayago-mybooking { margin: 0 0 34px; }
.rayago-mybooking h2 { font-size: 1.3rem; margin: 0 0 16px; }
.rayago-mybooking__item {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
  padding: 16px; margin-bottom: 12px;
}
.rayago-mybooking__photo img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--vg-radius-sm); display: block; }
.rayago-mybooking__body { flex: 1 1 auto; min-width: 0; }
.rayago-mybooking__body h3 { font-size: 1.02rem; margin: 0 0 6px; }
.rayago-mybooking__when { font-weight: 700; color: var(--vg-ink); margin: 0 0 4px; font-size: .92rem; }
.rayago-mybooking__pax { color: var(--vg-muted); font-size: .88rem; margin: 0 0 6px; }
.rayago-mybooking__meet { display: flex; align-items: flex-start; gap: 6px; font-size: .85rem; color: var(--vg-muted); margin: 0; }
.rayago-mybooking__meet svg { flex: 0 0 auto; margin-top: 3px; color: var(--vg-accent); }

.rayago-mybooking__subhead { font-size: 1rem; margin: 20px 0 10px; }
.rayago-mybooking__people { list-style: none; padding: 0; margin: 0 0 18px; }
.rayago-mybooking__people li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--vg-line); font-size: .9rem;
}
.rayago-mybooking__people li:last-child { border-bottom: 0; }
.rayago-mybooking__people span { color: var(--vg-muted); }
.rayago-mybooking__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rayago-mybooking__hint { font-size: .8rem; color: var(--vg-muted); }

@media (max-width: 560px) {
  .rayago-mybooking__item { flex-direction: column; }
  .rayago-mybooking__photo img { width: 100%; height: 150px; }
}

/* ==========================================================================
   30. PHONE HEADER SPACING
   With the cart added there are five buttons plus a logo, so the bar needs
   the full width of the screen and tighter icons to fit them.
   ========================================================================== */
@media (max-width: 768px) {

  /* Use the whole width rather than the desktop container. */
  .vg-header .vg-container { max-width: 100%; padding: 0 8px; }
  .vg-header--glass .vg-header__bar { margin: 6px 0; padding: 4px 14px 4px 10px; }
  .vg-header:not(.vg-header--glass) .vg-header__bar { padding-right: 6px; }

  /* The icons sat hard against the edge of the capsule. */
  .vg-header__actions { padding-right: 2px; }

  .vg-header__bar { gap: 2px; }
  .vg-header__actions { gap: 0; }

  .vg-iconbtn { padding: 7px 4px; }
  .vg-iconbtn svg { width: 21px; height: 21px; }
  .vg-burger { padding: 7px 4px; }

  /* The logo may shrink, but never past the point of being readable. */
  .vg-brandwrap { min-width: 0; }
  .vg-brand img { max-height: 30px; }
  .vg-brand__text { font-size: .95rem; }

  .vg-plane { width: 24px; height: 24px; margin: 0 4px 0 2px; }

  .vg-cartbtn__count { top: 0; right: -2px; min-width: 16px; height: 16px; line-height: 16px; font-size: .62rem; }
}

/* Narrow phones: drop the plane before anything important is squeezed. */
@media (max-width: 400px) {
  /* Narrow phones: shrink the plane rather than dropping it. */
  .vg-plane { width: 20px; height: 20px; margin: 0 2px; }
  .vg-iconbtn { padding: 7px 3px; }
  .vg-iconbtn svg { width: 19px; height: 19px; }
  .vg-brand img { max-height: 24px; }
}

/* ==========================================================================
   31. CUSTOMER DASHBOARD
   ========================================================================== */
.rayago-dash { max-width: 760px; margin: 0 auto; padding: 10px 0 40px; }

.rayago-dash__head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.rayago-dash__avatar {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--vg-primary-soft); color: var(--vg-primary);
  font-size: 1.8rem; font-weight: 800;
}
.rayago-dash__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rayago-dash__head h1 { font-size: 1.6rem; margin: 0 0 4px; }
.rayago-dash__email { color: var(--vg-muted); font-size: .9rem; margin: 0; }

.rayago-dash__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.rayago-dash__card {
  display: block; padding: 20px;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
  background: var(--vg-bg); color: var(--vg-body); text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.rayago-dash__card:hover {
  box-shadow: var(--vg-shadow-lg); transform: translateY(-2px);
  border-color: var(--vg-primary); text-decoration: none;
}
.rayago-dash__icon {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px;
  border-radius: 50%; background: var(--vg-primary-soft); color: var(--vg-primary);
}
.rayago-dash__card strong { display: block; color: var(--vg-ink); font-size: .98rem; margin-bottom: 4px; }
.rayago-dash__card span:not(.rayago-dash__icon) { font-size: .85rem; color: var(--vg-muted); }
.rayago-dash__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }

/* --- WooCommerce's own account pages, brought into the theme --- */
.woocommerce-account .woocommerce { max-width: 1000px; margin: 0 auto; padding: 10px 0 40px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block; padding: 11px 14px; border-radius: var(--vg-radius-sm);
  color: var(--vg-body); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--vg-surface); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--vg-primary-soft); color: var(--vg-primary); }
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-account fieldset { border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 16px 18px; margin: 20px 0; }
.woocommerce-account legend { font-weight: 700; font-size: .92rem; padding: 0 6px; }

@media (max-width: 768px) {
  .rayago-dash__grid { grid-template-columns: 1fr; }
  .rayago-dash__head { gap: 14px; }
  .rayago-dash__avatar { width: 58px; height: 58px; font-size: 1.4rem; }
  .rayago-dash__head h1 { font-size: 1.3rem; }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 20px; }
}

/* ==========================================================================
   32. PHONE HEADER: ICONS TO THE RIGHT
   With no menu button the logo sat alone on the left and the icons drifted
   into the middle, leaving a gap on the right. Pushing the icon group to the
   far edge closes it.
   ========================================================================== */
@media (max-width: 768px) {

  .vg-header__bar { justify-content: flex-start; }

  /* Everything after the brand is pushed right. */
  .vg-header__actions { margin-left: auto; padding-right: 4px; }

  /* Without a burger the logo needs a little breathing room of its own. */
  .vg-header__bar > .vg-brandwrap:first-child { padding-left: 4px; }

  .vg-header--glass .vg-header__bar { padding: 4px 12px 4px 12px; }
}

/* --------------------------------------------------------------------------
   Centred logo on phones (Customize → Header → Logo position on phones).

   The brand is taken out of the flow and pinned to the middle of the bar
   rather than centred in the space left over, because the space left over is
   not the middle: a menu button on one side and five icons on the other pull
   it well off centre. Pinning it also keeps it still as icons come and go.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  .vg-header--logo-center .vg-header__bar { position: relative; }

  .vg-header--logo-center .vg-header__bar > .vg-brandwrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-left: 0;
    max-width: 46vw;          /* never grows into the icons on either side */
    justify-content: center;
    pointer-events: auto;
    z-index: 1;
  }
  .vg-header--logo-center .vg-header__bar > .vg-brandwrap .vg-brand { max-width: 100%; }
  .vg-header--logo-center .vg-header__bar > .vg-brandwrap img { max-width: 100%; height: auto; }

  /* The bar still needs its height, and the icons still need the far edge. */
  .vg-header--logo-center .vg-header__actions { margin-left: auto; }
}

/* ==========================================================================
   33. PHONE HEADER ALIGNMENT
   The logo sits left, the buttons sit hard right, and the plane keeps the
   space between them.
   ========================================================================== */
@media (max-width: 768px) {

  .vg-header__bar { justify-content: flex-start; }

  /* Push the buttons to the right edge, leaving the gap for the plane. */
  .vg-header__actions { margin-left: auto; }

  /* The plane sits in that gap rather than being hidden. */
  .vg-plane {
    display: block;
    width: 26px; height: 26px;
    margin: 0 auto 0 6px;
  }
  .vg-plane::before { width: 26px; }
  .vg-plane::after { width: 24px; }
}

/* Even a 360px screen has room once everything else is trimmed. */
@media (max-width: 360px) {
  .vg-plane { width: 20px; height: 20px; margin: 0 2px; }
  .vg-plane::before, .vg-plane::after { width: 18px; }
  .vg-iconbtn { padding: 7px 2px; }
  .vg-iconbtn svg { width: 18px; height: 18px; }
  .vg-brand img { max-height: 24px; }
}

/* ==========================================================================
   34. AUDIO GUIDE
   Laid out like a media player: a play/pause button, a scrubber carrying the
   elapsed and total time beneath it, a speed control and volume.
   ========================================================================== */
.vg-audio {
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-radius);
  background: var(--vg-surface);
  padding: 16px 18px;
  margin: 0 0 26px;
}
.vg-audio *, .vg-audio *::before, .vg-audio *::after { box-sizing: border-box; }

.vg-audio__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.vg-audio__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--vg-muted);
}
.vg-audio__selects { display: flex; gap: 8px; }
.vg-audio__field select {
  padding: 7px 30px 7px 11px; font: inherit; font-size: .82rem; font-weight: 600;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-pill);
  background-color: var(--vg-bg); color: var(--vg-ink); cursor: pointer;
  background-position: right 10px center;
}

/* The bar itself.
   The two times hang below the scrubber rather than taking part in the
   layout. Laid out normally they made the bar three times taller than the
   track, and centring the row on that put the play button, the speed pill
   and the volume icon well below the line they are meant to sit on. Taking
   them out of flow leaves every control centred on the scrubber itself, and
   the row reserves the space they occupy underneath. */
.vg-audio__player { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; }

/*
 * The button is a flex box rather than a grid, its icons are blocks rather
 * than inline elements, and its font-size is zero.
 *
 * All three matter: an inline <svg> sits on a text baseline, and a baseline
 * inside a 42px circle with an inherited line-height drops the triangle to
 * the bottom of the button. Blocks have no baseline to sit on, so the icon
 * stays where it is put. The display is forced because the player is printed
 * inside the_content, where a page builder's own button rules can otherwise
 * win on specificity and undo the centring.
 */
.vg-audio .vg-audio__play {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; margin: 0; border: 0;
  border-radius: 50%; background: var(--vg-primary); color: #fff; cursor: pointer;
  display: inline-flex !important; align-items: center; justify-content: center;
  line-height: 0; font-size: 0; text-align: center; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.vg-audio .vg-audio__play:hover { transform: scale(1.06); background: var(--vg-primary-dark); }
.vg-audio .vg-audio__play:disabled { opacity: .55; cursor: progress; transform: none; }
.vg-audio .vg-audio__play:focus-visible { outline: 2px solid var(--vg-primary); outline-offset: 3px; }

/* One icon showing at a time; the other is simply not laid out. */
.vg-audio__icon { display: none; align-items: center; justify-content: center; line-height: 0; }
.vg-audio__icon.is-on { display: flex; }
.vg-audio__play svg,
.vg-audio__mute svg { display: block !important; }
.vg-audio__play svg { width: 20px; height: 20px; }
.vg-audio__mute svg { width: 18px; height: 18px; }

/* A triangle reads as off-centre when it is mathematically centred. */
.vg-audio__icon--play svg { transform: translateX(1px); }

/* Scrubber, with the two times pinned underneath */
.vg-audio__bar { flex: 1 1 auto; min-width: 0; position: relative; }
.vg-audio__track {
  position: relative; height: 6px; border-radius: 3px;
  background: var(--vg-line); cursor: pointer; touch-action: none;
}
/* A six pixel target is unusable with a thumb; this widens it invisibly. */
.vg-audio__track::before { content: ""; position: absolute; inset: -10px 0; }
.vg-audio__track:focus-visible { outline: 2px solid var(--vg-primary); outline-offset: 4px; }
.vg-audio__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 3px; background: var(--vg-primary);
  transition: width .2s linear;
}
.vg-audio__knob {
  position: absolute; top: 50%; left: 0; width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: var(--vg-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  opacity: 0; transition: opacity .18s ease, left .2s linear;
}
.vg-audio.is-playing .vg-audio__knob,
.vg-audio.is-scrubbing .vg-audio__knob,
.vg-audio__track:hover .vg-audio__knob { opacity: 1; }
/* Nothing should lag behind the finger during a drag. */
.vg-audio.is-scrubbing .vg-audio__fill,
.vg-audio.is-scrubbing .vg-audio__knob { transition: none; }

.vg-audio__times {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0;
  display: flex; justify-content: space-between; gap: 10px; pointer-events: none;
}
.vg-audio__time {
  font-size: .74rem; font-variant-numeric: tabular-nums;
  color: var(--vg-muted); line-height: 1;
}

/*
 * Speed and volume share one shape and one fixed height, so neither can be
 * inflated by a stray button rule from elsewhere on the site — which is what
 * turned the speed pill into a tall lozenge sitting proud of the row.
 */
.vg-audio .vg-audio__speed,
.vg-audio .vg-audio__mute {
  flex: 0 0 auto; height: 34px; margin: 0; cursor: pointer;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: var(--vg-radius-pill); box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.vg-audio .vg-audio__speed {
  min-width: 46px; padding: 0 10px;
  border: 1px solid var(--vg-line); background: var(--vg-bg); color: var(--vg-body);
  font: inherit; font-size: .74rem !important; font-weight: 800; line-height: 1 !important;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.vg-audio .vg-audio__speed:hover,
.vg-audio .vg-audio__speed.is-changed {
  border-color: var(--vg-primary); color: var(--vg-primary);
}
.vg-audio .vg-audio__speed:focus-visible,
.vg-audio .vg-audio__mute:focus-visible { outline: 2px solid var(--vg-primary); outline-offset: 2px; }

.vg-audio .vg-audio__mute {
  width: 34px; padding: 0; border: 1px solid transparent; background: none;
  color: var(--vg-muted); line-height: 0;
}
.vg-audio .vg-audio__mute:hover { color: var(--vg-ink); }
.vg-audio.is-muted .vg-audio__mute { color: var(--vg-accent); }

.vg-audio__status,
.vg-audio__note { margin: 12px 0 0; font-size: .82rem; }
.vg-audio__status { color: var(--vg-muted); }
.vg-audio__status[hidden], .vg-audio__note[hidden] { display: none; }
.vg-audio__note {
  padding: 9px 12px; border-radius: var(--vg-radius-sm);
  background: rgba(217, 46, 46, .07); color: var(--vg-accent);
}
html[data-vg-theme="dark"] .vg-audio__note { background: rgba(217, 46, 46, .16); }

/* A gentle pulse while it reads, so it is obvious something is playing */
.vg-audio.is-playing .vg-audio__play { animation: vg-audio-pulse 2.2s ease-in-out infinite; }
@keyframes vg-audio-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 102, 224, .35); }
  50%      { box-shadow: 0 0 0 9px rgba(15, 102, 224, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vg-audio.is-playing .vg-audio__play { animation: none; }
  .vg-audio__fill, .vg-audio__knob { transition: none; }
}

@media (max-width: 560px) {
  .vg-audio { padding: 14px; }
  .vg-audio__head { gap: 10px; }
  .vg-audio__selects { flex: 1 1 100%; }
  .vg-audio__field { flex: 1 1 0; min-width: 0; }
  .vg-audio__field select { width: 100%; }
  .vg-audio__player { gap: 8px; }
  .vg-audio .vg-audio__play { width: 40px; height: 40px; }
  .vg-audio .vg-audio__speed { min-width: 42px; padding: 0 7px; height: 32px; }
  .vg-audio .vg-audio__mute { width: 30px; height: 32px; }
}

/* ==========================================================================
   35. ZOOMING SLIDESHOW
   For a place with two or three photographs, where a mosaic would look half
   empty. The slow zoom is what keeps a still photograph from looking frozen
   while it waits its turn.
   ========================================================================== */
.vg-slideshow {
  position: relative; overflow: hidden; margin: 0 0 26px;
  border-radius: var(--vg-radius); background: var(--vg-surface);
}
.vg-slideshow__stage { position: relative; aspect-ratio: 16 / 9; min-height: 220px; }
.vg-slideshow__slide {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity .9s ease;
}
.vg-slideshow__slide.is-on  { opacity: 1; z-index: 2; }
.vg-slideshow__slide.is-out { opacity: 0; z-index: 1; }
.vg-slideshow__slide img {
  width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in;
}

/*
 * The zoom stays applied to the outgoing slide as well as the incoming one.
 * Applied only to .is-on, the photo on its way out would snap back to its
 * starting scale halfway through the fade, which reads as a flicker.
 */
.vg-slideshow__slide.is-on img,
.vg-slideshow__slide.is-out img { animation: vg-kenburns 7.5s ease-out forwards; }
.vg-slideshow__slide:nth-child(even).is-on img,
.vg-slideshow__slide:nth-child(even).is-out img { animation-name: vg-kenburns-out; }

@keyframes vg-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.2%, -0.8%); }
}
@keyframes vg-kenburns-out {
  from { transform: scale(1.12) translate(1.2%, 0.8%); }
  to   { transform: scale(1) translate(0, 0); }
}

/* Arrows */
.vg-slideshow__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--vg-ink);
  display: grid; place-items: center; line-height: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.vg-slideshow__nav svg { display: block; }
.vg-slideshow__nav--prev { left: 12px; }
.vg-slideshow__nav--next { right: 12px; }
.vg-slideshow:hover .vg-slideshow__nav,
.vg-slideshow__nav:focus-visible { opacity: 1; }
.vg-slideshow__nav:hover { background: #fff; }
/* On a touch screen there is no hover, so the arrows simply stay. */
@media (hover: none) {
  .vg-slideshow__nav { opacity: 1; width: 34px; height: 34px; }
}

/* Counter and dots */
.vg-slideshow__count {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  padding: 4px 10px; border-radius: var(--vg-radius-pill);
  background: rgba(0, 0, 0, .5); color: #fff;
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.vg-slideshow__dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
  display: flex; justify-content: center; gap: 6px;
}
.vg-slideshow__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .55);
  transition: background .3s ease, width .3s ease;
}
.vg-slideshow__dot.is-on { background: #fff; width: 20px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .vg-slideshow__slide { transition: none; }
  .vg-slideshow__slide.is-on img,
  .vg-slideshow__slide.is-out img { animation: none; }
}

@media (max-width: 640px) {
  .vg-slideshow__stage { aspect-ratio: 4 / 3; min-height: 0; }
}

/* ==========================================================================
   36. PHOTO CYCLING ON CARDS
   ========================================================================== */
.vg-shots { position: relative; overflow: hidden; }
.vg-shots__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s ease;
}
.vg-shots__img.is-on { opacity: 1; }
/* The first image also sits in flow, so the box keeps its height. */
.vg-shots__img:first-child { position: relative; }

/* The same slow zoom as the slideshow, kept on the outgoing photo through
   the crossfade so it does not snap back mid-fade. */
.vg-shots__img.is-on,
.vg-shots__img.is-out { animation: vg-kenburns 6s ease-out forwards; }
.vg-shots__img.is-out { opacity: 0; }

.vg-shots__dots {
  position: absolute; left: 0; right: 0; bottom: 9px;
  display: flex; justify-content: center; gap: 5px; z-index: 2;
}
.vg-shots__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transition: background .3s ease, width .3s ease;
}
.vg-shots__dot.is-on { background: #fff; width: 14px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .vg-shots__img { transition: none; }
}

/* ==========================================================================
   41. OPERATOR DASHBOARD
   A page on the website, not a wp-admin screen: the people running the tours
   should not need to learn WordPress to see who booked or to close a time.
   ========================================================================== */
.vg-ops { max-width: 1180px; }
.vg-ops__gate { max-width: 420px; margin: 40px auto 80px; }
.vg-ops__gate .vg-lead { margin-bottom: 18px; }
.vg-ops__gate input[type="text"],
.vg-ops__gate input[type="password"] {
  width: 100%; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-sm);
  background: var(--vg-bg); color: var(--vg-ink); font: inherit;
}
.vg-ops__gate .button,
.vg-ops__gate input[type="submit"] {
  width: 100%; padding: 12px 18px; border: 0; cursor: pointer;
  border-radius: var(--vg-radius-pill); background: var(--vg-primary);
  color: #fff; font: inherit; font-weight: 700;
}
.vg-ops__gate label { display: block; font-size: .88rem; font-weight: 600; }
.vg-ops__gate .login-remember { font-weight: 400; margin: 4px 0 14px; }

.vg-ops__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.vg-ops__head h1 { margin: 0 0 4px; }
.vg-ops__range { margin: 0; color: var(--vg-muted); font-size: .88rem; }

.vg-ops__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vg-ops__tab {
  padding: 8px 14px; border-radius: var(--vg-radius-pill);
  border: 1px solid var(--vg-line); background: var(--vg-surface);
  color: var(--vg-body); font-size: .84rem; font-weight: 600; text-decoration: none;
}
.vg-ops__tab:hover { border-color: var(--vg-primary); color: var(--vg-primary); }
.vg-ops__tab.is-on { background: var(--vg-primary); border-color: var(--vg-primary); color: #fff; }

.vg-ops__filter { margin-bottom: 22px; }
.vg-ops__filter select {
  padding: 9px 34px 9px 12px; font: inherit; font-size: .88rem;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-sm);
  background-color: var(--vg-bg); color: var(--vg-ink); max-width: 100%;
}

.vg-ops__cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px;
}
.vg-ops__card {
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
  background: var(--vg-surface); padding: 18px;
}
.vg-ops__label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--vg-muted); margin-bottom: 6px;
}
.vg-ops__figure { font-size: 1.7rem; line-height: 1.1; color: var(--vg-ink); }

.vg-ops__block { margin-bottom: 34px; }
.vg-ops__block h2 { font-size: 1.15rem; margin: 0 0 12px; }
.vg-ops__hint { color: var(--vg-muted); font-size: .86rem; margin: -4px 0 14px; max-width: 68ch; }
.vg-ops__empty { color: var(--vg-muted); }

/* Tables scroll sideways on a phone rather than squashing to nothing. */
.vg-ops__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vg-ops__table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.vg-ops__table--wide { min-width: 860px; }
.vg-ops__table th, .vg-ops__table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--vg-line);
  vertical-align: top;
}
.vg-ops__table th {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--vg-muted); white-space: nowrap;
}
.vg-ops__table tbody tr:hover { background: var(--vg-surface); }
.vg-ops__who { display: block; font-weight: 600; color: var(--vg-ink); }
.vg-ops__sub { display: block; font-size: .8rem; color: var(--vg-muted); }
a.vg-ops__sub:hover { color: var(--vg-primary); }

.vg-ops__status {
  display: inline-block; padding: 3px 9px; border-radius: var(--vg-radius-pill);
  font-size: .72rem; font-weight: 700; background: var(--vg-line); color: var(--vg-body);
  white-space: nowrap;
}
.vg-ops__status--completed { background: rgba(22, 145, 90, .14); color: #16915a; }
.vg-ops__status--processing { background: rgba(15, 102, 224, .14); color: var(--vg-primary); }
.vg-ops__status--on-hold,
.vg-ops__status--pending { background: rgba(217, 46, 46, .12); color: var(--vg-accent); }

/* The switches */
.vg-ops__tour { margin-bottom: 20px; }
.vg-ops__tour h3 { font-size: .98rem; margin: 0 0 8px; }
.vg-ops__switches { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-ops__switch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700;
  border: 1px solid var(--vg-primary); border-radius: var(--vg-radius-pill);
  background: var(--vg-surface); color: var(--vg-ink);
  transition: opacity .16s ease, border-color .16s ease, color .16s ease;
}
.vg-ops__switch:disabled { opacity: .5; cursor: wait; }
.vg-ops__dot {
  width: 9px; height: 9px; border-radius: 50%; background: #16915a; flex: 0 0 auto;
}
.vg-ops__switch.is-off {
  border-color: var(--vg-line); color: var(--vg-muted); text-decoration: line-through;
}
.vg-ops__switch.is-off .vg-ops__dot { background: var(--vg-muted); }

.vg-ops__saved {
  margin-top: 12px; font-size: .86rem; font-weight: 600; color: #16915a;
}
.vg-ops__saved.is-bad { color: var(--vg-accent); }
.vg-ops__saved[hidden] { display: none; }

.vg-ops__foot { margin: 40px 0 60px; font-size: .86rem; }

@media (max-width: 720px) {
  .vg-ops__cards { grid-template-columns: 1fr; gap: 10px; }
  .vg-ops__card { padding: 14px; }
  .vg-ops__figure { font-size: 1.45rem; }
  .vg-ops__head { align-items: flex-start; }
}

/* One date only: the panel under each tour's permanent switches */
.vg-ops__sublabel {
  display: block; margin: 14px 0 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--vg-muted);
}
.vg-ops__oneday {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--vg-line);
}
.vg-ops__dayrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.vg-ops__dayrow input[type="date"] {
  padding: 9px 12px; font: inherit; font-size: .88rem;
  border: 1px solid var(--vg-line); border-radius: var(--vg-radius-sm);
  background: var(--vg-bg); color: var(--vg-ink);
}
.vg-ops__closeall {
  padding: 9px 14px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700;
  border: 1px solid var(--vg-accent); border-radius: var(--vg-radius-pill);
  background: none; color: var(--vg-accent);
}
.vg-ops__closeall:hover { background: rgba(217, 46, 46, .08); }
.vg-ops__closeall.is-on { background: var(--vg-accent); color: #fff; }
.vg-ops__closeall[hidden] { display: none; }
.vg-ops__daynote { margin: 0; color: var(--vg-muted); font-size: .85rem; }
.vg-ops__daynote[hidden] { display: none; }
/* A time inside a day that is closed outright: shown, but not a decision. */
.vg-ops__oneday .vg-ops__switch:disabled { opacity: .45; cursor: default; }