/* ════════════════════════════════════════════
   MyTicket — Sky-Cabin Style (reference-based)
   მხოლოდ ვიზუალური refresh, HTML არ შეცვლილა
   ════════════════════════════════════════════ */

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

:root {
  /* ════════ SKY (deep blue scale - premium refined) ════════ */
  --color-sky-950: #030B1A;
  --color-sky-900: #081225;
  --color-sky-800: #0F1A2E;
  --color-sky-700: #1E3A6E;
  --color-sky-600: #1D4ED8;
  --color-sky-500: #2563EB;
  --color-sky-400: #3B82F6;
  --color-sky-300: #60A5FA;
  --color-sky-200: #93C5FD;
  --color-sky-100: #DBEAFE;
  --color-sky-50: #F0F5FF;

  /* ════════ CYAN (accent vibrant premium) ════════ */
  --color-cyan-700: #0E7490;
  --color-cyan-600: #0891B2;
  --color-cyan-500: #06B6D4;
  --color-cyan-400: #22D3EE;
  --color-cyan-300: #67E8F9;
  --color-cyan-100: #CFFAFE;
  --color-cyan-50: #ECFEFF;

  /* ════════ PREMIUM ACCENT ════════ */
  --color-gold-500: #D4A574;
  --color-gold-400: #E8C4A0;
  --color-teal-500: #0D9488;
  --color-violet-500: #A855F7;
  --color-fuchsia-500: #D946EF;

  /* ════════ LEGACY ALIASES (back-compat) ════════ */
  --navy: var(--color-sky-800);
  --blue-deep: var(--color-sky-700);
  --blue: var(--color-sky-500);
  --blue-mid: var(--color-sky-400);
  --blue-light: var(--color-sky-300);
  --blue-pale: var(--color-sky-50);
  --blue-pale2: var(--color-sky-100);
  --cyan: var(--color-cyan-600);

  /* ════════ ACCENTS ════════ */
  --amber: #F59E0B;
  --amber-dark: #D97706;
  --emerald: #059669;
  --rose: #E11D48;
  --white: #FFFFFF;
  --gold: var(--color-gold-500);
  --teal: var(--color-teal-500);

  /* ════════ NEUTRAL SCALE ════════ */
  --gray-50: #FAFBFC;
  --gray-100: #F3F4F6;
  --gray-150: #E8EFF8;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* ════════ RADII ════════ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-3xl: 48px;
  --r-full: 9999px;

  /* ════════ SHADOWS ════════ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 12px 24px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 16px rgba(15, 26, 46, 0.10);
  --shadow-lg: 0 16px 32px rgba(15, 26, 46, 0.12), 0 24px 48px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 32px 64px rgba(15, 26, 46, 0.16), 0 40px 80px rgba(0, 0, 0, 0.10);
  --shadow-2xl: 0 48px 96px rgba(15, 26, 46, 0.20);

  /* ════════ BRAND GLOW ════════ */
  --shadow-blue: 0 8px 32px rgba(37, 99, 235, 0.32), 0 16px 48px rgba(37, 99, 235, 0.20);
  --shadow-blue-sm: 0 4px 16px rgba(37, 99, 235, 0.24);
  --shadow-blue-lg: 0 20px 56px rgba(37, 99, 235, 0.40);
  --shadow-cyan: 0 8px 32px rgba(8, 145, 178, 0.30), 0 12px 40px rgba(8, 145, 178, 0.18);
  --shadow-gold: 0 8px 28px rgba(212, 165, 116, 0.40);
  --shadow-violet: 0 8px 32px rgba(168, 85, 247, 0.28);
  --shadow-inset-white: inset 0 1px 0 rgba(255, 255, 255, 0.20);

  /* ════════ GRADIENTS ════════ */
  --grad-hero: linear-gradient(135deg, #030B1A 0%, #0A1F50 25%, #1740A0 60%, #1E6BD8 100%);
  --grad-hero-alt: linear-gradient(120deg, #040D1F 0%, #1E3A6E 40%, #2563EB 80%, #06B6D4 100%);
  --grad-sky-day: linear-gradient(160deg, #F0F5FF 0%, #DBEAFE 40%, #CFFAFE 80%, #F0FDFF 100%);
  --grad-card-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
  --grad-card-glass-premium: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%);
  --grad-blue-shine: linear-gradient(135deg, #2563EB 0%, #0891B2 50%, #06B6D4 100%);
  --grad-gold-shine: linear-gradient(135deg, #D4A574 0%, #E8C4A0 100%);
  --grad-violet-shine: linear-gradient(135deg, #A855F7 0%, #D946EF 100%);
  --grad-section-fade: linear-gradient(180deg, #FAFBFC 0%, #F0F5FF 50%, #FAFBFC 100%);
  --grad-overlay-dark: linear-gradient(180deg, rgba(3, 11, 26, 0) 0%, rgba(3, 11, 26, 0.95) 100%);
  --grad-overlay-light: linear-gradient(180deg, rgba(240, 245, 255, 0) 0%, rgba(240, 245, 255, 0.85) 100%);

  /* ════════ MOTION ════════ */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --dur-xs: 100ms;
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 500ms;
  --dur-slower: 700ms;
  --t: var(--dur-base) var(--ease-smooth);
  --t-fast: var(--dur-fast) var(--ease-out);
  --t-slow: var(--dur-slow) var(--ease-smooth);
  --t-spring: var(--dur-base) var(--ease-spring);

  /* ════════ TYPOGRAPHY ════════ */
  --fs-h1: 42px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 18px; --fs-h5: 16px;
  --fs-body: 15px; --fs-sm: 13px; --fs-xs: 11px;
  --lh-body: 1.7; --lh-heading: 1.15;

  /* ════════ BREAKPOINTS / SPACING ════════ */
  --bp-xs: 480px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;
  --tap-min: 44px; --tap-lg: 48px; --tap-xl: 56px;
  --sp-xs: 4px; --sp-sm: 8px; --sp: 12px; --sp-md: 16px; --sp-lg: 24px;
  --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px;
  --sec-py: 80px; --sec-py-lg: 100px;

  /* ════════ BACKDROP ════════ */
  --backdrop-blur: blur(12px);
  --backdrop-blur-lg: blur(16px);
  --backdrop-opacity: 0.8;

  /* ════════════════════════════════════════════
     PROJECT-SPECIFIC ALIASES (back-compat my code)
     ════════════════════════════════════════════ */
  --ink-900: var(--color-sky-900);
  --ink-700: var(--color-sky-700);
  --ink-500: var(--gray-500);
  --ink-300: var(--gray-300);

  --accent: var(--color-sky-500);
  --accent-dark: var(--color-sky-600);
  --red: var(--rose);
  --green: var(--emerald);
  --green-soft: #d4f5e4;

  --card: var(--white);
  --card-soft: rgba(255, 255, 255, 0.85);
  --border-soft: rgba(15, 26, 46, 0.08);
  --shadow-card: var(--shadow-md);
  --shadow-lift: var(--shadow-lg);

  --font-d: 'Sora', sans-serif;
  --font-b: 'DM Sans', sans-serif;
  --font-brand: 'Bebas Neue', cursive;

  --tip-bg: rgba(15, 26, 46, 0.96);

  --header-h: 54px;
  --footer-h: 104px;
  --nav-w: 60px;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* Desktop/tablet: no scroll */
  scroll-behavior: smooth;
}

/* ─── Premium text selection (cyan tint) ─── */
::selection {
  background: rgba(34, 211, 238, 0.32);
  color: var(--white);
  text-shadow: none;
}
::-moz-selection {
  background: rgba(34, 211, 238, 0.32);
  color: var(--white);
  text-shadow: none;
}

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

/* მობაილზე ნებადართულია სქროლი */
@media (max-width: 767px) {
  html, body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Drawer-ის გახსნისას სრული scroll lock (orientation-ის გათვალისწინებით) */
html.drawer-open,
body.drawer-open,
html.popup-open,
body.popup-open {
  overflow: hidden !important;
  overscroll-behavior: contain;
  touch-action: none;
}

/* ════════════════════════════════════════════
   FOCUS VISIBILITY (Accessibility WCAG 2.1 AA)
   ════════════════════════════════════════════ */
*:focus { outline: none; }

*:focus-visible {
  outline: 2px solid var(--color-cyan-400);
  outline-offset: 2px;
  border-radius: 8px;
  transition: outline-offset var(--t-fast);
}

/* Light surfaces — sky-500 */
.deal-card:focus-visible,
.ctrl-btn:focus-visible {
  outline-color: var(--color-sky-500);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

/* ════════════════════════════════════════════
   CUSTOM SCROLLBAR (Global + Element-specific)
   ════════════════════════════════════════════ */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 110, 240, 0.4) transparent;
}

/* WebKit (Chrome, Safari, Edge) — გლობალური */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(74, 141, 240, 0.5), rgba(37, 83, 216, 0.65));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--color-cyan-400), var(--color-cyan-600));
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ─── Dark search box-ის შიგნით (calendar, pax popover scroll) ─── */
.search-box ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
  background-clip: padding-box;
}

.search-box ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--color-cyan-300), var(--color-cyan-500));
  background-clip: padding-box;
}

/* ─── Footer-ის horizontal scroll (ცხელი შეთავაზებები) ─── */
.deals-footer::-webkit-scrollbar {
  height: 6px;
}

.deals-footer::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--color-cyan-400), var(--color-cyan-600));
  background-clip: padding-box;
  border: 1.5px solid transparent;
}

.deals-footer::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, var(--color-cyan-300), var(--color-cyan-500));
  background-clip: padding-box;
}

/* ─── Autocomplete dropdown ─── */
.ac-dropdown::-webkit-scrollbar {
  width: 6px;
}

.ac-dropdown::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(59, 110, 240, 0.35), rgba(37, 83, 216, 0.5));
  background-clip: padding-box;
  border: 1px solid transparent;
}

/* ─── Results panel ─── */
.results-panel::-webkit-scrollbar {
  width: 6px;
}

/* ════════════════════════════════════════════
   TOOLTIP
   ════════════════════════════════════════════ */
[data-tip] { position: relative; }

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(15, 26, 46, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 500;
  max-width: 200px;
  white-space: normal;
  text-align: center;
  padding: 6px 12px;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  line-height: 1.4;
}

[data-tip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border: 5px solid transparent;
  border-bottom-color: var(--tip-bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.17s ease, transform 0.17s ease;
  z-index: 9999;
}

[data-tip]:hover::after,
[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.side-nav [data-tip]::after {
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%) translateX(-4px);
}

.side-nav [data-tip]::before {
  top: 50%;
  left: calc(100% + 2px);
  transform: translateY(-50%) translateX(-4px) rotate(90deg);
}

.side-nav [data-tip]:hover::after {
  transform: translateY(-50%) translateX(0);
}

.side-nav [data-tip]:hover::before {
  transform: translateY(-50%) translateX(0) rotate(90deg);
}