/* ═══════════════════════════════════════════════════
   Quillorama Frontenac — Custom Styles
   Tailwind handles utilities; this file adds animations
   and components that Tailwind can't express inline.
═══════════════════════════════════════════════════ */

/* ─── Design tokens ─── */
:root {
  --red:   #E31E24;
  --blue:  #00B4FF;
  --dark:  #0A0A14;
  --navy:  #0D1B2A;
  --gold:  #FFD700;
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE — complete overrides
   Activated when html[data-theme="light"]
   ═══════════════════════════════════════════════════ */
[data-theme="light"] body {
  background-color: #f0f4f8 !important;
  color: #111827;
}

/* ── Solid brand backgrounds ── */
[data-theme="light"] .bg-brand-dark { background-color: #f0f4f8 !important; }
[data-theme="light"] .bg-brand-navy { background-color: #e2e8f0 !important; }
[data-theme="light"] .bg-brand-card { background-color: #ffffff !important; }

/* ── brand-dark opacity variants ── */
[data-theme="light"] .bg-brand-dark\/50 { background-color: rgba(240,244,248,.50) !important; }
[data-theme="light"] .bg-brand-dark\/80 { background-color: rgba(240,244,248,.80) !important; }
[data-theme="light"] .bg-brand-dark\/95 { background-color: rgba(240,244,248,.95) !important; }
[data-theme="light"] .bg-brand-dark\/98 { background-color: rgba(240,244,248,.98) !important; }

/* ── brand-navy opacity variants ── */
[data-theme="light"] .bg-brand-navy\/10 { background-color: rgba(226,232,240,.10) !important; }
[data-theme="light"] .bg-brand-navy\/20 { background-color: rgba(226,232,240,.20) !important; }
[data-theme="light"] .bg-brand-navy\/30 { background-color: rgba(226,232,240,.30) !important; }
[data-theme="light"] .bg-brand-navy\/40 { background-color: rgba(226,232,240,.40) !important; }
[data-theme="light"] .bg-brand-navy\/50 { background-color: rgba(226,232,240,.50) !important; }
[data-theme="light"] .bg-brand-navy\/60 { background-color: rgba(226,232,240,.60) !important; }
[data-theme="light"] .bg-brand-navy\/80 { background-color: rgba(226,232,240,.80) !important; }
[data-theme="light"] .bg-brand-navy\/95 { background-color: rgba(226,232,240,.95) !important; }

/* ── brand-card opacity variants ── */
[data-theme="light"] .bg-brand-card\/50 { background-color: rgba(255,255,255,.50) !important; }

/* ── White-opacity surfaces → near-transparent dark ── */
[data-theme="light"] .bg-white\/3  { background-color: rgba(0,0,0,.015) !important; }
[data-theme="light"] .bg-white\/5  { background-color: rgba(0,0,0,.025) !important; }
[data-theme="light"] .bg-white\/8  { background-color: rgba(0,0,0,.04)  !important; }
[data-theme="light"] .bg-white\/10 { background-color: rgba(0,0,0,.05)  !important; }
[data-theme="light"] .bg-white\/12 { background-color: rgba(0,0,0,.06)  !important; }
[data-theme="light"] .bg-black\/20 { background-color: rgba(0,0,0,.03)  !important; }
[data-theme="light"] .bg-black\/40 { background-color: rgba(0,0,0,.05)  !important; }
[data-theme="light"] .hover\:bg-white\/2:hover  { background-color: rgba(0,0,0,.01)  !important; }
[data-theme="light"] .hover\:bg-white\/5:hover  { background-color: rgba(0,0,0,.025) !important; }
[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,.05)  !important; }
[data-theme="light"] .hover\:bg-white\/12:hover { background-color: rgba(0,0,0,.06)  !important; }

/* ── Text ── */
[data-theme="light"] .text-white    { color: #111827 !important; }
[data-theme="light"] .text-gray-300 { color: #374151 !important; }
[data-theme="light"] .text-gray-400 { color: #6b7280 !important; }
[data-theme="light"] .text-gray-500 { color: #9ca3af !important; }
[data-theme="light"] .text-gray-600 { color: #6b7280 !important; }
[data-theme="light"] .text-gray-700 { color: #374151 !important; }
[data-theme="light"] .hover\:text-white:hover { color: #111827 !important; }

/* ── Borders ── */
[data-theme="light"] .border-white\/5  { border-color: rgba(0,0,0,.04) !important; }
[data-theme="light"] .border-white\/8  { border-color: rgba(0,0,0,.06) !important; }
[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .border-white\/15 { border-color: rgba(0,0,0,.10) !important; }
[data-theme="light"] .border-white\/20 { border-color: rgba(0,0,0,.12) !important; }
[data-theme="light"] .divide-white\/5 > * + * { border-color: rgba(0,0,0,.05) !important; }

/* ── Gradients ── */
[data-theme="light"] .from-brand-dark { --tw-gradient-from: #f0f4f8 var(--tw-gradient-from-position); }
[data-theme="light"] .from-brand-navy { --tw-gradient-from: #e2e8f0 var(--tw-gradient-from-position); }
[data-theme="light"] .to-brand-dark   { --tw-gradient-to:   #f0f4f8 var(--tw-gradient-to-position); }
[data-theme="light"] .to-brand-navy   { --tw-gradient-to:   #e2e8f0 var(--tw-gradient-to-position); }
[data-theme="light"] .via-brand-dark  {
  --tw-gradient-via: #f0f4f8 var(--tw-gradient-via-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f0f4f8 var(--tw-gradient-via-position), var(--tw-gradient-to, rgba(240,244,248,0));
}

/* ── Effects ── */
[data-theme="light"] .neon-red,
[data-theme="light"] .neon-blue { text-shadow: none !important; }
[data-theme="light"] .glow-card:hover {
  box-shadow: 0 0 0 1px rgba(227,30,36,.15), 0 8px 24px rgba(227,30,36,.06), 0 2px 8px rgba(0,0,0,.08) !important;
}

/* ── Scrollbar ── */
[data-theme="light"] ::-webkit-scrollbar-track { background: #e2e8f0; }

/* ─── Theme toggle icons ─── */
.theme-icon-moon { display: none !important; }
.theme-icon-sun  { display: inline-block !important; }
[data-theme="light"] .theme-icon-sun  { display: none !important; }
[data-theme="light"] .theme-icon-moon { display: inline-block !important; }

/* ─── Alpine cloak: hide until Alpine initialises ─── */
[x-cloak] { display: none !important; }

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--dark);
  color: #f5f5f5;
  font-family: 'Inter', sans-serif;
}

/* ─── Selection ─── */
::selection { background: var(--red); color: white; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }

/* ─── Focus visible ─── */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Animated glow on hover for cards ─── */
.glow-card {
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}
.glow-card:hover {
  box-shadow: 0 0 0 1px rgba(227, 30, 36, 0.3),
              0 20px 60px rgba(227, 30, 36, 0.15),
              0 4px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px);
}

/* ─── Bowling pin animation ─── */
@keyframes pinShake {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-15deg); }
  40%       { transform: rotate(10deg); }
  60%       { transform: rotate(-8deg); }
  80%       { transform: rotate(5deg); }
}
.pin-shake:hover { animation: pinShake 0.6s ease-in-out; }

/* ─── Lane stripe overlay ─── */
.lane-bg {
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(100% / 13),
    rgba(255,255,255,0.02) calc(100% / 13),
    rgba(255,255,255,0.02) calc(100% / 13 + 1px)
  );
}

/* ─── Gradient text ─── */
.gradient-text {
  background: linear-gradient(135deg, var(--red), #ff6b6b, var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Neon glow text ─── */
.neon-red  { text-shadow: 0 0 10px rgba(227,30,36,0.8), 0 0 30px rgba(227,30,36,0.4); }
.neon-blue { text-shadow: 0 0 10px rgba(0,180,255,0.8), 0 0 30px rgba(0,180,255,0.4); }

/* ─── Floating animation ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* ─── Fade up animation ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.7s ease-out forwards; }

/* ─── Counter animation ─── */
@keyframes countPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}
.counter.counting { animation: countPulse 0.3s ease-out; }

/* ─── Star rating ─── */
.star--filled { color: var(--gold); }
.star--empty  { color: #444; }

/* ─── Swiper custom pagination ─── */
.swiper-pagination-bullet {
  background: rgba(255,255,255,0.3) !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  background: var(--red) !important;
  transform: scale(1.3);
}

/* ─── Line clamp utilities ─── */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Admin styles ─── */
.admin-sidebar { min-height: 100vh; }

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  text-decoration: none;
}
.admin-nav-link:hover,
.admin-nav-link.active {
  background: rgba(227, 30, 36, 0.12);
  color: #E31E24;
}

/* ─── Form elements (admin + contact) ─── */
.form-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px 16px;
  color: white;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,180,255,0.15);
}
.form-input::placeholder { color: #6b7280; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #d1d5db;
  margin-bottom: 6px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--red), #c41a20);
  color: white;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(227,30,36,0.3); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: white;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  text-decoration: none;
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* ─── Toast notifications ─── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  animation: toastIn 0.3s ease-out;
  max-width: 320px;
}
.toast-success { background: #065f46; border: 1px solid #10b981; color: #a7f3d0; }
.toast-error   { background: #7f1d1d; border: 1px solid #ef4444; color: #fca5a5; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Page transitions ─── */
.page-enter {
  animation: fadeUp 0.4s ease-out forwards;
}

/* ─── Mobile menu overlay ─── */
@media (max-width: 1024px) {
  body.menu-open { overflow: hidden; }
}

/* ─── Print ─── */
@media print {
  header, footer, .no-print { display: none !important; }
  body { background: white; color: black; }
}