/* ============================================================
   LONDONOS HOTEL THEME - MAIN STYLESHEET
   ============================================================ */

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--color-9);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* Keyboard skip link (header.php) -- off-screen until focused. */
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 10000;
  padding: .75rem 1.25rem;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* --- LAYOUT --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px)  { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }

/* ============================================================
   HEADER / NAVBAR — always white (like original)
   ============================================================ */
#site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
}

/* Logged in: stick below WordPress's fixed toolbar (32px; 46px on narrow
   screens; under 600px the toolbar scrolls away, so the header sticks at 0). */
.admin-bar #site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar #site-header { top: 0; } }

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 1rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img {
  height: 36px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 2rem);
}

.nav-link {
  white-space: nowrap; /* menu labels stay on one line (2026-10-07) */
  color: var(--color-7);
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.2s;
  position: relative;
}
.nav-link:hover { color: var(--primary); }
.nav-link.active { color: var(--primary); font-weight: 600; }

/* Dropdown for menu items with children (e.g. "Hotels" > destination list).
   .menu-item needs its own hover/focus-within anchor -- without it the
   whole submenu has no trigger and just renders inline (see
   Londonos_Nav_Walker in functions.php). */
.nav-links li.menu-item { list-style: none; position: relative; display: flex; align-items: center; }
/* Desktop mega menu: the admin-managed "Hotels" submenu has ~16 destination
   links -- a single cramped column (the old min/max-width:200/320px) meant
   scrolling through a long list. A multi-column panel shows them all at a
   glance instead; column-width is a hint, not a cap, so longer labels don't
   force nowrap overflow (white-space is normal below, not nowrap). Mobile
   overrides all of this back to a single flex column further down. */
.nav-links .has-dropdown > .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.75rem;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
  /* 2026-10-05: up to 36 cities per country (same list as the homepage
     "Explore by City" cards) -> four columns. */
  columns: 4 150px;
  column-gap: 1.25rem;
  width: max-content;
  max-width: min(860px, calc(100vw - 3rem));
  z-index: 50;
  list-style: none;
}
.nav-links .has-dropdown:hover > .sub-menu,
.nav-links .has-dropdown:focus-within > .sub-menu {
  display: block;
}
/* Invisible bridge over the 0.75rem gap between the menu label and the panel:
   without it the pointer leaves the <li> on its way down and the panel closes
   before a link can be clicked (2026-10-08). */
.nav-links .has-dropdown > .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1rem;
  height: 1rem;
}
.sub-menu li { list-style: none; break-inside: avoid; }
.nav-link.sub-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: normal;
  color: var(--color-7);
}
.nav-link.sub-link:hover { background: var(--color-1); color: var(--primary); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Compact header preferences (2026-10-10): one "🇹🇷 ₺" pill for language +
   currency, a round account icon -- frees width in the main menu. */
.nav-pop { position: relative; }
.nav-pop > summary { list-style: none; cursor: pointer; }
.nav-pop > summary::-webkit-details-marker { display: none; }
.nav-prefs-btn { display: flex; align-items: center; gap: .3rem; height: 38px; padding: 0 .7rem; border: 1px solid var(--color-3); border-radius: var(--radius-full); font-size: .9rem; font-weight: 700; color: var(--color-7); background: #fff; transition: border-color .15s, color .15s; }
.nav-prefs-btn:hover, .nav-pop[open] > .nav-prefs-btn { border-color: var(--primary); color: var(--primary); }
.nav-prefs-cur { min-width: .7em; text-align: center; }
.nav-account-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 3px 10px rgba(14, 92, 104, .25); transition: transform .15s, background .15s; }
.nav-account-btn:hover, .nav-pop[open] > .nav-account-btn { background: var(--primary-hover, var(--primary)); transform: translateY(-1px); }
.nav-account-btn.is-in { background: #fff; color: var(--primary); border: 2px solid var(--primary); box-shadow: none; }
.nav-pop-panel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; min-width: 180px; padding: .5rem; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.nav-prefs-panel { width: 230px; }
.nav-pop-title { margin: .35rem .5rem .25rem; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-6, #8a949b); }
.nav-pop-title + div { margin-bottom: .35rem; }
.nav-prefs-curs { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; }
.nav-pop-item { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: .875rem; font-weight: 600; color: var(--color-8); text-align: left; cursor: pointer; text-decoration: none; }
.nav-pop-item:hover { background: var(--color-1); color: var(--primary); }
.nav-pop-item.is-current { background: var(--color-1); color: var(--primary); font-weight: 700; cursor: default; }
.nav-pop-sym { display: inline-block; width: 1.1em; text-align: center; font-weight: 800; }
.nav-pop-primary { color: var(--primary); font-weight: 700; }

/* Duplicated auth markup (see header.php) -- desktop shows it in the top
   action bar, mobile moves it inside the hamburger panel instead. Default
   (desktop) state: mobile copy hidden, desktop copy follows .nav-actions'
   normal flex flow. */
.nav-auth--desktop { display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; }
/* Must match ".nav-links li.menu-item"'s specificity (class+type+class) to
   actually override its display:flex on desktop -- a bare class selector
   here would lose to that earlier, more specific rule regardless of order. */
.nav-links li.nav-auth--mobile { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(14, 92, 104, 0.35);
}
.btn-emerald {
  background: var(--emerald);
  color: #fff;
}
.btn-emerald:hover {
  background: var(--emerald-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.btn-gold {
  background: var(--accent-gold);
  color: #1a1305;
}
.btn-gold:hover {
  background: var(--accent-gold-hover);
  color: #1a1305;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(200, 148, 79, 0.4);
}
.btn-outline {
  background: transparent;
  border: 2px solid var(--color-3);
  color: var(--color-7);
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline-dark {
  background: transparent;
  border: 2px solid var(--color-3);
  color: var(--color-8);
}
.btn-outline-dark:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Mobile hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-8);
  border-radius: 2px;
  transition: all 0.3s;
}

@media (max-width: 768px) {
  /* Mobile top bar keeps only logo, language, currency and the hamburger --
     sign in/register moves into the hamburger panel below. Previously the
     auth buttons stayed inline here (lang/currency were the ones hidden),
     and on narrow phones logo + "Sign In" + a "Register" pill + hamburger
     didn't fit the row at all, causing the reported overlap. */
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-actions { gap: 0.4rem; }
  .nav-auth--desktop { display: none; }
  .nav-logo img { height: 28px; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 1.5rem;
    gap: 1.25rem;
    box-shadow: var(--shadow-md);
    border-top: 1px solid var(--color-2);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .nav-links.open .nav-link { color: var(--color-8); }
  .nav-links.open li.menu-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-links.open li.nav-auth--mobile {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-2);
  }
  .nav-links.open li.nav-auth--mobile .nav-link {
    flex: 1;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    background: var(--color-1);
  }
  .nav-links.open .has-dropdown > .sub-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
    box-shadow: none;
    margin: 0.5rem 0 0 1rem;
    padding: 0;
  }
  .nav-links .has-dropdown > .sub-menu::before { content: none; }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
/* Aegean Premium hero: the photo is a framed, inset object (a card sitting
   in front of a solid colour block, like a whitewashed terrace stepping
   down toward the water) rather than a full-bleed background with a dark
   scrim under centred text -- that older treatment is what read as dated.
   Copy sits directly on the section's own warm sand background instead,
   left-aligned like an editorial page rather than a centred marketing
   banner, so it needs no overlay trick to stay legible. */
.hero-section {
  position: relative;
  width: 100%;
  padding: 5.5rem 0 4.5rem;
  background: linear-gradient(180deg, var(--color-1) 0%, var(--color-0) 100%);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 34rem;
}

/* Read before the headline like a section standfirst, not an all-caps
   eyebrow label -- display face in the accent colour, with a short
   rule standing in for a bullet so it still reads as a distinct beat. */
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent-gold-dark, var(--primary-hover));
  margin-bottom: -0.5rem;
}
.hero-kicker::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--accent-gold);
  flex-shrink: 0;
}

.hero-title {
  color: var(--color-9);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero-desc {
  color: var(--color-7);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 38ch;
}

.hero-search { width: 100%; max-width: none; padding: 0; margin-top: 0.25rem; }

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
  padding-top: 0.25rem;
}
.hero-link:hover { color: var(--primary-hover); }
.hero-link svg { transition: transform 0.2s; }
.hero-link:hover svg { transform: translateX(4px); }

.hero-visual { position: relative; height: 520px; }
.hero-visual-block {
  position: absolute;
  right: -1.25rem;
  bottom: -1.5rem;
  width: 78%;
  height: 60%;
  background: var(--primary-dark);
  border-radius: var(--radius-lg);
}
.hero-photo {
  position: absolute;
  inset: 0 8% 22% 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Self-contained fallback (a single arch, the recurring line of Aegean
   waterfront architecture) for when no hero photo is configured -- shows
   through whenever there's no <img> at all, or its src 404s. */
.hero-photo-motif {
  width: 46%;
  height: 46%;
  color: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease-in-out;
}
.hero-visual:hover .hero-photo img { transform: scale(1.06); }

/* Real, live counts (not marketing copy) as a caption card sitting in the
   gap under the photo, on top of .hero-visual-block -- replaces the old
   floating pill badge that read as a disconnected sticker on the image. */
.hero-stats {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.75rem;
}
.hero-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.hero-stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-9);
}
.hero-stat-label { font-size: 0.78rem; color: var(--color-6); font-weight: 500; }
.hero-stat-divider { width: 1px; align-self: stretch; background: var(--color-2); }

/* One orchestrated entrance on load rather than per-element hover effects
   scattered around the section. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy   { animation: hero-rise 0.7s ease-out both; }
  .hero-visual { animation: hero-rise 0.7s 0.12s ease-out both; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Phones and tablets: headline + search on the first screen, the photo after them
   (2026-10-11 UX test: the photo came first and pushed the search ~990 px down). */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-visual { height: 300px; }
  .hero-copy { max-width: none; }
}
@media (max-width: 640px) {
  .hero-section { padding: 1.5rem 0 2rem; }
  .hero-copy { gap: 1rem; }
  .hero-visual { height: 220px; }
  .hero-visual-block { right: -0.75rem; bottom: -1rem; }
  .hero-kicker { font-size: 1rem; }
  .hero-stats { gap: 1rem; padding: 0.75rem 1.1rem; }
  .hero-stat-num { font-size: 1.15rem; }
  .hero-stat-label { font-size: .75rem; }
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-bar-wrapper {
  width: 100%;
  max-width: 900px;
  padding: 0 1rem;
}

.search-bar {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-2);
  padding: 0.25rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.20);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
}

.search-field {
  position: relative;
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem 0.6rem 1.25rem;
  border-radius: 0.75rem;
  transition: background 0.15s;
  cursor: pointer;
  border-right: 1px solid var(--color-2);
}
.search-field:last-of-type { border-right: none; }
.search-field:hover { background: rgba(14, 92, 104, 0.04); }

/* Signals "pick a check-in date first" when a visitor is bounced back here
   from a hotel page's "Book Now" without having searched dates -- see
   main.js's RESERVATION UX GATE (2026-09-17). */
.dest-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;background:var(--color-0);border:1px solid var(--color-2);border-left:4px solid var(--primary);border-radius:12px;padding:1.25rem 1.5rem;margin:0 0 2.5rem}
.dest-cta h2{font-size:1.2rem;font-weight:700;margin:0 0 .35rem;color:var(--color-8)}
.dest-cta p{margin:0;color:var(--color-7);font-size:.95rem;line-height:1.6}
.dest-cta__text{flex:1 1 320px}
.dest-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.dest-cta__actions .btn{min-height:44px;display:inline-flex;align-items:center;padding:.7rem 1.4rem}
@media (max-width:600px){.dest-cta{padding:1rem}.dest-cta__actions,.dest-cta__actions .btn{width:100%;justify-content:center}}
.search-field--blink {
  animation: londonos-blink 0.9s ease-in-out 4;
  border-radius: var(--radius-sm);
}
@keyframes londonos-blink {
  0%, 100% { background: transparent; box-shadow: none; }
  50% { background: rgba(200, 148, 79, 0.18); box-shadow: 0 0 0 2px var(--accent-gold, #c8944f) inset; }
}

.search-field-icon {
  flex-shrink: 0;
  color: var(--color-5);
  display: flex;
  align-items: center;
}

.search-field-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.search-field label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-5);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.search-field input,
.search-field select {
  border: none;
  outline: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-9);
  background: transparent;
  font-family: inherit;
  width: 100%;
  padding: 0;
}
.search-field input::placeholder { color: var(--color-5); font-weight: 400; }

.search-btn {
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  margin: 0.25rem;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(14, 92, 104, 0.25);
}
.search-btn:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 20px rgba(14, 92, 104, 0.4);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .search-bar { flex-direction: column; }
  .search-field { border-right: none; border-bottom: 1px solid var(--color-2); width: 100%; flex-direction: row; }
  .search-field:last-of-type { border-bottom: none; }
  .search-btn { width: 100%; justify-content: center; }
}

/* Destination/hotel autocomplete dropdown (main.js) */
.ac-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.4rem;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  max-height: 320px;
  overflow-y: auto;
  z-index: 60;
  cursor: auto;
}
.ac-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}
.ac-item:hover { background: var(--color-1); }
.ac-item-icon { flex-shrink: 0; color: var(--color-6); display: flex; }
.ac-item-text { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.ac-item-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-item-sub {
  font-size: 0.75rem;
  color: var(--color-6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   CITY CARDS SECTION
   ============================================================ */
.city-cards-section {
  padding: 5rem 0;
  background: #fff;
}

.section-header {
  margin-bottom: 2rem;
}
.section-title {
  font-size: 1.875rem;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--color-9);
}

/* Uniform grid, unlike the old "1 large + 4 small" layout that only worked
   for exactly 5 cards -- this section now shows every city in the DB. */
.city-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 640px)  { .city-cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .city-cards-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .city-cards-grid { grid-template-columns: repeat(5, 1fr); } }

.city-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
  background: linear-gradient(135deg, var(--primary-dark), var(--color-8));
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.city-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.city-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.city-card:hover .city-card-img { transform: scale(1.08); }

.city-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
  opacity: 0.85;
  transition: opacity 0.3s;
}
.city-card:hover .city-card-overlay { opacity: 0.95; }

.city-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.1rem;
  transform: translateY(6px);
  transition: transform 0.3s ease;
}
.city-card:hover .city-card-info { transform: translateY(0); }

.city-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.15rem;
}
.city-card-count {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* ============================================================
   MOST SEARCHED SECTION
   ============================================================ */
.most-searched-section {
  padding: 4rem 0;
  background: var(--color-0);
}

.destination-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 640px)  { .destination-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .destination-cards { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .destination-cards { grid-template-columns: repeat(5, 1fr); } }

.destination-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: all 0.3s ease;
  display: block;
}
.destination-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.destination-card-img-wrap {
  position: relative;
  height: 192px;
  overflow: hidden;
}
.destination-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.destination-card:hover .destination-card-img { transform: scale(1.08); }

.destination-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
  opacity: 0.6;
  transition: opacity 0.3s;
}
.destination-card:hover .destination-card-img-overlay { opacity: 0.4; }

.destination-card-body {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.destination-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-9);
  transition: color 0.2s;
}
.destination-card:hover .destination-card-name { color: var(--primary); }
.destination-card-body { padding: 1rem; display: flex; align-items: center; justify-content: space-between; }
.destination-card-region {
  font-size: 0.8rem;
  color: var(--color-6);
  margin-top: 2px;
}
.destination-card-arrow {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-6);
  flex-shrink: 0;
  transition: all 0.2s;
}
.destination-card:hover .destination-card-arrow {
  background: var(--primary-light);
  color: var(--primary);
}

/* ============================================================
   TOP THEMES SECTION
   ============================================================ */
.top-themes-section {
  padding: 5rem 0;
  background: var(--color-0);
}

.theme-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) { .theme-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .theme-cards { grid-template-columns: repeat(6, 1fr); } }

.theme-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow-sm);
  display: block;
  transition: all 0.3s ease;
}
.theme-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.theme-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.theme-card:hover .theme-card-img { transform: scale(1.1); }

.theme-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
}
.theme-card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: color 0.2s;
}
.theme-card:hover .theme-card-title { color: var(--accent-gold); }

/* ============================================================
   HOTEL CARD — horizontal layout (image left + content right)
   ============================================================ */
.hotel-card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-2);
  box-shadow: var(--shadow-xs);
  transition: all 0.3s ease;
  display: block;
  overflow: hidden;
}
.hotel-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.hotel-card-inner {
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .hotel-card-inner { flex-direction: row; }
}

.hotel-card-img-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  flex-shrink: 0;
  overflow: hidden;
}
@media (min-width: 640px) {
  .hotel-card-img-wrap {
    width: 288px;
    height: auto;
    min-height: 200px;
  }
}
.hotel-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.hotel-card:hover .hotel-card-img { transform: scale(1.05); }

.hotel-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--accent-gold);
  color: #1a1305;
  font-size: .75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

.hotel-card-stars {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 2px;
}
.hotel-card-stars span { color: var(--accent-gold); font-size: 0.85rem; }

.hotel-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hotel-card-location {
  font-size: 0.75rem;
  color: var(--color-6);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.hotel-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-9);
  transition: color 0.2s;
  line-height: 1.3;
}
.hotel-card:hover .hotel-card-name { color: var(--primary); }

.hotel-card-facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.hotel-card-tag {
  background: var(--color-1);
  color: var(--color-7);
  font-size: .75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
}

.hotel-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--color-2);
  margin-top: auto;
}

.hotel-card-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hotel-card-score-badge {
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.hotel-card-score-label {
  font-size: 0.8rem;
  color: var(--color-6);
}
.hotel-card-price {
  text-align: right;
}
.hotel-card-price-label {
  font-size: .75rem;
  color: var(--color-6);
}
.hotel-card-price-amount {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-9);
}

/* ============================================================
   ROOM PICKER — hotel detail page "Available Rooms & Rates"
   Horizontally-scrolling card track (native CSS scroll-snap, no JS) since
   each room type has exactly one photo. Was a horizontally-scrolling
   track (each room-card a fixed 260px-wide slide); changed 2026-09-16
   (user request: this list must stack downward, never scroll) to a plain
   vertical list of full-width rows, photo left / details right, matching
   the same horizontal-card pattern already used for hotel listing cards
   (template-parts/hotel/card.php) so the two feel consistent.
   ============================================================ */
.room-picker-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.room-card {
  display: flex;
  border: 1px solid var(--color-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s;
}
.room-card:hover { box-shadow: var(--shadow-md); }
.room-card-photo {
  position: relative;
  width: 220px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-dark), var(--color-8));
}
.room-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.room-photo-current-button { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.room-photo-current-button img { display:block; }
.room-photo-nav { position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:34px; height:34px; padding:0; transform:translateY(-50%); border:0; border-radius:50%; background:rgba(0,0,0,.56); color:#fff; cursor:pointer; }
.room-photo-nav:hover, .room-photo-nav:focus-visible { background:rgba(0,0,0,.82); }
.room-photo-prev { left:.5rem; }
.room-photo-next { right:.5rem; }
.room-photo-counter { position:absolute; right:.55rem; bottom:.55rem; padding:.2rem .55rem; border-radius:999px; background:rgba(0,0,0,.65); color:#fff; font-size:.75rem; font-weight:700; }
.room-card-body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.room-card-name { font-weight: 700; color: var(--color-9); }
.room-card-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.room-card-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--color-1);
  color: var(--color-7);
}
.room-card-badge--board { background: var(--primary-light, var(--color-2)); color: var(--primary-dark, var(--color-8)); }
.room-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-2);
}
.room-card-price-amount { font-weight: 800; font-size: 1.05rem; color: var(--primary); }
.room-card-price-label { font-size: .75rem; color: var(--color-6); }
.room-card-cta { padding: 0.6rem 1.1rem; white-space: nowrap; font-size: 0.85rem; }

@media (max-width: 640px) {
  .room-card { flex-direction: column; }
  .room-card-photo { width: 100%; height: 160px; }
}

/* Hotels grid — single column for horizontal cards (search/listing pages) */
.hotels-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Grid variant — vertical cards (image on top), used for homepage featured
   hotels where the shared .hotel-card is laid out in a multi-column grid
   instead of a single-column horizontal list. */
.hotels-grid--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.hotels-grid--cards .hotel-card-inner {
  flex-direction: column;
}
.hotels-grid--cards .hotel-card-img-wrap {
  width: 100%;
  height: 200px;
}

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */
.search-results-layout {
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
}
.search-filters {
  flex: 0 0 280px;
  position: sticky;
  top: 90px;
  height: fit-content;
}
.search-results { flex: 1; }

.filter-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
  margin-bottom: 1.25rem;
}
.filter-box-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-8);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  cursor: pointer;
}
.filter-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--emerald);
}
.filter-checkbox label {
  font-size: 0.875rem;
  color: var(--color-8);
  cursor: pointer;
}
.filter-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-5);
}

@media (max-width: 1024px) {
  .search-results-layout { flex-direction: column; }
  .search-filters { position: static; flex: none; }
}

/* ============================================================
   HOTEL DETAIL PAGE
   ============================================================ */
.hotel-detail-name {
  font-size: 2.5rem;
  font-weight: 600;
  font-family: var(--font-display);
  margin-bottom: 0.5rem;
}

/* Hero photo grid: 1 large tile + up to 4 small ones (Airbnb-style),
   replacing the old single static hero image so every hotel photo is
   visible/reachable from the top of the page, not just the first one. */
.hotel-hero-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  height: 440px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.hotel-hero-gallery.count-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.hotel-hero-gallery.count-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.hotel-hero-gallery.count-3 { grid-template-rows: 1fr 1fr; }
.hotel-hero-gallery .hotel-gallery-thumb {
  position: relative;
  height: 100%;
  border-radius: 0;
}
.hotel-hero-gallery .hero-gallery-main { grid-row: 1 / 3; grid-column: 1; }
.hotel-hero-gallery.count-1 .hero-gallery-main,
.hotel-hero-gallery.count-2 .hero-gallery-main,
.hotel-hero-gallery.count-3 .hero-gallery-main { grid-row: 1; }
/* 4 photos = 1 main + 3 side tiles; without this the 4th grid cell
   (column 3, row 2) would sit empty since only 3 side tiles fill it. */
.hotel-hero-gallery.count-4 .hero-gallery-side:last-child { grid-column: 2 / 4; }
.hero-gallery-more {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 8, 0.55);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .hotel-hero-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px;
    height: auto;
  }
  .hotel-hero-gallery .hero-gallery-main { grid-column: 1 / 3; grid-row: 1; height: 220px; }
  .hotel-hero-gallery .hero-gallery-side:nth-child(4) { display: none; }
  .hotel-hero-gallery .hero-gallery-side:nth-child(5) { display: none; }
}

/* Grid (2026-10-05): the booking box sits beside the content on desktop
   and right after the trust strip on phones (it used to fall below the
   map). The sidebar cell stretches the full height so .booking-box can
   stay sticky. */
.hotel-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas: "top side" "rest side";
  column-gap: 2.5rem;
  padding: 3rem 0;
}
.hotel-detail-top { grid-area: top; }
.hotel-detail-rest { grid-area: rest; }
.hotel-detail-sidebar { grid-area: side; }
.hotel-highlights { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: -1rem 0 2rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--color-2); font-size: .9rem; color: var(--color-7); }
.hotel-highlights li { display: flex; align-items: center; gap: .4rem; }
.hotel-highlights svg { color: var(--color-success, #1a7f37); flex: none; }
.hotel-description.is-clamped { max-height: 7.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.hotel-description-toggle { margin-top: .5rem; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
/* min-width:0 overrides the flex-item default of min-width:auto, which
   otherwise refuses to shrink this column below its content's intrinsic
   width -- the room-picker-track's horizontally-scrolling room cards (many
   260px-wide cards side by side) have a large intrinsic width, and without
   this the whole page layout was forced that wide instead of the track's
   own overflow-x:auto containing the scroll locally (found 2026-09-14). */
.hotel-detail-main { min-width: 0; }

.booking-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 90px;
}
.booking-box-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1.5rem;
}
.booking-box-price span {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-6);
}

/* "Book Now" clicked before dates were chosen (main.js): draw the eye to
   the sidebar date form -- gold ring pulse on the box, slide-in hint,
   highlighted date fields. Static highlight under reduced motion. */
.booking-hint {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-md);
  background: var(--accent-gold-light);
  border: 1px solid var(--accent-gold);
  color: var(--color-9);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
}
.booking-hint[hidden] { display: none; }
.booking-hint-icon { flex-shrink: 0; color: var(--accent-gold-hover); margin-top: .1rem; }

.booking-box--attention {
  outline: 3px solid var(--accent-gold);
  outline-offset: 4px;
}
.booking-date-field--attention input {
  border-color: var(--accent-gold) !important;
  background: var(--accent-gold-light);
  box-shadow: 0 0 0 3px rgba(200, 148, 79, .25);
}

@media (prefers-reduced-motion: no-preference) {
  .booking-box--attention {
    animation:
      booking-lift .5s cubic-bezier(.34, 1.56, .64, 1),
      booking-ring 1.2s ease-out .2s 3;
  }
  .booking-hint:not([hidden]) { animation: booking-hint-in .45s cubic-bezier(.22, 1, .36, 1); }
  .booking-date-field--attention input { animation: booking-field-pulse 1.2s ease-in-out 3; }
}
@keyframes booking-lift {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes booking-ring {
  0%   { box-shadow: var(--shadow-md), 0 0 0 0 rgba(200, 148, 79, .55); }
  100% { box-shadow: var(--shadow-md), 0 0 0 22px rgba(200, 148, 79, 0); }
}
@keyframes booking-hint-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes booking-field-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(200, 148, 79, .25); }
  50%      { box-shadow: 0 0 0 6px rgba(200, 148, 79, .45); }
}

@media (max-width: 1024px) {
  .hotel-detail-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "side" "rest"; }
  .hotel-detail-sidebar { margin-bottom: 2rem; }
  .booking-box { position: static; }
}

/* ============================================================
   HOTEL PHOTO GALLERY + LIGHTBOX
   ============================================================ */
.hotel-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}
.hotel-gallery-thumb {
  display: block;
  width: 100%;
  height: 180px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-2);
}
/* [hidden] and .hotel-gallery-thumb{display:block} are equal specificity,
   and author styles always beat the browser's default [hidden]{display:none}
   -- without this, single-hotel.php's photos past the visible hero grid
   (rendered as hidden buttons purely to feed the lightbox's photo list,
   see the "hero_extra" loop) show up as blank 180px strips down the page.
   Found 2026-09-10 -- .hotel-gallery-lightbox[hidden] already had this same
   override below, this one was just missed when the hero grid was added. */
.hotel-gallery-thumb[hidden] {
  display: none;
}
.hotel-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.hotel-gallery-thumb:hover img,
.hotel-gallery-thumb:focus-visible img {
  transform: scale(1.05);
}
.hotel-gallery-thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.hotel-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
}
.hotel-gallery-lightbox[hidden] { display: none; }
.hotel-gallery-lightbox-img {
  max-width: min(90vw, 1200px);
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.hotel-gallery-lightbox-close,
.hotel-gallery-lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.hotel-gallery-lightbox-close:hover,
.hotel-gallery-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
}
.hotel-gallery-lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
}
.hotel-gallery-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}
.hotel-gallery-lightbox-prev { left: 1rem; }
.hotel-gallery-lightbox-next { right: 1rem; }
.hotel-gallery-lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
}
@media (max-width: 640px) {
  .hotel-gallery-lightbox-nav { width: 40px; height: 40px; }
  .hotel-gallery-lightbox-prev { left: 0.5rem; }
  .hotel-gallery-lightbox-next { right: 0.5rem; }
}

/* ============================================================
   SCORE BADGE
   ============================================================ */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

.blog-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.blog-card-img-wrap {
  height: 220px;
  overflow: hidden;
}
.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.blog-card:hover .blog-card-img { transform: scale(1.06); }

.blog-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-category {
  font-size: .75rem;
  font-weight: 700;
  color: var(--primary-hover);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.blog-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-9);
  margin-bottom: 0.75rem;
  line-height: 1.4;
  transition: color 0.2s;
}
.blog-card:hover .blog-card-title { color: var(--primary-hover); }
.blog-card-excerpt {
  font-size: 0.875rem;
  color: var(--color-6);
  line-height: 1.6;
  flex: 1;
}
.blog-card-meta {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--color-5);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 0;
}
.page-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid var(--color-3);
  color: var(--color-7);
  transition: all 0.2s;
}
.page-btn:hover,
.page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ============================================================
   FOOTER — light background (slate-50) like original
   ============================================================ */
#site-footer {
  position: relative;
  background: var(--color-0);
  color: var(--color-6);
  padding: 5rem 0 2.5rem;
  border-top: 1px solid var(--color-2);
  overflow: hidden;
}

/* Decorative background blobs */
#site-footer::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 800px;
  height: 800px;
  background: rgba(14, 92, 104, 0.04);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
#site-footer::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: rgba(232, 228, 219, 0.5);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.footer-inner { position: relative; z-index: 1; }

/* Footer main: logo column + nav grid — stacked on mobile, side-by-side on desktop */
.footer-main {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (min-width: 1024px) {
  .footer-main {
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
  }
}

/* Logo column */
.footer-logo-area {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .footer-logo-area { min-width: 200px; }
}

.footer-logo {
  display: inline-block;
}
.footer-logo img {
  height: 40px;
  width: auto;
  transition: transform 0.3s;
}
.footer-logo:hover img { transform: scale(1.05); }

.footer-tagline {
  font-size: 0.875rem;
  color: var(--color-6);
  max-width: 220px;
}
.footer-copy-year {
  font-size: 0.8rem;
  color: var(--color-5);
}

/* Nav grid */
.footer-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
}

@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(5, 1fr); } } /* 5 columns since the popular flights column (2026-10-07) */

.footer-col-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-9);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
}
.footer-links { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-6);
  transition: color 0.2s, padding-left 0.2s;
}
.footer-link:hover { color: var(--primary); padding-left: 4px; }

/* Full-width destinations block (every real destination, potentially 40+
   links) -- CSS multi-column instead of the 4-col nav grid above so it
   wraps across the footer's full width instead of one very tall column. */
.footer-destinations {
  padding-top: 2.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--color-2);
}
.footer-destinations-links {
  column-width: 200px;
  column-gap: 1.5rem;
  margin-top: 1.25rem;
}
.footer-destinations-links li {
  break-inside: avoid;
  margin-bottom: 0.75rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social-link {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--color-1);
  border: 1px solid var(--color-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-6);
  font-size: 0.9rem;
  transition: all 0.2s;
}
.footer-social-link:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-2);
  margin-top: 2rem;
}
.footer-copy {
  font-size: 0.8rem;
  color: var(--color-5);
}
.footer-legal {
  display: flex;
  gap: 1.5rem;
}
.footer-legal a {
  font-size: 0.8rem;
  color: var(--color-5);
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--primary); }

/* Fallback brand (footer-brand used in old template structure) */
.footer-brand { max-width: 320px; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.text-emerald { color: var(--emerald); }
.text-primary { color: var(--primary-hover); }
.fw-bold { font-weight: 700; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.gap-4 { gap: 1rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-primary { background: var(--primary-light); color: var(--primary-dark); }
.badge-emerald { background: #d1fae5; color: var(--emerald-dark); }

/* Rating stars */
.star-rating { color: var(--accent-gold); letter-spacing: 2px; font-size: 0.9rem; }

/* Divider */
.divider { border: none; border-top: 1px solid var(--color-2); margin: 2rem 0; }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-2) 25%, var(--color-1) 50%, var(--color-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Fade-in animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeInUp 0.5s ease forwards; }

/* Toast notifications */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  background: var(--color-9);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  animation: fadeInUp 0.3s ease;
  max-width: 360px;
}
.toast.success { border-left: 4px solid var(--emerald); }
.toast.error   { border-left: 4px solid #ef4444; }

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-2);
  padding: 0.6rem 0;
  font-size: 0.8rem;
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}
.breadcrumb-item {
  display: flex;
  align-items: center;
  color: var(--color-6);
}
.breadcrumb-item a {
  color: var(--color-6);
  transition: color 0.2s;
}
.breadcrumb-item a:hover { color: var(--primary-hover); }
.breadcrumb-item.active { color: var(--color-8); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  margin-right: 0.25rem;
  color: var(--color-4);
}

/* ============================================================
   ENTRY CONTENT (blog/page body typography)
   ============================================================ */
.entry-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; }
.entry-content h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.entry-content p  { margin-bottom: 1.25rem; }
.entry-content ul,
.entry-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.entry-content li { margin-bottom: 0.4rem; line-height: 1.7; }
.entry-content a  { color: var(--primary-hover); text-decoration: underline; }
.entry-content a:hover { color: var(--primary-dark); }
.entry-content img { border-radius: var(--radius-md); margin: 1rem 0; }
.entry-content blockquote {
  border-left: 4px solid var(--primary);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--color-0);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--color-7);
}
.entry-content code {
  background: var(--color-1);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.875em;
  font-family: 'Courier New', monospace;
}
.entry-content pre {
  background: var(--color-9);
  color: var(--color-0);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1.5rem 0;
}
.entry-content pre code { background: none; color: inherit; padding: 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.entry-content th { background: var(--color-1); font-weight: 700; padding: 0.75rem 1rem; text-align: left; border-bottom: 2px solid var(--color-3); }
.entry-content td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-2); }

/* ============================================================
   WP PAGINATION override
   ============================================================ */
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid var(--color-3);
  color: var(--color-7);
  transition: all 0.2s;
  margin: 0 2px;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.pagination .page-numbers.dots { border: none; width: auto; }

/* ============================================================
   SECTION PADDING UTILITY (used inline on homepage)
   ============================================================ */
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.mt-8  { margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Price calendar (2026-10-04) — search result cards */
.hotel-card-price-note { font-size: .75rem; color: var(--color-6); margin-top: .15rem; }
.hotel-card-price--unavailable { font-size: .8rem; font-weight: 600; color: var(--color-7); text-align: right; max-width: 9rem; }
.hotel-card.is-unavailable .hotel-card-inner { opacity: .6; }

/* Price calendar (2026-10-04) — hotel page */
.lpc { margin-bottom: 2.5rem; }
.lpc-title { font-size: 1.25rem; font-weight: 700; color: var(--color-8); margin-bottom: .25rem; }
.lpc-note { font-size: .8rem; color: var(--color-6); margin-bottom: 1rem; }
.lpc-subtitle { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.lpc-cheapest { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.lpc-cheapest li { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--color-2); border-radius: var(--radius-sm); }
.lpc-cheapest-date { flex: 1; }
.lpc-cheapest-price { font-weight: 700; color: var(--color-success, #1a7f37); }
.lpc-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.lpc-month-name { font-weight: 700; }
.lpc-nav { width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-3); border-radius: 50%; background: #fff; font-size: 1.25rem; cursor: pointer; }
.lpc-nav:disabled { opacity: .35; cursor: default; }
.lpc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lpc-wd { font-size: .7rem; font-weight: 700; text-align: center; color: var(--color-6); padding: .25rem 0; }
.lpc-day { min-height: 3.25rem; padding: .25rem .15rem; border: 1px solid var(--color-2); border-radius: 6px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font: inherit; line-height: 1.15; }
button.lpc-day { cursor: pointer; }
button.lpc-day:hover, button.lpc-day:focus-visible { outline: 2px solid var(--color-primary, #0b5cad); outline-offset: 1px; }
.lpc-day-n { font-size: .75rem; color: var(--color-7); }
.lpc-day-p { font-size: .72rem; font-weight: 700; }
.lpc-day-m { font-size: .6rem; color: var(--color-6); }
.lpc-day.is-low { background: #e8f5ec; border-color: #b7e0c3; }
.lpc-day.is-high { background: #fdf0e6; border-color: #f3cfae; }
.lpc-day.is-off { background: var(--color-1, #f5f5f5); color: var(--color-5); text-decoration: line-through; }
@media (max-width: 480px) { .lpc-day-p { font-size: .62rem; } .lpc-day-m { display: none; } }

/* Price calendar (2026-10-04) — city page */
.lpc-city { margin: 3rem 0; }
.lpc-city-summary { margin: .5rem 0 1rem; max-width: 60ch; }
.lpc-city-table-wrap { overflow-x: auto; }
.lpc-city-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 22rem; }
.lpc-city-table th, .lpc-city-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--color-2); text-align: left; }
.lpc-city-table td { font-variant-numeric: tabular-nums; }
.lpc-faq details { border-bottom: 1px solid var(--color-2); padding: .75rem 0; }
.lpc-faq summary { font-weight: 600; cursor: pointer; }
.lpc-faq p { margin: .5rem 0 0; }

/* Room card facilities + details opening in place on hover (2026-10-06) */
.room-card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.room-card-features { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; color: var(--color-7); }
.room-card-features li { display: inline-flex; align-items: center; gap: .3rem; }
.room-card-more { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.room-card-desc { margin: .25rem 0 .6rem; font-size: .88rem; line-height: 1.55; color: var(--color-7); }
.room-card-all-features { list-style: none; margin: 0 0 .25rem; padding: 0; columns: 3 11rem; column-gap: 1.25rem; font-size: .8rem; color: var(--color-7); }
.room-card-all-features li { break-inside: avoid; padding: .12rem 0 .12rem 1.1rem; position: relative; }
.room-card-all-features li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); }
@media (hover: hover) and (pointer: fine) {
  .room-card:hover { transform: translateY(-2px); border-color: var(--color-3, #d6d0c4); box-shadow: 0 12px 30px rgba(31, 26, 18, .12); }
}
@media (prefers-reduced-motion: reduce) {
  .room-card { transition: none; }
  .room-card:hover { transform: none; }
}

/* Room card: rates grouped under one room type (2026-10-06) */
.room-rates { list-style: none; margin: .4rem 0 0; padding: 0; border-top: 1px solid var(--color-2); }
.room-rate { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem 1rem; padding: .65rem 0; border-bottom: 1px solid var(--color-1); }
.room-rate[hidden] { display: none; }
.room-rate-terms { display: flex; flex-wrap: wrap; gap: .35rem; }
.room-rate .room-card-price { text-align: right; }
.room-card-badge--refundable { background: #e7f4ec; color: #1f6b3d; }
.room-rates-more { align-self: flex-start; margin-top: .35rem; background: none; border: 0; padding: 0; font: inherit; font-size: .82rem; font-weight: 600; color: var(--primary); cursor: pointer; }
/* Mobile hotel page (2026-10-14 audit: rooms started at 1,669 px, reviews at 9,029 px).
   Rates: badges on top, price left, button right. Extra room types / reviews and
   the long facility list wait behind a "Show all" button (.lo-m-more, main.js). */
.lo-m-more { display: none; }
@media (max-width: 768px) {
  .room-rate { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .75rem; }
  .room-rate .room-rate-terms { grid-column: 1 / -1; }
  .room-rate .room-card-price { text-align: left; }
  .room-rate .room-picker-book-form, .room-rate .room-card-cta { width: auto; }
  .room-rate .room-card-cta { min-height: 44px; padding: .55rem 1rem; }
  .room-rate .room-card-price-amount { font-size: 1.15rem; }
  .is-collapsible:not(.is-open) .lo-m-extra { display: none; }
  .lo-m-clamp:not(.is-open) .lo-m-clamp-body { max-height: 13.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .lo-m-more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: .75rem; border: 1px solid var(--color-3, #d6d3cc); border-radius: 10px; background: #fff; font: inherit; font-weight: 600; font-size: .9rem; color: var(--primary); cursor: pointer; }
  .is-open > .lo-m-more { display: none; }
}
.room-rate-note { font-size: .78rem; line-height: 1.4; color: var(--color-6); max-width: 18rem; }

/* Narrow desktops: keep the main menu on one line (2026-10-07). */
@media (min-width: 769px) and (max-width: 1200px) {
  .nav-links { gap: 0.9rem; }
  .nav-link { font-size: 0.8125rem; }
}

/* Hotel page: ready-made campaign package link inside the booking box (2026-10-08). */
.hotel-package-link { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-2); }
.hotel-package-link-title { margin: 0 0 .5rem; font-size: .85rem; font-weight: 700; color: var(--color-7); }
.hotel-package-link a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .8rem; margin-top: .4rem; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary-dark); font-weight: 700; font-size: .9rem; text-decoration: none; }
.hotel-package-link a:hover { background: var(--primary); color: #fff; }

/* Home: products strip + featured packages (2026-10-10 site audit, template-parts/home/services.php) */
.home-services { padding-top: 3.5rem; padding-bottom: 1rem; }
/* Two ways to a whole holiday: a package on a real hotel photo + Build Your Trip (redesigned 2026-10-10) */
.hs-ways { display: grid; gap: 1rem; }
.hs-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hs-cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.25rem; font-weight: 700; }
.hs-cta span { transition: transform .25s; }
.hs-pkg { position: relative; display: flex; min-height: 26rem; overflow: hidden; border-radius: var(--radius-lg); background: var(--primary-dark); color: #fff; text-decoration: none; isolation: isolate; }
.hs-pkg-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
/* Readable on any hotel photo (2026-10-10: text was lost on bright, busy photos): a taller bottom fade plus a left-side shade behind the text column. */
.hs-pkg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 44, 55, .97) 0%, rgba(8, 44, 55, .88) 40%, rgba(8, 44, 55, .5) 62%, rgba(8, 44, 55, 0) 85%), linear-gradient(to right, rgba(8, 44, 55, .55) 0%, rgba(8, 44, 55, 0) 70%); }
.hs-pkg-body { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; width: 100%; padding: 1.5rem; }
.hs-pkg .hs-eyebrow { color: var(--accent-gold-light); }
.hs-pkg-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.hs-pkg-text { max-width: 30rem; font-size: .95rem; line-height: 1.45; color: #fff; }
.hs-pkg-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; font-size: .9rem; color: #fff; }
.hs-pkg-price b { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--accent-gold-light); }
.hs-pkg .hs-cta { margin-top: .5rem; padding-top: 0; }
.hs-pkg-cap { position: absolute; inset-block-start: 1rem; inset-inline-start: 1.5rem; padding: .3rem .7rem; border-radius: var(--radius-full); background: rgba(8, 44, 55, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: .8rem; font-weight: 600; color: #fff; }
.hs-trip { display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--primary-dark); color: #fff; text-decoration: none; }
.hs-trip .hs-eyebrow { color: #dcae6c; } .hs-trip .hs-cta { margin-top: 0; }
.hs-trip-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.hs-trip-steps { list-style: none; counter-reset: hs-step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 1rem 0 .5rem; padding: 0; }
.hs-trip-steps li { counter-increment: hs-step; padding-top: .55rem; border-top: 3px solid rgba(255, 255, 255, .22); font-size: .85rem; font-weight: 600; transition: border-color .3s; }
.hs-trip-steps li::before { content: "0" counter(hs-step); display: block; margin-bottom: .1rem; font-size: .75rem; color: var(--accent-gold); }
.hs-trip-steps li:nth-child(2) { transition-delay: .08s; }
.hs-trip-steps li:nth-child(3) { transition-delay: .16s; }
.hs-trip-steps li:nth-child(4) { transition-delay: .24s; }
.hs-trip-off { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1rem; font-size: .95rem; line-height: 1.3; color: rgba(255, 255, 255, .88); }
.hs-trip-off b { font-family: var(--font-display); font-size: 3.4rem; font-weight: 600; line-height: 1; color: var(--accent-gold-light); }
.hs-pkg:hover .hs-pkg-img, .hs-pkg:focus-visible .hs-pkg-img { transform: scale(1.04); }
.hs-pkg:hover .hs-cta span, .hs-pkg:focus-visible .hs-cta span, .hs-trip:hover .hs-cta span, .hs-trip:focus-visible .hs-cta span, .hs-item:hover .hs-item-label span, .hs-item:focus-visible .hs-item-label span { transform: translateX(4px); }
.hs-trip:hover .hs-trip-steps li, .hs-trip:focus-visible .hs-trip-steps li { border-color: var(--accent-gold); }
.hs-pkg:focus-visible, .hs-trip:focus-visible, .hs-item:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 3px; }
/* ...or one product at a time: a ledger led by real figures */
.hs-sep { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 0; font-size: 1.05rem; font-weight: 600; color: var(--color-7); }
.hs-sep::after { content: ""; flex: 1; height: 1px; background: var(--color-3); }
.hs-list { list-style: none; display: grid; column-gap: 2rem; margin: 0; padding: 0; }
.hs-item { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding-block: 1.25rem; border-bottom: 1px solid var(--color-2); color: var(--color-8); text-decoration: none; }
.hs-item-label { font-weight: 700; color: var(--primary); }
.hs-item-label span { display: inline-block; transition: transform .25s; }
.hs-item-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; }
.hs-item-stat b { font-family: var(--font-display); font-size: 2.2rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--color-9); }
.hs-item-stat span { font-size: .88rem; color: var(--color-6); }
.hs-item-text { font-size: .9rem; line-height: 1.45; color: var(--color-7); }
.hs-item-foot { margin-top: auto; font-size: .9rem; font-weight: 700; color: #8a5e22; }
.home-packages { padding-top: 2.5rem; padding-bottom: 2rem; }
.home-packages .cmp-list { display: flex; flex-direction: column; gap: 1rem; }
.home-packages-all { margin: 1.5rem 0 0; text-align: center; }
.sub-link-all { font-weight: 700; }
@media (min-width: 640px) { .hs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .hs-ways { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .hs-pkg { min-height: 30rem; } .hs-pkg-body, .hs-trip { padding: 2rem; } .hs-pkg-cap { inset-inline-start: 2rem; } }
@media (min-width: 1024px) { .hs-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hs-item { border-bottom: 0; } .hs-list li + li .hs-item { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--color-2); } .hs-list { column-gap: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .hs-pkg-img, .hs-cta span, .hs-item-label span, .hs-trip-steps li { transition: none; } .hs-pkg:hover .hs-pkg-img { transform: none; } }
/* Payment logos (2026-10-10) */
.footer-pay { margin: .75rem 0 0; display: grid; gap: .5rem; }
.footer-pay-title { margin: 0; display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--color-7); }
.pay-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pay-logo { display: grid; place-items: center; width: 60px; height: 38px; overflow: hidden; border-radius: 6px; background: #fff; border: 1px solid var(--color-2); }
.pay-logo > span { display: grid; place-items: center; width: 100%; height: 100%; }
.pay-logo svg { width: 48px; height: 48px; }
.pay-logo--mastercard svg, .pay-logo--amex svg { width: 28px; height: 28px; }
.pay-logo--amazonpay { width: 92px; }
.pay-logo--amazonpay img { width: 76px; height: auto; display: block; }
.footer-bnpl { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; font-size: .85rem; color: var(--color-6); }
.footer-bnpl a { color: var(--color-8); font-weight: 600; }
.footer-bnpl-note { font-size: .78rem; }
.pay-wordmark { display: inline-flex; align-items: center; gap: .25rem; height: 32px; padding: 0 .6rem; border-radius: 6px; font-weight: 800; font-size: .82rem; letter-spacing: -.01em; color: #000; }
.pay-wordmark--klarna { background: #FFB3C7; }
.pay-wordmark--clearpay { background: #B2FCE4; }
.pay-wordmark svg { width: 15px; height: 15px; }
/* Hotel page: sticky booking bar on phones and tablets (2026-10-10 site audit, single-hotel.php) */
.hotel-mobile-cta { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--color-2); box-shadow: 0 -8px 24px rgba(31, 26, 18, .12); color: var(--color-8); text-decoration: none; }
.hotel-mobile-cta-price b { font-size: 1.15rem; color: var(--primary); }
.hotel-mobile-cta-btn { padding: .6rem 1.1rem; border-radius: var(--radius-full); background: var(--accent-gold); color: #fff; font-weight: 700; white-space: nowrap; }
.single-hotel #site-footer, body.single-hotel main { padding-bottom: 4.5rem; }
@media (min-width: 1024px) { .hotel-mobile-cta { display: none; } .single-hotel #site-footer, body.single-hotel main { padding-bottom: 0; } }
/* Hotel page FAQ (2026-10-10 site audit, round 2) */
.hotel-faq { margin-bottom: 2.5rem; }
.hotel-faq h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--color-8); }
.hotel-faq-item { border-bottom: 1px solid var(--color-2); padding: .75rem 0; }
.hotel-faq-item summary { cursor: pointer; font-weight: 700; color: var(--color-9); }
.hotel-faq-item p { margin: .5rem 0 0; color: var(--color-7); }
.hotel-card-price-per { font-size: .75rem; font-weight: 500; color: var(--color-6); }
/* Contact details (2026-10-10): header phone, mobile menu contact, footer + contact page blocks */
.nav-phone { display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 .7rem; border: 1px solid var(--color-2); border-radius: var(--radius-full); color: var(--primary-dark); text-decoration: none; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.nav-phone:hover, .nav-phone:focus-visible { border-color: var(--primary); background: var(--primary-50); }
.nav-phone-num { display: none; }
@media (min-width: 1440px) { .nav-phone-num { display: inline; } } /* at 1280 the number pushed the last menu item under it */
.nav-links li.nav-contact--mobile { display: none; }
@media (max-width: 768px) {
  .nav-links.open li.nav-contact--mobile { display: flex; flex-direction: column; gap: .6rem; width: 100%; padding-top: 1.25rem; border-top: 1px solid var(--color-2); }
  .nav-links.open li.nav-contact--mobile .nav-link { font-weight: 700; color: var(--primary-dark); }
}
.lo-contact-direct { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.lo-contact-link { color: var(--primary-dark); font-weight: 700; text-decoration: none; }
.lo-contact-link small { font-weight: 400; color: var(--color-6); }
.lo-contact-title { margin: 1rem 0 .5rem; font-weight: 700; color: var(--color-8); }
.lo-contact-offices { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.lo-contact--page .lo-contact-offices { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lo-contact--page { margin-bottom: 2rem; padding: 1.25rem; border: 1px solid var(--color-2); border-radius: var(--radius-md); background: #fff; }
.lo-contact--footer { font-size: .85rem; color: var(--color-7); }
.lo-contact--footer .lo-contact-offices li { line-height: 1.45; }
.lo-company { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--color-6); }
.footer-company { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--color-2); }

/* WhatsApp (2026-10-10): contact-block link + round button bottom-right (plugin contact-info.php). */
.lo-contact-link--wa { display: inline-flex; align-items: center; gap: .35rem; color: #128c4a; }
.nav-contact--mobile svg { vertical-align: -3px; color: #25d366; }
.lo-wa-float { position: fixed; z-index: 58; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .15s ease, box-shadow .15s ease; }
.lo-wa-float:hover, .lo-wa-float:focus-visible { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, .28); color: #fff; }
.lo-wa-float:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: 3px; }
/* Above the sticky booking bars (hotel price bar, tour book bar, trip "My package" box). */
body:has(.hotel-mobile-cta) .lo-wa-float, body:has(.tour-book-bar) .lo-wa-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
body:has(.trip-box) .lo-wa-float { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { body:has(.hotel-mobile-cta) .lo-wa-float, body:has(.trip-box) .lo-wa-float { bottom: 24px; } .lo-wa-float { right: 24px; bottom: 24px; } }
@media (min-width: 901px) { body:has(.tour-book-bar) .lo-wa-float { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .lo-wa-float { transition: none; } }
@media print { .lo-wa-float { display: none; } }

/* Static pages: About, Help, legal (2026-10-10, plugin data/static-pages/). */
.lo-legal-date { margin: 0 0 .5rem; font-size: .85rem; color: var(--color-6); }
.lo-legal-lead { font-size: 1.08rem; color: var(--color-8); }
body.page .entry-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; line-height: 1.5; }
body.page .entry-content th, body.page .entry-content td { padding: .6rem .7rem; border: 1px solid var(--color-2); text-align: left; vertical-align: top; }
body.page .entry-content th { background: var(--primary-50); color: var(--color-9); }
body.page .entry-content code { font-size: .82rem; word-break: break-word; }
@media (max-width: 600px) {
	body.page .entry-content table, body.page .entry-content tbody, body.page .entry-content tr, body.page .entry-content td { display: block; width: 100%; }
	body.page .entry-content thead { display: none; }
	body.page .entry-content tr { margin-bottom: .75rem; border: 1px solid var(--color-2); border-radius: var(--radius-md); }
	body.page .entry-content td { border: 0; border-bottom: 1px solid var(--color-1); }
	body.page .entry-content td:last-child { border-bottom: 0; color: var(--color-6); }
}

/* Line icons replacing emojis in package/hotel lists (functions.php londonos_ui_icon). */
.lo-ico { display: inline-block; flex: none; vertical-align: -3px; color: var(--primary); }
.badge .lo-ico, .hotel-transfer-link .lo-ico { color: currentColor; }
.cmp-soon-icon .lo-ico { color: #fff; vertical-align: 0; }
.trip-box-icon .lo-ico { vertical-align: -4px; }

/* The two plan cards are links: the global a:hover teal made their text vanish on the dark card (2026-10-10). */
.hs-pkg:hover, .hs-pkg:focus-visible, .hs-trip:hover, .hs-trip:focus-visible { color: #fff; }

/* WhatsApp button: smaller on phones, where it floats over the cards. */
@media (max-width: 767px) {
	.lo-wa-float { width: 46px; height: 46px; right: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
	.lo-wa-float svg { width: 24px; height: 24px; }
	body:has(.hotel-mobile-cta) .lo-wa-float, body:has(.tour-book-bar) .lo-wa-float { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Room window (2026-10-10): photo with a magnifier, room name and "Room details and photos"
   open one dialog with the big gallery, description, facilities and the room's prices. */
.room-card-name { margin: 0; font-size: inherit; }
.room-card-name-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-align: left; cursor: pointer; }
.room-card-name-btn:hover, .room-card-name-btn:focus-visible { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.room-card-photo { position: relative; }
.room-photo-current-button img { transition: transform .35s ease, filter .25s ease; }
.room-photo-zoom { position: absolute; top: .6rem; right: .6rem; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--primary-dark); box-shadow: 0 4px 12px rgba(0,0,0,.25); transition: transform .2s ease, background .2s ease; pointer-events: none; }
.room-photo-current-button:hover img, .room-photo-current-button:focus-visible img { transform: scale(1.04); filter: brightness(.92); }
.room-photo-current-button:hover .room-photo-zoom, .room-photo-current-button:focus-visible .room-photo-zoom { transform: scale(1.12); background: #fff; }
.room-card-details[hidden] { display: none; }

html.room-dlg-open { overflow: hidden; }
/* 2026-10-11 redesign: `margin: auto` restored (the global `* { margin: 0 }` reset had pinned the
   window to the top-left corner), prices moved above the facility list and drawn as cards. */
.room-dlg { margin: auto; width: min(1040px, calc(100vw - 3rem)); max-width: none; max-height: calc(100dvh - 3rem); padding: 0; border: 0; border-radius: 20px; background: #fff; color: var(--color-9); box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; }
.room-dlg::backdrop { background: rgba(10, 22, 26, .66); backdrop-filter: blur(3px); }
.room-dlg[open] { display: block; animation: room-dlg-in .2s ease; }
@keyframes room-dlg-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.room-dlg-close { position: absolute; top: .9rem; right: .9rem; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-2); background: #fff; color: var(--color-9); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: background .15s ease, transform .15s ease; }
.room-dlg-close:hover { background: var(--color-1); transform: rotate(90deg); }
.room-dlg-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: min(700px, calc(100dvh - 3rem)); }
.room-dlg-gallery { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #0b1a1e; min-height: 0; }
.room-dlg-main { position: relative; min-height: 0; overflow: hidden; }
.room-dlg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-dlg-main::after { content: ""; position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(transparent, rgba(0,0,0,.35)); pointer-events: none; }
.room-dlg-nav { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--color-9); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); transition: background .15s ease; }
.room-dlg-nav:hover { background: #fff; }
.room-dlg-prev { left: .9rem; }
.room-dlg-next { right: .9rem; }
.room-dlg-counter { position: absolute; left: .9rem; bottom: .8rem; z-index: 1; padding: .25rem .65rem; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem; font-weight: 700; }
.room-dlg-thumbs { display: flex; gap: .4rem; padding: .55rem .6rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; }
.room-dlg-thumbs button { flex: 0 0 76px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .55; transition: opacity .15s ease; }
.room-dlg-thumbs button:hover { opacity: .85; }
.room-dlg-thumbs button[aria-current="true"] { border-color: var(--accent-gold); opacity: 1; }
.room-dlg-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-dlg--one-photo .room-dlg-nav, .room-dlg--one-photo .room-dlg-thumbs, .room-dlg--one-photo .room-dlg-counter { display: none; }
.room-dlg--no-photo { width: min(620px, calc(100vw - 3rem)); }
.room-dlg--no-photo .room-dlg-grid { grid-template-columns: 1fr; height: auto; max-height: calc(100dvh - 3rem); }
.room-dlg--no-photo .room-dlg-gallery { display: none; }
.room-dlg-info { padding: 1.6rem 1.6rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1rem; scrollbar-width: thin; }
.room-dlg-title { margin: 0; padding-right: 3rem; font-size: 1.35rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.room-dlg-h { margin: 0 0 .55rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-6); }
.room-dlg-desc:empty { display: none; }
.room-dlg-desc .room-card-desc { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--color-7); }
.room-dlg-dates { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.room-dlg-dates-text { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--color-8); }
.room-dlg-dates-btn { min-height: 44px; }
.room-dlg-prices { padding: .9rem; border-radius: 14px; background: var(--color-1); container-type: inline-size; }
.room-dlg-rates .room-rates { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 0; border-top: 0; }
.room-dlg-rates .room-rate { grid-template-columns: 1fr auto; gap: .55rem 1rem; padding: .8rem .9rem; border: 1px solid var(--color-2); border-radius: 12px; background: #fff; }
.room-dlg-rates .room-rate-terms { grid-column: 1 / -1; }
.room-dlg-rates .room-card-price { text-align: left; }
.room-dlg-rates .room-card-price-amount { font-size: 1.2rem; }
.room-dlg-rates .room-card-cta { min-height: 44px; }
.room-dlg-details:empty { display: none; }
.room-dlg-details .room-card-all-features { columns: 2 10rem; column-gap: 1rem; font-size: .85rem; }
.room-dlg-details .room-card-all-features li { padding: .2rem 0 .2rem 1.25rem; line-height: 1.4; }
@media (max-width: 760px) {
  .room-dlg, .room-dlg--no-photo { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .room-dlg-grid, .room-dlg--no-photo .room-dlg-grid { grid-template-columns: 1fr; grid-template-rows: max-content max-content; align-content: start; height: 100dvh; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  .room-dlg-gallery { grid-template-rows: max-content; min-height: auto; }
  .room-dlg-main { min-height: auto; }
  .room-dlg-img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  /* Swipe + counter are enough on a phone; the strip only pushed the prices down. */
  .room-dlg-thumbs { display: none; }
  .room-dlg-info { overflow: visible; padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .room-dlg-title { padding-right: 0; font-size: 1.2rem; }
  .room-dlg--no-photo .room-dlg-title { padding-right: 3rem; }
  .room-dlg-close { top: calc(.75rem + env(safe-area-inset-top, 0px)); right: .75rem; background: rgba(255,255,255,.95); }
  .room-dlg-prices { margin: 0 -.25rem; padding: .75rem; }
  .room-dlg-rates .room-picker-book-form, .room-dlg-rates .room-card-cta { width: auto; }
}
@media (max-width: 1000px) and (min-width: 761px) { .room-dlg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* A narrow price box (tablet column, small phone): button under the price, full width. */
@container (max-width: 330px) {
  .room-dlg-rates .room-rate { grid-template-columns: minmax(0, 1fr); }
  .room-dlg-rates .room-picker-book-form, .room-dlg-rates .room-card-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .room-dlg[open] { animation: none; }
  .room-photo-current-button img, .room-photo-zoom { transition: none; }
}

/* Hotels with no online price: WhatsApp price enquiry in the booking box (2026-10-11 marketing audit) */
.booking-ask-note { margin: .5rem 0 .6rem; font-size: .85rem; line-height: 1.45; color: var(--color-7); }
.booking-ask-price { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--radius-full); background: #25d366; color: #fff; font-weight: 700; text-decoration: none; }
.booking-ask-price:hover, .booking-ask-price:focus-visible { background: #1ebe5a; color: #fff; }

/* "About this hotel" facts list for hotels with a short description (2026-10-11 content audit) */
.hotel-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1.5rem; margin: 1rem 0 0; padding: 1rem 1.25rem; background: var(--color-1, #f7f7f9); border-radius: 12px; }
.hotel-facts div { min-width: 0; }
.hotel-facts dt { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-6, #6b7280); }
.hotel-facts dd { margin: .15rem 0 0; color: var(--color-8); line-height: 1.5; overflow-wrap: anywhere; }

/* Tap targets (2026-10-11 audit): every tappable control is at least 44 px tall.
   Menu button was 32x24, breadcrumb links 17-20 px, desktop menu links 22 px.
   Breadcrumb links grow with padding + equal negative margin, so the row keeps its height. */
.hamburger { min-width: 44px; min-height: 44px; padding: 10px; align-items: center; justify-content: center; }
.nav-links > li > .nav-link:not(.sub-link) { display: inline-flex; align-items: center; min-height: 44px; }
.nav-link.sub-link { display: flex; align-items: center; min-height: 44px; }
.breadcrumb-item a, .trf-breadcrumb a { display: inline-block; padding: .8rem .15rem; margin: -.8rem -.15rem; }
@media (max-width: 768px) {
  .nav-links.open { gap: .25rem; }
  .nav-links.open li.nav-auth--mobile { margin-top: .5rem; }
}
.dest-hero-credit { position: absolute; right: .6rem; bottom: .4rem; z-index: 2; font-size: .7rem; color: rgba(255,255,255,.8); text-decoration: none; }
.dest-hero-credit:hover { color: #fff; text-decoration: underline; }

/* Social links in the contact block (footer + contact page), 2026-10-13. 44px tap targets. */
.lo-social { display: flex; gap: .5rem; margin: .25rem 0 .75rem; }
.lo-social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-2); color: var(--primary-dark); background: #fff; transition: background .15s, color .15s; }
.lo-social-link:hover, .lo-social-link:focus-visible { background: var(--primary-dark); color: #fff; }

/* Hotel's own Google / Tripadvisor links under the reviews (2026-10-13). */
.hotel-profiles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 2.5rem; font-size: .9rem; color: var(--color-7); }
.hotel-profiles a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--primary-dark); }

/* Hotel booking box after a date search, phones (2026-10-14): one-line summary, form on "Change". */
.booking-summary { display: none; }
@media (max-width: 768px) {
  .booking-box.is-searched .booking-summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 48px; margin-top: .75rem; padding: .6rem .9rem; border: 1px solid var(--color-3, #d6d3cc); border-radius: 10px; background: #fff; font: inherit; font-size: .92rem; color: var(--color-9, #1a1a1a); text-align: left; cursor: pointer; }
  .booking-summary b { color: var(--primary); font-weight: 700; white-space: nowrap; }
  .booking-box.is-searched:not(.is-editing) .booking-form { display: none; }
  .booking-box.is-editing .booking-summary { display: none; }
}

/* Hotel page: other hotels in the same city (2026-10-14). */
.hotel-area { margin-bottom: 2.5rem; }
.hotel-area h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--color-8); }
.hotel-area-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; }
.hotel-area-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 44px; padding: .55rem .85rem; border: 1px solid var(--color-2); border-radius: 10px; background: #fff; }
.hotel-area-list a { color: var(--color-9); font-weight: 600; text-decoration: none; }
.hotel-area-list a:hover { color: var(--primary); text-decoration: underline; }
.hotel-area-score { flex: none; padding: .1rem .45rem; border-radius: 6px; background: var(--primary); color: #fff; font-size: .8rem; font-weight: 700; }
.hotel-area-all { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-top: .5rem; font-weight: 700; color: var(--primary); }