/* ==========================================================================
   DubaiTripHub — Design A "Editorial Trust"
   global.css — design tokens, resets, typography, shared components, layout
   ==========================================================================
   Pre-approved deviations from html-coding-standards-SKILL.md:

   1. Bootstrap: NOT loaded. Layout is built entirely with native CSS Grid +
      Flexbox (see .card-grid, .listing-layout, .detail-layout, .footer-grid).
      The grid-only Bootstrap CDN link was removed (0 .row/.col-* classes were
      ever used) to drop a render-blocking, unused external request.

   2. Icons: externalized SVG sprite at assets/icons/sprite.svg referenced via
      <use href="...sprite.svg#icon-name"></use>. Font Awesome applies to
      new designs only.
   ========================================================================== */

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --primary:          #F05000;
  --primary-hover:    #CC4400;
  --primary-light:    #FDEDE5;
  --primary-border:   #FACAB2;
  --on-primary:       #111827;
  --on-primary-lg:    #FFFFFF;

  --secondary:        #1060E0;
  --secondary-hover:  #0E52BE;
  --secondary-light:  #E7EFFB;
  --secondary-border: #B7CFF5;
  --on-secondary:     #FFFFFF;

  --navy:             #003060;
  --navy-hover:       #001C3A;
  --navy-light:       #E5EAEF;
  --navy-border:      #B2C0CF;
  --on-navy:          #FFFFFF;

  /* Neutral greys */
  --gray-50:   #F9FAFB;
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-400:  #9CA3AF;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-900:  #111827;

  /* Surfaces */
  --bg-warm:   #FCF6F2;
  --bg-white:  #FFFFFF;

  /* Semantic / status */
  --success:        #16A34A;
  --success-light:  #DCFCE7;
  --success-border: #86EFAC;
  --warning:        #D97706;
  --warning-light:  #FEF3C7;
  --error:          #DC2626;
  --error-light:    #FEE2E2;
  --error-border:   #FCA5A5;
  --info:           #0284C7;
  --info-light:     #E0F2FE;

  /* Typography */
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ar: 'Noto Kufi Arabic', 'Inter', sans-serif;
  --font-primary: var(--font-en);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Spacing scale (4px base) */
  --sp-0:  0;
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Border radius — Design A: generous rounding */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Shadows — Design A: soft, diffused */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.05);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 12px 40px rgba(0,48,96,0.12), 0 4px 12px rgba(0,48,96,0.06);

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition:      220ms var(--ease-out);
  --transition-slow: 380ms var(--ease-out);

  /* Layout — content area set to the standard 1440px. At wide desktop (≥1280px)
     gutters are 20px each side → 1400px effective inner content. */
  --header-h:       4rem;
  --container-max:  1440px;
  --container-pad:  var(--sp-4);
  --sidebar-w:      17rem;
  --panel-w:        22rem;

  /* Z-index scale */
  --z-base:      1;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-header:    300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;
}

@media (min-width: 768px) {
  :root { --container-pad: var(--sp-6); }
}
@media (min-width: 1280px) {
  :root { --container-pad: var(--sp-5); } /* 20px gutters at wide desktop */
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-en);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--gray-900);
  background-color: var(--bg-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

[lang="ar"] body,
[lang="ar"] { font-family: var(--font-ar); }

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--gray-900);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}

p { line-height: var(--leading-relaxed); }

a {
  color: var(--secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--secondary-hover); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
  border-radius: 2px;
}

strong { font-weight: var(--weight-semibold); }
em { font-style: italic; }

ul, ol { list-style: none; }

img, video, svg {
  display: block;
  max-width: 100%;
}
img { height: auto; object-fit: cover; }

/* The `hidden` attribute is only `display:none` in the UA sheet, so ANY author
   `display` wins over it — `.auth-error-msg{display:flex}` left the register terms
   error permanently on screen, and the JS `el.hidden = true/false` toggles across
   login / forgot-password / reset-password / register never took effect.
   !important is required: an equal-specificity author rule would otherwise win on
   source order. Restores the attribute for every current and future use. */
[hidden] { display: none !important; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ── Skip link ────────────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-6);
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ── Selection / focus / scrollbar ───────────────────────────────────────── */
::selection {
  background: var(--primary-light);
  color: var(--gray-900);
}

:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Scrollbars — thin + brand orange, site-wide (home and internal pages).
   Frozen tokens only: --primary #F05000 / --primary-hover / --primary-light.

   ONE MECHANISM PER ENGINE — this split is load-bearing, do not merge it back.
   Chromium 121+ implements the standard scrollbar-width/scrollbar-color, and
   when EITHER is set it ignores the ::-webkit-scrollbar-* pseudo-elements
   entirely. So declaring both unconditionally silently disabled the 6px rule
   below and handed Chrome a NATIVE thin scrollbar — which on macOS is an
   overlay bar that fattens on hover. Gating the standard properties behind a
   feature query that only Firefox fails puts Chrome and Safari back on the
   pseudo-elements, whose height is fixed and therefore hover-stable.

   Firefox: no ::-webkit-scrollbar, so the @supports block applies. Note the two
   properties behave differently there — scrollbar-color INHERITS (html alone
   covers every descendant), scrollbar-width does NOT, hence the * rule, without
   which nested scrollers fall back to a fat default. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--primary) var(--primary-light); }
  * { scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--primary-light); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); }

/* ── Screen-reader / utility classes ─────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus { position: static; width: auto; height: auto; clip: auto; }

.text-center  { text-align: center; }
.text-end     { text-align: end; }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold    { font-weight: var(--weight-bold); }
.text-sm      { font-size: var(--text-sm); }
.text-xs      { font-size: var(--text-xs); }
.text-muted   { color: var(--gray-700); }
.text-primary { color: var(--primary); }
.text-navy    { color: var(--navy); }
.hidden       { display: none !important; }
.invisible    { visibility: hidden; }

.divider {
  border: none;
  border-block-start: 1px solid var(--gray-200);
  margin-block: var(--sp-6);
}

/* ── Icon helper (used with externalized sprite) ─────────────────────────── */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}

/* ── AOS-lite ─────────────────────────────────────────────────────────────── */
[data-aos] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1; transform: none; transition: none; }
}

/* ── Container & section ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-narrow { max-width: 760px; }
.container-wide   { max-width: 1536px; }

.section { padding-block: var(--sp-12); }
@media (min-width: 768px) { .section { padding-block: var(--sp-16); } }

/* ── Card grid (custom CSS grid alternative to Bootstrap rows) ──────────── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 600px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-en);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  min-height: 44px;
}
.btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:active:not(:disabled) { transform: scale(0.98); }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary-lg);
  border-color: var(--primary);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 4px 16px rgba(240,80,0,0.30);
  text-decoration: none;
  color: var(--on-primary-lg);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--on-secondary);
  border-color: var(--secondary);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--secondary-hover);
  border-color: var(--secondary-hover);
  box-shadow: 0 4px 16px rgba(16,96,224,0.25);
  text-decoration: none;
  color: var(--on-secondary);
}

.btn-navy {
  background: var(--navy);
  color: var(--on-navy);
  border-color: var(--navy);
}
.btn-navy:hover:not(:disabled) {
  background: var(--navy-hover);
  border-color: var(--navy-hover);
  box-shadow: 0 4px 16px rgba(0,48,96,0.25);
  text-decoration: none;
  color: var(--on-navy);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--gray-200);
}
.btn-outline:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--navy-border);
  text-decoration: none;
  color: var(--navy);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-700);
  border-color: transparent;
  padding-inline: var(--sp-3);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--gray-50);
  color: var(--gray-900);
  text-decoration: none;
}

.btn-sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-xs);
  min-height: 36px;
  border-radius: var(--radius-md);
}
.btn-lg {
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--text-base);
  min-height: 52px;
  border-radius: var(--radius-xl);
}
.btn-full,
.btn-block { width: 100%; }

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-md);
}
.btn-icon.btn-sm { width: 36px; height: 36px; border-radius: var(--radius-sm); }

.btn-whatsapp {
  background: #25D366;
  color: #FFFFFF;
  border-color: #25D366;
}
.btn-whatsapp:hover:not(:disabled) {
  background: #1DA851;
  border-color: #1DA851;
  box-shadow: 0 4px 16px rgba(37,211,102,0.30);
  color: #FFFFFF;
  text-decoration: none;
}

/* Tight-gap variant for icon-with-label small buttons (used in auth header). */
.btn-tight { gap: var(--sp-1); }

/* ══════════════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.25em 0.6em;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
/* Verified reads green, matching the "Identity Verified" .badge-success below, so the
   site has one verification colour rather than two (this pill was navy + an orange
   icon while the trust-panel badge was green). Icon inherits the same green. */
.badge-verified  { background: var(--success-light); color: var(--success); }
.badge-verified svg { color: var(--success); }
.badge-featured  { background: var(--primary);       color: var(--on-primary-lg); }
.badge-success   { background: var(--success-light); color: var(--success); }
.badge-info      { background: var(--info-light);    color: var(--info); }
.badge-warning   { background: var(--warning-light); color: var(--warning); }
.badge-error     { background: var(--error-light);   color: var(--error); }
.badge-neutral   { background: var(--gray-200);      color: var(--gray-700); }

/* ══════════════════════════════════════════════════════════════════════════
   RATING STARS
   ══════════════════════════════════════════════════════════════════════════ */
.rating { display: inline-flex; align-items: center; gap: var(--sp-1); }
.rating-stars { display: flex; gap: 1px; color: #F59E0B; }
.rating-stars svg { width: 14px; height: 14px; }
.rating-score {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
}
.rating-count { font-size: var(--text-xs); color: var(--gray-700); }

/* ══════════════════════════════════════════════════════════════════════════
   TOUR / SERVICE CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  /* Fill the grid/flex cell. The <li> stretches to the tallest card in the row, but
     the card itself was content-sized — so a shorter card (one-line title) rendered a
     visibly short white box, and .card-body had no slack for .card-footer's
     margin-block-start:auto to consume, leaving its price row 22px above its
     neighbours'. Resolves to `auto` when the parent has no definite height, so cards
     outside a stretched cell are unaffected. */
  height: 100%;
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.card-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--gray-200);
  flex-shrink: 0;
}
.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease-out);
}
.card:hover .card-img-wrap img { transform: scale(1.05); }
.card-badges {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.card-wish {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-3);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.90);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.card-wish:hover, .card-wish[aria-pressed="true"] { color: var(--error); background: #fff; }
.card-wish svg { width: 18px; height: 18px; }
.card-body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.card-provider {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--gray-700);
}
.card-provider a { color: var(--secondary); font-weight: var(--weight-medium); }
.card-provider a:hover { text-decoration: underline; }
.card-provider-badge { color: var(--primary); width: 14px; height: 14px; }
.card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--primary); }
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--gray-700);
}
.card-meta-item { display: flex; align-items: center; gap: 4px; }
.card-meta-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--gray-200);
  margin-block-start: auto;
}
.card-price { display: flex; flex-direction: column; }
.card-price-from   { font-size: var(--text-xs); color: var(--gray-700); line-height: 1; }
.card-price-amount {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
  line-height: 1.2;
}
.card-price-unit { font-size: var(--text-xs); color: var(--gray-700); }

/* ══════════════════════════════════════════════════════════════════════════
   PROVIDER CARD (sidebar/detail)
   ══════════════════════════════════════════════════════════════════════════ */
.provider-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.provider-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.provider-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gray-200);
}
.provider-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
}
.provider-meta { font-size: var(--text-sm); color: var(--gray-700); }
.provider-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  text-align: center;
}
.provider-stat {
  background: var(--bg-warm);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.provider-stat-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
}
.provider-stat-label { font-size: var(--text-xs); color: var(--gray-700); }

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORY PILLS — unified component (single source of truth)
   One brand-correct style shared by every category/filter pill site-wide:
     .pill          home category rows      (layout: .pill-row in home.css)
     .filter-chip   tours listing filters   (layout: .filter-chips below)
     .visa-cat-tab  visa listing filters    (layout: .visa-category-tabs)
     .filter-pill   shared _FilterPills partial + AR listing filters
   Frozen tokens only (--primary #F05000). Do NOT re-add per-page pill copies —
   edit this block once and every page follows. (.tab-btn detail tabs are a
   separate ARIA-tab component, intentionally not merged here.)
   ══════════════════════════════════════════════════════════════════════════ */
.filter-chips   { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.category-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.pill,
.filter-chip,
.filter-pill,
.visa-cat-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  min-height: 40px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  background: var(--bg-white);
  color: var(--gray-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background var(--transition-fast);
}

/* Hover: light-orange tint + orange border + dark text, never underlined.
   text-decoration:none defeats the global a:hover underline on <a> pills. */
.pill:hover,
.filter-chip:hover,
.filter-pill:hover,
.visa-cat-tab:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
}

/* Active / selected: solid brand orange + white text. */
.pill.active,
.filter-chip.active,
.filter-pill.active,
.visa-cat-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary-lg);
  font-weight: var(--weight-semibold);
}

/* Selected pill stays solid orange (not the light hover tint) while hovered. */
.pill.active:hover,
.filter-chip.active:hover,
.filter-pill.active:hover,
.visa-cat-tab.active:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary-lg);
  text-decoration: none;
}

/* Visible keyboard focus (accessibility). */
.pill:focus-visible,
.filter-chip:focus-visible,
.filter-pill:focus-visible,
.visa-cat-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.filter-chip-remove {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  margin-inline-start: var(--sp-1);
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.filter-chip-remove:hover { background: var(--primary-hover); }

/* ══════════════════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
}
.form-label-req::after { content: ' *'; color: var(--error); }
.form-control {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-en);
  font-size: var(--text-base);
  color: var(--gray-900);
  background: var(--bg-white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 48px;
  -webkit-appearance: none;
  appearance: none;
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px var(--secondary-light);
}
.form-control.is-error   { border-color: var(--error);   box-shadow: 0 0 0 3px var(--error-light); }
.form-control.is-success { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-light); }
.form-control:disabled {
  background: var(--gray-50);
  color: var(--gray-400);
  cursor: not-allowed;
}
.form-hint      { font-size: var(--text-xs); color: var(--gray-700); }
.form-error-msg {
  font-size: var(--text-xs);
  color: var(--error);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.form-password { position: relative; }
.form-password .form-control { padding-inline-end: 2.75rem; }
.form-password-toggle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--sp-3);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.form-password-toggle:hover { color: var(--gray-900); }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239CA3AF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-inline-end: 2.5rem;
}
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
  margin-block-start: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--gray-700);
  padding-block: var(--sp-4);
}
.breadcrumb a { color: var(--gray-700); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb-sep {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
  flex-shrink: 0;
}
.breadcrumb li:last-child { color: var(--gray-900); font-weight: var(--weight-medium); }

/* ══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════════════ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
  padding-block: var(--sp-8);
}
.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-200);
  background: var(--bg-white);
  color: var(--gray-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast);
}
.page-link:hover:not(.active):not([aria-disabled="true"]) {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}
.page-link.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary-lg);
  font-weight: var(--weight-bold);
}
.page-link[aria-disabled="true"] { color: var(--gray-400); cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════════════════════ */
.tabs { display: flex; flex-direction: column; gap: 0; }
.tab-list {
  display: flex;
  gap: 0;
  border-block-end: 2px solid var(--gray-200);
  overflow-x: auto;
  /* Scrollbar inherits the site-wide thin + orange standard — do not hide it. */
}
.tab-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--gray-700);
  border: none;
  background: none;
  border-block-end: 3px solid transparent;
  margin-block-end: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  min-height: 44px;
}
.tab-btn:hover { color: var(--primary); }
.tab-btn[aria-selected="true"] {
  color: var(--primary);
  border-block-end-color: var(--primary);
}
.tab-btn svg { width: 16px; height: 16px; }
.tab-panel { display: none; padding-block: var(--sp-6); }
.tab-panel[aria-hidden="false"] { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   ACCORDION
   ══════════════════════════════════════════════════════════════════════════ */
.accordion-item { border-block-end: 1px solid var(--gray-200); }
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  gap: var(--sp-2);
}
.accordion-trigger svg {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.accordion-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion-content { display: none; padding-block-end: var(--sp-4); }
.accordion-content[aria-hidden="false"] { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
@media (min-width: 768px) { .modal-overlay { align-items: center; } }
.modal {
  background: var(--bg-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 90dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--transition-slow);
}
.modal-overlay.open .modal { transform: translateY(0); }
@media (min-width: 768px) {
  .modal {
    border-radius: var(--radius-xl);
    transform: scale(0.95);
    max-height: 90dvh;
  }
  .modal-overlay.open .modal { transform: scale(1); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-block-end: 1px solid var(--gray-200);
  position: sticky;
  inset-block-start: 0;
  background: var(--bg-white);
  z-index: 1;
}
.modal-title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.modal-close {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--gray-100);
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.modal-close:hover { background: var(--gray-200); color: var(--gray-900); }
.modal-body   { padding: var(--sp-5) var(--sp-6); }
.modal-footer {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  border-block-start: 1px solid var(--gray-200);
  display: flex;
  gap: var(--sp-3);
  position: sticky;
  inset-block-end: 0;
  background: var(--bg-white);
}

/* ══════════════════════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════════════════════ */
.toast-region {
  position: fixed;
  inset-block-end: var(--sp-6);
  inset-inline-end: var(--sp-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--gray-900);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  pointer-events: auto;
  min-width: 260px;
  max-width: 380px;
  animation: toastIn 0.35s var(--ease-out) both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-success { background: var(--success); }
.toast-error   { background: var(--error); }
.toast-info    { background: var(--navy); }

/* ══════════════════════════════════════════════════════════════════════════
   GALLERY LIGHTBOX
   ══════════════════════════════════════════════════════════════════════════ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-close {
  position: absolute;
  inset-block-start: var(--sp-6);
  inset-inline-end: var(--sp-6);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }
.lightbox-img {
  max-width: min(90vw, 1000px);
  max-height: 85dvh;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.lightbox-nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-nav-prev { inset-inline-start: var(--sp-6); }
.lightbox-nav-next { inset-inline-end: var(--sp-6); }
.lightbox-counter {
  position: absolute;
  inset-block-end: var(--sp-6);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   SKELETONS
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-50) 50%, var(--gray-200) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   QUICK INFO STRIP
   ══════════════════════════════════════════════════════════════════════════ */
.quick-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--navy-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--navy-border);
}
.quick-info-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--navy);
  font-weight: var(--weight-medium);
}
.quick-info-item svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER OFFSET (used after fixed site-header)
   ══════════════════════════════════════════════════════════════════════════ */
.header-offset { padding-block-start: var(--header-h); }

/* ══════════════════════════════════════════════════════════════════════════
   LISTING PAGE LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */
.listing-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .listing-layout { grid-template-columns: var(--sidebar-w) 1fr; }
}
.filter-sidebar {
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
@media (min-width: 1024px) {
  .filter-sidebar {
    display: flex;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
    max-height: calc(100dvh - var(--header-h) - var(--sp-12));
    overflow-y: auto;
  }
}
.filter-sidebar-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--gray-200);
  margin-block-end: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-clear-all {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.filter-clear-all:hover { text-decoration: underline; }
.mobile-filter-bar {
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: var(--z-sticky);
  background: var(--bg-white);
  border-block-end: 1px solid var(--gray-200);
  padding-block: var(--sp-3);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
@media (min-width: 1024px) { .mobile-filter-bar { display: none; } }
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
}
.results-count        { font-size: var(--text-sm); color: var(--gray-700); }
.results-count strong { color: var(--gray-900); }
/* ══════════════════════════════════════════════════════════════════════════
   SORT / LISTING DROPDOWNS — unified, cross-browser (Safari-safe)
   A native <select> WITHOUT appearance:none keeps macOS Safari's native chrome
   (Safari ignores border-radius/background on it), so it must be fully custom:
   appearance:none on every vendor + a static-colour SVG chevron renders
   identically in Safari, Chrome, Firefox and mobile. Single source of truth for
   .sort-select (tours), .visa-sort-select (visa) and .search-sort-wrap select.
   ══════════════════════════════════════════════════════════════════════════ */
.sort-select,
.visa-sort-select,
.search-sort-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  color: var(--gray-900);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  background-color: var(--bg-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 12px 12px;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.sort-select:hover,
.visa-sort-select:hover,
.search-sort-wrap select:hover { border-color: var(--gray-400); }
.sort-select:focus,
.visa-sort-select:focus,
.search-sort-wrap select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
/* In Safari, the option list is OS-drawn; keep selected text readable. */
.sort-select:focus-visible,
.visa-sort-select:focus-visible,
.search-sort-wrap select:focus-visible { outline: none; }

/* ══════════════════════════════════════════════════════════════════════════
   DETAIL PAGE LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .detail-layout { grid-template-columns: 1fr var(--panel-w); }
}
.detail-panel {
  display: none;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
}
@media (min-width: 1024px) {
  .detail-panel {
    display: flex;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}
.panel-price-label { font-size: var(--text-sm); color: var(--gray-700); }
.panel-price {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
  line-height: 1;
}
.panel-price-unit { font-size: var(--text-sm); color: var(--gray-700); }
.panel-note {
  font-size: var(--text-xs);
  color: var(--gray-700);
  padding: var(--sp-3);
  background: var(--navy-light);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--navy);
}
.mobile-sticky-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  background: var(--bg-white);
  border-block-start: 1px solid var(--gray-200);
  padding: var(--sp-3) var(--sp-4);
  padding-block-end: max(var(--sp-3), env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
@media (min-width: 1024px) { .mobile-sticky-bar { display: none; } }
.sticky-bar-price  { display: flex; flex-direction: column; }
.sticky-bar-from   { font-size: var(--text-xs); color: var(--gray-700); line-height: 1; }
.sticky-bar-amount {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
}
.sticky-bar-padding { height: 80px; }

/* ══════════════════════════════════════════════════════════════════════════
   GALLERY HERO
   ══════════════════════════════════════════════════════════════════════════ */
.gallery-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--gray-200);
  cursor: pointer;
}
@media (min-width: 768px) {
  .gallery-hero {
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 260px;
  }
  /* A tour with only one image renders no .gallery-thumbs, which left the 1fr
     column empty — a bare strip of the --gray-200 hero background beside the
     photo. Give the main image the full width when there are no thumbs.
     Browsers without :has() ignore this and keep the previous two-column layout. */
  .gallery-hero:not(:has(.gallery-thumbs)) {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1024px) { .gallery-hero { grid-template-rows: 440px; } }
.gallery-main {
  position: relative;
  overflow: hidden;
  /* Must occupy the SINGLE declared row (260px / 440px above) — not span two.
     .gallery-thumbs is a flex column that needs only one cell, so there is no
     second track: `grid-row: 1 / 3` spanned into an *implicit*, auto-sized row.
     That left the height indefinite, so the img's `height: 100%` below could not
     resolve, it fell back to its intrinsic aspect ratio, and the image sized the
     row instead of the row cropping the image (a square 768px hero rendered
     1044px tall against a 440px thumbs column). With one definite row, height:100%
     resolves and object-fit: cover crops from the centre to fill it. */
  grid-row: 1;
}
.gallery-main img,
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.gallery-main:hover img { transform: scale(1.03); }
.gallery-thumbs {
  display: none;
  flex-direction: column;
  gap: var(--sp-2);
}
@media (min-width: 768px) { .gallery-thumbs { display: flex; } }
.gallery-thumb {
  position: relative;
  overflow: hidden;
  flex: 1;
}
.gallery-thumb:hover img { transform: scale(1.05); }
.gallery-thumb-more {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.gallery-view-all {
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline-end: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
  border: none;
  cursor: pointer;
}
.gallery-view-all:hover { background: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   PROVIDER HERO (profile)
   ══════════════════════════════════════════════════════════════════════════ */
.provider-hero {
  position: relative;
  height: 240px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--navy);
}
@media (min-width: 768px) { .provider-hero { height: 300px; } }
.provider-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.provider-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,48,96,0.85) 0%, transparent 60%);
}
.provider-hero-content {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  align-items: flex-end;
  gap: var(--sp-5);
}
.provider-hero-logo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 3px solid var(--bg-white);
  background: var(--bg-white);
  flex-shrink: 0;
}
.provider-hero-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: #fff;
  line-height: var(--leading-tight);
}
.provider-hero-subtitle {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
}

/* ══════════════════════════════════════════════════════════════════════════
   TRUST PANEL
   ══════════════════════════════════════════════════════════════════════════ */
.trust-panel {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
}
.trust-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 480px) {
  .trust-panel-grid { grid-template-columns: repeat(4, 1fr); }
}
.trust-item { text-align: center; }
.trust-item-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-block-end: var(--sp-2);
}
.trust-item-icon svg { width: 20px; height: 20px; }
.trust-item-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
}
.trust-item-label { font-size: var(--text-xs); color: var(--gray-700); }

.license-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--navy);
  border-radius: var(--radius-lg);
  color: var(--on-navy);
}
.license-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.license-badge-icon svg { width: 24px; height: 24px; color: var(--primary); }
.license-badge-title {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.license-badge-number {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT SECTION & EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════ */
.contact-section {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
}
.contact-gated {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
}
.contact-methods {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
  padding: var(--sp-16) var(--sp-6);
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  color: var(--gray-400);
}
.empty-state-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
}
.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--gray-700);
  max-width: 360px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTING-PAGES SHARED (tours, visa-listing, search-results, favorites)
   ══════════════════════════════════════════════════════════════════════════ */
.listing-section { padding-block: var(--sp-8); }

/* Page hero (gradient banner above listing) */
.page-hero-listing {
  padding-block: var(--sp-10);
  background: linear-gradient(135deg, var(--navy) 0%, #0E52BE 100%);
  color: var(--on-navy);
  position: relative;
  overflow: hidden;
}
.page-hero-listing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.listing-hero-content { position: relative; }
.listing-hero-h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-block-end: var(--sp-2);
}
@media (min-width: 768px) {
  .listing-hero-h1 { font-size: var(--text-4xl); }
}
.listing-hero-sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.75);
  max-width: 560px;
}

/* SEO intro paragraph */
.seo-intro {
  font-size: var(--text-base);
  color: var(--gray-700);
  line-height: var(--leading-relaxed);
  max-width: 800px;
  padding-block: var(--sp-8) var(--sp-6);
}

/* Active filter chips row above results */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-5);
}

/* Price-range slider block */
.price-range {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.price-range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.price-range input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}
.price-range-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
  white-space: nowrap;
}

/* Filter checkbox/radio option list */
.filter-option-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 220px;
  overflow-y: auto;
  padding-inline-end: var(--sp-2);
  /* No scrollbar-width here — it is redundant with the site-wide rule, and in
     Chromium setting it would opt this element out of the ::-webkit-scrollbar
     styling and back onto the native hover-expanding bar (see the scrollbar
     block near the top of this file). */
}
.filter-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  padding-block: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.filter-option:hover { color: var(--gray-900); }
.filter-option input {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.filter-option-count {
  margin-inline-start: auto;
  color: var(--gray-400);
  font-size: var(--text-xs);
}

/* Range mini-row used inside modals */
.modal-range-track {
  width: 100%;
  accent-color: var(--primary);
}
.modal-range-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--gray-700);
  margin-block-start: var(--sp-2);
}

/* Footer language pill — inverse colors on dark footer */
.footer-lang {
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  background: transparent;
}
.footer-lang:hover { border-color: rgba(255,255,255,0.4); color: #fff; }

/* Drawer footer language button — centred */
.drawer-lang { justify-content: center; }

/* Helper utility for icons that need RTL flip without sprite duplication */
.icon-flip { transform: scaleX(-1); }

/* Sort/results meta wrapper */
.sort-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Form group margin helper used inside modals */
.form-group + .form-group { margin-block-start: var(--sp-5); }

/* ══════════════════════════════════════════════════════════════════════════
   VISA HERO + CARD (visa-listing, visa-detail)
   ══════════════════════════════════════════════════════════════════════════ */
.visa-hero {
  background: linear-gradient(135deg, #0A3D62 0%, var(--secondary) 100%);
  color: var(--on-navy);
  padding-block: var(--sp-12);
  position: relative;
  overflow: hidden;
}
.visa-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.03'%3E%3Cpath d='M40 0l40 40-40 40L0 40z'/%3E%3C/g%3E%3C/svg%3E");
}
.visa-hero-content { position: relative; }
.visa-hero-h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-block-end: var(--sp-3);
}
@media (min-width: 768px) { .visa-hero-h1 { font-size: var(--text-4xl); } }
.visa-hero-sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  line-height: var(--leading-relaxed);
}
.visa-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-block-start: var(--sp-6);
}
.visa-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.9);
}
.visa-trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

/* Category tab strip — mobile swipes, desktop shows every pill (no scroller),
   mirroring home's .pill-row (design-owner decision, July 2026). */
.visa-category-tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-block: var(--sp-4);
  /* Scrollbar inherits the site-wide thin + orange standard — do not hide it. */
}
@media (min-width: 768px) {
  .visa-category-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
/* .visa-cat-tab styling now lives in the unified CATEGORY PILLS component
   (see the CATEGORY PILLS section above). It was navy/blue on hover+active —
   now brand orange like every other pill. Only the .visa-category-tabs
   layout container above is defined here. */

/* Visa card */
.visa-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.visa-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.visa-card-img {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}
/* B3: image-less visa card opens with the home visa-tile's icon header */
.visa-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--sp-3);
}
.visa-card-icon svg { width: 22px; height: 22px; }
.visa-card-body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.visa-card-flag {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
}
.visa-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
}
.visa-card-meta {
  font-size: var(--text-sm);
  color: var(--gray-700);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.visa-card-meta span {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.visa-card-meta svg {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
}
.visa-card-price {
  margin-block-start: auto;
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
}
.visa-card-amount {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
}
.visa-card-currency {
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.visa-card-footer {
  padding: var(--sp-4) var(--sp-5);
  border-block-start: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.visa-card-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--success-light);
  color: var(--success);
}
.visa-card-badge.is-placeholder { visibility: hidden; }
.visa-card-badge--info { background: var(--secondary-light); color: var(--secondary); }
.visa-card-badge--warning { background: #FFF7ED; color: #C2410C; }

/* Container padding helpers */
.pt-section { padding-block-start: var(--sp-6); }
.pb-section-lg { padding-block-end: var(--sp-12); }

/* ══════════════════════════════════════════════════════════════════════════
   AUTH SHARED COMPONENTS (used by login, register, forgot, reset, confirm)
   ══════════════════════════════════════════════════════════════════════════ */
.auth-section {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-12);
  background: var(--bg-warm);
}
.auth-container {
  width: 100%;
  max-width: 440px;
  padding-inline: var(--sp-4);
}
.auth-container.is-wide { max-width: 520px; }
.auth-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8) var(--sp-8);
}
.auth-card.is-centered { text-align: center; }
@media (max-width: 480px) {
  .auth-card { padding: var(--sp-6) var(--sp-5); }
}
.auth-logo-wrap {
  display: flex;
  justify-content: center;
  margin-block-end: var(--sp-6);
}
.auth-logo-wrap img { height: 40px; width: auto; }
.auth-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
  text-align: center;
  margin-block-end: var(--sp-1);
}
.auth-subtitle {
  font-size: var(--text-sm);
  color: var(--gray-700);
  text-align: center;
  margin-block-end: var(--sp-6);
  line-height: var(--leading-relaxed);
}
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.auth-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.auth-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--gray-700);
}
.auth-input-wrap { position: relative; }
.auth-input {
  width: 100%;
  height: 48px;
  padding-inline: var(--sp-4);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--gray-900);
  background: var(--bg-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-input:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px var(--secondary-light);
}
.auth-input.has-icon { padding-inline-start: var(--sp-10); }
.auth-input.has-toggle { padding-inline-end: 3rem; }
.auth-input-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--sp-3);
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  pointer-events: none;
}
.auth-input-toggle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--sp-3);
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  padding: var(--sp-1);
  line-height: 1;
}
.auth-input-toggle:hover { color: var(--gray-700); }
.auth-input-toggle svg { width: 16px; height: 16px; }
.auth-forgot {
  font-size: var(--text-sm);
  color: var(--secondary);
  text-align: end;
  text-decoration: none;
  display: block;
  margin-block-start: calc(var(--sp-2) * -1);
}
.auth-forgot:hover { text-decoration: underline; }
.auth-terms {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--gray-700);
  line-height: var(--leading-relaxed);
  cursor: pointer;
}
.auth-terms input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-block-start: 2px;
}
.auth-terms a { color: var(--secondary); }
.auth-submit {
  width: 100%;
  height: 52px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--gray-400);
  font-size: var(--text-sm);
  margin-block: var(--sp-2);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}
.auth-footer {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray-700);
  margin-block-start: var(--sp-5);
}
.auth-footer a { color: var(--secondary); font-weight: var(--weight-semibold); }
.auth-footer a:hover { text-decoration: underline; }
.auth-footer-line + .auth-footer-line { margin-block-start: var(--sp-2); }

.auth-input.error { border-color: var(--error); }
.auth-error-msg {
  font-size: var(--text-xs);
  color: var(--error);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.auth-error-msg svg { width: 12px; height: 12px; flex-shrink: 0; }

.auth-success-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--success-light);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-block-end: var(--sp-5);
}
/* Same badge, non-success outcomes. The forgot-password page reports three distinct results
   (sent / not registered / send failed) and a green tick on "this email isn't registered"
   would repeat the mistake this page is fixing — saying one thing while meaning another. */
.auth-success-icon.is-warning { background: var(--primary-light); color: var(--primary); }
.auth-success-icon.is-error   { background: var(--error-light);   color: var(--error); }
.auth-success-icon svg { width: 36px; height: 36px; }
.auth-resend {
  font-size: var(--text-sm);
  color: var(--gray-700);
  text-align: center;
  margin-block-start: var(--sp-4);
}
.auth-resend button {
  color: var(--secondary);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}
.auth-trust-note {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-block-start: var(--sp-6);
}

/* Password strength meter */
.password-strength {
  display: flex;
  gap: var(--sp-1);
  margin-block-start: var(--sp-2);
}
.strength-bar {
  height: 4px;
  flex: 1;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  transition: background var(--transition-fast);
}
.strength-bar.weak   { background: var(--error); }
.strength-bar.medium { background: var(--warning); }
.strength-bar.strong { background: var(--success); }
.strength-label {
  font-size: var(--text-xs);
  color: var(--gray-700);
  margin-block-start: var(--sp-1);
}

/* Server-message plumbing for the wired auth forms (no equivalent in the static Design-A,
   whose forms were JS-only). Uses the existing token vocabulary; not a visual redesign. */
.auth-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.auth-form-meta .auth-forgot { margin-block-start: 0; }
.auth-checkbox {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--gray-700);
  cursor: pointer;
  white-space: nowrap;
}
.auth-checkbox input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--sp-5);
  text-align: start;
}
.auth-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-block-start: 1px; }
.auth-alert-error {
  background: var(--error-light);
  border-color: var(--error-border);
  color: var(--error);
}
.auth-alert-success {
  background: var(--success-light);
  border-color: var(--success-border);
  color: var(--success);
}