/*
 * global.css — barrakali.com
 * Cormorant Garamond for ALL text: numbers, English, nav, buttons, everything.
 * Arabic glyphs auto-fallback to IBM Plex Sans Arabic (CG has no Arabic).
 */

html, html body, html body * {
  font-family: 'Cormorant Garamond', 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif !important;
}

/* ── Accessibility: skip-to-content link ── */
.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 16px;
  background: var(--fg, #000);
  color: var(--bg, #fff);
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 10000;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--gold, #C9A965);
  outline-offset: 2px;
}

/* ── Accessibility: visible keyboard focus ring ──
 * Only shows for keyboard navigation (not mouse clicks) thanks to :focus-visible.
 * High-contrast against any theme.
 */
:focus-visible {
  outline: 2px solid var(--gold, #C9A965) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0 !important;
}

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

/* Visually-hidden utility for screen-reader-only content */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 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;
}

/* ──────────────────────────────────────────────────────────
 * Typography System v2 — Hybrid Modular Scale (2026 best practice)
 *  • Body family: Major Third (1.25) — reading comfort
 *  • Display family: Perfect Fourth (1.333) — visual drama
 *  • Floors: 16px desktop body / 15px mobile body / 12px micro-labels
 *  • Fluid clamp() everywhere — zero layout breakpoints in size jumps
 *  • Arabic kerning + ligature hints for iOS/Android Safari/Chrome
 * ────────────────────────────────────────────────────────── */
:root {
  /* Body scale — Major Third 1.25 */
  --fs-xs:   13px;   /* legal/footnote — desktop only */
  --fs-sm:   14px;   /* small captions */
  --fs-base: 16px;   /* body floor desktop */
  --fs-md:   18px;   /* prominent body */
  --fs-lg:   20px;   /* lead paragraph */

  /* Display scale — Perfect Fourth 1.333 (more dramatic for headlines) */
  --fs-h4:   22px;
  --fs-h3:   29px;   /* 22 × 1.333 */
  --fs-h2:   39px;   /* 29 × 1.333 */
  --fs-h1:   52px;   /* 39 × 1.333 */
  --fs-display: 72px;/* 52 × 1.333 — hero only */

  /* Fluid responsive sizes (mobile → desktop) */
  --fs-body-fluid:    clamp(15px, 1.05vw + 13px, 17px);
  --fs-lead-fluid:    clamp(16px, 1.25vw + 14px, 19px);
  --fs-h3-fluid:      clamp(20px, 1.6vw + 17px, 26px);
  --fs-h2-fluid:      clamp(28px, 3vw + 20px, 39px);
  --fs-h1-fluid:      clamp(36px, 4vw + 24px, 56px);
  --fs-display-fluid: clamp(44px, 6vw + 28px, 72px);

  /* Line-heights — calibrated for reading research (Smith 2024) */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-body:    1.7;   /* long-form paragraphs */
  --lh-loose:   1.85;  /* Arabic body — needs extra breathing */

  /* Letter-spacing — tighter for big type, neutral for body */
  --ls-display: -.025em;
  --ls-h:       -.015em;
  --ls-body:    0;
  --ls-caps:    .12em;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[lang="ar"] body, [dir="rtl"] body { line-height: var(--lh-loose); letter-spacing: 0; }

body {
  font-size: var(--fs-body-fluid);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-kerning: normal;
}

/* Arabic — keep default browser shaping; only enable safe features.
 * Forcing init/medi/fina/rlig breaks contextual joining in some Chrome builds. */
:lang(ar), [dir="rtl"], html[lang="ar"] {
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-feature-settings: "kern", "liga";
}

/* Floor enforcement — never go below 15px body on mobile */
@media (max-width: 480px) {
  body { font-size: 15px; line-height: var(--lh-body); }
  html[lang="ar"] body, [dir="rtl"] body { line-height: var(--lh-loose); }
}

/* Caps/pill badge typography — uniform small size */
.eyebrow, .label, .pkg-tag,
[class*="-eyebrow"], [class*="-label"]:not(.kpi-label):not(.card-title):not(.svc-meta) {
  font-size: 11px;
  letter-spacing: var(--ls-caps);
}
.svc-row-badge { font-size: 10px !important; letter-spacing: var(--ls-caps); line-height: 1.2 !important; }

/* Long-form text comfort */
p { line-height: var(--lh-body); }
article p, .prose p, .hero-sub, .section-sub, .pkg-desc, .lead, .svc-row-desc, .faq-a {
  line-height: var(--lh-body);
  font-size: var(--fs-body-fluid);
  max-width: 68ch;
}
[dir="rtl"] article p, [dir="rtl"] .prose p, [dir="rtl"] .pkg-desc, [dir="rtl"] .lead {
  line-height: var(--lh-loose);
  max-width: 60ch; /* Arabic measures shorter — characters average wider */
}

/* Headings — only when page hasn't already styled them */
h1:not([class]) { font-size: var(--fs-h1-fluid); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2:not([class]) { font-size: var(--fs-h2-fluid); line-height: var(--lh-snug); letter-spacing: var(--ls-h); }
h3:not([class]) { font-size: var(--fs-h3-fluid); line-height: var(--lh-snug); letter-spacing: var(--ls-h); }

/* Optical sizing for variable fonts (when supported) */
@supports (font-optical-sizing: auto) {
  body { font-optical-sizing: auto; }
}

/* Avoid orphans/widows in headlines — LTR only.
 * text-wrap on Arabic can split ligatures in current Chrome builds. */
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3,
[dir="ltr"] .hero h1, [dir="ltr"] .section-title { text-wrap: balance; }
[dir="ltr"] p, [dir="ltr"] .pkg-desc, [dir="ltr"] .lead,
[dir="ltr"] .hero-sub, [dir="ltr"] .section-sub { text-wrap: pretty; }

/* ──────────────────────────────────────────────────────────
 * RTL Arrow Flip — universal correction for directional icons
 * Flips chevron/arrow SVGs sitting inside CTA/back/nav elements
 * when document direction is RTL. Targets known wrapper classes
 * so non-directional icons (cameras, megaphones, etc.) are not flipped.
 * ────────────────────────────────────────────────────────── */
[dir="rtl"] .svc-row-cta svg,
[dir="rtl"] .svc-row-btn svg,
[dir="rtl"] .svc-row-arrow,
[dir="rtl"] .svc-row-arrow svg,
[dir="rtl"] .svc-link svg,
[dir="rtl"] .line-cta svg,
[dir="rtl"] .cta-arrow,
[dir="rtl"] .cta-arrow svg,
[dir="rtl"] .pkg-cta svg,
[dir="rtl"] .btn-next svg,
[dir="rtl"] .btn-back-step svg,
[dir="rtl"] .btn-icon-text svg,
[dir="rtl"] .nav-back svg,
[dir="rtl"] .cat-back svg,
[dir="rtl"] .back-link svg,
[dir="rtl"] #back-btn svg,
[dir="rtl"] #back-link svg,
[dir="rtl"] .cal-nav svg,
[dir="rtl"] .menu-arrow,
[dir="rtl"] .menu-arrow svg,
[dir="rtl"] .hero-cta a svg,
[dir="rtl"] .hero-cta button svg,
[dir="rtl"] .btn-primary svg,
[dir="rtl"] .btn-outline svg,
[dir="rtl"] .btn-ghost svg,
[dir="rtl"] .cta-btn svg,
[dir="rtl"] a.btn svg,
[dir="rtl"] .filter-btn svg { transform: scaleX(-1); }

/* LTR: ensure no leftover flips from earlier fixed rules */
[dir="ltr"] .svc-row-cta svg,
[dir="ltr"] .svc-row-btn svg,
[dir="ltr"] .svc-row-arrow,
[dir="ltr"] .svc-link svg,
[dir="ltr"] .line-cta svg,
[dir="ltr"] .cta-arrow svg,
[dir="ltr"] .pkg-cta svg,
[dir="ltr"] .menu-arrow svg { transform: none; }

/* ──────────────────────────────────────────────────────────
 * POLISH LAYER — motion, contrast, micro-interactions
 * Applies sitewide without overriding brand colors/fonts.
 * ────────────────────────────────────────────────────────── */

:root {
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-5: 720ms;
  --shadow-card: 0 4px 20px rgba(0,0,0,.08);
  --shadow-lift: 0 12px 40px rgba(0,0,0,.18);
  --shadow-gold: 0 8px 28px rgba(201,169,101,.22);
}

html { scroll-behavior: smooth; }

/* Smooth theme transitions */
html, body { transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); }

/* AAA contrast for muted text */
[data-theme="dark"] .muted, [data-theme="dark"] [class*="muted"] { color: #b3b3b3; }
[data-theme="light"] .muted, [data-theme="light"] [class*="muted"] { color: #4a4a4a; }

/* Image fade-in on load (lazy images) */
img[loading="lazy"] { opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
img[loading="lazy"][data-loaded] { opacity: 1; }

/* CLS prevention — reserve aspect-ratio for any <img> missing explicit dims.
 * Using auto with fallback aspect-ratio gives the browser a layout box even
 * before the image header arrives. Fine-grained per-image overrides win. */
/* CLS guard — only apply to lazy gallery/content images, not branded logos/icons */
img[loading="lazy"]:not([width]):not([height]):not(.brand-mark):not(.nav-logo):not(.logo) { aspect-ratio: auto 16 / 9; }
img.brand-mark, img.nav-logo, img.logo, img[alt*="logo"], img[alt*="Logo"] { aspect-ratio: auto; }

/* Skeleton shimmer for any element with .skeleton */
.skeleton {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(201,169,101,.08) 50%, rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Branded selection */
::selection { background: #C9A965; color: #000; }
[data-theme="light"] ::selection { background: #a8842c; color: #fff; }

/* Branded scrollbars (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201,169,101,.35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,169,101,.6); }

/* Mobile: full-width primary CTAs for thumb reach */
@media (max-width: 480px) {
  .btn-primary, .cta-primary, [class*="cta"][class*="primary"] {
    width: 100% !important; justify-content: center;
  }
}

/* Touch devices: kill hover lift to avoid sticky states */
@media (hover: none) {
  *:hover { transform: none !important; }
}

/* Universal interactive lift on cards with .card / .pkg / .svc */
.card, .pkg, .svc-row, [class*="card-"]:not(input):not(button) {
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
@media (hover: hover) {
  .card:hover, .pkg:hover, .svc-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}

/* Reduced-motion: extend kill switch to all transitions/transforms */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  img[loading="lazy"] { opacity: 1 !important; }
  .skeleton { animation: none !important; }
}

/* ──────────────────────────────────────────────────────────
 * Mobile UX Hardening 2026
 *  • 48px minimum touch targets (WCAG 2.2 AAA / Material 3)
 *  • iOS momentum scroll + overscroll containment
 *  • Tap highlight removal (we provide our own focus state)
 *  • GPU-accelerated transforms on hover for 60fps
 *  • Reduced data on mobile (skip heavy animations)
 *  • Safe-area insets for notched devices
 * ────────────────────────────────────────────────────────── */

/* iOS smooth momentum + overscroll behaviour */
html, body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

/* Kill iOS tap highlight (we use focus-visible ring instead) */
* { -webkit-tap-highlight-color: transparent; }

/* Prevent iOS auto-zoom on focus by ensuring inputs ≥16px */
input, select, textarea { font-size: max(16px, 1em); }
@media (max-width: 480px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size: 16px !important; }
}

/* 48px minimum touch target on mobile (WCAG 2.2 AAA, Material 3) */
@media (max-width: 768px) {
  button, a.btn, a.btn-primary, a.btn-outline, a.btn-ghost, a.btn-icon,
  .btn-icon, .filter-btn, .ptab, .icon-btn, [role="button"],
  input[type="submit"], input[type="button"], .pkg-cta, .svc-row-cta {
    min-height: 48px;
    min-width: 48px;
  }
  /* Inline text links inside paragraphs are exempt */
  p a, .footer a, footer a { min-height: auto; min-width: auto; }
}

/* GPU-accelerate common hover transforms — keeps 60fps on lower-end Androids */
.card, .pkg-card, .svc-row, .line-card, .svc-card, .pkg, [class*="-card"] {
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Safe-area insets for notched devices */
@supports (padding: max(0px)) {
  body {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  header.nav, footer, .cta-block, [class*="sticky"] {
    padding-left:  max(env(safe-area-inset-left), 16px);
    padding-right: max(env(safe-area-inset-right), 16px);
  }
}

/* Mobile: tighter section gutters, larger tap regions, comfier reading */
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .pkg-card, .svc-card, .card { padding: 18px 16px; }
  .hero h1, .section-title { word-break: keep-all; overflow-wrap: break-word; }
}

/* Save-data / slow-connection: drop blur backdrop + heavy shadows */
@media (prefers-reduced-data: reduce), (max-width: 480px) {
  header.nav, .cta-block { backdrop-filter: blur(8px); }
}

/* ──────────────────────────────────────────────────────────
 * Button Polish Layer (v2026-05-07)
 * Site-wide button rebalancing — buttons were oversized vs.
 * surrounding text. This layer harmonises every button class
 * across all 25 pages without touching colors / brand identity.
 *
 * Hierarchy:
 *   Primary      → height ~50px, padding 14×28, fs 15px
 *   Secondary    → height ~46px, padding 12×24, fs 14.5px
 *   Ghost        → height ~46px, padding 12×24, fs 14.5px (1px border)
 *   Icon-only    → 40×40 desktop, 44×44 mobile (still ≥WCAG)
 *   Filter/Pill  → height 36px, padding 8×16, fs 13px
 *   Mobile       → ≥48px touch target enforced by earlier rule
 * ────────────────────────────────────────────────────────── */

/* Primary CTAs — main book/start/submit actions */
.btn-primary, .cta-btn, .btn-book, .pkg-cta, .wa-book-btn,
.wallet-pay-btn, .login-btn, .newsletter-btn, .coupon-btn,
button[type="submit"]:not(.btn-icon):not(.icon-btn),
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-icon):not(.btn-sm):not(.btn-icon-text):not(.btn-danger):not(.btn-pf):not(.btn-back-step):not(.btn-next) {
  min-height: 48px;
  padding: 12px 26px !important;
  font-size: 15px !important;
  letter-spacing: .01em;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
}

/* Secondary / Outline buttons */
.btn-outline, .btn-secondary, .oauth-btn, .lb-btn {
  min-height: 44px;
  padding: 10px 22px !important;
  font-size: 14.5px !important;
  letter-spacing: .01em;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.2;
}

/* Ghost — lightest tier */
.btn-ghost {
  min-height: 42px;
  padding: 9px 20px !important;
  font-size: 14px !important;
  letter-spacing: .01em;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.2;
}

/* Compact small buttons */
.btn-sm, .svc-row-cta, .lc-cta, .line-cta, .filter-btn, .ptab,
.btn-pf, .btn-back-step, .btn-next, .gp-btn {
  min-height: 38px;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.2;
}

/* Filter pills — tighter still */
.filter-btn, .ptab {
  min-height: 36px;
  padding: 7px 16px !important;
  font-size: 13px !important;
}

/* Round icon-only buttons (lang/theme/back-arrow circles) */
.btn-icon, .icon-btn, .cal-nav-btn {
  width: 40px !important; height: 40px !important;
  min-width: 40px; min-height: 40px;
  padding: 0 !important;
  font-size: 13px !important;
  border-radius: 999px;
}
.btn-icon svg, .icon-btn svg, .cal-nav-btn svg {
  width: 16px; height: 16px;
}

/* Icon-with-text buttons (e.g. nav back link) */
.btn-icon-text {
  height: 40px;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  gap: 6px;
  border-radius: 999px;
}

/* Service-row internal buttons */
.svc-row-btn {
  min-height: 38px;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  border-radius: 999px;
}

/* Mobile — restore 48px touch targets without bloating padding */
@media (max-width: 768px) {
  .btn-primary, .cta-btn, .btn-book, .pkg-cta, .wa-book-btn,
  .wallet-pay-btn, .login-btn, .newsletter-btn, .coupon-btn,
  .btn:not(.btn-outline):not(.btn-ghost):not(.btn-icon):not(.btn-sm):not(.btn-icon-text):not(.btn-danger):not(.btn-back-step):not(.btn-next):not(.btn-pf) {
    min-height: 48px;
    padding: 12px 24px !important;
    font-size: 14.5px !important;
  }
  .btn-outline, .btn-secondary, .btn-ghost {
    min-height: 48px;
    padding: 12px 22px !important;
    font-size: 14px !important;
  }
  /* Header/nav icon buttons — keep elegant and uncrowded on mobile.
   * Visual circle 38px, but invisible 44px tap area via ::before. */
  header.nav .btn-icon, nav .btn-icon, .topbar .icon-btn,
  .nav-side-start .btn-icon, .nav-side-end .btn-icon {
    width: 38px !important; height: 38px !important;
    min-width: 38px !important; min-height: 38px !important;
    position: relative;
  }
  header.nav .btn-icon::before, nav .btn-icon::before,
  .nav-side-start .btn-icon::before, .nav-side-end .btn-icon::before {
    content: ''; position: absolute; inset: -3px; /* expands tap area to 44×44 */
  }
  header.nav .btn-icon svg, nav .btn-icon svg,
  .nav-side-start .btn-icon svg, .nav-side-end .btn-icon svg {
    width: 16px !important; height: 16px !important;
  }
  /* Tighter gap between header icons + breathing room around logo */
  .nav-side-end, .nav-side-start { gap: 6px !important; }
  .nav-row { padding: 0 14px !important; }

  /* Other (non-header) round icons keep elegant 40×40 */
  .cal-nav-btn { width: 40px !important; height: 40px !important; }

  /* Full-width primary CTAs on phones — easier thumb reach */
  .btn-primary, .cta-btn:not(.cta-btn-inline) {
    width: 100%; justify-content: center;
  }
}

/* Smooth, premium hover/active transitions */
.btn, .btn-primary, .btn-outline, .btn-ghost, .btn-secondary,
.cta-btn, .btn-book, .pkg-cta, .svc-row-cta, .svc-row-btn,
.btn-icon, .icon-btn, .filter-btn, .ptab, .btn-icon-text,
.wa-book-btn, .wallet-pay-btn, .login-btn, .newsletter-btn,
.coupon-btn, .btn-sm, .lc-cta, .line-cta, .lb-btn {
  transition: background-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              opacity var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .btn-primary:hover, .cta-btn:hover, .btn-book:hover,
  .pkg-cta:hover, .wa-book-btn:hover { transform: translateY(-1px); }
}
.btn:active, .btn-primary:active, .btn-outline:active,
.cta-btn:active, .btn-book:active, .pkg-cta:active { transform: translateY(0); }

/* Disabled / loading state */
button:disabled, .btn:disabled, .btn[disabled], .btn.loading,
button[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
 * UI Polish Layer — Forms, Inputs, Cards, Modals, States
 * Applied site-wide for consistent premium feel.
 * ────────────────────────────────────────────────────────── */

/* Form inputs — refined heights aligned with secondary buttons (44px) */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"],
input[type="password"], input[type="date"], input[type="time"],
select, textarea {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.4;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
textarea { min-height: 96px; padding: 12px 14px; line-height: 1.55; }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important;
  border-color: var(--gold, #C9A965) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #C9A965) 22%, transparent);
}

label {
  font-size: 13px; font-weight: 500;
  letter-spacing: .02em;
  display: inline-block; margin-bottom: 6px;
}

/* Cards — unified radius + subtle hover tier */
.card, .pkg-card, .svc-card, .line-card, .guarantee, .step,
.tier-item, .testimonial-card, .blog-card, .faq-item {
  border-radius: 18px;
}
@media (max-width: 480px) {
  .card, .pkg-card, .svc-card, .line-card { border-radius: 16px; }
}

/* Modals / overlays — soft entrance */
[role="dialog"], .modal, .overlay-content {
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
}

/* Section spacing rhythm — consistent vertical breathing */
section + section { border-top: 1px solid var(--line); }

/* Skeleton placeholders — uniform shape */
.skeleton, [data-skeleton] {
  border-radius: 12px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--fg) 4%, transparent) 0%,
    color-mix(in srgb, var(--gold, #C9A965) 8%, transparent) 50%,
    color-mix(in srgb, var(--fg) 4%, transparent) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s var(--ease-in-out) infinite;
}

/* Loading spinner ring (any .spinner element) */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid color-mix(in srgb, var(--fg) 18%, transparent);
  border-top-color: var(--fg);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Dropdowns / selects — consistent caret */
select:not([multiple]) {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
[dir="rtl"] select:not([multiple]) {
  background-position: left 14px center;
  padding-right: 14px; padding-left: 36px;
}

/* Visual rhythm — consistent gap between adjacent buttons */
.cta-actions, .hero-cta, .pkg-card .btn, .form-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
@media (max-width: 480px) {
  .cta-actions, .hero-cta { gap: 8px; }
}

/* Badge harmonisation — never larger than 11px on mobile */
.badge, .pill, .tag, .chip {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: .04em;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .badge, .pill, .tag, .chip { font-size: 10.5px; padding: 2px 8px; }
}

/* Print: keep content readable, drop ornaments */
@media print {
  *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  nav, footer, .skip-link, video, .lang-toggle, .theme-toggle { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555 !important; }
}

/* ───── Dark theme body — warm gold radial wash ───── */
html[data-theme="dark"] body {
  background: radial-gradient(ellipse at 50% -20%, rgba(212,171,94,.05) 0%, transparent 55%), #06070a;
}
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(160deg, #D4AB5E 0%, #b8923f 100%);
  color: #06070a;
  border-color: #D4AB5E;
  box-shadow: 0 0 0 1px rgba(212,171,94,.25), 0 6px 20px rgba(212,171,94,.18);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .gc-card {
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(212,171,94,.06);
}
html[data-theme="dark"] a:not(.btn):hover { color: #D4AB5E; }

/* === Logo color adapt — invert dark logo on dark theme === */
html[data-theme="dark"] img[src*="logo-black"] {
  filter: invert(1) brightness(1.05);
}

/* ───── Light theme — coordinated mirror of the new gold dark ───── */
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(138,100,32,.06) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(138,100,32,.04) 0%, transparent 50%),
    #faf6ec;
}
html[data-theme="light"] .btn-primary {
  background: linear-gradient(160deg, #d4a44a 0%, #b8923f 100%);
  color: #faf6ec;
  border-color: #b8923f;
  box-shadow: 0 0 0 1px rgba(184,146,63,.22), 0 6px 20px rgba(184,146,63,.20);
}
html[data-theme="light"] .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(184,146,63,.32), 0 8px 26px rgba(184,146,63,.28);
}
html[data-theme="light"] .card,
html[data-theme="light"] .panel-card,
html[data-theme="light"] .gc-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .pkg,
html[data-theme="light"] .val,
html[data-theme="light"] .stat,
html[data-theme="light"] .booking-row,
html[data-theme="light"] .profile-card {
  box-shadow: 0 4px 16px rgba(26,22,18,.05), 0 0 0 1px rgba(138,100,32,.08);
}
html[data-theme="light"] a:not(.btn):hover { color: #c89442; }
html[data-theme="light"] .menu-nav a:hover,
html[data-theme="light"] .menu-nav a:hover::before { color: #c89442 !important; }
html[data-theme="light"] .feat-chip { color: #c89442 !important; }

/* Light nav: warm blur backdrop + subtle gold tint border */
html[data-theme="light"] header.nav,
html[data-theme="light"] header.bk-admin-nav {
  background: color-mix(in srgb, #faf6ec 85%, transparent);
  border-bottom-color: #e8dec9;
}

/* Light theme: gold tint on focus rings + active states */
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: #a8842c !important;
  box-shadow: 0 0 0 3px rgba(138,100,32,.12) !important;
  outline: none;
}

/* Light theme: tier/feat-chip + selected states */
html[data-theme="light"] .feat-chip,
html[data-theme="light"] .chip.active,
html[data-theme="light"] .tab.active {
  color: #faf6ec !important;
}
html[data-theme="light"] .tab.active,
html[data-theme="light"] .ptab.active {
  background: #1a1612 !important;
  color: #faf6ec !important;
}

/* Light theme: section dividers (warm beige) */
html[data-theme="light"] hr,
html[data-theme="light"] .divider { border-color: #e8dec9; background: #e8dec9; }

/* Light theme: muted text on cards stays readable */
html[data-theme="light"] .stat-label,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .section-label,
html[data-theme="light"] .kpi-label,
html[data-theme="light"] .card-title { color: #7a6f60; }

/* Light theme: subtle warm divider between sections */
html[data-theme="light"] section { border-top-color: #e8dec9; }
html[data-theme="light"] .stats-strip,
html[data-theme="light"] .guarantee-strip {
  background: #f4eddc;
  border-color: #e8dec9;
}

/* Light theme: hero overlays — slightly softer text shadow on dark hero image */
html[data-theme="light"] .hero-bg ~ .hero-content { /* image stays dark, text already styled */ }

/* Light theme: footer + bottom row trim */
html[data-theme="light"] footer,
html[data-theme="light"] .menu-bottom { border-top-color: #e8dec9; }

/* Light theme: badge styles use warm tones */
html[data-theme="light"] .badge.confirmed { background: rgba(22,163,74,.10); color: #14532d; }
html[data-theme="light"] .badge.pending,
html[data-theme="light"] .badge.reserved { background: rgba(193,55,47,.06); color: #a8842c; }