/* ============================================================
   Korcula Booking Platform — main.css
   Design system: Luxury & Simplicity
   ============================================================ */

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  /* Colors */
  --ke-navy:       #0b1628;
  --ke-navy-mid:   #152035;
  --ke-navy-light: #1e2f4a;
  --ke-navy-soft:  #243556;

  --ke-gold:       #c9a96e;
  --ke-gold-light: #dfc08a;
  --ke-gold-dark:  #a8864d;
  --ke-gold-pale:  #f5edd9;

  --ke-white:      #ffffff;
  --ke-off-white:  #f9f7f4;
  --ke-cream:      #f2ede4;

  --ke-text:       #1a1a1a;
  --ke-text-mid:   #4a4a4a;
  --ke-text-muted: #888888;
  --ke-text-light: #bbbbbb;

  --ke-border:     rgba(201, 169, 110, 0.2);
  --ke-border-mid: rgba(201, 169, 110, 0.4);

  --ke-success:    #2d6a4f;
  --ke-warning:    #b5860d;
  --ke-error:      #c0392b;
  --ke-info:       #1a5276;

  /* Typography */
  --ke-font-display: 'Source Sans 3', 'Cormorant Garamond', Georgia, sans-serif;
  --ke-font-body:    'Source Sans 3', 'Inter', system-ui, sans-serif;

  /* Spacing */
  --ke-space-xs:  0.25rem;
  --ke-space-sm:  0.5rem;
  --ke-space-md:  1rem;
  --ke-space-lg:  1.5rem;
  --ke-space-xl:  2.5rem;
  --ke-space-2xl: 4rem;
  --ke-space-3xl: 6rem;

  /* Layout */
  --ke-container: 1280px;
  --ke-radius:    4px;
  --ke-radius-lg: 8px;

  /* Header */
  --ke-header-h:  80px;

  /* Transitions */
  --ke-ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ke-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* ── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ke-font-body);
  font-weight: 300;
  color: var(--ke-text);
  background: var(--ke-white);
  line-height: 1.7;
  min-height: 100vh;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ke-ease); }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ke-font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); }
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

.ke-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ke-gold);
}

/* ── Layout ──────────────────────────────────────────────────── */
.ke-container {
  width: 100%;
  max-width: var(--ke-container);
  margin: 0 auto;
  padding: 0 var(--ke-space-xl);
}

@media (max-width: 768px) {
  .ke-container { padding: 0 var(--ke-space-md); }
}

.ke-main { padding-top: var(--ke-header-h); min-height: 80vh; }
.ke-main--bare { padding-top: 0; }
.admin-bar .ke-main--bare { padding-top: 32px; }
@media (max-width: 782px) {
  .admin-bar .ke-main--bare { padding-top: 46px; }
}

.ke-section {
  padding: var(--ke-space-3xl) 0;
}

/* Centered eyebrow + h2 + optional intro paragraph used as the
   header for most landing-page sections (services grid, fleet
   preview, route preview, FAQ, testimonials, etc.). Without the
   bottom margin the title sits flush against the grid below it,
   which looks cramped — clamp() scales the gap between mobile and
   desktop so it stays balanced at every viewport. */
.ke-section-header {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.ke-section--dark {
  background: var(--ke-navy);
  color: var(--ke-white);
}

.ke-section--cream {
  background: var(--ke-cream);
}

/* ── Header ──────────────────────────────────────────────────── */
.ke-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ke-header-h);
  z-index: 10000;
  background: #ffffff;
  border-bottom: 1px solid rgba(26, 35, 64, 0.08);
  transition: background 0.3s var(--ke-ease), box-shadow 0.3s var(--ke-ease);
}

/* Transparent only on homepage hero — added via body class 'page-template-page-home' */
.page-template-page-home .ke-header:not(.ke-header--scrolled) {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: transparent;
}

.ke-header--scrolled {
  background: #ffffff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(26, 35, 64, 0.06), 0 4px 20px rgba(26, 35, 64, 0.04);
  border-bottom-color: rgba(26, 35, 64, 0.08);
}

/* WordPress admin bar offset — desktop: 32px, mobile: 46px */
.admin-bar .ke-header {
  top: 32px;
}
.admin-bar .ke-main:not(.ke-main--bare) {
  padding-top: calc(var(--ke-header-h) + 32px);
}
.admin-bar .ke-hero {
  padding-top: calc(var(--ke-header-h) + 32px);
}
.admin-bar .ke-search-bar-wrap {
  top: calc(var(--ke-header-h) + 32px);
}
.admin-bar .ke-checkout-sidebar {
  top: calc(110px + 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar .ke-header       { top: 46px; }
  .admin-bar .ke-main:not(.ke-main--bare) { padding-top: calc(var(--ke-header-h) + 46px); }
  .admin-bar .ke-hero         { padding-top: calc(var(--ke-header-h) + 46px); }
  .admin-bar .ke-search-bar-wrap { top: calc(var(--ke-header-h) + 46px); }
  .admin-bar .ke-checkout-sidebar { top: calc(110px + 46px); }
}

.ke-header__inner {
  max-width: var(--ke-container);
  margin: 0 auto;
  padding: 0 var(--ke-space-xl);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ke-space-lg);
}

.ke-header__logo { display: flex; align-items: center; }

/* Uploaded logo image (via WordPress Customizer → Site Identity → Logo).
   Scales to fit the 80px header with breathing room. Preserves aspect ratio.
   If the user uploads a logo in the wrong aspect ratio it won't overflow. */
.ke-logo-img {
  display: block;
  width: auto;
  max-width: 240px;
  height: auto;
  max-height: 56px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .ke-logo-img {
    max-width: 180px;
    max-height: 44px;
  }
}

.ke-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.ke-logo-main {
  font-family: var(--ke-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ke-navy);
}

.ke-logo-sub {
  font-family: var(--ke-font-body);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  color: var(--ke-gold);
  margin-top: 2px;
}

/* ── Navigation ──────────────────────────────────────────────── */
.ke-nav__list {
  display: flex;
  gap: var(--ke-space-xl);
  align-items: center;
}

.ke-nav__list a {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ke-navy);
  transition: color 0.2s;
  position: relative;
}

.ke-nav__list a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--ke-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ke-ease);
}

.ke-nav__list a:hover { color: var(--ke-gold); }
.ke-nav__list a:hover::after,
.ke-nav__list .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }

/* ── Dropdown submenu ─────────────────────────────────────────── */
/* Hide the underline on parent links — the caret handles that. */
.ke-nav__item--has-children > .ke-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ke-nav__caret {
  transition: transform 0.2s var(--ke-ease);
  opacity: 0.7;
  margin-top: 1px;
}

.ke-nav__item--has-children:hover > .ke-nav__link .ke-nav__caret,
.ke-nav__item--has-children.is-open > .ke-nav__link .ke-nav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.ke-nav__sub {
  position: absolute;
  top: 100%;
  left: -16px;
  margin: 0;
  padding: 8px 0;
  background: #fff;
  border: 1px solid var(--ke-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11, 22, 40, 0.08);
  min-width: 200px;
  list-style: none;
  z-index: 9999;

  /* Hidden by default; shown on hover/focus-within (desktop) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ke-ease), transform 0.18s var(--ke-ease), visibility 0.18s;
}

/* The submenu sits beneath the parent — extend a small "bridge"
   above so a tiny mouse drift doesn't dismiss it. */
.ke-nav__sub::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.ke-nav__item--has-children {
  position: relative;
}

.ke-nav__item--has-children:hover > .ke-nav__sub,
.ke-nav__item--has-children:focus-within > .ke-nav__sub,
.ke-nav__item--has-children.is-open > .ke-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ke-nav__sub li {
  list-style: none;
}

.ke-nav__sub a {
  display: block;
  padding: 8px 16px;
  font-size: 0.9rem;
  color: var(--ke-navy);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

/* Dropdown items don't get the underline-on-hover the top-level uses. */
.ke-nav__sub a::after { display: none; }

.ke-nav__sub a:hover {
  background: var(--ke-cream, #f7fafc);
  color: var(--ke-gold);
}

/* Final CTA inside the dropdown — gold accent, separator above. */
.ke-nav__sub-cta {
  border-top: 1px solid var(--ke-border);
  margin-top: 4px;
  padding-top: 4px;
}
.ke-nav__sub-cta a {
  color: var(--ke-gold);
  font-weight: 600;
}

.ke-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ke-space-sm);
}

/* ── User menu dropdown ──────────────────────────────────────── */
.ke-user-menu {
  position: relative;
}

.ke-user-menu__trigger {
  cursor: pointer;
}

.ke-user-menu__caret {
  transition: transform 0.2s var(--ke-ease);
  margin-left: 0.15em;
  opacity: 0.6;
}

.ke-user-menu.is-open .ke-user-menu__caret {
  transform: rotate(180deg);
}

.ke-user-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid rgba(26, 35, 64, 0.1);
  border-radius: var(--ke-radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 0.4rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ke-user-menu__dropdown[hidden] {
  display: none;
}

.ke-user-menu__dropdown a {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.65em 0.9em;
  border-radius: var(--ke-radius);
  font-family: var(--ke-font-body);
  font-size: 0.875rem;
  color: var(--ke-navy);
  text-decoration: none;
  transition: background 0.15s var(--ke-ease);
}

.ke-user-menu__dropdown a:hover {
  background: rgba(26, 35, 64, 0.05);
  color: var(--ke-navy);
}

.ke-user-menu__dropdown a svg {
  flex-shrink: 0;
  opacity: 0.65;
}

.ke-user-menu__signout {
  border-top: 1px solid rgba(26, 35, 64, 0.08);
  margin-top: 0.25rem;
  padding-top: 0.65em !important;
}

/* ── Hamburger ───────────────────────────────────────────────── */
.ke-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}

.ke-hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ke-navy);
  transition: transform 0.3s, opacity 0.3s, background 0.3s;
}

.ke-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ke-hamburger.is-open span:nth-child(2) { opacity: 0; }
.ke-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Buttons ─────────────────────────────────────────────────── */
.ke-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.8em 1.75em;
  border-radius: var(--ke-radius);
  font-family: var(--ke-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: all 0.25s var(--ke-ease);
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

.ke-btn--gold {
  background: var(--ke-gold);
  color: var(--ke-navy);
}
.ke-btn--gold:hover {
  background: var(--ke-gold-light);
  color: var(--ke-navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201,169,110,0.35);
}

.ke-btn--ghost {
  background: transparent;
  color: var(--ke-navy);
  border: 1px solid rgba(26, 35, 64, 0.2);
}
.ke-btn--ghost:hover {
  color: var(--ke-navy);
  border-color: var(--ke-navy);
  background: rgba(26, 35, 64, 0.03);
}

.ke-btn--outline {
  background: transparent;
  color: var(--ke-gold);
  border: 1px solid var(--ke-gold);
}
.ke-btn--outline:hover {
  background: var(--ke-gold);
  color: var(--ke-navy);
}

.ke-btn--dark {
  background: var(--ke-navy);
  color: var(--ke-white);
}
.ke-btn--dark:hover {
  background: var(--ke-navy-light);
}

/* Primary button — used across booking widgets. Navy fill with a subtle
   border-ring so the button reads as a defined shape, gold-shadow on hover. */
.ke-btn--primary {
  background: var(--ke-navy);
  color: #fff;
  border: 2px solid var(--ke-navy);
  font-weight: 600;
  letter-spacing: .04em;
}
.ke-btn--primary:hover:not(:disabled) {
  background: #1a2d4f;
  border-color: var(--ke-gold);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(13, 27, 42, 0.22);
}
.ke-btn--primary:disabled {
  background: #cbd5e0;
  border-color: #cbd5e0;
  color: #718096;
  cursor: not-allowed;
}

.ke-btn--sm { padding: 0.55em 1.25em; font-size: 0.8125rem; }
.ke-btn--lg { padding: 1em 2.25em; font-size: 1rem; }
.ke-btn--full { width: 100%; }

.ke-btn:disabled, .ke-btn--loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Badges ──────────────────────────────────────────────────── */
.ke-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.7em;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.badge--green   { background: #d1fae5; color: #065f46; }
.badge--teal    { background: #ccfbf1; color: #0f766e; }
.badge--yellow  { background: #fef9c3; color: #854d0e; }
.badge--orange  { background: #fed7aa; color: #9a3412; }
.badge--red     { background: #fee2e2; color: #991b1b; }
.badge--grey    { background: #f3f4f6; color: #6b7280; }

/* ── Cards ───────────────────────────────────────────────────── */
.ke-card {
  background: var(--ke-white);
  border: 1px solid var(--ke-border);
  border-radius: var(--ke-radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ke-ease), box-shadow 0.3s var(--ke-ease), border-color 0.3s;
}

.ke-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(11, 22, 40, 0.12);
  border-color: var(--ke-border-mid);
}

.ke-card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ke-card__body {
  padding: var(--ke-space-lg);
}

/* ── Section headings ────────────────────────────────────────── */
.ke-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--ke-space-2xl);
}

.ke-section-head .ke-label { margin-bottom: var(--ke-space-sm); display: block; }
.ke-section-head h2 { margin-bottom: var(--ke-space-md); }
.ke-section-head p { color: var(--ke-text-mid); }

/* ── Auth Modal ──────────────────────────────────────────────── */
.ke-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 22, 40, 0.7);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ke-space-md);
  animation: ke-fade-in 0.2s var(--ke-ease);
}

.ke-auth-modal {
  background: var(--ke-white);
  border-radius: var(--ke-radius-lg);
  padding: var(--ke-space-xl);
  width: 100%;
  max-width: 440px;
  position: relative;
  animation: ke-slide-up 0.3s var(--ke-ease);
}

.ke-modal-close {
  position: absolute;
  top: var(--ke-space-md);
  right: var(--ke-space-md);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ke-cream);
  color: var(--ke-text-mid);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.ke-modal-close:hover { background: var(--ke-border); }

.ke-auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--ke-border);
  margin-bottom: var(--ke-space-lg);
}

.ke-auth-tab {
  flex: 1;
  padding: var(--ke-space-sm) var(--ke-space-md);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ke-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}

.ke-auth-tab--active {
  color: var(--ke-navy);
  border-bottom-color: var(--ke-gold);
  font-weight: 500;
}

.ke-auth-panel { display: none; }
.ke-auth-panel--active { display: block; }

.ke-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75em 1.5em;
  border: 1px solid #e0e0e0;
  border-radius: var(--ke-radius);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ke-text);
  background: var(--ke-white);
  transition: background 0.2s, box-shadow 0.2s;
}
.ke-google-btn:hover { background: #f8f8f8; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.ke-auth-divider {
  text-align: center;
  margin: var(--ke-space-md) 0;
  position: relative;
  color: var(--ke-text-light);
  font-size: 0.8125rem;
}
.ke-auth-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--ke-border);
}
.ke-auth-divider span {
  position: relative;
  background: var(--ke-white);
  padding: 0 var(--ke-space-sm);
}

.ke-auth-footer-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--ke-space-sm) 0;
}

.ke-auth-error {
  padding: var(--ke-space-sm) var(--ke-space-md);
  background: #fee2e2;
  color: #991b1b;
  border-radius: var(--ke-radius);
  font-size: 0.875rem;
  margin-bottom: var(--ke-space-md);
}

/* ── Form fields ─────────────────────────────────────────────── */
.ke-field {
  margin-bottom: var(--ke-space-md);
}

.ke-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ke-text-mid);
  margin-bottom: 0.35em;
  letter-spacing: 0.02em;
}

.ke-field small {
  display: block;
  font-size: 0.75rem;
  color: var(--ke-text-muted);
  margin-top: 0.25em;
}

.ke-field input,
.ke-field select,
.ke-field textarea {
  width: 100%;
  padding: 0.75em 1em;
  border: 1px solid #e0e0e0;
  border-radius: var(--ke-radius);
  font-size: 0.9375rem;
  color: var(--ke-text);
  background: var(--ke-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

.ke-field input:focus,
.ke-field select:focus,
.ke-field textarea:focus {
  outline: none;
  border-color: var(--ke-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}

.ke-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.875rem;
  color: var(--ke-text-mid);
  cursor: pointer;
}

.ke-link {
  font-size: 0.875rem;
  color: var(--ke-gold-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ── Page content ────────────────────────────────────────────── */
.ke-page-content {
  padding: var(--ke-space-2xl) 0;
}

.ke-page-title {
  font-family: var(--ke-font-display);
  margin-bottom: var(--ke-space-xl);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes ke-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ke-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ke-spin {
  to { transform: rotate(360deg); }
}

.ke-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--ke-white);
  border-radius: 50%;
  animation: ke-spin 0.7s linear infinite;
  display: inline-block;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ke-nav { display: none; }
  .ke-hamburger { display: flex; }
  :root { --ke-header-h: 70px; }
}

@media (max-width: 768px) {
  .ke-section { padding: var(--ke-space-2xl) 0; }
}

/* ── Mobile menu ─────────────────────────────────────────────── */
.ke-nav.is-open {
  display: flex;
  position: fixed;
  top: var(--ke-header-h);
  left: 0; right: 0;
  background: var(--ke-navy);
  flex-direction: column;
  padding: var(--ke-space-lg) var(--ke-space-xl);
  border-top: 1px solid var(--ke-border);
  animation: ke-slide-up 0.25s var(--ke-ease);
}

.ke-nav.is-open .ke-nav__list {
  flex-direction: column;
  gap: var(--ke-space-md);
  align-items: flex-start;
}

.ke-nav.is-open .ke-nav__list a {
  font-size: 1.125rem;
}

/* Mobile dropdown — render inline and require a click to open. */
.ke-nav.is-open .ke-nav__item--has-children {
  width: 100%;
}
.ke-nav.is-open .ke-nav__sub {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 0 var(--ke-space-md);
  min-width: 0;
  /* Collapsed by default on mobile — open with a click. */
  display: none;
}
.ke-nav.is-open .ke-nav__item--has-children.is-open > .ke-nav__sub {
  display: block;
}
.ke-nav.is-open .ke-nav__sub::before { display: none; }
.ke-nav.is-open .ke-nav__sub a { font-size: 1rem; padding: 6px 0; }
.ke-nav.is-open .ke-nav__sub-cta { border-top: none; padding-top: 6px; }

/* ── Utility ─────────────────────────────────────────────────── */
.ke-text-center { text-align: center; }
.ke-text-gold   { color: var(--ke-gold); }
.ke-text-muted  { color: var(--ke-text-muted); }
.ke-sr-only     { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.ke-mt-xl       { margin-top: var(--ke-space-xl); }
.ke-mb-xl       { margin-bottom: var(--ke-space-xl); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 — Booking Widget & Home
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ke-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ke-navy);
}
/* Compact hero — used on archive-style pages (e.g. /experiences/) where
   the cards below are the conversion path. Half-height keeps the hero
   present without pushing all content below the fold. */
.ke-hero.ke-hero--compact {
    min-height: 460px;
}
@media ( max-width: 768px ) {
    .ke-hero.ke-hero--compact { min-height: 380px; }
}
.ke-hero__bg { position: absolute; inset: 0; }

/* Single image (no carousel) — takes full bg */
.ke-hero__bg > .ke-hero__img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: var(--ke-hero-img-opacity, .55);
}

/* Carousel slides — stacked, cross-fade via opacity */
.ke-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    pointer-events: none;
    will-change: opacity;
}
.ke-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.ke-hero__slide .ke-hero__img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: var(--ke-hero-img-opacity, .55);
}

/* Reduced motion — disable cross-fade, show first slide only */
@media (prefers-reduced-motion: reduce) {
    .ke-hero__slide { transition: none; }
}

.ke-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,27,42,.9) 0%, rgba(13,27,42,.5) 100%);
    opacity: var(--ke-hero-overlay-opacity, .6);
}
.ke-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 2rem 4rem;
}

/* Two-column hero: text left, booking widget right (sidekick) */
.ke-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}
.ke-hero__text { min-width: 0; }
.ke-hero__aside { min-width: 0; width: 100%; max-width: 420px; justify-self: end; }

/* Single-column hero — used on pages with no booking widget (e.g. /experiences/).
   Keeps the same .ke-hero__grid wrapper but lets the text take the full width
   instead of leaving a dead 1fr column where the widget would have lived.
   Also widens the subtitle (default 520px is sized for the narrow text column
   in the 2-up layout — too cramped when the text gets the whole width). */
.ke-hero.ke-hero--text-only .ke-hero__grid {
    grid-template-columns: 1fr;
}
.ke-hero.ke-hero--text-only .ke-hero__subtitle {
    max-width: 720px;
}

@media (max-width: 960px) {
    .ke-hero__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .ke-hero__aside { justify-self: stretch; max-width: 560px; margin: 0 auto; }
}

/* Caption texts fade with the slide change (JS toggles .is-fading) */
.ke-hero__eyebrow, .ke-hero__content h1, .ke-hero__subtitle {
    transition: opacity .5s ease;
}
.ke-hero.is-fading .ke-hero__eyebrow,
.ke-hero.is-fading .ke-hero__content h1,
.ke-hero.is-fading .ke-hero__subtitle {
    opacity: 0;
}

.ke-hero__eyebrow { color: var(--ke-gold); font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
.ke-hero__content h1 { color: #fff; font-size: clamp(2.4rem,5vw,4.2rem); margin-bottom: 1.25rem; line-height: 1.08; }
.ke-hero__content h1 em { color: var(--ke-gold); font-style: italic; }
.ke-hero__subtitle { color: rgba(255,255,255,.85); font-size: 1.05rem; max-width: 520px; margin-bottom: 0; line-height: 1.65; }

/* ── Booking widget — COMPACT variant when used as hero sidekick ─────────── */
.ke-hero__aside .ke-booking-widget {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.ke-hero__aside .ke-booking-widget__tabs {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ke-hero__aside .ke-bw-tab {
    padding: .85rem .5rem;
    font-size: .78rem;
    gap: .35rem;
}
.ke-hero__aside .ke-bw-tab svg { width: 16px; height: 16px; }

.ke-hero__aside .ke-bw-panel {
    padding: 1.25rem;
    /* All tabs share the same minimum height, matching the tallest (Car Rental)
       so the widget doesn't change height when the user switches tabs. */
    min-height: 420px;
    box-sizing: border-box;
}
.ke-hero__aside .ke-bw-form { display: flex; flex-direction: column; height: 100%; min-height: inherit; }
.ke-hero__aside .ke-bw-form .ke-bw-fields { flex: 1; }
/* Push the submit button to the bottom of the panel so all tabs end at
   the same visual baseline. */
.ke-hero__aside .ke-bw-field--btn { margin-top: auto; }

/* Stack all fields vertically in the compact variant */
.ke-hero__aside .ke-bw-fields {
    flex-direction: column;
    gap: .75rem;
    align-items: stretch;
}
.ke-hero__aside .ke-bw-field,
.ke-hero__aside .ke-bw-field--wide,
.ke-hero__aside .ke-bw-field--time,
.ke-hero__aside .ke-bw-field--btn {
    flex: none;
    min-width: 0;
    width: 100%;
}

/* Date + time side by side for space efficiency (desktop-only rows) */
.ke-hero__aside .ke-bw-row-date {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: .5rem;
}
.ke-hero__aside .ke-bw-field label { font-size: .7rem; }
.ke-hero__aside .ke-bw-select,
.ke-hero__aside .ke-bw-input { padding: .55rem .7rem; font-size: .85rem; }
.ke-hero__aside .ke-btn--lg { width: 100%; padding: .85em 1.5em; font-size: .9rem; }
.ke-hero__aside .ke-bw-diff-return { font-size: .78rem; margin-top: .5rem; }

/* ── Booking Widget ──────────────────────────────────────────────────────── */
.ke-booking-widget {
    background: rgba(255,255,255,.97);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    overflow: hidden;
    max-width: 960px;
}
.ke-booking-widget__tabs {
    display: flex;
    background: var(--ke-navy);
    border-bottom: 2px solid rgba(255,255,255,.07);
}
.ke-bw-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.55);
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.ke-bw-tab:hover { color: rgba(255,255,255,.85); }
.ke-bw-tab.active { color: #fff; border-bottom-color: var(--ke-gold); }

.ke-bw-panel { display: none; padding: 1.75rem; }
.ke-bw-panel.active { display: block; }

.ke-bw-form {}
.ke-bw-fields {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.ke-bw-field { display: flex; flex-direction: column; gap: .4rem; flex: 1; min-width: 140px; }
.ke-bw-field--wide { flex: 2; min-width: 200px; }
.ke-bw-field--time { flex: 0 0 90px; min-width: 80px; }
.ke-bw-field--btn { flex: 0 0 auto; }

/* Row that groups a date + time field so they stay on the same line.
   In the hero sidekick, .ke-hero__aside overrides this into a grid. */
.ke-bw-row-date {
    display: flex;
    gap: .75rem;
    flex: 2;
    min-width: 220px;
    align-items: flex-end;
}
.ke-bw-row-date .ke-bw-field { flex: 1; }
.ke-bw-field label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #4a5568; }
.ke-bw-select,
.ke-bw-input {
    width: 100%;
    padding: .65rem .85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .9rem;
    background: #fff;
    color: var(--ke-navy);
    appearance: none;
    transition: border .2s;
}
.ke-bw-select:focus,
.ke-bw-input:focus { outline: none; border-color: var(--ke-gold); }
.ke-bw-diff-return { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .82rem; color: #718096; cursor: pointer; }
.ke-bw-diff-panel { margin-top: .5rem; }

/* ── USP Strip ───────────────────────────────────────────────────────────── */
.ke-usp-strip { background: var(--ke-navy); padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.ke-usp-grid, .ke-usp-strip__grid { display: flex; gap: 0; flex-wrap: wrap; }
.ke-usp {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1.5rem;
    border-right: 1px solid rgba(255,255,255,.07);
    min-width: 220px;
}
.ke-usp:last-child { border-right: none; }
.ke-usp__icon { font-size: 1.4rem; flex-shrink: 0; }
.ke-usp__body { min-width: 0; }
/* Two markups in the wild: legacy <strong>/<span> on homepage and the
   newer __title/__subtitle classes on car-rental landing. Style both
   identically so the strip is readable regardless of which template
   rendered it. */
.ke-usp strong,
.ke-usp__title { display: block; color: #fff; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.ke-usp span,
.ke-usp__subtitle { display: block; color: rgba(255,255,255,.65); font-size: .8rem; line-height: 1.4; margin-top: .15rem; }

/* ── Services grid ───────────────────────────────────────────────────────── */
.ke-services-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1.5rem; }
.ke-service-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0,0,0,.05);
    border: 1px solid #edf2f7;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.ke-service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
.ke-service-card__icon { font-size: 2.25rem; margin-bottom: 1rem; display: block; }
.ke-service-card h3 { color: var(--ke-navy); margin-bottom: .5rem; font-size: 1.2rem; }
.ke-service-card p { color: #718096; font-size: .9rem; line-height: 1.6; margin-bottom: 1.25rem; }
.ke-service-card__link { color: var(--ke-gold); font-weight: 600; font-size: .88rem; }

/* ── Featured experiences carousel (homepage) ──────────────────────────────────── */
/* ── Intro story section ──────────────────────────────────────────────── */
.ke-intro-story {
    padding: 5rem 0;
    background: var(--ke-cream, #f6f3ed);
}
.ke-intro-story__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}
@media (max-width: 900px) {
    .ke-intro-story__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.ke-intro-story__text h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    color: var(--ke-navy);
    line-height: 1.15;
    margin: .75rem 0 1.25rem;
}
.ke-intro-story__lead {
    font-size: 1.05rem;
    color: #2d3748;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.ke-intro-story__body {
    font-size: .98rem;
    color: #4a5568;
    line-height: 1.75;
    margin-bottom: 1.75rem;
}
.ke-intro-story__cta { margin-top: 1rem; }

.ke-intro-story__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.ke-intro-stat {
    background: #fff;
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(26, 35, 64, 0.05);
    border: 1px solid rgba(26, 35, 64, 0.05);
}
.ke-intro-stat__value {
    font-family: var(--ke-font-display);
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 600;
    color: var(--ke-navy);
    line-height: 1;
    margin-bottom: .4rem;
}
.ke-intro-stat__label {
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #718096;
    font-weight: 500;
}

@media (max-width: 480px) {
    .ke-intro-story { padding: 3.5rem 0; }
    .ke-intro-story__stats { gap: .75rem; }
    .ke-intro-stat { padding: 1.25rem 1rem; }
}

.ke-featured-tours { padding: 5rem 0; background: #fff; }
.ke-section-intro { color: #718096; font-size: 1rem; max-width: 560px; margin: .75rem auto 0; line-height: 1.6; }

.ke-tours-carousel {
    position: relative;
    margin-top: 3rem;
}

.ke-tours-carousel__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .5rem .25rem 1.5rem;
    /* Hide scrollbar but keep scrollability */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ke-tours-carousel__track::-webkit-scrollbar { display: none; }

.ke-tour-card {
    flex: 0 0 320px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid #edf2f7;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    transition: transform .22s ease, box-shadow .22s ease;
    display: flex;
    flex-direction: column;
}
.ke-tour-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,.12);
}

.ke-tour-card__image {
    position: relative;
    aspect-ratio: 4/3;
    background: #edf2f7;
    overflow: hidden;
}
.ke-tour-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.ke-tour-card:hover .ke-tour-card__image img { transform: scale(1.05); }
.ke-tour-card__placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 3rem; color: rgba(255,255,255,.6);
    background: linear-gradient(135deg, var(--ke-navy), #2d3b5e);
}
.ke-tour-card__badge {
    position: absolute; top: 12px; left: 12px;
    background: rgba(26,35,64,.92);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .08em;
    backdrop-filter: blur(4px);
}

.ke-tour-card__body {
    padding: 1.25rem 1.25rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ke-tour-card__body h3 {
    color: var(--ke-navy);
    font-size: 1.15rem;
    margin: 0 0 .5rem;
    font-weight: 500;
    line-height: 1.3;
}
.ke-tour-card__body p {
    color: #718096;
    font-size: .88rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    flex: 1;
}
.ke-tour-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: .75rem;
    border-top: 1px solid #edf2f7;
}
.ke-tour-card__price {
    color: var(--ke-navy);
    font-weight: 600;
    font-size: 1.05rem;
}
.ke-tour-card__price span {
    font-size: .75rem;
    color: #a0aec0;
    font-weight: 400;
    margin-right: .25rem;
}
.ke-tour-card__cta {
    color: var(--ke-gold);
    font-weight: 600;
    font-size: .85rem;
}

/* Nav buttons */
.ke-tours-carousel__nav {
    position: absolute;
    top: calc(50% - 1rem);
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: var(--ke-navy);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transition: all .18s ease;
    z-index: 2;
}
.ke-tours-carousel__nav:hover {
    background: var(--ke-navy);
    color: #fff;
    border-color: var(--ke-navy);
}
.ke-tours-carousel__nav:disabled {
    opacity: .4;
    cursor: default;
}
.ke-tours-carousel__nav:disabled:hover {
    background: #fff;
    color: var(--ke-navy);
    border-color: #e2e8f0;
}
.ke-tours-carousel__nav--prev { left: -16px; }
.ke-tours-carousel__nav--next { right: -16px; }

@media (max-width: 700px) {
    .ke-featured-tours { padding: 3.5rem 0; }
    .ke-tour-card { flex: 0 0 80vw; max-width: 320px; }
    .ke-tours-carousel__nav { display: none; }
    .ke-tours-carousel__track { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Testimonials ──────────────────────────────────────────────────────── */
.ke-testimonials {
    padding: 5rem 0;
    background: var(--ke-cream, #f2ede4);
}

.ke-testi-carousel {
    position: relative;
    margin-top: 3rem;
}
.ke-testi-carousel__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .5rem .25rem 1.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ke-testi-carousel__track::-webkit-scrollbar { display: none; }

/* Card width: three visible on desktop (~360px each with 1.5rem gap in a ~1200px container) */
.ke-testi-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    min-width: 300px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 14px;
    padding: 2rem 1.75rem 1.75rem;
    border: 1px solid rgba(26, 35, 64, 0.05);
    box-shadow: 0 2px 14px rgba(26, 35, 64, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
}
/* Subtle large quote mark in the corner — editorial touch */
.ke-testi-card::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a961' opacity='0.2'><path d='M10 7H5v7h5V7zm0 0c0 5-3 9-7 9v-2c3 0 5-3 5-7zM19 7h-5v7h5V7zm0 0c0 5-3 9-7 9v-2c3 0 5-3 5-7z'/></svg>") center/contain no-repeat;
    pointer-events: none;
}

.ke-testi-card__stars {
    color: #eab308;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}
.ke-testi-card__stars-off {
    color: #e2e8f0;
}

.ke-testi-card__quote {
    margin: 0 0 1.5rem;
    padding: 0;
    font-size: .98rem;
    line-height: 1.7;
    color: #2d3748;
    font-style: normal;
    flex: 1;
}

.ke-testi-card__meta {
    border-top: 1px solid #edf2f7;
    padding-top: 1rem;
    font-size: .85rem;
    line-height: 1.5;
}
.ke-testi-card__author {
    display: block;
    font-weight: 600;
    color: var(--ke-navy);
    font-style: normal;
    margin-bottom: .15rem;
}
.ke-testi-card__country {
    display: inline;
    color: #718096;
    font-size: .82rem;
}
.ke-testi-card__context {
    display: block;
    margin-top: .4rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ke-gold, #c9a961);
    font-weight: 500;
}

/* Nav buttons — reuse same styling as experiences carousel */
.ke-testi-carousel__nav {
    position: absolute;
    top: calc(50% - 1rem);
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: var(--ke-navy);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transition: all .18s ease;
    z-index: 2;
}
.ke-testi-carousel__nav:hover {
    background: var(--ke-navy);
    color: #fff;
    border-color: var(--ke-navy);
}
.ke-testi-carousel__nav:disabled {
    opacity: .4;
    cursor: default;
}
.ke-testi-carousel__nav:disabled:hover {
    background: #fff;
    color: var(--ke-navy);
    border-color: #e2e8f0;
}
.ke-testi-carousel__nav--prev { left: -16px; }
.ke-testi-carousel__nav--next { right: -16px; }

@media (max-width: 900px) {
    .ke-testi-card { flex: 0 0 calc((100% - 1.5rem) / 2); }
}
@media (max-width: 640px) {
    .ke-testimonials { padding: 3.5rem 0; }
    .ke-testi-card { flex: 0 0 85vw; max-width: 360px; padding: 1.5rem 1.25rem 1.25rem; }
    .ke-testi-carousel__nav { display: none; }
    .ke-testi-carousel__track { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Search bar (fleet page) ─────────────────────────────────────────────── */
.ke-search-bar-wrap { background: var(--ke-navy); padding: 1.25rem 0; position: sticky; top: 72px; z-index: 50; box-shadow: 0 4px 20px rgba(0,0,0,.25); }
.ke-search-bar { display: flex; }
.ke-search-bar__fields { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; width: 100%; }
.ke-search-bar__group { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 120px; }
.ke-search-bar__group--sm { flex: 0 0 90px; }
.ke-search-bar__group label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); }

/* ── Fleet ───────────────────────────────────────────────────────────────── */
.ke-fleet-wrap { padding: 2.5rem 0 4rem; }
.ke-fleet-prompt { text-align: center; padding: 6rem 2rem; }
.ke-fleet-prompt__icon { font-size: 3rem; margin-bottom: 1.25rem; }
.ke-fleet-prompt h2 { color: var(--ke-navy); margin-bottom: .5rem; }
.ke-fleet-prompt p { color: #718096; }

.ke-fleet-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.75rem; }
.ke-fleet-header__title { font-size: 1.6rem; color: var(--ke-navy); margin: 0 0 .35rem; }
.ke-fleet-header__meta { color: #718096; font-size: .9rem; }

.ke-fleet-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 1.5rem; }
.ke-fleet-empty { grid-column: 1/-1; text-align: center; padding: 5rem 2rem; }
.ke-fleet-empty__icon { font-size: 2.5rem; margin-bottom: 1rem; }
.ke-fleet-empty h3 { color: var(--ke-navy); margin-bottom: .5rem; }

/* ── Vehicle Card ────────────────────────────────────────────────────────── */
.ke-vehicle-card {
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    position: relative;
}
.ke-vehicle-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,.1); }
.ke-upgrade-badge { position: absolute; top: .75rem; left: .75rem; background: var(--ke-gold); color: var(--ke-navy); font-size: .72rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; z-index: 2; }
.ke-vehicle-card__image { position: relative; aspect-ratio: 3/2; overflow: hidden; background: #f7fafc; }
.ke-vehicle-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ke-vehicle-card:hover .ke-vehicle-card__image img { transform: scale(1.04); }
.ke-vehicle-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; color: #a0aec0; }
.ke-vehicle-card__cat { position: absolute; bottom: .6rem; right: .6rem; font-size: .7rem; }

.ke-vehicle-card__body { padding: 1.25rem; }
.ke-vehicle-card__name { font-size: 1.05rem; font-weight: 700; color: var(--ke-navy); margin: 0 0 .15rem; }
.ke-vehicle-card__similar { font-size: .78rem; color: #a0aec0; margin: 0 0 .75rem; }

.ke-vehicle-card__specs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.ke-vehicle-spec { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: #4a5568; background: #f7fafc; border: 1px solid #edf2f7; border-radius: 4px; padding: .2rem .5rem; }

.ke-vehicle-card__pricing { display: flex; justify-content: space-between; align-items: center; padding-top: .85rem; border-top: 1px solid #edf2f7; }
.ke-price-per-day { font-size: .82rem; color: #718096; margin-bottom: .15rem; }
.ke-price-per-day strong { font-size: 1.15rem; color: var(--ke-navy); }
.ke-price-total { font-size: 1.25rem; font-weight: 700; color: var(--ke-navy); }
.ke-price-label { font-size: .75rem; font-weight: 400; color: #a0aec0; margin-left: .3rem; }
.ke-price-no-rate { font-size: .85rem; color: #a0aec0; }

/* ── Booking pages layout ────────────────────────────────────────────────── */
.ke-page { min-height: 80vh; }
.ke-booking-page { padding-top: 2rem; padding-bottom: 5rem; background: #f7fafc; }
.ke-page-title { font-size: 1.75rem; color: var(--ke-navy); margin: 0 0 .4rem; }
.ke-page-subtitle { color: #718096; margin-bottom: 2rem; }

.ke-checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; }
.ke-checkout-main { background: #fff; border-radius: 14px; border: 1px solid #e2e8f0; padding: 2rem; }
.ke-checkout-sidebar { position: sticky; top: 110px; }

/* Steps indicator */
.ke-steps { display: flex; align-items: center; margin-bottom: 2.5rem; overflow-x: auto; padding-bottom: .25rem; }
.ke-step { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex-shrink: 0; }
.ke-step__indicator { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; background: #edf2f7; color: #a0aec0; border: 2px solid #edf2f7; }
.ke-step.active .ke-step__indicator { background: var(--ke-navy); color: #fff; border-color: var(--ke-navy); }
.ke-step.completed .ke-step__indicator { background: #48bb78; color: #fff; border-color: #48bb78; }
.ke-step__label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #a0aec0; white-space: nowrap; }
.ke-step.active .ke-step__label { color: var(--ke-navy); }
.ke-step.completed .ke-step__label { color: #48bb78; }
.ke-step__line { flex: 1; height: 2px; background: #e2e8f0; margin: 0 .5rem; min-width: 20px; align-self: flex-start; margin-top: 17px; }
.ke-step__line--done { background: #48bb78; }

/* Form styles */
.ke-form-section { margin-bottom: 2rem; }
.ke-form-section h2 { font-size: 1.1rem; color: var(--ke-navy); margin-bottom: 1.25rem; padding-bottom: .65rem; border-bottom: 1px solid #edf2f7; }

/* Optional account-password section (booking flows) — gold left rule, tinted background to read as opt-in. */
.ke-form-section--password {
    background: #faf7f1;
    border: 1px solid #e8d9b5;
    border-left: 4px solid var(--ke-gold);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 2rem;
}
.ke-pwd-intro { margin-bottom: .85rem; font-size: .95rem; color: var(--ke-navy); }
.ke-pwd-intro strong { font-weight: 700; }
.ke-pwd-note {
    margin: .35rem 0 0;
    font-size: .82rem;
    color: #6b5a35;
    line-height: 1.5;
}
.ke-pwd-note code {
    background: #f0e7d0;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .85em;
    color: var(--ke-navy);
}
.ke-form-row { display: flex; gap: 1rem; }
.ke-form-row--2 > * { flex: 1; }
.ke-form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.ke-label { font-size: .82rem; font-weight: 600; color: #4a5568; }
.ke-label-opt { font-weight: 400; color: #a0aec0; }
.ke-textarea { resize: vertical; font-family: inherit; }
.ke-checkbox-field { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: #4a5568; cursor: pointer; }
.ke-checkbox-field input { flex-shrink: 0; margin-top: .15rem; width: 16px; height: 16px; accent-color: var(--ke-gold); }
.ke-checkbox-field a { color: var(--ke-gold); }

.ke-step-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid #edf2f7; margin-top: 1rem; }

/* Order summary sidebar */
.ke-order-summary {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}
.ke-os-image { aspect-ratio: 16/9; overflow: hidden; }
.ke-os-image img { width: 100%; height: 100%; object-fit: cover; }
.ke-order-summary h3 { font-size: 1rem; color: var(--ke-navy); margin: 0; padding: 1.25rem 1.25rem .75rem; border-bottom: 1px solid #edf2f7; }
.ke-os-section { padding: .85rem 1.25rem; border-bottom: 1px solid #edf2f7; }
.ke-os-row { display: flex; justify-content: space-between; font-size: .84rem; margin-bottom: .3rem; }
.ke-os-label { color: #718096; }
.ke-os-value { color: var(--ke-navy); font-weight: 500; text-align: right; max-width: 60%; }
.ke-os-upgrade { font-size: .78rem; color: var(--ke-gold); font-weight: 600; margin-top: .35rem; }
.ke-os-lines { padding: .75rem 1.25rem; border-bottom: 1px solid #edf2f7; }
.ke-os-line { display: flex; justify-content: space-between; font-size: .84rem; color: #4a5568; padding: .25rem 0; }
.ke-os-total { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; font-weight: 700; font-size: 1.1rem; color: var(--ke-navy); }
.ke-os-total-val { color: var(--ke-gold); }
.ke-os-deposit { padding: .6rem 1.25rem 1rem; font-size: .8rem; color: #718096; border-top: 1px solid #edf2f7; }
.ke-os-deposit strong { color: var(--ke-navy); }

/* Insurance cards */
.ke-insurance-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 2rem; }
.ke-insurance-card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    position: relative;
    background: #fff;
}
.ke-insurance-card:hover { border-color: var(--ke-gold); }
.ke-insurance-card.selected { border-color: var(--ke-gold); box-shadow: 0 0 0 3px rgba(201,169,110,.15); }
.ke-insurance-card__popular { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--ke-gold); color: var(--ke-navy); font-size: .68rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px; white-space: nowrap; }
.ke-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #e2e8f0; margin-bottom: 1rem; position: relative; transition: all .2s; }
.ke-insurance-card.selected .ke-check { background: var(--ke-gold); border-color: var(--ke-gold); }
.ke-insurance-card.selected .ke-check::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--ke-navy); font-weight: 700; }
.ke-insurance-card__name { font-size: 1.1rem; font-weight: 700; color: var(--ke-navy); margin-bottom: .35rem; }
.ke-insurance-card__excess { font-size: 2rem; font-weight: 700; color: #e53e3e; }
.ke-insurance-card__excess--zero { color: #48bb78; }
.ke-insurance-card__excess-label { font-size: .75rem; color: #a0aec0; margin-bottom: 1rem; }
.ke-insurance-features { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.25rem; font-size: .82rem; }
.ke-insurance-feature .yes { color: #48bb78; }
.ke-insurance-feature .no { color: #fc8181; }
.ke-insurance-card__price { font-weight: 600; color: var(--ke-navy); font-size: .9rem; }
.ke-insurance-card__total { font-size: .8rem; color: #718096; margin-top: .2rem; }

/* Add-ons */
.ke-addons-list { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 2rem; }
.ke-addon-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    transition: border-color .2s, background .2s;
}
.ke-addon-item.selected { border-color: var(--ke-gold); background: #fffbf2; }
.ke-addon-item__icon { font-size: 1.4rem; flex-shrink: 0; width: 36px; text-align: center; }
.ke-addon-item__info { flex: 1; }
.ke-addon-item__name { font-weight: 600; color: var(--ke-navy); font-size: .9rem; }
.ke-addon-item__desc { font-size: .78rem; color: #718096; margin-top: .15rem; }
.ke-addon-item__price { font-weight: 600; color: var(--ke-navy); font-size: .9rem; white-space: nowrap; }
.ke-addon-item__price small { color: #a0aec0; font-weight: 400; }
.ke-price-free { color: #48bb78; }
.ke-addon-item__controls { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.ke-qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #e2e8f0; background: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ke-navy); transition: all .15s; }
.ke-qty-btn:hover { border-color: var(--ke-gold); background: var(--ke-gold); color: var(--ke-navy); }
.ke-qty-display { font-weight: 700; color: var(--ke-navy); min-width: 20px; text-align: center; }
.ke-addon-toggle { padding: .4rem .9rem; border-radius: 6px; border: 1.5px solid #e2e8f0; background: #fff; font-size: .82rem; font-weight: 600; cursor: pointer; color: #4a5568; transition: all .15s; }
.ke-addon-toggle--active { background: var(--ke-gold); border-color: var(--ke-gold); color: var(--ke-navy); }

/* Payment methods */
.ke-payment-methods { display: flex; flex-direction: column; gap: .65rem; }
.ke-payment-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s;
}
.ke-payment-method input[type="radio"] { display: none; }
.ke-payment-method.selected { border-color: var(--ke-gold); background: #fffbf2; }
.ke-payment-method__content { flex: 1; }
.ke-payment-method__label { font-weight: 600; color: var(--ke-navy); font-size: .9rem; margin-bottom: .2rem; }
.ke-payment-method__desc { font-size: .8rem; color: #718096; }
.ke-payment-method__badge { background: #48bb78; color: #fff; font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; }
.ke-login-prompt { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem; background: #ebf8ff; border-radius: 8px; border: 1px solid #bee3f8; }
.ke-login-prompt p { margin: 0; font-size: .85rem; color: #2c5282; }
.ke-login-prompt a { color: var(--ke-gold); font-weight: 600; }
.ke-login-prompt strong { display: block; color: #2a4365; margin-bottom: .2rem; }

/* Confirmation page */
.ke-page--confirmation { background: #f7fafc; padding: 4rem 0; min-height: 80vh; display: flex; align-items: center; }
.ke-confirmation-card { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; padding: 3rem 2.5rem; text-align: center; box-shadow: 0 4px 30px rgba(0,0,0,.06); }
.ke-conf-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.5rem; }
.ke-conf-icon--success { background: #f0fff4; color: #48bb78; border: 2px solid #48bb78; }
.ke-conf-icon--pending { background: #fffaf0; color: #ed8936; border: 2px solid #ed8936; }
.ke-confirmation-card h1 { color: var(--ke-navy); margin-bottom: .5rem; }
.ke-confirmation-card__subtitle { color: #718096; margin-bottom: 1.5rem; line-height: 1.6; }
.ke-conf-ref { display: inline-block; background: var(--ke-navy); color: #fff; padding: .5rem 1.25rem; border-radius: 999px; font-size: .85rem; margin-bottom: 2rem; }
.ke-conf-details { text-align: left; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; margin-bottom: 1.5rem; }
.ke-conf-row { display: flex; justify-content: space-between; padding: .75rem 1.25rem; border-bottom: 1px solid #edf2f7; font-size: .88rem; }
.ke-conf-row:last-child { border-bottom: none; }
.ke-conf-row span:first-child { color: #718096; }
.ke-conf-row span:last-child { font-weight: 500; color: var(--ke-navy); }
.ke-conf-row--total { font-weight: 700; font-size: 1rem; }
.ke-conf-notes { font-size: .85rem; color: #718096; background: #f7fafc; border-radius: 8px; padding: .85rem 1rem; margin-bottom: 1.5rem; text-align: left; }
.ke-conf-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ke-conf-contact { font-size: .82rem; color: #a0aec0; }
.ke-conf-contact a { color: var(--ke-gold); }

/* Dashboard */
.ke-dashboard { min-height: 100vh; background: #f7fafc; }
.ke-dashboard__layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.ke-dashboard__sidebar {
    background: var(--ke-navy);
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.ke-dash-user { text-align: center; padding: 1.5rem 0 2rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1.5rem; }
.ke-dash-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--ke-gold); color: var(--ke-navy); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; margin: 0 auto .75rem; }
.ke-dash-name { color: #fff; font-weight: 600; font-size: .95rem; }
.ke-dash-email { color: rgba(255,255,255,.45); font-size: .78rem; margin-top: .25rem; }
.ke-dash-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.ke-dash-nav li { }
.ke-dash-nav a { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: 8px; color: rgba(255,255,255,.65); font-size: .88rem; font-weight: 500; text-decoration: none; transition: all .15s; }
.ke-dash-nav a:hover,
.ke-dash-nav a.active { background: rgba(255,255,255,.08); color: #fff; }
.ke-dash-nav a.active { background: rgba(201,169,110,.15); color: var(--ke-gold); }

.ke-dashboard__main { padding: 2.5rem 2rem; overflow-y: auto; }
.ke-dash-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.ke-dash-header h1 { font-size: 1.6rem; color: var(--ke-navy); margin: 0 0 .25rem; }
.ke-dash-header p { color: #718096; margin: 0; font-size: .9rem; }
.ke-back-link { display: inline-block; color: var(--ke-gold); font-size: .82rem; font-weight: 600; text-decoration: none; margin-bottom: .5rem; }
.ke-back-link:hover { text-decoration: underline; }

.ke-dash-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 2rem; }
.ke-dash-stat { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 1.25rem; text-align: center; }
.ke-dash-stat__number { font-size: 2.5rem; font-weight: 700; color: var(--ke-navy); line-height: 1; margin-bottom: .4rem; }
.ke-dash-stat__label { font-size: .82rem; color: #718096; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

.ke-bookings-panel { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; }
.ke-bookings-panel__header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid #edf2f7; }
.ke-bookings-panel__header h2 { margin: 0; font-size: 1rem; color: var(--ke-navy); }
.ke-bookings-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ke-bookings-table th { padding: .75rem 1.25rem; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #a0aec0; border-bottom: 1px solid #edf2f7; white-space: nowrap; }
.ke-bookings-table td { padding: .9rem 1.25rem; border-bottom: 1px solid #f7fafc; color: #4a5568; vertical-align: middle; }
.ke-bookings-table tr:last-child td { border-bottom: none; }
.ke-bookings-table tr:hover td { background: #fafbfc; }
.ke-booking-ref { font-family: monospace; font-size: .82rem; color: var(--ke-navy); font-weight: 600; }
.ke-booking-type { display: flex; align-items: center; gap: .4rem; }

.ke-booking-detail { display: grid; gap: 1.25rem; }
.ke-booking-detail__section { background: #f7fafc; border-radius: 10px; padding: 1.25rem; border: 1px solid #edf2f7; }
.ke-booking-detail__section h3 { font-size: .9rem; color: var(--ke-navy); margin: 0 0 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ke-detail-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: .75rem; }
.ke-detail-item { }
.ke-detail-item__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #a0aec0; font-weight: 600; margin-bottom: .2rem; }
.ke-detail-item__value { font-size: .9rem; color: var(--ke-navy); font-weight: 500; }
.ke-booking-detail__actions { display: flex; gap: .75rem; }
.ke-summary-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid #edf2f7; font-size: .88rem; }
.ke-summary-row .label { color: #718096; }
.ke-summary-row .value { font-weight: 500; color: var(--ke-navy); }

/* Settings sub-page (Personal details + password card) */
.ke-settings-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}
.ke-settings-card__title {
    font-size: 1rem;
    color: var(--ke-navy);
    margin: 0 0 .35rem;
    font-weight: 700;
}
.ke-settings-card__intro {
    font-size: .85rem;
    color: #718096;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}
.ke-settings-form { margin-top: 1.25rem; }
.ke-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.ke-settings-grid .ke-field--full { grid-column: 1 / -1; }
.ke-settings-grid .ke-input:disabled {
    background: #f7fafc;
    color: #a0aec0;
    cursor: not-allowed;
}
.ke-field__hint {
    font-size: .75rem;
    color: #a0aec0;
    margin: .35rem 0 0;
    line-height: 1.4;
}
.ke-settings-alert {
    padding: .85rem 1.1rem;
    border-radius: 8px;
    font-size: .9rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.ke-settings-alert--success {
    background: #f0fff4;
    border: 1px solid #c6f6d5;
    color: #276749;
}
.ke-settings-alert--error {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    color: #c53030;
}
@media (max-width: 640px) {
    .ke-settings-grid { grid-template-columns: 1fr; }
}

/* Spinner */
.ke-spinner { border: 3px solid #edf2f7; border-top-color: var(--ke-gold); border-radius: 50%; animation: ke-spin 0.8s linear infinite; }
@keyframes ke-spin { to { transform: rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ke-checkout-layout { grid-template-columns: 1fr; }
    .ke-checkout-sidebar { position: static; }
    .ke-insurance-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ke-bw-fields { flex-direction: column; }
    .ke-bw-field, .ke-bw-field--wide, .ke-bw-field--time, .ke-bw-field--btn { min-width: 100%; flex: none; }
    .ke-dashboard__layout { grid-template-columns: 1fr; }
    .ke-dashboard__sidebar { position: static; height: auto; padding: 1.25rem; }
    .ke-dash-stats { grid-template-columns: repeat(3,1fr); gap: .5rem; }
    .ke-form-row { flex-direction: column; }
    .ke-fleet-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .ke-hero__content h1 { font-size: 2.2rem; }
    .ke-confirmation-card { padding: 2rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 4 — Transfers
   ═══════════════════════════════════════════════════════════════════════════ */

.ke-transfers-hero { background: var(--ke-navy); padding: 3.5rem 0 2.5rem; }
.ke-transfers-hero h1 { color: #fff; margin: 0 0 .5rem; font-size: 2.25rem; }
.ke-transfers-hero p { color: rgba(255,255,255,.6); margin: 0; font-size: 1.05rem; }

.ke-transfers-search-wrap { background: #f7fafc; border-bottom: 1px solid #e2e8f0; padding: 1.25rem 0; position: sticky; top: 72px; z-index: 40; }
.ke-transfers-search__fields { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.ke-ts-field { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 130px; }
.ke-ts-field--wide { flex: 2; }
.ke-ts-field--sm { flex: 0 0 100px; }
.ke-ts-field--btn { flex: 0 0 auto; }
.ke-ts-field label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #4a5568; }
.ke-ts-swap { display: flex; align-items: flex-end; padding-bottom: 2px; }
.ke-ts-swap button { width: 36px; height: 38px; border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: 1.1rem; cursor: pointer; transition: all .15s; color: var(--ke-navy); }
.ke-ts-swap button:hover { background: var(--ke-gold); border-color: var(--ke-gold); }

.ke-transfers-content { padding: 2.5rem 0 5rem; }
.ke-transfers-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; align-items: start; }
.ke-transfers-main {}

.ke-transfer-usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 2rem; }
.ke-transfer-usp { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .85rem 1rem; }
.ke-transfer-usp > span { font-size: 1.4rem; flex-shrink: 0; }
.ke-transfer-usp strong { display: block; font-size: .82rem; color: var(--ke-navy); font-weight: 700; }
.ke-transfer-usp span { font-size: .75rem; color: #718096; }

.ke-routes-header { margin-bottom: 1.25rem; }
.ke-routes-header h2 { font-size: 1.3rem; color: var(--ke-navy); margin: 0 0 .25rem; }
.ke-routes-subtitle { color: #718096; font-size: .88rem; margin: 0; }

.ke-routes-grid { display: flex; flex-direction: column; gap: .85rem; }

.ke-route-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 1.25rem 1.5rem; transition: border-color .2s, box-shadow .2s; }
.ke-route-card:hover { border-color: var(--ke-gold); box-shadow: 0 4px 20px rgba(0,0,0,.06); }

.ke-route-card__route { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ke-route-card__point { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; min-width: 160px; }
.ke-route-card__point span { font-size: .95rem; font-weight: 600; color: var(--ke-navy); }
.ke-route-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ke-route-dot--start { background: var(--ke-gold); }
.ke-route-dot--end { background: var(--ke-navy); }
.ke-route-card__line { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; position: relative; }
.ke-route-duration { font-size: .72rem; color: #a0aec0; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ke-route-line-bar { width: 100%; height: 2px; background: #e2e8f0; border-radius: 1px; }
.ke-route-arrow { font-size: 1rem; color: #a0aec0; }

.ke-route-card__notes { font-size: .8rem; color: #718096; margin-bottom: .85rem; padding: .5rem .75rem; background: #f7fafc; border-radius: 6px; }
.ke-route-card__footer { display: flex; justify-content: space-between; align-items: center; padding-top: .85rem; border-top: 1px solid #edf2f7; }
.ke-route-price { font-size: 1.5rem; font-weight: 700; color: var(--ke-navy); }
.ke-route-price-note { font-size: .78rem; color: #a0aec0; margin-left: .25rem; }

.ke-no-routes { background: #fffbf2; border: 1.5px solid #f6d860; border-radius: 12px; padding: 2rem; text-align: center; margin: 1rem 0; }
.ke-no-routes__icon { font-size: 2rem; margin-bottom: .75rem; }
.ke-no-routes h3 { color: var(--ke-navy); margin: 0 0 .4rem; }
.ke-no-routes p { color: #718096; font-size: .9rem; }

.ke-custom-route-section { margin-top: 2rem; padding: 1.5rem; background: #f7fafc; border-radius: 12px; border: 1px dashed #cbd5e0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ke-custom-route-header h3 { margin: 0 0 .25rem; color: var(--ke-navy); font-size: 1rem; }
.ke-custom-route-header p { margin: 0; color: #718096; font-size: .85rem; }

.ke-transfers-sidebar { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 1rem; }
.ke-info-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem 1.5rem; }
.ke-info-panel h3 { font-size: .95rem; color: var(--ke-navy); margin: 0 0 .85rem; padding-bottom: .5rem; border-bottom: 1px solid #edf2f7; font-weight: 700; }
.ke-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ke-info-list li { font-size: .83rem; color: #4a5568; line-height: 1.5; }

/* Transfer modal */
.ke-modal-overlay { position: fixed; inset: 0; background: rgba(13,27,42,.65); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(2px); }
.ke-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,.35); }
.ke-modal__close { position: sticky; top: 0; float: right; margin: 1rem 1rem 0 0; background: #f7fafc; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: .9rem; color: #718096; z-index: 2; display: flex; align-items: center; justify-content: center; }
.ke-modal__close:hover { background: #edf2f7; color: var(--ke-navy); }
.ke-modal-body { padding: 1.25rem 2rem 2rem; }
.ke-modal-body h2 { font-size: 1.4rem; color: var(--ke-navy); margin: 0 0 .4rem; }
.ke-tmodal-route { font-size: .9rem; color: #718096; margin-bottom: 1.5rem; }
.ke-tmodal-section { margin-bottom: 1.5rem; }
.ke-tmodal-section h3 { font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #a0aec0; margin: 0 0 .85rem; padding-bottom: .4rem; border-bottom: 1px solid #edf2f7; }
.ke-tmodal-summary { background: var(--ke-navy); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.ke-tmodal-summary__row { display: flex; justify-content: space-between; font-size: .88rem; color: rgba(255,255,255,.65); margin-bottom: .4rem; }
.ke-tmodal-summary__total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; color: #fff; border-top: 1px solid rgba(255,255,255,.1); padding-top: .6rem; margin-top: .25rem; }
.ke-tmodal-summary__total span:last-child { color: var(--ke-gold); }
.ke-tmodal-actions { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid #edf2f7; margin-top: 1rem; }

@media (max-width: 1024px) {
    .ke-transfers-layout { grid-template-columns: 1fr; }
    .ke-transfers-sidebar { position: static; }
    .ke-transfer-usps { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
    .ke-transfer-usps { grid-template-columns: 1fr; }
    .ke-route-card__route { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .ke-route-card__line { display: none; }
    .ke-transfers-search__fields { flex-direction: column; }
    .ke-ts-field, .ke-ts-field--wide, .ke-ts-field--sm, .ke-ts-field--btn { min-width: 100%; flex: none; }
    .ke-custom-route-section { flex-direction: column; }
    .ke-modal-body { padding: 1rem 1.25rem 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 5 — Experiences
   ═══════════════════════════════════════════════════════════════════════════ */

.ke-experiences-hero { background: var(--ke-navy); padding: 3.5rem 0 2.5rem; }
.ke-experiences-hero h1 { color: #fff; margin: 0 0 .5rem; font-size: 2.25rem; }
.ke-experiences-hero p { color: rgba(255,255,255,.6); margin: 0; font-size: 1.05rem; }

.ke-exc-filter-bar { background: #f7fafc; border-bottom: 1px solid #e2e8f0; padding: 1rem 0; position: sticky; top: 72px; z-index: 40; }
.ke-exc-filter-wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ke-exc-type-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.ke-exc-tab { padding: .4rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: #718096; background: #fff; border: 1.5px solid #e2e8f0; text-decoration: none; transition: all .15s; white-space: nowrap; }
.ke-exc-tab:hover, .ke-exc-tab.active { background: var(--ke-navy); color: #fff; border-color: var(--ke-navy); }
.ke-exc-date-filter { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.ke-exc-date-field { display: flex; flex-direction: column; gap: .25rem; }
.ke-exc-date-field label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #718096; }
.ke-input--sm { height: 36px; font-size: .88rem; padding: 0 .6rem; }

.ke-exc-container { padding: 2.5rem 0 5rem; }
.ke-exc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.ke-exc-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s; }
.ke-exc-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.09); border-color: var(--ke-gold); }

.ke-exc-card__image { position: relative; height: 200px; overflow: hidden; background: #edf2f7; }
.ke-exc-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ke-exc-card:hover .ke-exc-card__image img { transform: scale(1.04); }
.ke-exc-card__image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #cbd5e0; }
.ke-exc-card__tags { position: absolute; top: .75rem; left: .75rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.ke-exc-tag { background: rgba(13,27,42,.75); color: #fff; font-size: .7rem; font-weight: 600; padding: .2rem .55rem; border-radius: 4px; backdrop-filter: blur(4px); }

.ke-exc-card__body { padding: 1.25rem 1.25rem .75rem; flex: 1; }
.ke-exc-card__title { font-size: 1.1rem; font-weight: 700; color: var(--ke-navy); margin: 0 0 .5rem; font-family: 'Cormorant Garamond', Georgia, serif; }
.ke-exc-card__desc { font-size: .85rem; color: #718096; line-height: 1.6; margin: 0 0 .75rem; }
.ke-exc-card__highlights { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.ke-exc-card__highlights li { font-size: .8rem; color: #4a5568; }
.ke-exc-card__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.ke-exc-meta-item { font-size: .78rem; color: #a0aec0; }

.ke-exc-card__footer { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid #edf2f7; }
.ke-exc-card__price { display: flex; align-items: baseline; gap: .25rem; margin-bottom: .85rem; }
.ke-exc-price-from { font-size: .78rem; color: #a0aec0; }
.ke-exc-price { font-size: 1.6rem; font-weight: 700; color: var(--ke-navy); }
.ke-exc-price-unit { font-size: .78rem; color: #a0aec0; }

/* Slot buttons */
.ke-em-slots-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: .6rem; }
.ke-slot-btn { background: #f7fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: .75rem; text-align: center; cursor: pointer; transition: all .15s; width: 100%; }
.ke-slot-btn:hover:not(:disabled) { border-color: var(--ke-gold); background: #fffbf2; }
.ke-slot-btn.selected { border-color: var(--ke-navy); background: var(--ke-navy); color: #fff; }
.ke-slot-btn--disabled { opacity: .45; cursor: not-allowed; }
.ke-slot-time { font-size: 1.1rem; font-weight: 700; color: inherit; }
.ke-slot-dur { font-size: .72rem; color: #a0aec0; margin: .15rem 0; }
.ke-slot-btn.selected .ke-slot-dur { color: rgba(255,255,255,.6); }
.ke-slot-price { font-size: .82rem; font-weight: 600; color: var(--ke-gold); }
.ke-slot-btn.selected .ke-slot-price { color: var(--ke-gold); }
.ke-slot-avail { font-size: .72rem; color: #68d391; margin-top: .2rem; }
.ke-slot-avail--full { color: #fc8181; }
.ke-no-slots { text-align: center; padding: 1.5rem; color: #718096; font-size: .9rem; background: #f7fafc; border-radius: 8px; }
.ke-slots-loading { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #718096; padding: .75rem 0; }
.ke-spinner-sm { width: 16px; height: 16px; border: 2px solid #e2e8f0; border-top-color: var(--ke-navy); border-radius: 50%; animation: ke-spin .7s linear infinite; flex-shrink: 0; }
@keyframes ke-spin { to { transform: rotate(360deg); } }

.ke-empty-state { text-align: center; padding: 5rem 2rem; }
.ke-empty-state__icon { font-size: 3rem; margin-bottom: 1rem; }

@media (max-width: 1024px) { .ke-exc-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) {
    .ke-exc-grid { grid-template-columns: 1fr; }
    .ke-exc-filter-wrap { flex-direction: column; align-items: flex-start; }
    .ke-exc-date-filter { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 5 — Experiences
   ═══════════════════════════════════════════════════════════════════════════ */

.ke-experiences-hero { background: var(--ke-navy); padding: 3.5rem 0 2.5rem; }
.ke-experiences-hero h1 { color: #fff; margin: 0 0 .5rem; font-size: 2.25rem; }
.ke-experiences-hero p  { color: rgba(255,255,255,.6); margin: 0; }

.ke-experiences-filter-wrap { background: #f7fafc; border-bottom: 1px solid #e2e8f0; padding: 1.1rem 0; position: sticky; top: 72px; z-index: 40; }
.ke-experiences-filter { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.ke-ef-field { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 130px; }
.ke-ef-field--sm { flex: 0 0 110px; }
.ke-ef-field label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #4a5568; }

/* KEdp date trigger inside the /experiences/ filter bar — match ke-dd height
   exactly so all four fields (date + adults + children + experience style) sit
   on the same baseline. ke-dd uses 10px 14px padding with 0.95rem font;
   we mirror those values here.

   IMPORTANT: KEdp's base CSS sets `.kedp-trigger { display: inline-flex }`
   which makes the element shrink to fit its text content — fighting the
   `width: 100%` from the parent column. We force `display: flex` (block-
   level flex) here so the trigger fills its column, just like ke-dd's
   `.ke-dd__trigger` does. The `!important` is needed because KEdp's CSS
   loads later (printed via wp_footer) than main.css.

   HEIGHT PARITY: ke-dd renders at ~48px tall (10px+14px padding plus
   .95rem font with default line-height ≈ 22px text + 20px padding = 48px,
   plus 1.5px borders = 51px outer). KEdp's text node behaves slightly
   differently — different line-height inheritance — so the same padding
   doesn't always produce the same outer height. Using `min-height: 48px`
   plus `align-items: center` is a robust override: the trigger can never
   collapse below 48px regardless of font/line-height/padding inheritance,
   and the icon+text stay vertically centered. */
.ke-ef-date-trigger { display: block; width: 100%; cursor: pointer; }
#ke-ef-date-trigger.kedp-trigger {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px !important;
    padding: 10px 14px !important;
    border: 1.5px solid #e8e3dc !important;
    border-radius: 10px !important;
    font-size: .95rem !important;
    line-height: 1.4 !important;
    background: #fff !important;
    color: var(--ke-navy, #0d1b2a) !important;
    font-weight: 400 !important;
}
#ke-ef-date-trigger.kedp-trigger:hover,
#ke-ef-date-trigger.kedp-trigger.is-set { border-color: var(--ke-gold, #b8986f) !important; }

/* ke-dd dropdowns inside the filter bar — already styled by main.css's
   .ke-dd rules, no overrides needed. Just ensure they fill the field. */
.ke-ef-field .ke-dd { width: 100%; }

/* Vertical spacing only — keep `.ke-container`'s horizontal padding intact
   so the cards lijn up with the filter bar above (which uses the same
   .ke-container). Setting `padding: 2.5rem 0 5rem` here would override
   the container's left/right padding to 0, causing cards to start 40px
   further left than the filter fields. */
.ke-experiences-content { padding-top: 2.5rem; padding-bottom: 5rem; }

.ke-experiences-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.ke-experiences-loading { display: flex; flex-direction: column; align-items: center; padding: 2rem; }

.ke-experience-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px; overflow: hidden; transition: border-color .2s, box-shadow .2s; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.ke-experience-card:hover { border-color: var(--ke-gold); box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.ke-experience-card:hover .ke-exc-card__title { color: var(--ke-gold); }
.ke-experience-card:focus-visible { outline: 2px solid var(--ke-gold); outline-offset: 2px; }

.ke-exc-card__image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--ke-navy); flex-shrink: 0; }
.ke-exc-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ke-experience-card:hover .ke-exc-card__image img { transform: scale(1.04); }
.ke-exc-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; color: rgba(255,255,255,.3); }
.ke-exc-card__type-badge {
    position: absolute; top: 12px; left: 12px;
    background: rgba(26,35,64,.92);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .08em;
    backdrop-filter: blur(4px);
}

.ke-exc-card__body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.ke-exc-card__title { font-size: 1.1rem; color: var(--ke-navy); font-weight: 700; margin: 0 0 .5rem; }
.ke-exc-card__meta { display: flex; gap: .75rem; font-size: .8rem; color: #718096; margin-bottom: .6rem; flex-wrap: wrap; }
.ke-exc-card__desc { font-size: .85rem; color: #4a5568; line-height: 1.6; margin: 0 0 .85rem; flex: 1; }

.ke-exc-slots { margin-bottom: .75rem; display: flex; flex-direction: column; gap: .3rem; }
.ke-exc-slot-pill { display: flex; gap: .5rem; align-items: center; background: #f0fff4; border: 1px solid #9ae6b4; border-radius: 6px; padding: .3rem .6rem; font-size: .78rem; color: #276749; }
.ke-exc-slot-pill--full { background: #fff5f5; border-color: #feb2b2; color: #c53030; }
.ke-exc-no-slots { font-size: .82rem; color: #a0aec0; font-style: italic; margin: .25rem 0; }

.ke-exc-card__footer { display: flex; justify-content: space-between; align-items: center; padding-top: .85rem; border-top: 1px solid #edf2f7; margin-top: auto; }
.ke-exc-price { display: flex; align-items: baseline; gap: .25rem; }
.ke-exc-price__from { font-size: .75rem; color: #a0aec0; }
.ke-exc-price__amount { font-size: 1.5rem; font-weight: 700; color: var(--ke-navy); }
.ke-exc-price__unit { font-size: .75rem; color: #a0aec0; }

/* Slot picker in modal */
.ke-slot-option { display: grid; grid-template-columns: 60px 1fr auto; gap: .75rem; align-items: center; padding: .85rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: all .15s; margin-bottom: .4rem; background: #fff; }
.ke-slot-option:hover { border-color: var(--ke-gold); background: #fffbf2; }
.ke-slot-option.selected { border-color: var(--ke-gold); background: #fffbf2; box-shadow: 0 0 0 2px rgba(201,169,110,.25); }
.ke-slot-option--full { opacity: .45; cursor: not-allowed; background: #f7fafc; }
.ke-slot-option__time { font-size: 1.05rem; font-weight: 700; color: var(--ke-navy); }
.ke-slot-option__info { font-size: .82rem; color: #718096; line-height: 1.4; }
.ke-slot-option__price { text-align: right; font-size: .85rem; color: #4a5568; }
.ke-slot-option__price strong { display: block; font-size: 1rem; color: var(--ke-navy); }

/* Experience detail page */
/* Hero sized as a fraction of the viewport so it always feels
   immersive — was a fixed 560px which read as cramped on laptop +
   desktop screens. Capped at 760px so 4K monitors don't get
   absurdly tall heroes. v1.7.409. */
.ke-exc-detail-hero { min-height: min(75vh, 760px); background: var(--ke-navy) center/cover no-repeat; position: relative; display: flex; align-items: flex-end; width: 100%; text-align: left; font: inherit; color: inherit; border: 0; padding: 0; }
button.ke-exc-detail-hero { cursor: pointer; }
.ke-exc-detail-hero--clickable:hover .ke-exc-detail-hero__expand { opacity: 1; transform: translateY(0); }
.ke-exc-detail-hero__overlay { width: 100%; background: linear-gradient(transparent, rgba(13,27,42,.9)); padding: 3rem 0 2rem; }
.ke-exc-detail-hero__expand { position: absolute; top: 1.5rem; right: 1.5rem; background: rgba(255,255,255,.92); color: var(--ke-navy); padding: .55rem 1rem; border-radius: 999px; font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; opacity: .88; transform: translateY(-2px); transition: opacity .2s, transform .2s; pointer-events: none; backdrop-filter: blur(6px); }
.ke-exc-detail-breadcrumb { font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: .5rem; }
.ke-exc-detail-breadcrumb a { color: var(--ke-gold); text-decoration: none; }

/* Generic breadcrumb component */
.ke-breadcrumbs { font-size: .82rem; color: #718096; margin: 0 0 1rem; }
.ke-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.ke-breadcrumbs li { display: inline-flex; align-items: center; }
.ke-breadcrumbs a { color: var(--ke-gold); text-decoration: none; }
.ke-breadcrumbs a:hover { text-decoration: underline; }
.ke-breadcrumbs [aria-current="page"] { color: var(--ke-navy); font-weight: 600; }
.ke-breadcrumbs__sep { color: #cbd5e0; padding: 0 .35rem; }
.ke-exc-detail-hero h1 { color: #fff; margin: 0 0 .75rem; font-size: 2.25rem; }
.ke-exc-detail-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.ke-exc-detail-meta span { font-size: .88rem; color: rgba(255,255,255,.75); }

.ke-exc-detail-content { padding: 2.5rem 0 5rem; }
.ke-exc-detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.ke-exc-detail-description { font-size: 1rem; line-height: 1.8; color: #2d3748; margin-bottom: 2rem; }
.ke-exc-detail-lead { font-size: 1.15rem; line-height: 1.7; color: #4a5568; margin: 0 0 2rem; font-style: italic; padding: .5rem 0 1.5rem; border-bottom: 1px solid #edf2f7; }
.ke-exc-detail-description h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; color: var(--ke-navy); margin: 2rem 0 .75rem; font-weight: 700; line-height: 1.3; }
.ke-exc-detail-description h2:first-child { margin-top: 0; }
.ke-exc-detail-description p { margin: 0 0 1rem; }

.ke-exc-detail-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.ke-includes-block { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.25rem 1.5rem; }
.ke-includes-block--yes { border-top: 3px solid #48bb78; }
.ke-includes-block--no  { border-top: 3px solid #fc8181; }
.ke-includes-block h3 { font-size: .9rem; font-weight: 700; margin: 0 0 .75rem; color: var(--ke-navy); }
.ke-includes-block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ke-includes-block li { font-size: .85rem; color: #4a5568; }

.ke-exc-detail-bring { background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid var(--ke-gold); border-radius: 10px; padding: 1.25rem 1.5rem; margin-top: 1.5rem; }
.ke-exc-detail-bring h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .75rem; color: var(--ke-navy); font-family: 'Cormorant Garamond', Georgia, serif; }
.ke-exc-detail-bring ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .4rem .75rem; }
.ke-exc-detail-bring li { font-size: .88rem; color: #4a5568; padding-left: 1rem; position: relative; line-height: 1.5; }
.ke-exc-detail-bring li::before { content: "•"; color: var(--ke-gold); position: absolute; left: 0; font-weight: 700; font-size: 1em; line-height: 1.5; top: 0; }

/* ── Booking wizard (shared across rental, transfers, experiences) ─────────────
   These styles match the look used inline in inc/modules/car-rental-flow.php
   so the tour-booking flow looks identical to the rental + transfer flows.
   Only the experience booking page uses these globally — rental still has its own
   copy locally because it predates this file. */
.ke-wizard { background: #faf8f3; min-height: 80vh; padding-bottom: 4rem; }
.ke-wizard .ke-container { max-width: 1400px; padding: 0 2rem; }

.ke-wizard__progress {
    background: var(--ke-navy);
    padding: 1.1rem 0;
    position: sticky; top: 0; z-index: 9000;
    box-shadow: 0 2px 12px rgba(11,22,40,.25);
}
.admin-bar .ke-wizard__progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .ke-wizard__progress { top: 46px; } }

.ke-wizard__steps {
    display: flex; align-items: center; gap: 0;
    overflow-x: auto; padding-bottom: 2px;
}
.ke-wizard__step {
    display: flex; flex-direction: column; align-items: center;
    gap: .35rem; flex-shrink: 0;
}
.ke-wizard__step-dot {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.5);
    font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: all .25s;
}
.ke-wizard__step.is-active .ke-wizard__step-dot {
    background: var(--ke-gold);
    border-color: var(--ke-gold);
    color: var(--ke-navy);
}
.ke-wizard__step.is-done .ke-wizard__step-dot {
    background: rgba(201,169,110,.25);
    border-color: var(--ke-gold);
    color: var(--ke-gold);
}
.ke-wizard__step-label {
    font-size: .68rem; font-weight: 600;
    color: rgba(255,255,255,.4);
    text-transform: uppercase; letter-spacing: .06em;
    white-space: nowrap;
}
.ke-wizard__step.is-active .ke-wizard__step-label { color: var(--ke-gold); }
.ke-wizard__step.is-done   .ke-wizard__step-label { color: rgba(255,255,255,.6); }
.ke-wizard__step-line {
    flex: 1; height: 2px;
    background: rgba(255,255,255,.12);
    margin: 0 .25rem; align-self: center; margin-bottom: 1.4rem;
}
.ke-wizard__step-line.is-done { background: rgba(201,169,110,.4); }

.ke-wizard__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: flex-start;
    padding-top: 2rem;
}
@media (max-width: 960px) {
    .ke-wizard__layout { grid-template-columns: 1fr; }
    .ke-wizard__aside  { order: -1; }
}
.ke-wizard__main { min-width: 0; }
.ke-wizard__main h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.75rem; color: var(--ke-navy); margin: 0 0 .35rem; }
.ke-wizard__main h3 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .75rem; color: var(--ke-navy); }
.ke-wizard__lead { color: #718096; margin: 0 0 1.5rem; font-size: .95rem; }
.ke-wizard__actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 1.75rem; padding-top: 1.5rem;
    border-top: 1px solid #edf2f7; gap: 1rem;
}

/* ── Wizard card (white container around step content — matches rental) ── */
.ke-wizard__card {
    background: #fff; border-radius: 12px; padding: 2.5rem;
    box-shadow: 0 4px 16px rgba(13,27,42,.06);
    border: 1px solid #edf2f7;
}
@media (max-width: 600px) {
    .ke-wizard__card { padding: 1.5rem 1.25rem; }
}

/* Step header inside card: Back link + heading */
.ke-step__header { margin-bottom: 1.75rem; }
.ke-step__title  { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; font-weight: 700; color: var(--ke-navy); margin: .4rem 0 .25rem; }
.ke-btn-back {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .82rem; font-weight: 600; color: #718096;
    text-decoration: none; margin-bottom: .5rem;
    transition: color .15s;
}
.ke-btn-back:hover { color: var(--ke-navy); }

/* Form layout inside the wizard card */
.ke-form-section { margin-bottom: 2rem; }
.ke-form-section__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem; font-weight: 700; color: var(--ke-navy);
    margin: 0 0 1rem; padding-bottom: .5rem;
    border-bottom: 1.5px solid #edf2f7;
}
.ke-form-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}
@media (max-width: 600px) { .ke-form-grid { grid-template-columns: 1fr; } }
.ke-field { display: flex; flex-direction: column; gap: .35rem; }
.ke-field--full { grid-column: 1 / -1; }
.ke-field__label {
    font-size: .8rem; font-weight: 700;
    color: var(--ke-navy); letter-spacing: .02em;
    display: flex; align-items: center; gap: .35rem;
}
.ke-field__label .ke-label-opt { font-weight: 400; color: #a0aec0; font-size: .78rem; letter-spacing: 0; }

/* Input styling inside the wizard card. Scoped so we don't disturb other
   forms across the site. Mirrors rental/transfers exactly. */
.ke-wizard__card .ke-input {
    padding: .6rem .85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .9rem;
    color: #2d3748;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    width: 100%; box-sizing: border-box;
    font-family: inherit;
}
.ke-wizard__card .ke-input:focus {
    outline: none;
    border-color: var(--ke-gold);
    box-shadow: 0 0 0 3px rgba(201,169,110,.15);
}
.ke-wizard__card .ke-textarea { resize: vertical; min-height: 80px; }

/* Buttons inside the wizard get 8px radius matching the rental flow's local
   button styles (which override the global 4px). */
.ke-wizard .ke-btn { border-radius: 8px; }

/* ── Review box (cream summary card on confirm step) ─────────────────── */
.ke-review-box {
    background: #f7f5f0;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.75rem;
}
.ke-review-box__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; margin-bottom: .65rem;
}
.ke-review-box__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem; font-weight: 700; color: var(--ke-navy);
    margin: 0;
}
.ke-review-box__body {
    font-size: .9rem; color: #4a5568; line-height: 1.55;
}
.ke-review-box__body strong { color: var(--ke-navy); font-weight: 600; }
.ke-review-box__notes {
    margin: .65rem 0 0; padding-top: .65rem;
    border-top: 1px dashed #e2e8f0;
    color: #718096; font-size: .85rem;
}

/* Tabular variant — used by transfers step 3 (multi-row summary).
   Pairs with .ke-review-box as the outer container. */
.ke-review-grid       { display: flex; flex-direction: column; gap: .6rem; }
.ke-review-row        { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .9rem; }
.ke-review-row--total { border-top: 1.5px solid #e8edf3; padding-top: .75rem; margin-top: .25rem; }
.ke-review-label      { color: #718096; font-size: .82rem; flex-shrink: 0; }
.ke-review-val        { color: var(--ke-navy); font-weight: 500; text-align: right; }
.ke-review-price      {
    font-size: 1.3rem; font-weight: 800; color: var(--ke-navy);
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Inline link helper ──────────────────────────────────────────────── */
.ke-link            { color: var(--ke-navy); text-decoration: none; transition: color .15s; }
.ke-link:hover      { color: var(--ke-gold); }
.ke-link--gold      { color: var(--ke-gold); font-weight: 600; }
.ke-link--gold:hover{ color: #b8986f; text-decoration: underline; }

/* ── Payment options (pay cards) ─────────────────────────────────────── */
.ke-payment-options { margin-bottom: 1.5rem; }
.ke-pay-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .85rem; margin-top: .85rem;
}
.ke-pay-card {
    position: relative;
    display: flex; flex-direction: column; gap: .4rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 2px solid #e8edf3;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}
.ke-pay-card:hover     { border-color: var(--ke-gold-light, #e8d4a8); }
.ke-pay-card.is-active { border-color: var(--ke-gold); background: #fdf8ec; }
.ke-pay-card__icon     { font-size: 1.6rem; line-height: 1; }
.ke-pay-card__label    { font-weight: 700; font-size: .92rem; color: var(--ke-navy); }
.ke-pay-card__desc     { font-size: .8rem; color: #718096; line-height: 1.5; margin: 0; }
.ke-pay-card__check {
    position: absolute; top: .75rem; right: .75rem;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--ke-gold); color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s;
}
.ke-pay-card.is-active .ke-pay-card__check { opacity: 1; }

/* ── Terms checkbox row ──────────────────────────────────────────────── */
.ke-terms-row { margin-bottom: 1.5rem; }
.ke-terms-label {
    display: flex; gap: .6rem; align-items: flex-start;
    cursor: pointer; font-size: .88rem; color: #4a5568; line-height: 1.5;
}
.ke-terms-label input[type="checkbox"] {
    margin-top: .2rem; flex-shrink: 0;
    width: 16px; height: 16px;
    accent-color: var(--ke-gold);
    cursor: pointer;
}

/* ── Step actions (submit + footer note) ─────────────────────────────── */
.ke-step__actions {
    margin-top: 1.75rem;
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.ke-step__footer-note {
    font-size: .8rem; color: #718096; margin: 0;
}
@media (max-width: 600px) {
    .ke-step__actions       { flex-direction: column; align-items: stretch; }
    .ke-step__actions .ke-btn { width: 100%; justify-content: center; }
    .ke-step__footer-note    { text-align: center; }
}

/* ── Sidebar summary (navy) ──────────────────────────────────────────── */
.ke-wizard__aside { position: sticky; top: 90px; }
.ke-wizard__summary {
    background: var(--ke-navy); border-radius: 12px;
    padding: 1.5rem; color: #fff;
}
.ke-summary__title {
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: rgba(255,255,255,.45);
    margin: 0 0 1.1rem;
}
.ke-summary__heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem; color: #fff;
    margin: 0 0 1rem; padding-bottom: .85rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ke-summary__row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: .75rem; font-size: .82rem;
    color: rgba(255,255,255,.7); padding: .35rem 0;
}
.ke-summary__row > span:first-child {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    color: rgba(255,255,255,.4); flex-shrink: 0; min-width: 80px;
}
.ke-summary__row > span:last-child {
    text-align: right; color: #fff; font-weight: 500;
}
.ke-summary__total {
    display: flex; justify-content: space-between;
    font-size: 1.05rem; font-weight: 800; color: var(--ke-gold);
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: .85rem; margin-top: .85rem;
}

/* Confirm-card (review) on step 3 */
.ke-wizard__confirm-card {
    background: #faf8f3; border: 1px solid #e8e4dc; border-radius: 10px;
    padding: 1rem 1.25rem; margin: .75rem 0 0;
}
.ke-wizard__confirm-card h3 { margin-top: 0; }
.ke-wizard__confirm-card .notes { color: #718096; font-size: .9rem; margin: .35rem 0 .5rem; }
.ke-wizard__edit-link { font-size: .85rem; color: var(--ke-gold); text-decoration: none; font-weight: 500; }
.ke-wizard__edit-link:hover { text-decoration: underline; }

.ke-wizard__payment-methods { display: flex; flex-direction: column; gap: .75rem; }

/* ── "You may also like" section ──────────────────────────────────────── */
.ke-related { padding: 4rem 0 5rem; background: #faf8f3; margin-top: 3rem; }
.ke-related__heading { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2rem; color: var(--ke-navy); margin: 0 0 2rem; text-align: center; }
.ke-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .ke-related__grid { grid-template-columns: 1fr; } }
.ke-related__card {
    display: block; background: #fff; border-radius: 12px; overflow: hidden;
    text-decoration: none; color: inherit; border: 1px solid #e8e4dc;
    transition: transform .25s, box-shadow .25s;
}
.ke-related__card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(13,27,42,.12); }
.ke-related__img {
    height: 200px; background: #d1d5db center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
}
.ke-related__img--placeholder { background: linear-gradient(135deg, #e2e8f0, #cbd5e0); color: #a0aec0; }
.ke-related__img--icon { font-size: 3rem; }
.ke-related__body { padding: 1.1rem 1.25rem 1.3rem; }
.ke-related__tag {
    display: inline-block; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .1em; color: var(--ke-gold); font-weight: 700;
    margin-bottom: .45rem;
}
.ke-related__body h3 {
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem;
    color: var(--ke-navy); margin: 0 0 .6rem; line-height: 1.25;
}
.ke-related__meta { display: flex; gap: 1rem; font-size: .8rem; color: #718096; }

/* ── Gallery grid item (buttons that open lightbox) ────────────────────── */
button.ke-exc-gallery-item { border: 0; padding: 0; background: none; cursor: pointer; display: block; }

/* ── Lightbox gallery overlay ──────────────────────────────────────────── */
.ke-lightbox {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,.92);
    display: none;
    align-items: center; justify-content: center;
}
.ke-lightbox--open { display: flex; }
.ke-lightbox__stage {
    max-width: 92vw; max-height: 88vh;
    display: flex; align-items: center; justify-content: center;
}
.ke-lightbox__img {
    max-width: 100%; max-height: 88vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.ke-lightbox__close {
    position: absolute; top: 1.25rem; right: 1.25rem;
    width: 44px; height: 44px; border-radius: 999px;
    background: rgba(255,255,255,.1); color: #fff; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s;
}
.ke-lightbox__close:hover { background: rgba(255,255,255,.2); }
.ke-lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px; border-radius: 999px;
    background: rgba(255,255,255,.08); color: #fff; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s;
}
.ke-lightbox__nav:hover { background: rgba(255,255,255,.2); }
.ke-lightbox__nav--prev { left: 1.25rem; }
.ke-lightbox__nav--next { right: 1.25rem; }
.ke-lightbox__counter {
    position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.75); font-size: .85rem; font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
}
@media (max-width: 640px) {
    .ke-lightbox__nav { width: 44px; height: 44px; }
    .ke-lightbox__nav--prev { left: .5rem; }
    .ke-lightbox__nav--next { right: .5rem; }
}

.ke-exc-detail-child-pricing { background: #fffaf0; border: 1px solid #f6e05e; border-radius: 10px; padding: 1rem 1.25rem; margin-top: 1.5rem; }
.ke-exc-detail-child-pricing h3 { font-size: .9rem; font-weight: 700; margin: 0 0 .4rem; color: var(--ke-navy); }
.ke-exc-detail-child-pricing p { font-size: .88rem; color: #4a5568; margin: 0; }

.ke-exc-gallery { margin-bottom: 2rem; }
.ke-exc-gallery h3 { font-size: 1.1rem; color: var(--ke-navy); margin-bottom: 1rem; }
.ke-exc-gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; border-radius: 8px; overflow: hidden; }
.ke-exc-gallery-item img { width: 100%; height: 160px; object-fit: cover; display: block; }

/* Booking widget sidebar */
.ke-exc-booking-widget { position: sticky; top: 140px; }
.ke-booking-widget-card {
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    /* overflow:visible so dropdown panels can escape the card. We used to
       clip here to keep the dark hero bar rounded, but that's now handled
       by applying the radius+overflow only to the .ke-bw-header itself. */
}
.ke-bw-header { border-top-left-radius: 14px; border-top-right-radius: 14px; overflow: hidden; }
.ke-bw-header { background: var(--ke-navy); padding: 1.25rem 1.5rem; }
.ke-bw-price { display: flex; align-items: baseline; gap: .3rem; color: #fff; }
.ke-bw-price__from { font-size: .78rem; color: rgba(255,255,255,.6); }
.ke-bw-price__amount { font-size: 2rem; font-weight: 700; color: var(--ke-gold); }
.ke-bw-price__unit { font-size: .78rem; color: rgba(255,255,255,.55); }
.ke-bw-form { padding: 1.25rem 1.5rem; }
/* ── Time-slot picker (booking widget) ───────────────────────────────── */
.ke-bw-pax-split {
    /* Stacked vertically — label wraps would make side-by-side uneven heights */
    display: flex; flex-direction: column; gap: .75rem;
}
.ke-bw-pax-split .ke-form-group { margin: 0; }
.ke-bw-pax-split .ke-label { white-space: normal; }
.ke-bw-date-trigger {
    /* KEdp renders its own trigger element inside — we just give it a
       full-width container so it stretches like the other inputs. */
    width: 100%;
}

/* ── Custom dropdown widget (Viveres-style) ────────────────────────────
   Copied 1:1 from Viveres theme .cal-selector-* — closed state identical
   to the Date trigger above, rounded open panel with soft shadow. */
.ke-dd { position: relative; width: 100%; }
.ke-dd__trigger {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid #e8e3dc;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, box-shadow .15s;
    font-size: .95rem;
    color: #0d1b2a;
    font-weight: 400;
}
.ke-dd__trigger:hover { border-color: #b8986f; }
.ke-dd__trigger:focus {
    outline: none;
    border-color: #b8986f;
    box-shadow: 0 0 0 3px rgba(184,152,111,0.15);
}
.ke-dd__value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ke-dd__arrow { font-size: .75rem; color: #9ca3af; flex-shrink: 0; transition: transform .2s; }
.ke-dd--open .ke-dd__arrow { transform: rotate(180deg); }
.ke-dd--open .ke-dd__trigger { border-color: #b8986f; }

.ke-dd__list {
    display: none;
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff;
    border: 1.5px solid #e8e3dc;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 9999;
    max-height: 320px;
    overflow-y: auto;
}
.ke-dd--open .ke-dd__list { display: block; }
.ke-dd__item {
    display: block;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f5f0eb;
    transition: background .12s;
    color: #1a1a1a;
    font-size: .9rem;
}
.ke-dd__item:last-child { border-bottom: none; }
.ke-dd__item:hover:not(.is-disabled),
.ke-dd__item.is-active { background: #faf7f3; }
.ke-dd__item.is-active { font-weight: 600; }
.ke-dd__item.is-disabled {
    color: #cbd5e0;
    cursor: not-allowed;
    background: #fafafa;
}

/* KEdp trigger inside the booking widget — override its defaults so the
   Date trigger matches the Adults/Children selects exactly: same 1.5px
   #e8e3dc border, 10px radius, 10/14 padding, 0.95rem font. */
.ke-booking-widget-card .kedp-trigger {
    padding: 10px 14px;
    border: 1.5px solid #e8e3dc;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 400;
    color: #0d1b2a;
}
.ke-booking-widget-card .kedp-trigger:hover,
.ke-booking-widget-card .kedp-trigger:focus { border-color: #b8986f; }
/* Filled-in style: bolder text only — border stays neutral so Date matches
   the Adults/Children selects below it visually when all three are set. */
.ke-booking-widget-card .kedp-trigger.is-set { font-weight: 500; }

/* Spacing between the form block (date + pax) and the Check Availability
   button. User specifically asked for more breathing room here. */
.ke-bw-form .ke-btn--primary { margin-top: 1.25rem; }

/* Booking widget buttons use the same radius as inputs/datepicker (8px)
   rather than the global .ke-btn 4px, so the whole widget feels cohesive. */
.ke-booking-widget-card .ke-btn--primary,
.ke-booking-widget-card .ke-bw-book { border-radius: 8px; }

/* Slot list container: same horizontal padding as the form above it, so
   the slot rows and the Book-now button line up with Adults/Children
   selects and the Check Availability button. */
.ke-bw-slots {
    padding: 0 1.5rem 1.25rem;
}

.ke-bw-slot-header {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #718096;
    margin: 1rem 0 .6rem;
    text-align: center;
}
.ke-bw-slot-list { display: flex; flex-direction: column; gap: .4rem; }
.ke-bw-slot {
    width: 100%;
    display: grid; grid-template-columns: 1fr 1fr auto;
    gap: .5rem; align-items: center;
    padding: .7rem .85rem;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    font: inherit; color: inherit; text-align: left;
}
.ke-bw-slot:hover:not(:disabled) {
    border-color: var(--ke-gold);
    background: #fffbf2;
    transform: translateY(-1px);
}
.ke-bw-slot.selected {
    border-color: #38a169;
    background: #f0fff4;
    box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.15);
}
.ke-bw-slot.selected .ke-bw-slot__time,
.ke-bw-slot.selected .ke-bw-slot__price { color: #276749; }
.ke-bw-slot--full, .ke-bw-slot:disabled { opacity: .4; cursor: not-allowed; }
.ke-bw-slot__time { font-size: .95rem; color: var(--ke-navy); }
.ke-bw-slot__dur { font-size: .78rem; color: #a0aec0; font-weight: 400; }
.ke-bw-slot__avail { font-size: .8rem; color: #718096; }
.ke-bw-slot__price { font-weight: 700; color: var(--ke-navy); font-size: .95rem; }
.ke-bw-meeting { padding: .75rem 1.5rem 1rem; border-top: 1px solid #edf2f7; font-size: .82rem; color: #718096; }
.ke-bw-meeting__value { color: var(--ke-navy); font-weight: 600; margin-top: .2rem; }

/* Confirmation extras */
.ke-conf-info-box { background: #ebf8ff; border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; font-size: .88rem; color: #2c5282; line-height: 1.6; }

/* Empty state */
.ke-empty-state { text-align: center; padding: 5rem 2rem; color: #a0aec0; }
.ke-empty-state h2 { color: var(--ke-navy); }

@media (max-width: 1024px) {
    .ke-exc-detail-layout { grid-template-columns: 1fr; }
    .ke-exc-booking-widget { position: static; }
}
@media (max-width: 640px) {
    .ke-experiences-grid { grid-template-columns: 1fr; }
    .ke-exc-detail-includes { grid-template-columns: 1fr; }
    .ke-exc-gallery-grid { grid-template-columns: repeat(2,1fr); }
    .ke-slot-option { grid-template-columns: 50px 1fr; }
    .ke-slot-option__price { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact page
   ══════════════════════════════════════════════════════════════════════════ */
.ke-page--contact { background: #fff; min-height: 70vh; }

.ke-contact-hero { background: var(--ke-navy); color: #fff; padding: 3.5rem 0 4rem; text-align: center; }
.ke-contact-hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.6rem; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.01em; }
.ke-contact-hero__sub { max-width: 560px; margin: 0 auto; color: #cbd5e0; font-size: 1.05rem; line-height: 1.55; }

.ke-contact-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; padding: 3rem 0 5rem; align-items: start; }
@media (max-width: 900px) { .ke-contact-layout { grid-template-columns: 1fr; gap: 2rem; } }

/* Form */
.ke-contact-form-wrap { background: #fff; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,.05); padding: 2rem 2.2rem; }
.ke-contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
@media (max-width: 600px) { .ke-contact-form__grid { grid-template-columns: 1fr; } }
.ke-contact-form__field { display: flex; flex-direction: column; }
.ke-contact-form__field--full { grid-column: 1 / -1; }
.ke-contact-form__field label { font-weight: 600; font-size: .85rem; color: var(--ke-navy); margin-bottom: .35rem; }
.ke-contact-form__opt { font-weight: 400; color: #a0aec0; font-size: .78rem; }
.ke-contact-form__field input,
.ke-contact-form__field select,
.ke-contact-form__field textarea { font: inherit; padding: .65rem .8rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.ke-contact-form__field input:focus,
.ke-contact-form__field select:focus,
.ke-contact-form__field textarea:focus { outline: none; border-color: var(--ke-gold); box-shadow: 0 0 0 3px rgba(184, 152, 111, .15); }
.ke-contact-form__field textarea { resize: vertical; min-height: 130px; font-family: inherit; }
.ke-contact-form__note { font-size: .78rem; color: #a0aec0; margin: .9rem 0 0; }

/* Info column */
.ke-contact-info { display: flex; flex-direction: column; gap: 1rem; }
.ke-contact-info__card { background: #fff; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,.05); padding: 1.75rem 2rem; }
.ke-contact-info__card h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; margin: 0 0 1.25rem; color: var(--ke-navy); }
.ke-contact-info__card h3 { font-size: 1rem; margin: 0 0 .75rem; color: var(--ke-navy); }
.ke-contact-info__item { display: flex; align-items: flex-start; gap: .75rem; padding: .5rem 0; color: #2d3748; line-height: 1.5; font-size: .93rem; }
.ke-contact-info__item a { color: var(--ke-navy); text-decoration: none; }
.ke-contact-info__item a:hover { color: var(--ke-gold); }
.ke-contact-info__icon { font-size: 1.1rem; line-height: 1.4; flex-shrink: 0; }

.ke-contact-hours { list-style: none; margin: 0; padding: 0; }
.ke-contact-hours li { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .88rem; border-bottom: 1px solid #edf2f7; }
.ke-contact-hours li:last-child { border-bottom: 0; }
.ke-contact-hours__day { font-weight: 600; color: var(--ke-navy); }
.ke-contact-hours__time { color: #4a5568; }

/* Contact page — address block */
.ke-contact-address { padding: .25rem 0 .5rem; line-height: 1.7; color: #2d3748; font-size: .98rem; }
.ke-contact-address__line { font-size: .95rem; }
.ke-contact-address__link { display: inline-block; margin-top: .6rem; font-size: .85rem; color: var(--ke-gold); text-decoration: none; font-weight: 600; }
.ke-contact-address__link:hover { text-decoration: underline; }
.ke-contact-info__divider { height: 1px; background: #edf2f7; margin: 1.25rem 0; }

/* Mini map at the bottom of the contact info card. Sits inside the card,
   visually framed with the same rounded corners. Hover lifts the card to
   suggest "click to open in Google Maps". */
.ke-contact-minimap {
    display: block;
    margin-top: 1.25rem;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
    border: 1px solid #e2e8f0;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ke-contact-minimap:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(11,22,40,.12);
}
.ke-contact-minimap img { width: 100%; height: auto; display: block; }

/* Contact page — map section */
.ke-contact-map-section { padding: 0 0 5rem; }
.ke-contact-map-section__title { font-family:'Cormorant Garamond', Georgia, serif; font-size:1.75rem; margin:0 0 1.25rem; color: var(--ke-navy); text-align:center; }
.ke-contact-map { height: 440px; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.08); background: #edf2f7; }
@media (max-width: 700px) { .ke-contact-map { height: 340px; border-radius: 10px; } }

/* ══════════════════════════════════════════════════════════════════════════
   License photo upload widget (car rental step 5)
   ══════════════════════════════════════════════════════════════════════════ */
.ke-license-upload { background:#f7f5f0; border:1px dashed #d4c9b1; border-radius:10px; padding:1rem 1.1rem; margin-bottom:1rem; }
.ke-license-upload__inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.ke-license-upload__left { display:flex; align-items:center; gap:.85rem; flex:1; min-width:220px; }
.ke-license-upload__icon { font-size:1.4rem; }
.ke-license-upload__label { font-weight:600; color:var(--ke-navy); font-size:.95rem; }
.ke-license-upload__sub { font-size:.78rem; color:#718096; margin-top:.15rem; }
.ke-license-upload__btn { display:inline-block; padding:.55rem 1.1rem; background:#fff; border:1px solid #d4c9b1; border-radius:6px; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--ke-navy); transition:all .15s; }
.ke-license-upload__btn:hover { background:var(--ke-gold); color:#fff; border-color:var(--ke-gold); }
.ke-license-consent { display:flex; gap:.55rem; align-items:flex-start; margin-top:.85rem; font-size:.78rem; color:#4a5568; line-height:1.45; cursor:pointer; }
.ke-license-consent input { margin-top:.15rem; flex-shrink:0; }
.ke-license-upload__status { margin-top:.75rem; padding:.55rem .75rem; border-radius:6px; font-size:.85rem; }
.ke-license-upload__status--loading { background:#ebf4ff; color:#2b6cb0; }
.ke-license-upload__status--ok      { background:#f0fff4; color:#276749; border:1px solid #c6f6d5; }
.ke-license-upload__status--warn    { background:#fffaf0; color:#975a16; border:1px solid #feebc8; }

/* Admin — driver info with license thumbnail (reservation detail view) */
.ke-drv-item { padding:.85rem 0; border-bottom:1px solid #edf2f7; }
.ke-drv-item:last-child { border-bottom:0; padding-bottom:0; }
.ke-drv-item:first-child { padding-top:0; }
.ke-drv-item__head { display:flex; gap:.5rem; align-items:center; margin-bottom:.55rem; color:var(--ke-navy); }
.ke-drv-item__badge { font-size:.7rem; font-weight:600; background:var(--ke-gold); color:#fff; padding:.1rem .5rem; border-radius:10px; text-transform:uppercase; letter-spacing:.04em; }
.ke-drv-item__photo { display:inline-block; margin-top:.75rem; position:relative; }
.ke-drv-item__photo img { max-width:240px; max-height:160px; border-radius:6px; border:1px solid #e2e8f0; display:block; }
.ke-drv-item__photo span { display:block; font-size:.72rem; color:#718096; margin-top:.3rem; }
.ke-drv-item__photo:hover img { border-color:var(--ke-gold); }
.ke-drv-item__deleted { font-size:.78rem; color:#a0aec0; font-style:italic; margin:.5rem 0 0; }
.ke-adm__dl--compact { font-size:.85rem; }
.ke-adm__dl--compact dt { font-size:.72rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Footer — 4 column layout with payment icons
   ══════════════════════════════════════════════════════════════════════════ */
.ke-footer {
    background: var(--ke-navy, #1a2340);
    color: #cbd5e0;
    padding: 4rem 0 0;
    margin-top: 4rem;
    font-size: .92rem;
}

.ke-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
}

.ke-footer__col { min-width: 0; }

.ke-footer__heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    color: #fff;
    margin: 0 0 1.1rem;
    font-weight: 600;
}

/* Brand column */
.ke-footer__brand .ke-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    margin-bottom: 1rem;
}
/* v1.7.445: image variant of the brand logo. Replaces the text wordmark
   when a logo is uploaded (footer-specific override, or Settings → General).
   max-height keeps it visually balanced with the column headings beside it;
   width auto preserves aspect ratio. display:block strips the inline-image
   baseline gap so the tagline below sits flush. */
.ke-footer__brand .ke-footer__logo-img {
    display: block;
    max-height: 56px;
    max-width: 220px;
    width: auto;
    height: auto;
    margin-bottom: 1rem;
    object-fit: contain;
}
.ke-footer__brand .ke-logo-main {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
}
.ke-footer__brand .ke-logo-sub {
    font-size: .72rem;
    letter-spacing: .3em;
    color: var(--ke-gold, #b8986f);
    margin-top: .3rem;
    font-weight: 500;
}
.ke-footer__tagline {
    color: #a0aec0;
    font-style: italic;
    font-size: .9rem;
    line-height: 1.5;
    max-width: 240px;
    margin: .25rem 0 0;
}

/* Link lists */
.ke-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ke-footer__list li {
    margin-bottom: .6rem;
}
.ke-footer__list a {
    color: #cbd5e0;
    text-decoration: none;
    transition: color .15s;
    font-size: .9rem;
}
.ke-footer__list a:hover {
    color: var(--ke-gold, #b8986f);
}

/* Contact list (with icons) */
.ke-footer__contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ke-footer__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .85rem;
    line-height: 1.45;
    font-size: .88rem;
}
.ke-footer__contact-list a {
    color: #cbd5e0;
    text-decoration: none;
    transition: color .15s;
}
.ke-footer__contact-list a:hover {
    color: var(--ke-gold, #b8986f);
}
.ke-footer__icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.3;
}

/* Bottom bar */
.ke-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 1.75rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.ke-footer__payments {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}
.ke-pay-icon {
    height: 24px;
    width: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.ke-footer__copy {
    margin: 0;
    font-size: .8rem;
    color: #718096;
}

/* Responsive */
@media (max-width: 960px) {
    .ke-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 2rem;
    }
}
@media (max-width: 560px) {
    .ke-footer {
        padding-top: 3rem;
    }
    .ke-footer__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-bottom: 2rem;
    }
    .ke-footer__bottom {
        flex-direction: column-reverse;
        text-align: center;
        gap: 1rem;
    }
    .ke-footer__payments {
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   FAQ page
   ══════════════════════════════════════════════════════════════════════════ */
.ke-page--faq { background: #fafaf7; min-height: 70vh; }

.ke-faq-hero { background: var(--ke-navy); color: #fff; padding: 3.5rem 0 4rem; text-align: center; }
.ke-faq-hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.6rem; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.01em; }
.ke-faq-hero__sub { max-width: 560px; margin: 0 auto; color: #cbd5e0; font-size: 1.05rem; }
.ke-faq-hero__sub a { color: var(--ke-gold); text-decoration: none; font-weight: 600; }
.ke-faq-hero__sub a:hover { text-decoration: underline; }

.ke-faq-body { padding: 3rem 0 4rem; max-width: 820px; }
.ke-faq-empty { text-align: center; color: #718096; padding: 2rem 0; }

.ke-faq-section { margin-bottom: 2.5rem; }
.ke-faq-section__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.55rem; color: var(--ke-navy); margin: 0 0 1.25rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ke-gold); display: inline-block; }

.ke-faq-list { display: flex; flex-direction: column; gap: .6rem; }

.ke-faq-item { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.04); overflow: hidden; transition: box-shadow .15s; }
.ke-faq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.ke-faq-item[open] { box-shadow: 0 4px 20px rgba(0,0,0,.07); }

.ke-faq-item__q { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; cursor: pointer; font-weight: 600; color: var(--ke-navy); font-size: 1rem; list-style: none; transition: background .15s; }
.ke-faq-item__q::-webkit-details-marker { display: none; }
.ke-faq-item__q:hover { background: #faf7f1; }
.ke-faq-item[open] .ke-faq-item__q { background: #faf7f1; color: var(--ke-gold); }
.ke-faq-item__chevron { flex-shrink: 0; color: #a0aec0; transition: transform .25s; }
.ke-faq-item[open] .ke-faq-item__chevron { transform: rotate(180deg); color: var(--ke-gold); }

.ke-faq-item__a { padding: 0 1.4rem 1.2rem; color: #4a5568; line-height: 1.65; font-size: .95rem; }
.ke-faq-item__a p:first-child { margin-top: 0; }
.ke-faq-item__a p:last-child { margin-bottom: 0; }
.ke-faq-item__a a { color: var(--ke-gold); }
.ke-faq-item__a ul, .ke-faq-item__a ol { padding-left: 1.4rem; }
.ke-faq-item__a li { margin-bottom: .35rem; }

.ke-faq-cta { text-align: center; background: #fff; border-radius: 14px; padding: 2.5rem 2rem; margin-top: 3rem; box-shadow: 0 4px 20px rgba(0,0,0,.05); }
.ke-faq-cta h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.55rem; color: var(--ke-navy); margin: 0 0 .5rem; }
.ke-faq-cta p { color: #718096; margin: 0 0 1.5rem; }

@media (max-width: 640px) {
    .ke-faq-hero { padding: 2.5rem 0 3rem; }
    .ke-faq-hero h1 { font-size: 2rem; }
    .ke-faq-body { padding: 2rem 0 3rem; }
    .ke-faq-item__q { padding: 1rem 1.1rem; font-size: .95rem; }
    .ke-faq-item__a { padding: 0 1.1rem 1rem; }
    .ke-faq-cta { padding: 2rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Legal pages (Privacy, Terms, Cookie Policy)
   ══════════════════════════════════════════════════════════════════════════ */
.ke-page--legal { background: #fafaf7; min-height: 70vh; }

.ke-legal-hero { background: var(--ke-navy); color: #fff; padding: 3rem 0 3.5rem; text-align: center; }
.ke-legal-hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.3rem; margin: 0; font-weight: 700; letter-spacing: -.01em; }

.ke-legal-body { padding: 3rem 0 5rem; max-width: 800px; }

.ke-legal-content { background: #fff; padding: 3rem 3rem 3.5rem; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,.05); color: #2d3748; line-height: 1.7; font-size: .98rem; }

.ke-legal-content h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.45rem; color: var(--ke-navy); margin: 2.25rem 0 .9rem; padding-top: .5rem; }
.ke-legal-content h2:first-child { margin-top: 0; }
.ke-legal-content h3 { font-size: 1.1rem; color: var(--ke-navy); margin: 1.5rem 0 .6rem; font-weight: 600; }
.ke-legal-content p { margin: 0 0 1rem; }
.ke-legal-content ul, .ke-legal-content ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.ke-legal-content li { margin-bottom: .4rem; }
.ke-legal-content a { color: var(--ke-gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.ke-legal-content a:hover { border-bottom-color: var(--ke-gold); }
.ke-legal-content strong { color: var(--ke-navy); font-weight: 600; }

.ke-legal-meta { color: #a0aec0; font-size: .85rem; font-style: italic; margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid #edf2f7; }

@media (max-width: 640px) {
    .ke-legal-hero { padding: 2.25rem 0 2.75rem; }
    .ke-legal-hero h1 { font-size: 1.8rem; }
    .ke-legal-body { padding: 2rem 0 3rem; }
    .ke-legal-content { padding: 2rem 1.5rem 2.25rem; border-radius: 10px; }
    .ke-legal-content h2 { font-size: 1.25rem; margin-top: 1.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Explore Korčula — main page
   ══════════════════════════════════════════════════════════════════════════ */
.ke-page--explore { background: #fff; min-height: 70vh; }

.ke-explore-hero { background: var(--ke-navy); color: #fff; padding: 3.5rem 0 4rem; text-align: center; }
.ke-explore-hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.8rem; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.01em; }
.ke-explore-hero__sub { max-width: 620px; margin: 0 auto; color: #cbd5e0; font-size: 1.05rem; line-height: 1.55; }

.ke-explore-body { padding: 3rem 0 4rem; }

/* SVG map */
.ke-explore-map-wrap { background: #fff; border-radius: 16px; padding: 2rem; margin-bottom: 3rem; box-shadow: 0 4px 24px rgba(0,0,0,.05); }
.ke-explore-map { width: 100%; height: auto; display: block; }
.ke-explore-map__hint { text-align: center; color: #a0aec0; font-size: .85rem; margin: 1rem 0 0; }

/* Place cards grid */
.ke-explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }

.ke-explore-card { background: #fff; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 12px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.ke-explore-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }

.ke-explore-card__photo { height: 180px; background-size: cover; background-position: center; background-color: #edf2f7; }
.ke-explore-card__photo--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ke-navy), var(--ke-gold)); }
.ke-explore-card__photo--placeholder span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 4rem; color: rgba(255,255,255,.85); font-weight: 700; }

.ke-explore-card__body { padding: 1.25rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.ke-explore-card__body h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; color: var(--ke-navy); margin: 0 0 .75rem; }

.ke-explore-card__counts { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: .8rem; color: #718096; flex: 1; }
.ke-explore-card__counts li { display: flex; align-items: center; gap: .3rem; }
.ke-explore-card__count-icon { font-size: .95rem; }

.ke-explore-card__link { color: var(--ke-gold); font-weight: 600; font-size: .88rem; margin-top: auto; }

@media (max-width: 640px) {
    .ke-explore-hero { padding: 2.5rem 0 3rem; }
    .ke-explore-hero h1 { font-size: 2.1rem; }
    .ke-explore-body { padding: 2rem 0 3rem; }
    .ke-explore-map-wrap { padding: 1rem; border-radius: 10px; margin-bottom: 2rem; }
    .ke-explore-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Single place (e.g. /explore-korcula/blato/)
   ══════════════════════════════════════════════════════════════════════════ */
.ke-page--place { background: #fafaf7; min-height: 70vh; }

.ke-place-hero { background: var(--ke-navy); color: #fff; padding: 2.5rem 0 3rem; }
.ke-place-hero--photo { min-height: 520px; display: flex; align-items: flex-end; padding-bottom: 2.75rem; background-attachment: fixed; background-position: center top; }
.ke-place-hero--photo .ke-container { width: 100%; }
.ke-place-hero .ke-container { position: relative; }
.ke-place-hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.6rem; margin: .25rem 0 0; font-weight: 700; letter-spacing: -.01em; }
.ke-place-back { color: #cbd5e0; text-decoration: none; font-size: .88rem; transition: color .15s; }
.ke-place-back:hover { color: var(--ke-gold); }

.ke-place-body { padding: 2.5rem 0 4rem; max-width: 900px; }

.ke-place-intro { background: #fff; padding: 2rem 2.25rem; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.05); margin-bottom: 2rem; color: #2d3748; line-height: 1.7; font-size: 1rem; }
.ke-place-intro p { margin: 0 0 1rem; }
.ke-place-intro p:last-of-type { margin-bottom: 0; }
.ke-place-directions { display: inline-block; margin-top: 1.25rem; color: var(--ke-gold); font-weight: 600; text-decoration: none; font-size: .92rem; }
.ke-place-directions:hover { text-decoration: underline; }

.ke-place-section { margin-bottom: 2.5rem; }
.ke-place-section__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; color: var(--ke-navy); margin: 0 0 1.25rem; display: flex; align-items: center; gap: .6rem; padding-bottom: .5rem; border-bottom: 2px solid var(--ke-gold); }
.ke-place-section__icon { font-size: 1.3rem; }

.ke-place-poi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }

.ke-place-poi { background: #fff; padding: 1.5rem 1.6rem; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.04); transition: box-shadow .2s; }
.ke-place-poi:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.ke-place-poi__name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; color: var(--ke-navy); margin: 0 0 .5rem; font-weight: 600; }
.ke-place-poi__desc { color: #4a5568; font-size: .9rem; line-height: 1.55; margin: 0 0 .9rem; }
.ke-place-poi__links { display: flex; gap: .85rem; flex-wrap: wrap; }
.ke-place-poi__link { font-size: .82rem; color: var(--ke-gold); text-decoration: none; font-weight: 600; transition: color .15s; }
.ke-place-poi__link:hover { color: var(--ke-navy); text-decoration: underline; }

.ke-place-map { border-radius: 12px; overflow: hidden; }
.ke-place-map-section { margin-bottom: 2.5rem; }

.ke-place-footer-nav { text-align: center; padding-top: 1.5rem; }

@media (max-width: 640px) {
    .ke-place-hero { padding: 2rem 0 2.25rem; }
    .ke-place-hero--photo { min-height: 300px; padding-bottom: 2rem; background-attachment: scroll; }
    .ke-place-hero h1 { font-size: 2rem; }
    .ke-place-body { padding: 1.75rem 0 3rem; }
    .ke-place-intro { padding: 1.5rem 1.4rem; border-radius: 10px; }
    .ke-place-section__title { font-size: 1.3rem; }
    .ke-place-poi-list { grid-template-columns: 1fr; }
}

/* Explore — image background + SVG overlay for pins */
.ke-explore-map-stack { position: relative; width: 100%; max-width: 100%; }
.ke-explore-map-bg { width: 100%; height: 100%; display: block; border-radius: 10px; }
.ke-explore-map--overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ke-explore-map--overlay .ke-map-hit { pointer-events: auto; }


/* ══════════════════════════════════════════════════════════════════════════
   Explore map hotspots — small round clickable points on the map image
   Pin sizes come from CSS vars --ke-pin-sub and --ke-pin-main on the stack.
   ══════════════════════════════════════════════════════════════════════════ */
.ke-explore-map-stack { position: relative; }

.ke-map-hotspot {
    position: absolute;
    /* left/top set inline — mark the CENTER of the hotspot */
    transform: translate(-50%, -50%);
    display: block;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
    background: transparent;
    transition: background-color .18s ease, box-shadow .18s ease, transform .15s ease;
}

/* Main villages have slightly larger hit zones */
.ke-map-hotspot--main { width: var(--ke-pin-main, 32px); height: var(--ke-pin-main, 32px); }
.ke-map-hotspot--sub  { width: var(--ke-pin-sub, 22px);  height: var(--ke-pin-sub, 22px); }

.ke-map-hotspot__label {
    /* Visually hidden but available to screenreaders */
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ke-map-hotspot:hover,
.ke-map-hotspot:focus {
    background: rgba(184, 152, 111, 0.35);
    box-shadow: 0 0 0 3px rgba(184, 152, 111, 0.75);
    outline: none;
    transform: translate(-50%, -50%) scale(1.25);
}

@media (hover: none) {
    .ke-map-hotspot:active {
        background: rgba(184, 152, 111, 0.4);
        box-shadow: 0 0 0 3px rgba(184, 152, 111, 0.8);
    }
}

/* Debug mode: append ?debug_map=1 to URL to see all hotspots */
.ke-explore-map-stack--debug .ke-map-hotspot {
    background: rgba(255, 0, 0, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.8);
}
.ke-explore-map-stack--debug .ke-map-hotspot::after {
    content: attr(title);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    background: rgba(0,0,0,.8);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}


/* Highlight POI when scrolled to via #anchor */
.ke-place-poi { scroll-margin-top: 100px; transition: box-shadow .3s, background .3s; }
.ke-place-poi:target {
    background: #fffbf0;
    box-shadow: 0 0 0 2px var(--ke-gold), 0 4px 24px rgba(184, 152, 111, 0.25);
}