/* Apple.com Design System & Powerful Line Dance Complex Styles */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

:root {
  --font-apple: 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  --brand-violet: #9826FF;
  --brand-violet-hover: #831ad9;
  --brand-violet-glow: rgba(152, 38, 255, 0.25);
  --brand-violet-soft: rgba(152, 38, 255, 0.12);

  /* Dark Theme (Default Pro Look) */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0c;
  --bg-card: #161617;
  --bg-card-hover: #1d1d1f;
  --bg-elevated: #242426;
  --text-primary: #f5f5f7;
  --text-secondary: #86868b;
  --text-tertiary: #636366;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.18);
  --nav-bg: rgba(0, 0, 0, 0.8);
  --nav-border: rgba(255, 255, 255, 0.08);
  --modal-overlay: rgba(0, 0, 0, 0.85);
  --input-bg: #1c1c1e;
  --input-border: rgba(255, 255, 255, 0.12);
  --badge-bg: rgba(255, 255, 255, 0.06);
}

html.light {
  /* Light Theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f7;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f0f2;
  --bg-elevated: #e8e8ed;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.18);
  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-border: rgba(0, 0, 0, 0.08);
  --modal-overlay: rgba(0, 0, 0, 0.55);
  --input-bg: #f5f5f7;
  --input-border: rgba(0, 0, 0, 0.12);
  --badge-bg: rgba(0, 0, 0, 0.05);
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-apple);
  font-weight: 500;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  margin: 0;
  padding: 0;
}

/* Apple Typography */
.display-headline {
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-weight: 700;
}

.apple-subhead {
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-secondary);
}

/* Violet Gradient Text */
.gradient-text-violet {
  background: linear-gradient(135deg, #ffffff 15%, #d8a8ff 50%, #9826FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

html.light .gradient-text-violet {
  background: linear-gradient(135deg, #1d1d1f 20%, #7514c7 60%, #9826FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Dynamic Navbar: Dark mode vs Light mode */
.apple-nav-blur {
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--nav-border);
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Dark Mode Header (Default) */
header.header-over-hero {
  background-color: #000000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

header.header-scrolled {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Light Mode Header: 90% opacity (10% less transparent) with frosted blur */
html.light header,
html.light header.header-over-hero,
html.light header.header-scrolled {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid #e5e7eb !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Light Mode Header Typography & Controls */
html.light header .brand-title,
html.light header a span.font-semibold {
  color: #111827 !important;
}

html.light header nav a,
html.light header nav button {
  color: #374151 !important;
}

html.light header nav a:hover,
html.light header nav button:hover {
  color: #000000 !important;
}

html.light header nav svg {
  color: #374151;
}

html.light header nav button:hover svg {
  color: #000000;
}

html.light header .lang-switch-container {
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

html.light header .lang-divider {
  color: #9ca3af !important;
  opacity: 0.8 !important;
}

/* Language Button Styling (Dark & Light Themes) */
.lang-btn {
  color: var(--text-secondary);
  font-weight: 500;
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}

.lang-btn:hover {
  opacity: 1;
  color: var(--text-primary);
}

.lang-btn.active,
.lang-btn.text-\[\#9826FF\] {
  color: #9826FF !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

html.light header .lang-btn {
  color: #4b5563 !important;
  opacity: 0.75;
}

html.light header .lang-btn:hover {
  color: #111827 !important;
  opacity: 1;
}

html.light header .lang-btn.active,
html.light header .lang-btn.text-\[\#9826FF\] {
  color: #9826FF !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

html.light header .theme-icon-container {
  color: #374151 !important;
  background-color: #f3f4f6;
  border-color: #e5e7eb !important;
}

html.light header .theme-icon-container:hover {
  color: #000000 !important;
  background-color: #e5e7eb;
}

html.light header .theme-icon-container svg {
  color: #111827 !important;
}

html.light header button[aria-label="Mobile Navigation"] {
  color: #111827 !important;
}

/* Hero Headline: Google Font Inter Bold 700 */
.hero-title-inter,
.hero-title-inter span,
.hero-title-inter .gradient-text-violet {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
}

/* Animated Electric Violet Glow for Hero Title */
@keyframes violetGlowPulse {
  0%, 100% {
    text-shadow: 
      0 0 15px rgba(152, 38, 255, 0.35),
      0 0 30px rgba(152, 38, 255, 0.2);
    filter: drop-shadow(0 0 10px rgba(152, 38, 255, 0.25));
  }
  50% {
    text-shadow: 
      0 0 25px rgba(152, 38, 255, 0.8),
      0 0 50px rgba(152, 38, 255, 0.5),
      0 0 75px rgba(152, 38, 255, 0.3);
    filter: drop-shadow(0 0 20px rgba(152, 38, 255, 0.6));
  }
}

.animated-hero-glow,
.animated-hero-glow span {
  animation: violetGlowPulse 4s ease-in-out infinite;
}

/* Online Registration Section: Solid White Background in Dark Theme */
#regCard {
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
}

#regCard label {
  color: #111827 !important;
  font-weight: 600 !important;
}

#regCard input,
#regCard select {
  background-color: #f9fafb !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
}

#regCard input::placeholder {
  color: #9ca3af !important;
}

#regCard input:focus,
#regCard select:focus {
  border-color: #9826FF !important;
  box-shadow: 0 0 0 3px rgba(152, 38, 255, 0.2) !important;
  outline: none !important;
}

#regCard select option {
  background-color: #ffffff !important;
  color: #111827 !important;
}

#regCard p[data-i18n="reg_privacy"],
#regCard .text-\[11px\] {
  color: #6b7280 !important;
}


/* Apple Cards */
.apple-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.35s ease, 
              box-shadow 0.35s ease,
              background-color 0.35s ease;
}

.apple-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.apple-card-featured {
  background: var(--bg-card);
  border: 1.5px solid var(--brand-violet);
  box-shadow: 0 0 40px -10px var(--brand-violet-glow);
}

/* Apple Buttons */
.apple-btn-primary {
  background-color: var(--brand-violet);
  color: #ffffff;
  border-radius: 9999px;
  font-weight: 600;
  padding: 10px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px 0 rgba(152, 38, 255, 0.35);
}

.apple-btn-primary:hover {
  background-color: var(--brand-violet-hover);
  transform: scale(1.02);
  box-shadow: 0 6px 20px 0 rgba(152, 38, 255, 0.45);
}

.apple-btn-secondary {
  background: var(--badge-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  font-weight: 500;
  padding: 10px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.apple-btn-secondary:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.apple-link {
  color: var(--brand-violet);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.apple-link:hover {
  text-decoration: underline;
}

.apple-link .chevron {
  transition: transform 0.2s ease;
}

.apple-link:hover .chevron {
  transform: translateX(3px);
}

/* Horizontal Reels Slider */
.reels-scroll-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 16px;
  padding-top: 8px;
}

.reels-scroll-container::-webkit-scrollbar {
  display: none;
}

.reel-card-item {
  flex: 0 0 min(280px, 78vw);
  scroll-snap-align: center;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background-color: #121214;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

@media (min-width: 768px) {
  .reel-card-item {
    flex: 0 0 310px;
  }
}

.reel-card-item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}

/* Native Video in Reel */
.reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero Background Video */
.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ========================================================================= */
/* HERO SECTION: IDENTICAL DARK THEATER ACROSS BOTH LIGHT & DARK THEMES     */
/* ========================================================================= */
.hero-video-overlay,
html.light .hero-video-overlay {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: brightness(0.75) !important;
  -webkit-backdrop-filter: brightness(0.75) !important;
}

@media (min-width: 640px) {
  .hero-video-overlay,
  html.light .hero-video-overlay {
    background-color: rgba(0, 0, 0, 0.55) !important;
  }
}

.hero-video-bottom-fade,
html.light .hero-video-bottom-fade {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.4), transparent) !important;
}

/* High-contrast white/light hero typography in both themes */
.hero-section,
html.light .hero-section {
  color: #ffffff !important;
}

.hero-section .display-headline,
html.light .hero-section .display-headline {
  color: #ffffff !important;
}

.hero-section .gradient-text-violet,
html.light .hero-section .gradient-text-violet {
  background: linear-gradient(135deg, #ffffff 15%, #d8a8ff 50%, #9826FF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 35px rgba(152, 38, 255, 0.35) !important;
}

.hero-section .apple-subhead,
html.light .hero-section .apple-subhead {
  color: #e5e5e7 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
}

.hero-section .hero-badge,
html.light .hero-section .hero-badge {
  background-color: rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f5f5f7 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.hero-section .hero-stat-card,
html.light .hero-section .hero-stat-card {
  background-color: rgba(20, 20, 22, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.hero-section .hero-stat-val,
html.light .hero-section .hero-stat-val {
  color: #ffffff !important;
}

.hero-section .hero-stat-lbl,
html.light .hero-section .hero-stat-lbl {
  color: #a1a1a6 !important;
}

.hero-section .hero-explore-btn,
html.light .hero-section .hero-explore-btn {
  color: #d8a8ff !important;
}

/* Permanent Dark Theater for Moments Section */
#moments, html.light #moments {
  background-color: #0B0B0E !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#moments .display-headline, html.light #moments .display-headline {
  color: #ffffff !important;
}

#moments .apple-subhead, html.light #moments .apple-subhead {
  color: #86868b !important;
}

/* ========================================================================= */
/* INVERTED FOOTER / BOTTOM-MOST CONTRAST ANCHOR                             */
/* In Dark Mode: Crisp White Canvas (#ffffff) with black text                */
/* In Light Mode: Deep Pitch Black Canvas (#0B0B0E) with white text          */
/* ========================================================================= */
footer.inverted-footer {
  background-color: #ffffff !important;
  color: #1d1d1f !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

footer.inverted-footer .footer-brand-title {
  color: #1d1d1f !important;
}

footer.inverted-footer .footer-text-secondary,
footer.inverted-footer [data-i18n="footer_location"],
footer.inverted-footer [data-i18n="footer_copyright"] {
  color: #6e6e73 !important;
}

footer.inverted-footer .footer-divider {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

footer.inverted-footer .footer-link,
footer.inverted-footer button {
  color: #1d1d1f !important;
}

footer.inverted-footer .footer-link:hover,
footer.inverted-footer button:hover {
  color: #9826FF !important;
}

/* When in Light Theme, invert footer to deep black */
html.light footer.inverted-footer {
  background-color: #0B0B0E !important;
  color: #f5f5f7 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.light footer.inverted-footer .footer-brand-title {
  color: #f5f5f7 !important;
}

html.light footer.inverted-footer .footer-text-secondary,
html.light footer.inverted-footer [data-i18n="footer_location"],
html.light footer.inverted-footer [data-i18n="footer_copyright"] {
  color: #86868b !important;
}

html.light footer.inverted-footer .footer-divider {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.light footer.inverted-footer .footer-link,
html.light footer.inverted-footer button {
  color: #f5f5f7 !important;
}

html.light footer.inverted-footer .footer-link:hover,
html.light footer.inverted-footer button:hover {
  color: #9826FF !important;
}

/* Frosted Modal */
.apple-modal-backdrop {
  background-color: var(--modal-overlay);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ========================================================================= */
/* MODAL ANIMATIONS: APPLE-STYLE ZOOM & BACKDROP FADE                        */
/* ========================================================================= */

/* Backdrop Fade */
.modal-backdrop-enter {
  opacity: 0 !important;
}
.modal-backdrop-active {
  opacity: 1 !important;
  transition: opacity 250ms ease-out !important;
}
.modal-backdrop-exit {
  opacity: 0 !important;
  transition: opacity 200ms ease-in !important;
}

/* Modal Content Zoom & Fade */
.modal-card-enter {
  opacity: 0 !important;
  transform: scale(0.95) !important;
  transform-origin: center center;
  will-change: transform, opacity;
}
.modal-card-active {
  opacity: 1 !important;
  transform: scale(1) !important;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms ease-out !important;
}
.modal-card-exit {
  opacity: 0 !important;
  transform: scale(0.95) !important;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 200ms ease-in !important;
}

/* Floating Ambient Aura */
.violet-ambient-aura {
  position: absolute;
  pointer-events: none;
  width: min(600px, 90vw);
  height: min(600px, 90vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152, 38, 255, 0.15) 0%, rgba(152, 38, 255, 0) 70%);
  filter: blur(60px);
  z-index: 0;
  max-width: 100vw;
  overflow: hidden;
}

/* ========================================================================= */
/* NAVIGATION MENUS & DRAWERS: LIGHT & DARK MODES                            */
/* ========================================================================= */

#navBackdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html.light #navBackdrop {
  background-color: rgba(255, 255, 255, 0.45) !important;
}

/* Desktop Dropdown / Mega Drawer */
.apple-nav-drawer {
  background: rgba(16, 16, 18, 0.96);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border-bottom: 1px solid var(--border-subtle);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html.light .apple-nav-drawer {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.12) !important;
}

html.light .apple-nav-drawer .drawer-header-border {
  border-color: #e5e7eb !important;
}

html.light .apple-nav-drawer .drawer-badge-text {
  color: #6b7280 !important;
}

html.light .apple-nav-drawer .drawer-close-btn {
  color: #374151 !important;
}

html.light .apple-nav-drawer .drawer-close-btn:hover {
  color: #111827 !important;
}

html.light .apple-nav-drawer .drawer-style-card {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}

html.light .apple-nav-drawer .drawer-style-card:hover {
  background: #ffffff !important;
  border-color: #9826FF !important;
  box-shadow: 0 4px 16px rgba(152, 38, 255, 0.12) !important;
}

html.light .apple-nav-drawer .drawer-style-title {
  color: #111827 !important;
}

html.light .apple-nav-drawer .drawer-style-card:hover .drawer-style-title {
  color: #9826FF !important;
}

html.light .apple-nav-drawer .drawer-style-sub {
  color: #6b7280 !important;
}

/* Mobile Slide-Out Drawer (Dark Theme Default) */
.mobile-menu-drawer {
  background-color: rgba(11, 11, 14, 0.97);
  color: #ffffff;
}

.mobile-menu-drawer .mobile-nav-link {
  color: #ffffff;
  transition: color 0.2s ease;
}

.mobile-menu-drawer .mobile-nav-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.mobile-menu-drawer .mobile-menu-divider {
  border-color: rgba(255, 255, 255, 0.12);
}

.mobile-menu-drawer .mobile-close-btn {
  color: #9ca3af;
}

.mobile-menu-drawer .mobile-close-btn:hover {
  color: #ffffff;
}

/* Pure White Mobile Menu in Light Mode */
html.light .mobile-menu-drawer {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

html.light .mobile-menu-drawer .mobile-nav-link {
  color: #111827 !important;
}

html.light .mobile-menu-drawer .mobile-nav-link:hover {
  color: #9826FF !important;
}

html.light .mobile-menu-drawer .mobile-menu-divider {
  border-color: #e5e7eb !important;
}

html.light .mobile-menu-drawer .mobile-close-btn {
  color: #6b7280 !important;
}

html.light .mobile-menu-drawer .mobile-close-btn:hover {
  color: #111827 !important;
}

/* When drawers are active in light theme, keep header matching white */
html.light header.mobile-menu-active,
html.light header.nav-drawer-active {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

html.light header.mobile-menu-active span.font-semibold,
html.light header.nav-drawer-active span.font-semibold {
  color: #111827 !important;
}

html.light header.mobile-menu-active button,
html.light header.nav-drawer-active button {
  color: #111827 !important;
}

/* Smooth Focus states */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-violet) !important;
  box-shadow: 0 0 0 3px var(--brand-violet-soft) !important;
}