/* fonts.css */
/* Generated by design/fetch_fonts.py. Font: Onest, SIL Open Font License 1.1. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/onest-latin-az.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0130-0131, U+011E-011F, U+015E-015F, U+018F, U+0259, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BC, U+2122, U+2212;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-az.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0130-0131, U+011E-011F, U+015E-015F, U+018F, U+0259, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BC, U+2122, U+2212;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 105.16%;
  ascent-override: 92.24%;
  descent-override: 29.00%;
  line-gap-override: 0.00%;
}

/* tokens.css */
/* Generated by design/build_tokens.py from design/tokens.json. Do not edit by hand. */
:root {

  /* color */
  --color-navy-950: #061A2E;
  --color-navy-900: #0B2540;
  --color-navy-800: #123558;
  --color-navy-700: #1A4670;
  --color-navy-600: #235A8A;
  --color-navy-500: #3C76A8;
  --color-navy-400: #6B9AC4;
  --color-navy-300: #9FBDDA;
  --color-navy-200: #CADBEB;
  --color-navy-100: #E5EEF6;
  --color-navy-50: #F2F7FB;
  --color-turquoise-900: #063F42;
  --color-turquoise-800: #085A5D;
  --color-turquoise-700: #0A6F73;
  --color-turquoise-600: #0C8A8E;
  --color-turquoise-500: #15ABAC;
  --color-turquoise-400: #3EC6C2;
  --color-turquoise-300: #7EDCD6;
  --color-turquoise-200: #B7EDE8;
  --color-turquoise-100: #DCF6F3;
  --color-turquoise-50: #EEFBF9;
  --color-coral-900: #6B1E10;
  --color-coral-800: #8C2816;
  --color-coral-700: #B0361E;
  --color-coral-600: #CF4427;
  --color-coral-500: #EC5B3D;
  --color-coral-400: #F3826B;
  --color-coral-300: #F7A996;
  --color-coral-200: #FBCEC2;
  --color-coral-100: #FDE7E1;
  --color-coral-50: #FEF4F1;
  --color-sand-400: #D6C2A0;
  --color-sand-300: #E4D5BC;
  --color-sand-200: #EFE5D4;
  --color-sand-100: #F6F0E6;
  --color-sand-50: #FBF8F3;
  --color-sunset-300: #FFB650;
  --color-sunset-500: #F5A23B;
  --color-sunset-600: #E68C25;
  --color-sunset-700: #9F5000;
  --color-gray-900: #18212D;
  --color-gray-800: #2A3442;
  --color-gray-700: #3F4B5B;
  --color-gray-600: #566273;
  --color-gray-500: #6F7B8B;
  --color-gray-400: #9AA4B2;
  --color-gray-300: #C5CCD5;
  --color-gray-200: #DFE3E9;
  --color-gray-100: #EDF0F3;
  --color-gray-50: #F6F7F9;
  --color-white: #FFFFFF;
  --color-success-700: #1C6B3B;
  --color-success-500: #2E9457;
  --color-success-100: #E2F3E8;
  --color-warning-700: #7F5300;
  --color-warning-500: #C98A0C;
  --color-warning-100: #FCF0D4;
  --color-error-700: #A3173A;
  --color-error-500: #D12D55;
  --color-error-100: #FCE6EB;

  /* semantic */
  --color-bg-page: var(--color-white);
  --color-bg-surface: var(--color-white);
  --color-bg-surface-muted: var(--color-sand-100);
  --color-bg-surface-sunken: var(--color-gray-50);
  --color-bg-inverse: var(--color-navy-900);
  --color-bg-inverse-raised: var(--color-navy-800);
  --color-bg-overlay: rgb(6 26 46 / 0.56);
  --color-bg-scrim-text: rgb(6 26 46 / 0.78);
  --color-bg-scrim-fade: rgb(6 26 46 / 0);
  --color-text-default: var(--color-navy-900);
  --color-text-muted: var(--color-gray-700);
  --color-text-subtle: var(--color-gray-600);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-muted: var(--color-navy-200);
  --color-text-link: var(--color-turquoise-800);
  --color-text-link-hover: var(--color-navy-900);
  --color-text-link-inverse: var(--color-turquoise-300);
  --color-text-price: var(--color-sunset-700);
  --color-text-price-inverse: var(--color-sunset-300);
  --color-text-destination: var(--color-sunset-700);
  --color-text-disclosure-icon: var(--color-sunset-700);
  --color-text-success: var(--color-success-700);
  --color-text-warning: var(--color-warning-700);
  --color-text-error: var(--color-error-700);
  --color-border-subtle: var(--color-gray-200);
  --color-border-default: var(--color-gray-300);
  --color-border-control: var(--color-gray-500);
  --color-border-strong: var(--color-navy-900);
  --color-border-inverse: var(--color-navy-700);
  --color-action-primary-bg: var(--color-coral-700);
  --color-action-primary-bg-hover: var(--color-coral-800);
  --color-action-primary-text: var(--color-white);
  --color-action-hero-bg: var(--color-sunset-500);
  --color-action-hero-bg-hover: var(--color-sunset-600);
  --color-action-hero-text: var(--color-navy-950);
  --color-action-secondary-bg: var(--color-navy-900);
  --color-action-secondary-bg-hover: var(--color-navy-800);
  --color-action-secondary-text: var(--color-white);
  --color-action-tertiary-border: var(--color-navy-900);
  --color-action-tertiary-text: var(--color-navy-900);
  --color-action-tertiary-bg-hover: var(--color-navy-50);
  --color-action-whatsapp-bg: var(--color-turquoise-800);
  --color-action-whatsapp-bg-hover: var(--color-turquoise-900);
  --color-action-whatsapp-text: var(--color-white);
  --color-action-disabled-bg: var(--color-gray-200);
  --color-action-disabled-text: var(--color-gray-600);
  --color-accent-brand: var(--color-turquoise-500);
  --color-accent-warm: var(--color-coral-500);
  --color-accent-sand: var(--color-sand-300);
  --color-status-success-bg: var(--color-success-100);
  --color-status-warning-bg: var(--color-warning-100);
  --color-status-error-bg: var(--color-error-100);
  --color-status-info-bg: var(--color-navy-100);
  --color-badge-neutral-bg: var(--color-sand-200);
  --color-badge-neutral-text: var(--color-navy-900);
  --color-badge-b2b-bg: var(--color-turquoise-100);
  --color-badge-b2b-text: var(--color-turquoise-900);
  --color-focus-ring: var(--color-turquoise-600);
  --color-focus-ring-inverse: var(--color-turquoise-300);

  /* font.family */
  --font-family-sans: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-family-display: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-family-hero: "Cormorant Garamond", Georgia, serif;

  /* font.weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* font.size */
  --font-size-display: clamp(2.25rem, 1.5rem + 3.75vw, 4.75rem);
  --font-size-h1: clamp(2rem, 1.55rem + 2.25vw, 3.25rem);
  --font-size-h2: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --font-size-h3: clamp(1.1875rem, 1.125rem + 0.3vw, 1.375rem);
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-caption: 0.8125rem;
  --font-size-button: 1rem;
  --font-size-overline: 0.75rem;

  /* font.line-height */
  --line-height-display: 1.02;
  --line-height-h1: 1.08;
  --line-height-h2: 1.15;
  --line-height-h3: 1.3;
  --line-height-body: 1.6;
  --line-height-small: 1.5;
  --line-height-caption: 1.4;
  --line-height-button: 1.25;

  /* font.tracking */
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --tracking-overline: 0.08em;
  --tracking-wordmark: 0.32em;

  /* space */
  --space-0: 0;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);
  --space-stack: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);

  /* radius */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-sm: 0 1px 2px rgb(11 37 64 / 0.06), 0 1px 3px rgb(11 37 64 / 0.08);
  --shadow-md: 0 4px 12px rgb(11 37 64 / 0.10);
  --shadow-lg: 0 12px 32px rgb(11 37 64 / 0.18);

  /* size */
  --size-container-sm: 40rem;
  --size-container-md: 48rem;
  --size-container-lg: 64rem;
  --size-container-xl: 75rem;
  --size-container-2xl: 85rem;
  --size-prose: 68ch;
  --size-control-sm: 2.25rem;
  --size-control-md: 2.75rem;
  --size-control-lg: 3.25rem;
  --size-input: 3rem;
  --size-tap-min: 2.75rem;
  --size-icon-sm: 1rem;
  --size-icon-md: 1.25rem;
  --size-icon-lg: 1.5rem;
  --size-logo-height: 4rem;
  --size-logo-height-lg: 4.5rem;
  --size-header-height: 3.5rem;
  --size-header-height-lg: 4.5rem;
  --size-booking-bar-height: 4.5rem;
  --size-border: 1px;
  --size-border-strong: 2px;
  --size-border-accent: 4px;
  --size-chevron: 0.3125rem;
  --size-focus-ring: 3px;
  --size-focus-offset: 2px;

  /* motion */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 320ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(0, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* z */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-dialog: 500;
  --z-toast: 600;
  --z-skip-link: 700;

  /* aspect */
  --aspect-card: 4 / 3;
  --aspect-hero-mobile: 4 / 5;
  --aspect-hero-desktop: 21 / 9;
  --aspect-gallery: 3 / 2;
  --aspect-tile: 4 / 5;
  --aspect-thumb: 1 / 1;
}

/* Breakpoints (use literally in media queries): sm 30em, md 48em, lg 64em, xl 80em, 2xl 90em */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
  }
}

/* base.css */
/*
  Deniz Thai — foundations.
  Depends on tokens.css and fonts.css (generated in design/build/). Mobile-first; no hard-coded values
  except structural ones (0, 1, 100%). Breakpoints: sm 30em, md 48em, lg 64em, xl 80em, 2xl 90em.
*/

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-offset) + var(--space-4));
  scroll-padding-block-end: calc(var(--size-booking-bar-height) + var(--space-4));
  color-scheme: light;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  overflow-x: clip;
  background: var(--color-bg-page);
  color: var(--color-text-default);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* <picture> only wraps sources; the <img> inside is what layouts size and position. */
picture {
  display: contents;
}

/* With <picture> "transparent", its <source> elements must not become layout items (e.g. extra grid rows). */
source {
  display: none;
}

img,
svg,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

p,
li,
dd,
figcaption {
  overflow-wrap: break-word;
}

/* Long Russian/Azerbaijani words: hyphenate prose (requires correct lang attribute). */
p,
li {
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* Zero specificity, so any component class can set its own list padding. */
:where(ul[class], ol[class]) {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
}

[hidden] {
  display: none !important;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
  color: var(--color-text-default);
  /* Long Russian/Azerbaijani words must never push the layout wider than the screen.
     "anywhere" (unlike "break-word") also lets grid/flex items shrink below the longest word. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

h1,
.text-h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h1);
  letter-spacing: var(--tracking-heading);
}

h2,
.text-h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-heading);
}

h3,
.text-h3 {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h3);
}

h4 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h3);
}

.text-display,
.text-h1,
.text-h2,
.text-h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.text-display {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-display);
  letter-spacing: var(--tracking-display);
}

.text-lead {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}

small,
.text-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.text-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-subtle);
}

/* Uppercase is language-aware (az: i → İ) only when the element's lang is correct. */
.text-overline {
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

p {
  max-inline-size: var(--size-prose);
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}

/* ---------- Links ---------- */
a {
  color: var(--color-text-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration-thickness: 2px;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: var(--size-focus-ring) solid var(--color-focus-ring);
  outline-offset: var(--size-focus-offset);
  border-radius: var(--radius-xs);
}

.surface-inverse :focus-visible {
  outline-color: var(--color-focus-ring-inverse);
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-skip-link);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
  outline-color: var(--color-focus-ring-inverse);
}

.container {
  inline-size: 100%;
  max-inline-size: var(--size-container-xl);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.surface-inverse {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.surface-inverse h1,
.surface-inverse h2,
.surface-inverse h3 {
  color: var(--color-text-inverse);
}

/* Plain text links only; components (buttons, brand) keep their own colours. */
.surface-inverse a:not([class]) {
  color: var(--color-text-link-inverse);
}

.surface-inverse a:not([class]):hover {
  color: var(--color-text-inverse);
}

.surface-muted {
  background: var(--color-bg-surface-muted);
}

::selection {
  background: var(--color-turquoise-200);
  color: var(--color-navy-900);
}

/* components.css */
/*
  Deniz Thai — design-system components.
  Every value comes from tokens.css. Components never set outer margins; layouts own spacing.
*/

/* ---------- Icon ----------
   Inline SVG, decorative (aria-hidden). Size follows tokens; colour follows the text. */
.icon {
  inline-size: var(--size-icon-md);
  block-size: var(--size-icon-md);
  flex: none;
}

/* ---------- Brand (logo) ----------
   The supplied light-surface logo retains its artwork and tagline. */
.brand {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-tap-min);
  text-decoration: none;
}

.brand__mark {
  display: block;
  block-size: var(--size-logo-height);
  inline-size: auto;
}

@media (min-width: 64em) {
  .brand__mark {
    block-size: var(--size-logo-height-lg);
  }
}

/* ---------- Buttons ----------
   Hierarchy: primary (coral, one per view: Reserve / Send request) > secondary (navy) >
   tertiary (outline) > ghost (text). WhatsApp has its own variant. */
.btn {
  --btn-bg: var(--color-action-secondary-bg);
  --btn-bg-hover: var(--color-action-secondary-bg-hover);
  --btn-text: var(--color-action-secondary-text);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--size-control-md);
  padding-inline: var(--space-5);
  border: var(--size-border) solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-button);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Extremely narrow cases (large user fonts on small phones): labels may wrap rather than overflow. */
.btn {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-text);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  --btn-bg: var(--color-action-primary-bg);
  --btn-bg-hover: var(--color-action-primary-bg-hover);
  --btn-text: var(--color-action-primary-text);
}

.btn--tertiary {
  --btn-bg: var(--color-bg-surface);
  --btn-bg-hover: var(--color-action-tertiary-bg-hover);
  --btn-text: var(--color-action-tertiary-text);
  --btn-border: var(--color-action-tertiary-border);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-action-tertiary-bg-hover);
  --btn-text: var(--color-text-default);
  padding-inline: var(--space-3);
}

.btn--whatsapp {
  --btn-bg: var(--color-action-whatsapp-bg);
  --btn-bg-hover: var(--color-action-whatsapp-bg-hover);
  --btn-text: var(--color-action-whatsapp-text);
}

.btn--sm {
  min-block-size: var(--size-control-sm);
  padding-inline: var(--space-3);
  font-size: var(--font-size-small);
}

.btn--lg {
  min-block-size: var(--size-control-lg);
  padding-inline: var(--space-6);
}

.btn--block {
  inline-size: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-bg: var(--color-action-disabled-bg);
  --btn-bg-hover: var(--color-action-disabled-bg);
  --btn-text: var(--color-action-disabled-text);
  --btn-border: transparent;
  cursor: not-allowed;
  transform: none;
}

.btn[aria-busy="true"] {
  cursor: progress;
}

/* Round icon-only button (slider, photo viewer). The accessible name is visually hidden text. */
.icon-button {
  display: inline-grid;
  place-items: center;
  inline-size: var(--size-tap-min);
  block-size: var(--size-tap-min);
  padding: 0;
  border: var(--size-border) solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
  touch-action: manipulation;
}

.icon-button:hover {
  background: var(--color-action-tertiary-bg-hover);
}

.icon-button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.icon-button--inverse {
  border-color: var(--color-border-inverse);
  background: var(--color-bg-scrim-text);
  color: var(--color-text-inverse);
}

.icon-button--inverse:hover {
  background: var(--color-bg-inverse-raised);
}

.icon-button--inverse:focus-visible {
  outline-color: var(--color-focus-ring-inverse);
}

.btn__icon {
  inline-size: var(--size-icon-md);
  block-size: var(--size-icon-md);
  flex: none;
}

/* ---------- Form fields ---------- */
.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start; /* beside a field with a hint, the label and input keep their size and line up */
  gap: var(--space-2);
}

.field > label,
.field__label {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-small);
}

.optional,
.hint {
  color: var(--color-text-subtle);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-small);
}

.input,
.field input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.field select,
.field textarea {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--size-input);
  padding: var(--space-3) var(--space-4);
  border: var(--size-border) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  font-size: var(--font-size-body); /* ≥ 16px prevents iOS zoom on focus */
  line-height: var(--line-height-small);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.field textarea {
  min-block-size: calc(var(--size-input) * 2.5);
  resize: vertical;
}

.field select {
  appearance: none;
  padding-inline-end: var(--space-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - var(--space-5)) 50%,
    calc(100% - var(--space-5) + var(--size-chevron)) 50%;
  background-size: var(--size-chevron) var(--size-chevron);
  background-repeat: no-repeat;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--color-border-strong);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--color-border-strong);
  outline-offset: 0;
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: var(--color-bg-surface-sunken);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

/* :is() keeps specificity above the input:not([type=…]) rule above. */
.field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--color-text-error);
  border-width: var(--size-border-strong);
}

.field-error {
  display: flex;
  gap: var(--space-2);
  color: var(--color-text-error);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

/* Error is never signalled by colour alone: an icon-like prefix and text accompany it. */
.field-error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  border-radius: var(--radius-pill);
  background: var(--color-text-error);
  color: var(--color-white);
  font-size: 0.8em;
  font-weight: var(--font-weight-bold);
}

.field--checkbox {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-3);
}

.field--checkbox input,
.check {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.125rem;
  accent-color: var(--color-navy-900);
}

.field--checkbox label {
  font-weight: var(--font-weight-regular);
  overflow-wrap: anywhere; /* long Russian words at large text sizes */
}

.field--checkbox .field-error {
  grid-column: 1 / -1; /* under box and label; in the box's column it would squeeze the label to one letter */
}

fieldset {
  border: 0;
  padding: 0;
  min-inline-size: 0;
}

legend {
  padding: 0;
  margin-block-end: var(--space-3);
  font-weight: var(--font-weight-semibold);
}

/* ---------- Error summary & notices ---------- */
.error-summary,
.notice {
  padding: var(--space-4) var(--space-5);
  border-inline-start: var(--size-border-accent) solid var(--notice-accent, var(--color-navy-900));
  border-radius: var(--radius-sm);
  background: var(--notice-bg, var(--color-status-info-bg));
  color: var(--color-text-default);
}

.error-summary {
  --notice-accent: var(--color-text-error);
  --notice-bg: var(--color-status-error-bg);
}

.error-summary h2 {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-error);
}

.error-summary a {
  color: var(--color-text-error);
  font-weight: var(--font-weight-medium);
}

.notice--success {
  --notice-accent: var(--color-success-500);
  --notice-bg: var(--color-status-success-bg);
}

.notice--warning {
  --notice-accent: var(--color-warning-500);
  --notice-bg: var(--color-status-warning-bg);
}

/* ---------- Badge & chip ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-badge-neutral-bg);
  color: var(--color-badge-neutral-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-caption);
}

.badge--b2b {
  background: var(--color-badge-b2b-bg);
  color: var(--color-badge-b2b-text);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-tap-min);
  padding-inline: var(--space-4);
  border: var(--size-border) solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-default);
}

.chip[aria-current],
.chip[aria-pressed="true"] {
  border-color: var(--color-navy-900);
  background: var(--color-navy-900);
  color: var(--color-text-inverse);
}

/* ---------- Price ---------- */
.money {
  color: var(--color-text-price);
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.price data {
  color: var(--color-text-price);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.price s {
  color: var(--color-text-subtle);
}

.price s.money {
  color: var(--color-text-price);
}

/* ---------- Tour card ----------
   Photo-led and minimal: photo, title, duration, from-price. The title link is stretched over the
   whole card (one link, one tab stop); Save sits above it. No zoom or motion effects. */
.tour-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  block-size: 100%;
}

.tour-card img,
.tour-card__noimage {
  order: -1;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  margin-block-end: var(--space-2);
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--color-bg-surface-muted);
}

.tour-card__noimage {
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
}

.tour-card__title {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h3);
}

@media (min-width: 48em) {
  .tour-card__title {
    font-size: var(--font-size-body-lg);
  }
}

.tour-card__link {
  color: var(--color-text-default);
  text-decoration: none;
}

.tour-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  border-radius: var(--radius-lg);
}

.tour-card:hover .tour-card__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.tour-card:hover img {
  filter: brightness(0.96);
}

.tour-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.tour-card__meta .icon {
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
}

.tour-card__price {
  margin-block-start: auto;
}

/* ---------- Navigation link ---------- */
.nav-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-tap-min);
  padding-inline: var(--space-2);
  color: var(--color-text-default);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-block-end: var(--size-border-strong) solid transparent;
}

.nav-link:hover {
  color: var(--color-text-default);
  border-block-end-color: var(--color-border-default);
}

.nav-link[aria-current="page"] {
  border-block-end-color: var(--color-accent-brand);
}

/* ---------- Accordion (native <details>) ---------- */
.accordion {
  border-block-start: var(--size-border) solid var(--color-border-default);
}

.accordion > details {
  border-block-end: var(--size-border) solid var(--color-border-default);
}

.accordion > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: var(--size-tap-min);
  padding-block: var(--space-4);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
}

.accordion > details > summary::-webkit-details-marker {
  display: none;
}

/* Plus sign that turns into a minus; drawn with borders, so no extra glyphs or colours. */
.accordion > details > summary::after {
  content: "";
  flex: none;
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
  background:
    linear-gradient(currentColor, currentColor) center / 100% var(--size-border-strong) no-repeat,
    linear-gradient(currentColor, currentColor) center / var(--size-border-strong) 100% no-repeat;
  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}

.accordion > details[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% var(--size-border-strong) no-repeat;
}

.accordion > details > summary:hover {
  color: var(--color-text-link);
}

.accordion > details > :not(summary) {
  padding-block-end: var(--space-5);
  color: var(--color-text-muted);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-small);
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--space-2);
  color: var(--color-text-subtle);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-text-default);
  text-decoration: underline;
}

.breadcrumb a[aria-current="page"] {
  color: var(--color-text-default);
  font-weight: var(--font-weight-medium);
}

/* ---------- Pagination ---------- */
.pagination ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination a {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--size-tap-min);
  min-block-size: var(--size-tap-min);
  padding-inline: var(--space-3);
  border: var(--size-border) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.pagination a:hover {
  border-color: var(--color-border-strong);
}

.pagination a[aria-current="page"] {
  border-color: var(--color-navy-900);
  background: var(--color-navy-900);
  color: var(--color-text-inverse);
}

/* ---------- Card ---------- */
.card {
  padding: var(--space-5);
  border: var(--size-border) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

@media (min-width: 48em) {
  .card {
    padding: var(--space-6);
  }
}

.card > * + * {
  margin-block-start: var(--space-4);
}

.card.form-section > * + *,
.card.auth-card > * + * {
  margin-block-start: 0;
}

/* ---------- Key–value list (dl) ---------- */
.kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.kv > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: var(--size-border) solid var(--color-border-subtle);
}

.kv > div:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.kv dt {
  min-inline-size: 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere; /* long labels ("Дополнительно") in narrow columns at large text sizes */
}

.kv dd {
  min-inline-size: 0;
  margin: 0;
  font-weight: var(--font-weight-medium);
  text-align: end;
  overflow-wrap: anywhere;
}

/* A note under a key-value list (About: company details) */
.kv + .hint {
  margin-block-start: var(--space-5);
}

.kv--total > div:last-child {
  padding-block-start: var(--space-3);
  border-block-start: var(--size-border-strong) solid var(--color-border-strong);
}

.kv--total > div:last-child dd {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
}

/* ---------- Table (stacks into labelled rows on small screens) ---------- */
.table {
  inline-size: 100%;
  font-size: var(--font-size-small);
}

.table caption {
  margin-block-end: var(--space-3);
  color: var(--color-text-muted);
  text-align: start;
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--size-border) solid var(--color-border-subtle);
  text-align: start;
  vertical-align: top;
}

.table thead th {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

@media (max-width: 47.99em) {
  .table,
  .table tbody {
    display: block;
  }

  .table caption {
    display: block;
  }

  .table th,
  .table td {
    overflow-wrap: anywhere;
  }

  .table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .table tr {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    margin-block-end: var(--space-3);
    border: var(--size-border) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
  }

  .table th,
  .table td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0;
    border: 0;
  }

  .table td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
  }

  .table tbody th {
    font-size: var(--font-size-body);
  }
}

/* ---------- Numbered steps ---------- */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  position: relative;
  padding-inline-start: calc(var(--size-control-sm) + var(--space-4));
  min-block-size: var(--size-control-sm);
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: var(--size-control-sm);
  block-size: var(--size-control-sm);
  border-radius: var(--radius-pill);
  background: var(--color-turquoise-100);
  color: var(--color-turquoise-900);
  font-weight: var(--font-weight-bold);
}

/* ---------- Check list ---------- */
.check-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  overflow-wrap: break-word;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list > li {
  position: relative;
  padding-inline-start: var(--space-6);
}

.check-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--space-1);
  inset-block-start: 0.45em;
  inline-size: 0.35em;
  block-size: 0.65em;
  border: solid var(--color-turquoise-700);
  border-width: 0 var(--size-border-strong) var(--size-border-strong) 0;
  transform: rotate(45deg);
}

/* Not included: a cross (two strokes) in place of the check */
.check-list--no > li::before,
.check-list--no > li::after {
  content: "";
  position: absolute;
  inset-inline-start: var(--space-1);
  inset-block-start: 0.7em;
  inline-size: 0.75em;
  block-size: var(--size-border-strong);
  border: 0;
  background: var(--color-text-muted);
  transform: rotate(45deg);
}

.check-list--no > li::after {
  transform: rotate(-45deg);
}

/* ---------- Empty state ---------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-5);
  border: var(--size-border) dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  text-align: center;
}

.empty-state p {
  color: var(--color-text-muted);
}

/* ---------- Horizontal rail (scroll-snap, no JavaScript) ---------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80%, 20rem);
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.rail > * {
  scroll-snap-align: start;
}

/* ---------- Target size (WCAG 2.5.8) ----------
   Stand-alone text links (not inside running text) get vertical padding so the tap target is ≥ 24px. */
.breadcrumb a,
.kv dd a,
.error-summary li a,
.auth-links a,
.auth-card .text-small a {
  display: inline-block;
  padding-block: var(--space-1);
}

/* Azerbaijani writes "from" as a suffix: "2.600 THB-dən" (no gap, same weight as the amount). */
.price > data + .price__from {
  margin-inline-start: calc(var(--space-1) * -1);
  color: var(--color-text-price);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
}

.booking-panel__price > data + .price__from {
  font-size: var(--font-size-h2);
}

/* layout.css */
/*
  Deniz Thai — site chrome (header, footer, floating WhatsApp). Mobile-first, image-first direction.
  Header (D-19–D-22): logo with search beneath it; language and currency stay outside the phone menu.
  Agency-only Cart navigation belongs to the authenticated server; from 80em the main navigation sits beside the logo.
*/

/* ---------- Header ---------- */
/* A logo-height row plus a tap-sized search row keep sticky content below the header. */
:root {
  --header-offset: calc(var(--size-logo-height) + var(--size-tap-min) + 2 * var(--space-1));
}

@media (min-width: 64em) {
  :root {
    --header-offset: calc(var(--size-logo-height-lg) + var(--size-tap-min) + 2 * var(--space-1));
  }
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--color-bg-surface);
  border-block-end: var(--size-border) solid var(--color-border-subtle);
}

.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: repeat(2, minmax(var(--size-tap-min), auto));
  align-items: center;
  column-gap: var(--space-2);
  max-inline-size: var(--size-container-2xl);
  margin-inline: auto;
  padding: var(--space-1) var(--space-gutter);
}

.site-header__brand {
  grid-column: 1 / 3;
  grid-row: 1;
  justify-self: start;
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list .nav-link {
  white-space: nowrap;
}

.site-header__tools {
  display: contents;
}

/* The search target sits directly beneath the logo, not beside it: a bordered pill with "Search tours", the same as
   the currency button on the right (owner, 2026-10-11), so the header's controls read as one set. */
.site-header__search.header-action {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  gap: var(--space-2);
  max-inline-size: 100%;
  padding-inline: var(--space-3) var(--space-4);
  border: var(--size-border) solid var(--color-border-default);
  border-radius: var(--radius-pill);
  color: var(--color-text-default);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.site-header__search.header-action:hover {
  border-color: var(--color-border-strong);
}

.site-header__search .icon {
  flex: none;
  inline-size: var(--size-icon-md);
  block-size: var(--size-icon-md);
}

/* Narrower than the smallest supported phone (320 px): the round icon only; the words stay for screen readers. */
@media (max-width: 19.99em) {
  .site-header__search.header-action {
    inline-size: var(--size-tap-min);
    padding-inline: 0;
  }

  .site-header__search-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}

.site-header__language {
  grid-column: 2;
  grid-row: 2;
}

.site-header__currency {
  grid-column: 3;
  grid-row: 2;
}

.menu {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

/* "For agencies": a quiet text link on desktop; below 80em it is in the menu. */
.site-header__agencies {
  display: none;
}

@media (min-width: 80em) {
  .site-header__agencies {
    display: inline-flex;
    margin-inline-end: var(--space-2);
    white-space: nowrap;
  }
}

/* Language and currency remain visible in the header at every width. */

/* Flags (D-20): small SVGs, one size, with a hairline so white stripes stay visible on white. */
.flag {
  flex: none;
  inline-size: 1.3125rem;
  block-size: 0.875rem;
  border-radius: var(--radius-xs);
  box-shadow: 0 0 0 var(--size-border) var(--color-border-subtle);
  object-fit: cover;
}

@media (min-width: 48em) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--space-4);
  }

  .site-header__brand {
    grid-column: 1;
  }

  .site-header__search.header-action {
    margin-block: var(--space-2) var(--space-1); /* clear of "Travel with heart" under the logo */
  }

  .site-nav {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .site-header__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-column: 3;
    grid-row: 1 / 3;
    gap: var(--space-1);
  }
}

.header-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-inline-size: var(--size-tap-min);
  min-block-size: var(--size-tap-min);
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-default);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.header-action:hover {
  background: var(--color-action-tertiary-bg-hover);
  color: var(--color-text-default);
}

.header-action[aria-current="page"] {
  box-shadow: inset 0 calc(var(--size-border-strong) * -1) 0 var(--color-accent-brand);
}

/* On phones the currency dropdown spans the header; language stays beside its flag. */
@media (max-width: 47.99em) {
  /* Room between the logo ("Travel with heart") and the row of search, language and currency (owner, 2026-10-11) */
  .site-header__inner {
    row-gap: var(--space-2);
    padding-block-end: var(--space-2);
  }

  .site-header .site-header__currency {
    position: static;
  }

  .site-header .site-header__currency .prefs-menu__panel {
    inset-inline: var(--space-gutter);
    inline-size: auto;
  }
}

/* Language and currency dropdowns (two separate controls, D-20) */
.prefs-menu {
  position: relative;
}

.prefs-menu__section {
  display: grid;
  gap: var(--space-1);
}

.prefs-menu__title {
  padding-inline: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}

.prefs-menu__code {
  flex: none;
  inline-size: 3.25em;
  font-weight: var(--font-weight-semibold);
}

.prefs-menu__name {
  min-inline-size: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.prefs-menu__note {
  padding-inline: var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--font-size-small);
}

.prefs-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--size-tap-min);
  padding-inline: var(--space-3) var(--space-2);
  border: var(--size-border) solid var(--color-border-default);
  border-radius: var(--radius-pill);
  color: var(--color-text-default);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.prefs-menu__toggle::-webkit-details-marker,
.menu__toggle::-webkit-details-marker {
  display: none;
}

.prefs-menu__toggle:hover {
  border-color: var(--color-border-strong);
}

.site-header__language .prefs-menu__toggle {
  justify-content: center;
  min-inline-size: var(--size-tap-min);
  padding-inline: var(--space-2);
}

.site-header__language .prefs-menu__panel {
  inline-size: max-content;
  padding: var(--space-2);
}

.site-header__language .prefs-menu__list {
  grid-template-columns: repeat(3, var(--size-tap-min));
  gap: var(--space-1);
}

.site-header__language .prefs-menu__option {
  justify-content: center;
  padding-inline: 0;
}

.prefs-menu__toggle .icon {
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.prefs-menu[open] .prefs-menu__toggle .icon {
  transform: rotate(180deg);
}



.prefs-menu__panel,
.menu__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  inline-size: min(20rem, calc(100vw - 2 * var(--space-gutter)));
  padding: var(--space-5);
  border: var(--size-border) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-lg);
}

.prefs-menu__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.prefs-menu__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-tap-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-default);
  text-decoration: none;
}

.prefs-menu__option:hover {
  background: var(--color-action-tertiary-bg-hover);
  color: var(--color-text-default);
}

.prefs-menu__option[aria-current] {
  font-weight: var(--font-weight-semibold);
  box-shadow: inset var(--size-border-accent) 0 0 var(--color-accent-brand);
}

/* Mobile menu */
.menu {
  position: static;
}

.menu__toggle {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--size-tap-min);
  min-block-size: var(--size-tap-min);
  border-radius: var(--radius-md);
  color: var(--color-text-default);
  cursor: pointer;
  list-style: none;
}

.menu__toggle:hover {
  background: var(--color-action-tertiary-bg-hover);
}

.menu__panel {
  inset-inline: var(--space-gutter);
  inline-size: auto;
  inset-block-start: calc(100% + var(--space-1));
}

.menu__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  overflow-wrap: anywhere; /* long words ("Зарегистрировать") at large text sizes */
  min-block-size: var(--size-control-lg);
  border-block-end: var(--size-border) solid var(--color-border-subtle);
  color: var(--color-text-default);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

@media (min-width: 80em) {
  .site-nav {
    display: block;
  }

  .menu {
    display: none;
  }
}

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  inset-inline-end: var(--space-4);
  inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-control-lg);
  block-size: var(--size-control-lg);
  border-radius: var(--radius-pill);
  background: var(--color-action-whatsapp-bg);
  color: var(--color-action-whatsapp-text);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}

.whatsapp-float:hover {
  background: var(--color-action-whatsapp-bg-hover);
  color: var(--color-action-whatsapp-text);
}

/* Tour pages have their own WhatsApp button (booking panel and bar), and a floating one would cover the
   booking form; form pages must not have fields hidden behind it either. */
.page--with-bar + .site-footer .whatsapp-float,
.page--no-float + .site-footer .whatsapp-float {
  display: none;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-block-start: var(--space-section);
  padding-block: var(--space-12) var(--space-6);
  font-size: var(--font-size-small);
}

/* Room below the last line for the floating WhatsApp button, so it never covers the footer text. */
main:not(.page--with-bar, .page--no-float) + .site-footer {
  padding-block-end: calc(var(--space-6) + var(--size-control-lg) + var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.site-footer__inner {
  max-inline-size: var(--size-container-2xl);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.site-footer .site-footer__heading {
  margin-block-end: var(--space-3);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
}

.site-footer__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  overflow-wrap: anywhere;
  margin: 0;
  padding: 0;
  list-style: none;
  font-style: normal;
}

.site-footer__list a {
  display: inline-block;
  max-inline-size: 100%;
  padding-block: var(--space-1);
  overflow-wrap: anywhere;
}

@media (min-width: 48em) {
  .site-footer__inner {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
}

/* Open menus scroll independently on short screens. */
.menu__panel,
.prefs-menu__panel {
  max-block-size: calc(100dvh - var(--header-offset) - var(--space-4));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Agency Cart link (agency.js adds it for signed-in approved agencies only; public pages never contain it).
   Phones: first header row, left of the menu button. */
.site-header__cart {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.site-header__cart .icon {
  inline-size: var(--size-icon-md);
  block-size: var(--size-icon-md);
}

.cart-count {
  position: absolute;
  inset-block-start: 0.125rem;
  inset-inline-end: 0.125rem;
  min-inline-size: 1.125rem;
  padding-inline: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: 1.125rem;
  text-align: center;
}

.cart-count:empty {
  display: none;
}

/* pages.css */
/*
  Deniz Thai — page layouts (Phase 6). Mobile-first.
  Pages use <main class="page">: a full-bleed grid whose children sit in the content column,
  except .full-bleed and .band children, which span the viewport.
*/

/* ---------- Page grid ---------- */
.page {
  --content: min(100% - 2 * var(--space-gutter), var(--size-container-xl));

  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--space-gutter), 1fr)
    [content-start] var(--content)
    [content-end] minmax(var(--space-gutter), 1fr)
    [full-end];
  align-content: start;
  padding-block: var(--space-6) 0;
}

.page > * {
  grid-column: content;
  min-inline-size: 0;
}

.page > .full-bleed {
  grid-column: full;
}

/* Single-column grids may shrink below their widest word or control (long translations,
   large user font sizes). Placed before component rules so their media queries still win. */
.tour,
.tour__header,
.tour__layout,
.tour__content,
.booking-panel,
.booking-panel form,
.page-intro,
.form-stack,
.form-section,
.confirmation,
.catalog,
.auth-card,
.error-page,
.split {
  grid-template-columns: minmax(0, 1fr);
}

.page > * + * {
  margin-block-start: var(--space-6);
}

.page > * + section,
.page > * + .band,
.page > section + * {
  margin-block-start: var(--space-section);
}

.page > .breadcrumb + * {
  margin-block-start: var(--space-4);
}

/* Full-width coloured band whose content aligns with the page column. */
.band {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: var(--space-section);
}

.band > * {
  grid-column: content;
}

.band > * + * {
  margin-block-start: var(--space-6);
}

/* Section heading row: title + optional "see all" link. */
.page section > h2 {
  margin-block-end: var(--space-5);
}

.section-more {
  margin-block-start: var(--space-5);
  font-weight: var(--font-weight-semibold);
}

.page-intro {
  display: grid;
  gap: var(--space-3);
  max-inline-size: var(--size-prose);
}

.page-intro > p {
  color: var(--color-text-muted);
  font-size: var(--font-size-body-lg);
}

/* Narrow single-column pages (forms, confirmation, auth, legal). */
.page--narrow {
  --content: min(100% - 2 * var(--space-gutter), var(--size-container-md));
}

.page--auth {
  --content: min(100% - 2 * var(--space-gutter), 28rem);
  padding-block-start: var(--space-12);
}

.prose {
  max-inline-size: var(--size-prose);
}

.prose > * + * {
  margin-block-start: var(--space-4);
}

.prose ul:not([class]),
.prose ol:not([class]) {
  padding-inline-start: var(--space-5);
}

.prose li + li {
  margin-block-start: var(--space-2);
}

/* ---------- Tour grid: 2 columns on phones so many tours are visible at once ---------- */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .tour-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8) var(--space-5);
  }
}

@media (min-width: 64em) {
  .tour-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ---------- Home: hero slider ----------
   CSS scroll-snap carousel; works without JavaScript (swipe or scroll; dot links jump to slides).
   Phase 8 adds previous/next buttons and live dot state. No autoplay. */
.hero-slider {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  margin-block-start: calc(var(--space-6) * -1);
}

.hero-slider__track {
  grid-column: full;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% - 2 * var(--space-gutter) - var(--space-6));
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-gutter) 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-gutter);
  scrollbar-width: none;
}

.hero-slider__track::-webkit-scrollbar {
  display: none;
}

.hero-slide {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-navy-800);
  scroll-snap-align: start;
}

.hero-slide__media {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* A compact, solid scrim keeps white text readable on every photo; the fade sits above it. */
.hero-slide__content {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: var(--color-bg-scrim-text);
  color: var(--color-text-inverse);
}

.hero-slide__content::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 100%;
  block-size: var(--space-8);
  background: linear-gradient(to top, var(--color-bg-scrim-text), var(--color-bg-scrim-fade));
  pointer-events: none;
}

.hero-slide__eyebrow {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.hero-slide h1,
.hero-slide h2 {
  max-inline-size: 24ch;
  color: var(--color-text-inverse);
  font-family: var(--font-family-hero);
  font-size: clamp(1.875rem, 1.4rem + 2.5vw, 3rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.05;
  letter-spacing: 0;
}

/* Optional description of a slide (Admin → Ana səhifə slaydları); at most three lines, so the card keeps its size. */
.hero-slide__text {
  display: -webkit-box;
  max-inline-size: 48ch;
  overflow: hidden;
  font-size: var(--font-size-body);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.hero-slide__cta {
  --btn-bg: var(--color-action-hero-bg);
  --btn-bg-hover: var(--color-action-hero-bg-hover);
  --btn-text: var(--color-action-hero-text);

  justify-self: end;
  gap: var(--space-1);
  min-block-size: var(--size-tap-min);
  padding-inline: var(--space-3);
  font-size: var(--font-size-small);
}

@media (min-width: 48em) {
  .hero-slide__content {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--space-6);
  }

  .hero-slide__eyebrow,
  .hero-slide h1,
  .hero-slide h2 {
    grid-column: 1 / -1;
  }

  .hero-slide__cta {
    grid-column: 2;
    grid-row: 3;
  }

  /* The description sits left of the button, on the button's row. */
  .hero-slide__text {
    grid-column: 1;
    grid-row: 3;
  }

  /* A slide without the small text above its title: title on row 1, description and button on row 2. */
  .hero-slide__content:not(:has(> .hero-slide__eyebrow)) > .hero-slide__text,
  .hero-slide__content:not(:has(> .hero-slide__eyebrow)) > .hero-slide__cta {
    grid-row: 2;
  }
}

.btn--light {
  --btn-bg: var(--color-white);
  --btn-bg-hover: var(--color-navy-50);
  --btn-text: var(--color-navy-900);
}

.hero-slider__dots {
  grid-column: content;
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.hero-slider__dots a {
  display: grid;
  place-items: center;
  inline-size: var(--size-tap-min);
  block-size: var(--size-control-sm);
}

.hero-slider__dots a::before {
  content: "";
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-gray-400);
}

.hero-slider__dots a[aria-current]::before {
  inline-size: 1.75rem;
  background: var(--color-navy-900);
}

/* Previous/next (slider.js): at the ends of the dots row, from tablets up; phones swipe or use the dots. */
.hero-slider__controls {
  display: none;
}

@media (min-width: 48em) {
  .hero-slider__controls:not([hidden]) {
    grid-column: content;
    grid-row: 2;
    display: flex;
    justify-content: space-between;
    margin-block-start: var(--space-2);
    pointer-events: none;
  }

  .hero-slider__controls .icon-button {
    pointer-events: auto;
  }

  /* Only as wide as the dots, so the arrow buttons at either end stay clickable. */
  .hero-slider__dots {
    grid-row: 2;
    align-self: center;
    justify-self: center;
  }
}

@media (min-width: 48em) {
  .hero-slide {
    aspect-ratio: auto;
    block-size: min(72svh, 40rem);
    min-block-size: 26rem;
  }

  .hero-slide__content {
    padding: var(--space-8) var(--space-8) var(--space-6);
  }
}

@media (min-width: 64em) {
  .hero-slider__track {
    grid-auto-columns: min(100% - 2 * var(--space-gutter) - var(--space-16), var(--size-container-xl));
    padding-inline: max(var(--space-gutter), (100% - var(--size-container-xl)) / 2);
    scroll-padding-inline: max(var(--space-gutter), (100% - var(--size-container-xl)) / 2);
  }
}

/* Search card under the slider */
.hero-search {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-md);
}

.page > .hero-slider + .hero-search {
  margin-block-start: var(--space-5);
}

@media (min-width: 48em) {
  .hero-search {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
  }
}

/* ---------- Section header with a "see all" link ---------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-block-end: var(--space-5);
}

.page .section-head > h2 {
  margin: 0;
}

.section-head a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-inline-size: 100%; /* wraps only when there is no room (large text sizes) */
  font-weight: var(--font-weight-semibold);
}

.section-head a .icon {
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
}

/* ---------- Category tiles (big photos, name on the image) ---------- */
/* Nine categories form three rows; the remaining six open with "All 15". */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile-grid .destination-tile {
  aspect-ratio: 3 / 4;
  min-block-size: 8rem;
}

.tile-grid .destination-tile__text {
  padding: var(--space-6) var(--space-2) var(--space-2);
}

.tile-grid .destination-tile h3 {
  font-size: var(--font-size-caption);
  overflow-wrap: anywhere;
}

@media (max-width: 19.99em) {
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48em) {
  .tile-grid {
    gap: var(--space-4);
  }

  .tile-grid .destination-tile {
    aspect-ratio: 4 / 5;
  }

  .tile-grid .destination-tile__text {
    padding: var(--space-10) var(--space-4) var(--space-4);
  }

  .tile-grid .destination-tile h3 {
    font-size: var(--font-size-body-lg);
  }
}

@media (min-width: 64em) {
  .tile-grid {
    gap: var(--space-5);
  }

  .tile-grid .destination-tile {
    aspect-ratio: 4 / 3;
  }

  .tile-grid .destination-tile h3 {
    font-size: var(--font-size-h3);
  }
}

.destination-tile {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: var(--aspect-tile);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-navy-800);
  color: var(--color-text-inverse);
}



.destination-tile img {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.destination-tile:hover img {
  filter: brightness(0.94);
}

.destination-tile__text {
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  gap: var(--space-0-5);
  padding: var(--space-10) var(--space-4) var(--space-4);
  background: linear-gradient(to top, var(--color-bg-scrim-text) 60%, var(--color-bg-scrim-fade));
}

.destination-tile h3 {
  color: var(--color-text-inverse);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
}

.destination-tile h3 a {
  color: inherit;
  text-decoration: none;
}

.destination-tile h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.destination-tile p {
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-small);
}

@media (min-width: 64em) {
  .destination-tile h3 {
    font-size: var(--font-size-h3);
  }

  .destination-tile__text {
    padding: var(--space-12) var(--space-6) var(--space-5);
  }
}

/* ---------- Experience chips ---------- */
.chip-list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0 0 var(--space-1);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.chip-list::-webkit-scrollbar {
  display: none;
}

@media (min-width: 64em) {
  .chip-list {
    flex-wrap: wrap;
    overflow: visible;
  }
}

/* ---------- Why Deniz Thai ---------- */
.feature-list {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  align-content: start; /* an item with a shorter text keeps its heading in line with its neighbours */
  align-items: start;
}

.feature-list .icon {
  grid-row: span 2;
  inline-size: var(--size-control-md);
  block-size: var(--size-control-md);
  padding: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  color: var(--color-turquoise-700);
}

.feature-list h3 {
  font-size: var(--font-size-body-lg);
}

.feature-list p {
  color: var(--color-text-muted);
}

@media (min-width: 48em) {
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

@media (min-width: 64em) {
  .feature-list--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .feature-list--4 > li {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-list--4 .icon {
    grid-row: auto;
    margin-block-end: var(--space-2);
  }
}

/* ---------- Home: all tours, grouped by destination ---------- */
.tour-list__nav {
  margin-block-end: var(--space-8);
}

.tour-group + .tour-group {
  margin-block-start: var(--space-12);
}

.tour-group .section-head h3 {
  font-size: var(--font-size-h3);
}

.link-list {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-tap-min);
  font-weight: var(--font-weight-semibold);
}

.link-list .icon {
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
}

/* ---------- FAQ + assistant ---------- */
.split {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 64em) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: var(--space-16);
  }
}

.assistant-card {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  margin-block-start: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-turquoise-50);
}

.assistant-card h3 {
  font-size: var(--font-size-body-lg);
}

.assistant-card p {
  color: var(--color-text-muted);
}

/* ---------- Instagram strip ---------- */
.insta {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
}

.insta > .section-head {
  grid-column: content;
}

.insta__grid {
  grid-column: full;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.insta__grid img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-bg-surface-muted);
}

@media (min-width: 64em) {
  .insta__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* ---------- Final call to action ---------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.final-cta {
  justify-items: start;
}

.page .final-cta > h2 {
  margin-block-end: 0;
}

.final-cta > h2 + p {
  margin-block-start: var(--space-3);
}

.final-cta p {
  color: var(--color-text-inverse-muted);
}

/* ---------- Page hero (destination, category, B2B) ---------- */
.page-hero {
  display: grid;
  gap: var(--space-3);
}

.page-hero > p {
  max-inline-size: var(--size-prose);
  color: var(--color-text-muted);
  font-size: var(--font-size-body-lg);
}

.page > .page-hero--image:first-child {
  margin-block-start: calc(var(--space-6) * -1);
}

.page-hero--image {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: minmax(18rem, 48svh);
  gap: 0;
}

.page-hero--image img {
  grid-column: full;
  grid-row: 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  background: var(--color-navy-800);
}

.page-hero--image .page-hero__text {
  grid-column: full;
  grid-row: 1;
  align-self: end;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: var(--space-16) var(--space-8);
  background: linear-gradient(to top, var(--color-bg-scrim-text) 70%, var(--color-bg-scrim-fade));
}

.page-hero--image .page-hero__text > * {
  grid-column: content;
  max-inline-size: 40rem;
  color: var(--color-text-inverse);
}

.page-hero--image .page-hero__text > p {
  margin-block-start: var(--space-2);
  font-size: var(--font-size-body-lg);
}

.comparison {
  display: grid;
  gap: var(--space-4);
}

.comparison > div {
  padding: var(--space-5);
  border: var(--size-border) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

.comparison dt {
  font-weight: var(--font-weight-semibold);
}

.comparison dd {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

@media (min-width: 48em) {
  .comparison {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Tour catalogue ---------- */
.catalog {
  display: grid;
  gap: var(--space-3);
}

.catalog__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.catalog__search {
  grid-column: 1 / -1;
}

/* Sort menu (catalog.js): the button looks like the form's select; the list like the header menus. */
.sort-menu {
  position: relative;
}

.sort-menu__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--size-input);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: var(--size-border) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  font: inherit;
  font-size: var(--font-size-body);
  line-height: var(--line-height-small);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.sort-menu__button:hover,
.sort-menu__button[aria-expanded="true"] {
  border-color: var(--color-border-strong);
}

.sort-menu__value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sort-menu__button::after { /* chevron, turned up while open */
  content: "";
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: -0.25rem;
  border-inline-end: var(--size-border-strong) solid currentColor;
  border-block-end: var(--size-border-strong) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.sort-menu__button[aria-expanded="true"]::after {
  margin-block-start: 0.25rem;
  transform: rotate(-135deg);
}

.sort-menu__list {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  display: grid;
  gap: var(--space-1);
  inline-size: max(100%, max-content);
  margin: 0;
  padding: var(--space-2);
  border: var(--size-border) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.sort-menu__list[hidden] {
  display: none;
}

.sort-menu__list:focus {
  outline: none; /* the active option shows where the keyboard is */
}

.sort-menu__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: var(--size-tap-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-default);
  white-space: nowrap;
  cursor: pointer;
}

.sort-menu__option.is-active {
  background: var(--color-action-tertiary-bg-hover);
}

.sort-menu__list:focus-visible .sort-menu__option.is-active {
  outline: var(--size-border-strong) solid var(--color-border-strong);
  outline-offset: calc(var(--size-border-strong) * -1);
}

.sort-menu__option[aria-selected="true"] {
  font-weight: var(--font-weight-semibold);
  box-shadow: inset var(--size-border-accent) 0 0 var(--color-accent-brand);
}

.sort-menu__option[aria-selected="true"]::after { /* check mark */
  content: "";
  flex: none;
  inline-size: 0.35rem;
  block-size: 0.65rem;
  margin-block-start: -0.15rem;
  margin-inline-end: var(--space-1);
  border-inline-end: var(--size-border-strong) solid var(--color-accent-brand);
  border-block-end: var(--size-border-strong) solid var(--color-accent-brand);
  transform: rotate(45deg);
}

.catalog__count:empty {
  display: none;
}

.catalog__count {
  font-weight: var(--font-weight-semibold);
}

.catalog__search input::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

@media (min-width: 48em) {
  .catalog__bar {
    grid-template-columns: minmax(0, 1fr) 17rem auto; /* the longest sort choice fits ("Qiymət: ucuzdan bahaya") */
  }

  .catalog__search {
    grid-column: auto;
  }
}

.filters {
  border: var(--size-border) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.filters > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--size-control-lg);
  padding-inline: var(--space-5);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
}

.filters > summary::-webkit-details-marker {
  display: none;
}

.filters > summary::after {
  content: "";
  inline-size: 0.5em;
  block-size: 0.5em;
  border: solid currentColor;
  border-width: 0 var(--size-border-strong) var(--size-border-strong) 0;
  transform: rotate(45deg) translateY(-25%);
}

.filters[open] > summary::after {
  transform: rotate(-135deg);
}

.filters__body {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-2) var(--space-5) var(--space-5);
}

@media (min-width: 64em) {
  .filters__body {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .filters__actions {
    grid-column: 1 / -1;
  }
}

.filters fieldset ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.filters fieldset li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-tap-min);
}

.filters fieldset li label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.filters input[type="checkbox"],
.filters input[type="radio"] {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  accent-color: var(--color-navy-900);
}

.filters__range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.filters__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* ---------- Tour detail ---------- */
.tour {
  display: grid;
  gap: var(--space-6);
}

.tour__header {
  display: grid;
  gap: var(--space-3);
}

/* Supplier code under the title: quiet, but easy to read out on WhatsApp */
.tour__code {
  margin-block-start: calc(-1 * var(--space-2));
  color: var(--color-text-subtle);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
}

.tour__category {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.tour__facts {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour__facts li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
}

.tour__facts .icon {
  color: var(--color-turquoise-700);
}

@media (min-width: 48em) {
  .tour__facts {
    grid-template-columns: repeat(2, minmax(0, max-content));
    column-gap: var(--space-8);
  }
}

.booking-panel__price data {
  font-size: var(--font-size-h2);
}

.check-list--columns {
  column-gap: var(--space-8);
}

@media (min-width: 30em) {
  .check-list--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Gallery: swipeable strip on phones, mosaic from md. "Show all photos" (#gallery) reveals every photo without JavaScript. */
.gallery {
  margin-inline: calc(var(--space-gutter) * -1);
}

.gallery ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-gutter);
  scrollbar-width: none;
}

.gallery ul::-webkit-scrollbar {
  display: none;
}

.gallery li {
  position: relative;
  scroll-snap-align: start;
}

/* Invisible button over each photo (gallery.js) that opens the photo viewer. */
.gallery__open {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: zoom-in;
}

.gallery__open:focus-visible {
  outline-offset: calc(var(--size-focus-ring) * -1);
}

.gallery img {
  inline-size: 100%;
  aspect-ratio: var(--aspect-gallery);
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-bg-surface-muted);
}

.gallery__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-3);
  margin: var(--space-3) var(--space-gutter) 0;
}

.gallery__all {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.gallery__meta .tour__category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--size-tap-min);
  margin-inline-start: auto;
  color: var(--color-text-destination);
}

/* With a place in the admin the label opens Google Maps; it keeps the label's look. */
.gallery__meta .tour__category a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--size-tap-min);
  color: inherit;
  text-decoration: none;
}

.gallery__meta .tour__category a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.gallery__meta .tour__category .icon {
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
}

.gallery__all a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-tap-min);
}

.gallery__all .icon {
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
}

@media (min-width: 48em) {
  .gallery {
    margin-inline: 0;
  }

  .gallery ul {
    grid-auto-flow: row;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    padding: 0;
    overflow: visible;
    aspect-ratio: 2 / 1;
  }

  .gallery li:first-child {
    grid-row: span 2;
  }

  .gallery li:nth-child(n + 6) {
    display: none;
  }

  .gallery img {
    block-size: 100%;
    aspect-ratio: auto;
  }

  .gallery li:first-child img {
    border-radius: var(--radius-md);
  }

  .gallery__meta {
    margin-inline: 0;
  }

  .gallery:target ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    aspect-ratio: auto;
  }

  .gallery:target li {
    display: block;
    grid-row: auto;
  }

  .gallery:target img {
    aspect-ratio: var(--aspect-gallery);
  }
}

.tour__layout {
  display: grid;
  gap: var(--space-section);
}

.tour__content {
  display: grid;
  gap: var(--space-6);
}

.tour__content > section > h2 {
  margin-block-end: var(--space-4);
}

.tour__disclosure > details > summary h2 {
  font-size: var(--font-size-h2);
}

.tour__disclosure > details > summary::after {
  inline-size: var(--space-2);
  block-size: var(--space-2);
  margin-inline-end: var(--space-1);
  border: solid var(--color-text-disclosure-icon);
  border-width: 0 var(--size-border-strong) var(--size-border-strong) 0;
  background: none;
  transform: rotate(-45deg);
}

.tour__disclosure > details[open] > summary::after {
  background: none;
  transform: rotate(45deg);
}

.tour__disclosure > details > .tour__disclosure-body {
  padding-block-start: var(--space-4);
  color: var(--color-text-default);
}

.tour__disclosure > details[open] > .tour__general {
  display: grid;
  gap: var(--space-5);
}

.tour__general .tour__facts {
  min-inline-size: 0;
}

.tour__general > section {
  padding-block-start: var(--space-4);
  border-block-start: var(--size-border) solid var(--color-border-subtle);
}

.tour__general h3 {
  margin-block-end: var(--space-2);
  font-size: var(--font-size-h3);
}

.tour__general section ul {
  padding-inline-start: var(--space-5);
}

/* What's included: ✓ included, then ✕ not included, separated like the general information */
.tour__disclosure > details[open] > .inclusions {
  display: grid;
  gap: var(--space-5);
}

.inclusions__group + .inclusions__group {
  padding-block-start: var(--space-4);
  border-block-start: var(--size-border) solid var(--color-border-subtle);
}

.inclusions h3 {
  margin-block-end: var(--space-3);
  font-size: var(--font-size-h3);
}

.tour__restriction {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-status-warning-bg);
}

.tour__restriction .icon {
  flex: none;
  color: var(--color-text-warning);
}

@media (min-width: 48em) {
  .tour__general .tour__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}

.booking-panel {
  display: grid;
  gap: var(--space-4);
  align-self: start;
  padding: var(--space-5);
  border: var(--size-border) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

.booking-panel h2 {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}

.booking-panel form {
  display: grid;
  gap: var(--space-4);
}

.booking-estimate {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-block: var(--size-border) solid var(--color-border-subtle);
}

.booking-estimate__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  font-weight: var(--font-weight-medium);
}

.booking-estimate__row strong {
  font-size: var(--font-size-h3);
  font-variant-numeric: tabular-nums;
}

.booking-panel__status:empty {
  display: none;
}

.booking-panel__status {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.booking-panel__note,
.booking-panel__restriction {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* ---------- Booking panel (D-28) ----------
   Title, from-price, then option, date, guests (one row per age category with −/+), your details, total and
   buttons. On phones the panel opens as a bottom sheet (sheet.js). */
.booking-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.booking-panel__close {
  display: none;
}

.booking-panel__label {
  margin-block-end: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.booking-panel__actions {
  display: grid;
  gap: var(--space-3);
}

.guests {
  display: grid;
}

.guest {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label count"
    "price count";
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 0;
  padding-block: var(--space-3);
  border-block-end: var(--size-border) solid var(--color-border-subtle);
}

.guest:last-child {
  border-block-end: 0;
}

.guest__label {
  grid-area: label;
  font-weight: var(--font-weight-semibold);
}

.guest__age {
  margin-inline-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
}

/* Price of the category ("2,900 THB", "Free", "Price on WhatsApp"); the line is reserved so filling it moves nothing. */
.guest__price {
  grid-area: price;
  min-block-size: calc(var(--font-size-small) * var(--line-height-small));
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.guest__price--free {
  color: var(--color-text-success);
}

.guests .guest > .guest__count,
.guest .stepper {
  grid-area: count;
}

.guests .guest > .guest__count {
  inline-size: 5rem;
}

.guest .field-error {
  grid-column: 1 / -1;
  margin-block-start: var(--space-2);
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.stepper__button {
  display: grid;
  place-items: center;
  inline-size: var(--size-tap-min);
  block-size: var(--size-tap-min);
  padding: 0;
  border: var(--size-border) solid var(--color-border-control);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  font-size: var(--font-size-h3);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.stepper__button:hover {
  border-color: var(--color-border-strong);
}

.stepper__button[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

/* The count between −/+: a plain number (still an editable field). */
.guest .stepper .guest__count {
  inline-size: 2.5rem;
  min-block-size: var(--size-tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  appearance: textfield;
}

.guest .stepper .guest__count::-webkit-inner-spin-button,
.guest .stepper .guest__count::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

/* ---------- Booking sheet (phones and tablets, sheet.js) ---------- */
@media (max-width: 63.99em) {
  .has-booking-sheet .tour__layout > .booking-panel {
    display: none;
  }
}

.sheet {
  inline-size: 100%;
  max-inline-size: 40rem;
  max-block-size: 92vh;
  max-block-size: 92dvh;
  margin: auto auto 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  box-shadow: var(--shadow-lg);
}

.sheet::backdrop {
  background: var(--color-bg-overlay);
}

:root:has(.sheet[open]) {
  overflow: hidden;
}

.sheet .booking-panel {
  padding-block-start: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.sheet .booking-panel__head {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-raised);
  margin-inline: calc(var(--space-5) * -1);
  padding: var(--space-3) var(--space-5);
  border-block-end: var(--size-border) solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.sheet .booking-panel__close {
  display: inline-grid;
}

/* Total and buttons stay in view while the form scrolls. */
.sheet .booking-panel__actions {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--z-raised);
  margin-inline: calc(var(--space-5) * -1);
  padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--size-border) solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.sheet .booking-estimate {
  padding-block: 0;
  border: 0;
}

.traveller {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-3);
}

.traveller legend {
  grid-column: 1 / -1;
  margin-block-end: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.traveller__no-hotel {
  grid-column: 1 / -1; /* "I have no hotel" under both hotel and room */
}

.participants legend {
  grid-column: 1 / -1;
}

.booking-panel__secondary {
  font-size: var(--font-size-small);
  text-align: center;
}

.booking-panel__secondary a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-tap-min);
}

.booking-panel__secondary .icon {
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
}

@media (min-width: 64em) {
  .tour__layout {
    grid-template-columns: minmax(0, 1fr) 24rem;
    column-gap: var(--space-12);
    align-items: start;
  }

  /* Below the sticky header and never taller than the window: a long panel (options, extras) scrolls inside,
     and the total and buttons stay in view at its foot, as in the phone sheet. */
  .tour__layout > .booking-panel {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    inset-block-start: calc(var(--header-offset) + var(--space-4));
    max-block-size: calc(100vh - var(--header-offset) - var(--space-8));
    max-block-size: calc(100dvh - var(--header-offset) - var(--space-8));
    overflow-y: auto;
    padding-block-end: 0;
  }

  .tour__layout > .booking-panel .booking-panel__actions {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-raised);
    margin-inline: calc(var(--space-5) * -1);
    padding: var(--space-3) var(--space-5) var(--space-4);
    border-block-start: var(--size-border) solid var(--color-border-subtle);
    background: var(--color-bg-surface);
  }

  .tour__layout > .booking-panel .booking-estimate {
    padding-block: 0;
    border: 0;
  }

  .tour__layout > .booking-panel > :last-child {
    padding-block-end: var(--space-5);
  }

  .tour__layout > .tour__content {
    grid-column: 1;
    grid-row: 1;
  }
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

.facts dt {
  color: var(--color-text-subtle);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}

.facts dd {
  margin: var(--space-1) 0 0;
  font-weight: var(--font-weight-medium);
}

@media (min-width: 48em) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Program timeline (every tour): time, rail with a dot, stage title and an optional explanation below it.
   A program without times has no time column; the rail and dots stay. */
.itinerary {
  --itinerary-time: 3.5rem;

  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.itinerary--untimed {
  --itinerary-time: 0rem;
}

.itinerary > li {
  position: relative;
  display: grid;
  grid-template-columns: var(--itinerary-time) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block-end: var(--space-5);
}

.itinerary--untimed > li > .itinerary__stage {
  grid-column: 2;
}

/* Timeline rail and dot */
.itinerary > li::before {
  content: "";
  position: absolute;
  inset-block: 0.6rem 0;
  inset-inline-start: calc(var(--itinerary-time) + var(--space-2) - 1px);
  border-inline-start: var(--size-border-strong) solid var(--color-turquoise-200);
}

.itinerary > li:last-child::before {
  display: none;
}

.itinerary > li::after {
  content: "";
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-start: calc(var(--itinerary-time) + var(--space-2) - 5px);
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-turquoise-700);
}

.itinerary time {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.itinerary__day {
  margin-block-end: var(--space-4);
  font-size: var(--font-size-h3);
}

.itinerary__stage {
  min-inline-size: 0;
  padding-inline-start: var(--space-4);
}

.itinerary__title {
  font-weight: var(--font-weight-semibold);
}

.itinerary__detail {
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.included {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48em) {
  .included {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.included h3 {
  margin-block-end: var(--space-3);
}

/* Sticky booking bar: phones and tablets only. */
.booking-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: var(--size-booking-bar-height);
  margin: 0;
  padding: var(--space-3) var(--space-gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--size-border) solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-md);
}

.page > .booking-bar {
  margin: 0;
}

.booking-bar .price {
  flex-wrap: wrap;
  align-items: baseline;
  flex: 1 1 0; /* an agency's struck price and badge wrap inside; the Book button stays on the right */
  min-inline-size: 0;
}

/* The agency bar is two lines taller (struck price, label): keep the end of the page clear of it */
body:has(.booking-bar .price__was) .page--with-bar + .site-footer {
  padding-block-end: calc(var(--space-6) + var(--size-booking-bar-height) + var(--space-10) + env(safe-area-inset-bottom, 0px));
}

.page--with-bar + .site-footer {
  padding-block-end: calc(var(--space-6) + var(--size-booking-bar-height) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 64em) {
  .booking-bar {
    display: none;
  }

  .page--with-bar + .site-footer {
    padding-block-end: var(--space-6);
  }
}

/* ---------- Forms on pages (reservation, B2B, contact, settings) ---------- */
.form-stack {
  display: grid;
  gap: var(--space-8);
}

.form-section {
  display: grid;
  gap: var(--space-5);
}

.page .form-section > h2 {
  margin: 0;
}

.form-section > h2 {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}

.form-section > p {
  margin-block-start: calc(var(--space-3) * -1);
  color: var(--color-text-muted);
}

.form-row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 40em) {
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A heading inside the card rather than a label drawn on its border (a floated legend is an ordinary grid item). */
fieldset.form-section > legend {
  float: inline-start;
  inline-size: 100%;
  margin-block-end: 0;
  font-size: var(--font-size-h3);
}

/* ---------- Confirmation ---------- */
.confirmation {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.confirmation__icon {
  display: grid;
  place-items: center;
  inline-size: var(--size-control-lg);
  block-size: var(--size-control-lg);
  border-radius: var(--radius-pill);
  background: var(--color-status-success-bg);
  color: var(--color-success-700);
}

.reservation-code {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: var(--size-border) dashed var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---------- Account ---------- */
.account-nav ul {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0 0 var(--space-1);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.status-timeline {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.status-timeline li {
  display: grid;
  gap: var(--space-1);
  padding-inline-start: var(--space-5);
  border-inline-start: var(--size-border-strong) solid var(--color-turquoise-200);
}

.status-timeline time {
  color: var(--color-text-subtle);
  font-size: var(--font-size-small);
}

.danger-zone {
  border-color: var(--color-error-100);
}

/* ---------- Contact ---------- */
.contact-list a {
  font-weight: var(--font-weight-semibold);
}

address {
  font-style: normal;
}

/* ---------- Error pages ---------- */
.error-page {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  padding-block: var(--space-12);
}

.error-page__code {
  color: var(--color-turquoise-700);
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
}

.inline-search {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  inline-size: 100%;
  max-inline-size: 32rem;
}

.inline-search .field {
  flex: 1 1 14rem;
}

/* A page that ends in a navy band joins the navy footer without a gap. */
.page:has(> .band.surface-inverse:last-child) + .site-footer {
  margin-block-start: 0;
  border-block-start: var(--size-border) solid var(--color-border-inverse);
}

/* ---------- Auth ---------- */
.auth-card {
  display: grid;
  gap: var(--space-5);
}

.auth-card > * + * {
  margin-block-start: 0;
}

.auth-links {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-align: center;
}

/* ---------- Account: reservation card ---------- */
.reservation-card {
  display: grid;
  gap: var(--space-5);
}

.reservation-card img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.reservation-card > div {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.reservation-card .kv {
  inline-size: 100%;
}

@media (min-width: 48em) {
  .reservation-card {
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: start;
  }

  .reservation-card img {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Steps in a row (about, B2B) ---------- */
@media (min-width: 48em) {
  .steps--row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

/* ---------- Accordion sections on tour pages ---------- */
.tour__content .accordion details > ul {
  padding-inline-start: var(--space-5);
}

/* ---------- Tour options (seat class, dinner, charter length…) ----------
   Native radio buttons inside large tappable rows; the checked row is outlined. */
.options {
  display: grid;
  gap: var(--space-2);
}

.options__group {
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-control-lg);
  padding-inline: var(--space-4);
  border: var(--size-border) solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  cursor: pointer;
}

.option:hover {
  border-color: var(--color-border-strong);
}

.option:has(input:checked) {
  border-color: var(--color-navy-900);
  box-shadow: inset 0 0 0 var(--size-border) var(--color-navy-900);
}

.option input {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  accent-color: var(--color-navy-900);
}

.option__name {
  flex: 1;
  min-inline-size: 0;
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.option__price {
  margin-inline-start: auto;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Desktop: shorter destination tiles so the tours start sooner. */
@media (min-width: 64em) {
  .destination-tile {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Photo viewer (gallery.js) ----------
   Full-screen modal <dialog>: a scroll-snap strip (swipe), Previous/Next buttons, counter and Close. */
.lightbox {
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-navy-950);
  color: var(--color-text-inverse);
}

.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

:root:has(.lightbox[open]) {
  overflow: hidden;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-gutter);
}

.lightbox__counter {
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.lightbox__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  grid-template-rows: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.lightbox__track::-webkit-scrollbar {
  display: none;
}

.lightbox__slide {
  display: grid;
  /* One row that fills the slide, so max-block-size: 100% on the photo has a height to resolve against. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-block-size: 0;
  padding: 0 var(--space-gutter) var(--space-6);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.lightbox__slide img {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.lightbox__nav {
  position: fixed;
  inset-block-start: 50%;
  translate: 0 -50%;
}

.lightbox__nav--previous {
  inset-inline-start: var(--space-3);
}

.lightbox__nav--next {
  inset-inline-end: var(--space-3);
}

/* ---------- Hotels (D-25) ----------
   Large photo first, then name, area and a short description. Information only: no price, no button. */
.hotel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .hotel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-6);
  }
}

.hotel-card {
  display: grid;
  gap: var(--space-4);
}

.hotel-card img,
.hotel-card__noimage {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--color-bg-surface-muted);
}

.hotel-card__noimage {
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
}

.hotel-card__noimage .icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.hotel-card__body {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.hotel-card__title {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.hotel-card__area {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.hotel-card__area .icon {
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
}

.hotel-card__text {
  max-inline-size: 60ch;
}

/* Collapsed category tiles and catalogue tour groups reveal the rest in place (groups.js). */
[data-collapsed] :is(.tour-grid, .tile-grid) > [data-extra] {
  display: none;
}

.tour-group__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--size-tap-min);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

/* ---------- Agency Cart (b2b-cart.html) and agency prices ---------- */
.price__agency {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

/* Agency discount (owner, 2026-10-11): the public price struck through and a "−10%" badge, above the agency price */
.price__was {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.price .price__was data,
.price__was-amount data {
  color: var(--color-text-subtle);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
}

.price__was s,
.price__was-amount {
  text-decoration-thickness: 1px;
  color: var(--color-text-subtle);
}

.price__discount {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-turquoise-100);
  color: var(--color-turquoise-900);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
}

.cart-list {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.cart-item {
  display: grid;
  gap: var(--space-3);
}

.cart-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.cart-item__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}

.cart-item__fields {
  display: grid;
  gap: var(--space-3);
}

.cart-item__guests {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.cart-item__extras {
  margin: 0;
  padding: 0;
  border: 0;
}

.cart-item__prices {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.cart-summary {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 48em) {
  .cart-item__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cart-item__guests,
  .cart-item__extras {
    grid-column: 1 / -1;
  }
}