/* ═══════════════════════════════════════════════════
   Bomaye Concept — Shared Styles
   Royal Blue #002FA7 · Accent Red #FF3B30
   ═══════════════════════════════════════════════════ */

/* ─── Base ─── */
html {
  scroll-behavior: smooth;
  background-color: #FAFCFF;
  color: #111827;
}

body, p, span, a, div, button, input, label, li,
.schibsted-grotesk-regular {
  font-family: "Schibsted Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6,
.saira-stencil-one-regular,
.brand-display {
  font-family: "Saira Stencil One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* ─── Nav ─── */
.nav-blur {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background-color: rgba(255, 255, 255, 0.85);
}

/* ─── Decorative ─── */
.mockup-grid {
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 20px 20px;
}

[x-cloak] { display: none; }

/* ─── Premium 3D Buttons ─── */
.btn-3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 19px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
  border: none;
  letter-spacing: -0.01em;
}
.btn-3d:active { transform: translateY(2px); }

/* Brand button — royal blue */
.btn-3d-brand {
  background: linear-gradient(180deg, #1044C4 0%, #002FA7 100%);
  color: #ffffff;
  box-shadow:
    0px 8px 16px -4px rgba(0, 47, 167, 0.4),
    0px 4px 6px -2px rgba(0, 47, 167, 0.2),
    inset 0px 1px 1px rgba(255, 255, 255, 0.3),
    inset 0px -2px 4px rgba(0, 20, 80, 0.6),
    0 0 0 1px #00227A;
}
.btn-3d-brand:hover {
  background: linear-gradient(180deg, #2658D6 0%, #0038C0 100%);
  transform: translateY(-1px);
  box-shadow:
    0px 12px 20px -4px rgba(0, 47, 167, 0.5),
    0px 6px 8px -2px rgba(0, 47, 167, 0.3),
    inset 0px 1px 1px rgba(255, 255, 255, 0.4),
    inset 0px -2px 4px rgba(0, 20, 80, 0.6),
    0 0 0 1px #00227A;
}
.btn-3d-brand:active {
  box-shadow:
    0px 2px 4px -1px rgba(0, 47, 167, 0.3),
    inset 0px 2px 6px rgba(0, 20, 80, 0.8),
    0 0 0 1px #00227A;
}

/* Accent button — red */
.btn-3d-accent {
  background: linear-gradient(180deg, #FF5247 0%, #E0342A 100%);
  color: #ffffff;
  box-shadow:
    0px 8px 16px -4px rgba(255, 59, 48, 0.4),
    0px 4px 6px -2px rgba(255, 59, 48, 0.2),
    inset 0px 1px 1px rgba(255, 255, 255, 0.3),
    inset 0px -2px 4px rgba(180, 20, 15, 0.5),
    0 0 0 1px #CC2E25;
}
.btn-3d-accent:hover {
  background: linear-gradient(180deg, #FF6960 0%, #FF3B30 100%);
  transform: translateY(-1px);
  box-shadow:
    0px 12px 20px -4px rgba(255, 59, 48, 0.5),
    0px 6px 8px -2px rgba(255, 59, 48, 0.3),
    inset 0px 1px 1px rgba(255, 255, 255, 0.4),
    inset 0px -2px 4px rgba(180, 20, 15, 0.5),
    0 0 0 1px #CC2E25;
}
.btn-3d-accent:active {
  box-shadow:
    0px 2px 4px -1px rgba(255, 59, 48, 0.3),
    inset 0px 2px 6px rgba(180, 20, 15, 0.8),
    0 0 0 1px #CC2E25;
}

/* Dark button */
.btn-3d-dark {
  background: linear-gradient(180deg, #3A3A3A 0%, #151515 100%);
  color: #ffffff;
  box-shadow:
    0px 8px 16px -4px rgba(0, 0, 0, 0.4),
    0px 4px 6px -2px rgba(0, 0, 0, 0.2),
    inset 0px 1px 1px rgba(255, 255, 255, 0.15),
    inset 0px -2px 4px rgba(0, 0, 0, 0.5),
    0 0 0 1px #050505;
}
.btn-3d-dark:hover {
  background: linear-gradient(180deg, #424242 0%, #1A1A1A 100%);
  transform: translateY(-1px);
  box-shadow:
    0px 12px 20px -4px rgba(0, 0, 0, 0.5),
    0px 6px 8px -2px rgba(0, 0, 0, 0.3),
    inset 0px 1px 1px rgba(255, 255, 255, 0.25),
    inset 0px -2px 4px rgba(0, 0, 0, 0.6),
    0 0 0 1px #050505;
}
.btn-3d-dark:active {
  box-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.3),
    inset 0px 2px 6px rgba(0, 0, 0, 0.8),
    0 0 0 1px #050505;
}

/* White button */
.btn-3d-white {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
  color: #111827;
  box-shadow:
    0px 8px 16px -4px rgba(0, 0, 0, 0.1),
    0px 4px 6px -2px rgba(0, 0, 0, 0.05),
    inset 0px 1px 1px #FFFFFF,
    inset 0px -2px 4px rgba(0, 0, 0, 0.06),
    0 0 0 1px #E5E7EB;
}
.btn-3d-white:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
  transform: translateY(-1px);
  box-shadow:
    0px 12px 20px -4px rgba(0, 0, 0, 0.12),
    0px 6px 8px -2px rgba(0, 0, 0, 0.08),
    inset 0px 1px 1px #FFFFFF,
    inset 0px -2px 4px rgba(0, 0, 0, 0.05),
    0 0 0 1px #E5E7EB;
}
.btn-3d-white:active {
  box-shadow:
    0px 2px 4px -1px rgba(0, 0, 0, 0.05),
    inset 0px 2px 6px rgba(0, 0, 0, 0.1),
    0 0 0 1px #E5E7EB;
}

/* ─── Chat Animations (index) ─── */
@keyframes messageFadeIn {
  0%, 10% { opacity: 0; transform: translateY(10px); }
  15%, 85% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-10px); }
}
.msg-anim-1 { animation: messageFadeIn 12s infinite 0s; }
.msg-anim-2 { animation: messageFadeIn 12s infinite 4s; opacity: 0; }
.msg-anim-3 { animation: messageFadeIn 12s infinite 8s; opacity: 0; }

/* ─── FAQ Accordion ─── */
.faq-btn[aria-expanded="true"] {
  background: linear-gradient(to right, #ffffff, #f8fafc);
  border-color: rgba(0, 47, 167, 0.2);
}
.faq-btn[aria-expanded="true"] .faq-icon {
  background-color: #002FA7;
  border-color: #002FA7;
}
.faq-btn[aria-expanded="true"] .faq-icon i { color: white !important; }
.faq-icon { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-icon i { transition: color 0.3s ease; }

/* ─── Floating Illustrations ─── */
@keyframes floatUp { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } }
@keyframes floatDown { 0% { transform: translateY(0); } 50% { transform: translateY(15px); } 100% { transform: translateY(0); } }
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(0, 47, 167, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(0, 47, 167, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 47, 167, 0); } }
.anim-float-up { animation: floatUp 6s ease-in-out infinite; }
.anim-float-down { animation: floatDown 7s ease-in-out infinite; }
.anim-pulse { animation: pulseGlow 2.5s infinite; }

/* ─── Marquee ─── */
@keyframes marqueeLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marqueeRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.animate-marquee-left { animation: marqueeLeft 18s linear infinite; }
.animate-marquee-right { animation: marqueeRight 18s linear infinite; }

/* ─── Gradient slug ─── */
@keyframes gradientX { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.animate-gradient-x { animation: gradientX 4s ease infinite; }

/* ─── Admin modals ─── */
.modal { display: none; }
.modal.active { display: flex; }

/* ─── Auth pages — red accent stripe ─── */
.auth-accent-stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #002FA7, #FF3B30, #002FA7);
}

/* ─── Navbar Logo ─── */
.navbar-logo {
  height: 2.75rem;
  width: auto;
  border-radius: 10px;
  box-shadow:
    0px 4px 8px -2px rgba(0, 0, 0, 0.12),
    0px 2px 4px -1px rgba(0, 0, 0, 0.06),
    inset 0px 1px 1px rgba(255, 255, 255, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.navbar-logo:hover {
  transform: translateY(-1px);
  box-shadow:
    0px 6px 12px -2px rgba(0, 0, 0, 0.15),
    0px 3px 6px -1px rgba(0, 0, 0, 0.08),
    inset 0px 1px 1px rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════
   CINEMATIC HERO
   ═══════════════════════════════════════════════════ */

/* ─── Full-screen hero ─── */
.hero-cinema {
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Logo ─── */
.hero-cinema .hero-logo {
  height: clamp(5rem, 12vw, 10rem);
  width: auto;
  border-radius: 16px;
  filter: brightness(1.1);
}

/* ─── Film grain overlay ─── */
.hero-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* ─── Vignette ─── */
.hero-vignette {
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

/* ─── Content entrance animation ─── */
.hero-content {
  animation: heroFadeIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroFadeIn {
  0% { opacity: 0; transform: translateY(30px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Slug text ─── */
.hero-slug-cinema {
  text-shadow: 0 0 60px rgba(0, 47, 167, 0.3), 0 0 120px rgba(0, 47, 167, 0.1);
}

/* ─── Scroll indicator pulse ─── */
.hero-scroll-indicator {
  animation: scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.6; transform: translateY(6px); }
}

/* ─── Letterbox bars ─── */
.hero-letterbox {
  background: #000;
  height: 2vh;
}
@media (min-width: 768px) {
  .hero-letterbox {
    height: 6vh;
  }
}

/* ─── Navbar — dark mode (on hero) ─── */
.nav-dark {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background-color: rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.nav-dark a,
.nav-dark button {
  color: rgba(255, 255, 255, 0.6);
}
.nav-dark a:hover,
.nav-dark button:hover {
  color: #fff;
}
.nav-dark .lang-inactive {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
.nav-dark .lang-inactive:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.nav-dark .nav-blur {
  background: transparent;
}

/* ─── Navbar transition to light after scroll ─── */
.nav-scrolled {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(229, 231, 235, 0.8);
}
.nav-scrolled a,
.nav-scrolled button {
  color: inherit;
}

/* ═══════════════════════════════════════════════════
   DARK THEME — Toggled via .dark class on <html>
   JS defaults to the visitor's OS preference,
   then allows manual override via the toggle.
   ═══════════════════════════════════════════════════ */

html.dark {
  background-color: #0B1120;
  color: #E2E8F0;
  color-scheme: dark;
}

  /* ─── Tailwind background overrides ─── */
  html.dark .bg-white                { background-color: #111827; }
  html.dark .bg-white\/80            { background-color: rgba(17,24,39,0.8); }
  html.dark .bg-gray-50              { background-color: #0F172A; }
  html.dark .bg-gray-50\/50          { background-color: rgba(15,23,42,0.5); }
  html.dark .bg-gray-100             { background-color: #1E293B; }

  /* ─── Tailwind text overrides ─── */
  html.dark .text-dark               { color: #F1F5F9; }
  html.dark .text-gray-800           { color: #E2E8F0; }
  html.dark .text-gray-600           { color: #CBD5E1; }
  html.dark .text-gray-500           { color: #94A3B8; }
  html.dark .text-gray-400           { color: #64748B; }

  /* ─── Tailwind border overrides ─── */
  html.dark .border-gray-100         { border-color: #1E293B; }
  html.dark .border-gray-200         { border-color: #334155; }
  html.dark .border-gray-200\/80     { border-color: rgba(51,65,85,0.8); }

  /* ─── Hover / Focus state overrides ─── */
  html.dark .hover\:text-dark:hover  { color: #F1F5F9; }
  html.dark .focus\:bg-white:focus   { background-color: #1E293B; }

  /* ─── Placeholder text ─── */
  html.dark .placeholder\:text-gray-400::placeholder { color: #64748B; }

  /* ─── Form elements ─── */
  html.dark input:not([type="checkbox"]):not([type="radio"]),
  html.dark select,
  html.dark textarea {
    background-color: #1E293B;
    border-color: #334155;
    color: #E2E8F0;
  }
  html.dark input::placeholder,
  html.dark textarea::placeholder { color: #64748B; }

  /* ─── Nav ─── */
  html.dark .nav-blur {
    background-color: rgba(17,24,39,0.85);
  }
  html.dark .nav-scrolled {
    background-color: rgba(11,17,32,0.92);
    border-bottom-color: rgba(51,65,85,0.6);
  }
  html.dark .nav-scrolled a,
  html.dark .nav-scrolled button { color: rgba(255,255,255,0.6); }
  html.dark .nav-scrolled a:hover,
  html.dark .nav-scrolled button:hover { color: #fff; }

  /* ─── 3D Button — White variant (invert for dark) ─── */
  html.dark .btn-3d-white {
    background: linear-gradient(180deg, #1E293B 0%, #111827 100%);
    color: #E2E8F0;
    box-shadow:
      0px 8px 16px -4px rgba(0,0,0,0.3),
      0px 4px 6px -2px rgba(0,0,0,0.15),
      inset 0px 1px 1px rgba(255,255,255,0.06),
      inset 0px -2px 4px rgba(0,0,0,0.3),
      0 0 0 1px #334155;
  }
  html.dark .btn-3d-white:hover {
    background: linear-gradient(180deg, #334155 0%, #1E293B 100%);
    box-shadow:
      0px 12px 20px -4px rgba(0,0,0,0.35),
      0px 6px 8px -2px rgba(0,0,0,0.2),
      inset 0px 1px 1px rgba(255,255,255,0.08),
      inset 0px -2px 4px rgba(0,0,0,0.3),
      0 0 0 1px #334155;
  }
  html.dark .btn-3d-white:active {
    box-shadow:
      0px 2px 4px -1px rgba(0,0,0,0.2),
      inset 0px 2px 6px rgba(0,0,0,0.4),
      0 0 0 1px #334155;
  }

  /* ─── FAQ ─── */
  html.dark .faq-btn[aria-expanded="true"] {
    background: linear-gradient(to right, #111827, #0F172A);
    border-color: rgba(0,47,167,0.3);
  }

  /* ─── Alert / status boxes ─── */
  html.dark .bg-red-50     { background-color: rgba(239,68,68,0.1); }
  html.dark .bg-green-50   { background-color: rgba(34,197,94,0.1); }
  html.dark .bg-blue-50    { background-color: rgba(59,130,246,0.1); }
  html.dark .bg-red-100    { background-color: rgba(239,68,68,0.15); }
  html.dark .bg-green-100  { background-color: rgba(34,197,94,0.15); }
  html.dark .bg-blue-100   { background-color: rgba(59,130,246,0.15); }
  html.dark .bg-orange-100 { background-color: rgba(249,115,22,0.15); }
  html.dark .border-red-100   { border-color: rgba(239,68,68,0.2); }
  html.dark .border-red-200   { border-color: rgba(239,68,68,0.25); }
  html.dark .border-green-100 { border-color: rgba(34,197,94,0.2); }
  html.dark .border-green-200 { border-color: rgba(34,197,94,0.25); }
  html.dark .border-blue-100  { border-color: rgba(59,130,246,0.2); }
  html.dark .border-blue-200  { border-color: rgba(59,130,246,0.25); }
  html.dark .border-orange-100 { border-color: rgba(249,115,22,0.2); }

  /* ─── Decorative grid ─── */
  html.dark .mockup-grid {
    background-image: radial-gradient(#334155 1px, transparent 1px);
  }

  /* ─── Shadows (soften for dark backgrounds) ─── */
  html.dark .shadow-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
  }
  html.dark .shadow-card-hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
  }
  html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3); }

  /* ─── Mobile menu (index) ─── */
  html.dark #mobile-menu {
    background-color: #111827;
    border-color: #1E293B;
  }

  /* ─── Admin modals ─── */
  html.dark .modal .bg-white { background-color: #111827; }

  /* ─── Navbar logo — slight glow on dark ─── */
  html.dark .navbar-logo {
    box-shadow:
      0px 4px 8px -2px rgba(0,0,0,0.4),
      0px 2px 4px -1px rgba(0,0,0,0.25),
      inset 0px 1px 1px rgba(255,255,255,0.08),
      0 0 0 1px rgba(255,255,255,0.06);
  }
  html.dark .navbar-logo:hover {
    box-shadow:
      0px 6px 12px -2px rgba(0,0,0,0.5),
      0px 3px 6px -1px rgba(0,0,0,0.3),
      inset 0px 1px 1px rgba(255,255,255,0.1),
      0 0 0 1px rgba(255,255,255,0.08);
  }

/* ─── Theme toggle button ─── */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #64748B;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.theme-toggle:hover {
  background-color: rgba(0,0,0,0.06);
  color: #111827;
}
html.dark .theme-toggle  { color: #94A3B8; }
html.dark .theme-toggle:hover {
  background-color: rgba(255,255,255,0.1);
  color: #F1F5F9;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { position: absolute; transition: opacity 0.25s ease, transform 0.3s ease; }
.theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg); }
html.dark .theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg); }
html.dark .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg); }