/* ── Base Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: #F4F7FC; color: #0B1C3D; overflow-x: hidden; }

/* ── CSS Variables ──────────────────────────────── */
:root {
  --navy: #0B1C3D;
  --teal: #0ECAD4;
  --white: #ffffff;
  --slate: #F4F7FC;
}

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 4px; }

/* ── Typography ─────────────────────────────────── */
h1,h2,h3,h4 { font-family: 'Syne', sans-serif; }

/* ── Geometric grid background (hero) ───────────── */
.grid-bg {
  background-image:
    linear-gradient(rgba(14,202,212,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,202,212,.13) 1px, transparent 1px);
  background-size: 38px 38px;
}
.grid-bg-dark {
  background-image:
    linear-gradient(rgba(14,202,212,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,202,212,.08) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* ── Axis lines on hero photo ────────────────────── */
.axis-h::after, .axis-v::after {
  content: '';
  position: absolute;
  background: rgba(14,202,212,.45);
}
.axis-h::after { height: 1.5px; width: 70%; top: 50%; left: 15%; }
.axis-v::after { width: 1.5px; height: 70%; left: 50%; top: 15%; }
.hero-wave {
  position: absolute;
  top: 34%;
  left: 42%;
  width: 620px;
  height: 220px;
  pointer-events: none;
  transform: translateX(-15%);
}
.hero-wave svg {
  width: 100%;
  height: 100%;
}
.hero-wave path {
  stroke: rgba(14,202,212,.82);
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18 12;
}
/* ── Teal focus states for all inputs ───────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(14,202,212,.22);
}

/* ── Nav link hover underline ────────────────────── */
.nav-link {
  position: relative;
  transition: color .25s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 2px;
  background: var(--teal);
  transition: width .28s ease;
}
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: var(--teal); }

/* ── Timeline dot pulse ──────────────────────────── */
.tl-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(14,202,212,.25), 0 0 0 8px rgba(14,202,212,.1);
  flex-shrink: 0;
}

/* ── Video card hover ───────────────────────────── */
.vid-card:hover .vid-overlay { opacity: 1; }
.vid-overlay { transition: opacity .3s ease; }

/* ── Tab buttons ────────────────────────────────── */
.tab-btn.active {
  background: var(--teal);
  color: var(--navy);
  font-weight: 600;
}

/* ── Modal backdrop ──────────────────────────────── */
#pdfModal, #seatModal, #quizModal {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Testimonial card border accent ──────────────── */
.testi-card { border-left: 4px solid var(--teal); }

/* ── Slider controls ─────────────────────────────── */
.slider-wrap { overflow: hidden; }

/* ── Step indicator ──────────────────────────────── */
.step-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(14,202,212,.3);
  transition: background .3s;
}
.step-dot.active { background: var(--teal); }

/* ── Reveal on scroll (JS adds .revealed) ────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* ── Gradient text ───────────────────────────────── */
.grad-text {
  background: linear-gradient(90deg, #0ECAD4 0%, #3dd6df 60%, #0ab4bd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Pulsing CTA button ─────────────────────────── */
.btn-pulse { animation: pulseGlow 2.2s ease-in-out infinite; }

/* ── Resource card hover ─────────────────────────── */
.res-card { transition: transform .25s, box-shadow .25s; }
.res-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(14,202,212,.18); }

/* ── Mobile menu ─────────────────────────────────── */
#mobileMenu {
  transition: max-height .4s ease, opacity .4s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
#mobileMenu.open {
  max-height: 600px;
  opacity: 1;
}
/* Admin dashboard contrast and button visibility */
.admin-dashboard {
  background:
    radial-gradient(circle at top left, rgba(14, 202, 212, 0.14), transparent 32rem),
    linear-gradient(135deg, #071527 0%, #0b1c3d 52%, #102341 100%) !important;
  color: #f8fafc;
}

.admin-dashboard main {
  background: transparent;
}

.admin-dashboard section,
.admin-dashboard #adminLoginCard {
  background: rgba(8, 21, 39, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 20px 50px rgba(2, 8, 23, 0.36);
}

.admin-dashboard .admin-rail {
  background: rgba(7, 17, 31, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

.admin-dashboard .admin-workspace {
  min-height: min(760px, calc(100vh - 9rem));
}

.admin-dashboard .admin-section {
  max-height: calc(100vh - 8.5rem);
  overflow-y: auto;
  scrollbar-color: rgba(103, 232, 249, 0.55) rgba(15, 23, 42, 0.6);
}

.admin-dashboard .admin-section.hidden {
  display: none;
}

.admin-dashboard .admin-tab,
.admin-dashboard .admin-quick-action {
  background: rgba(18, 52, 84, 0.72) !important;
  border: 1px solid rgba(125, 211, 252, 0.22);
  color: #dbeafe !important;
}

.admin-dashboard .admin-quick-action {
  padding: 0 !important;
}

.admin-dashboard .admin-quick-action svg {
  stroke-width: 2.25;
}

.admin-dashboard .admin-tab:hover,
.admin-dashboard .admin-quick-action:hover {
  background: rgba(15, 38, 59, 0.95) !important;
  border-color: rgba(103, 232, 249, 0.58);
}

.admin-dashboard .admin-tab.active {
  background: #22d3ee !important;
  border-color: #67e8f9 !important;
  color: #062033 !important;
  box-shadow: 0 12px 24px rgba(34, 211, 238, 0.18);
}

.admin-dashboard h1,
.admin-dashboard h2,
.admin-dashboard h3,
.admin-dashboard h4,
.admin-dashboard label {
  color: #f8fafc !important;
}

.admin-dashboard p,
.admin-dashboard .text-slate-400,
.admin-dashboard .text-slate-500,
.admin-dashboard .text-slate-300 {
  color: #cbd5e1 !important;
}

.admin-dashboard input,
.admin-dashboard textarea,
.admin-dashboard select {
  background: #07111f !important;
  border-color: rgba(125, 211, 252, 0.34) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-dashboard input::placeholder,
.admin-dashboard textarea::placeholder {
  color: #94a3b8 !important;
}

.admin-dashboard input:focus,
.admin-dashboard textarea:focus,
.admin-dashboard select:focus {
  outline: 2px solid rgba(14, 202, 212, 0.62);
  outline-offset: 2px;
  border-color: #0ecad4 !important;
}

.admin-dashboard #adminPanel > .grid button,
.admin-dashboard #adminSaveBookingLink,
.admin-dashboard #adminLoginButton,
.admin-dashboard #adminCreateClass,
.admin-dashboard #adminCreateVideo,
.admin-dashboard #adminCreateResource,
.admin-dashboard #adminCreateTestimonial,
.admin-dashboard button[onclick="sendTestimonialRequest()"],
.admin-dashboard .bg-teal {
  background: #22d3ee !important;
  border-color: #67e8f9 !important;
  color: #062033 !important;
  box-shadow: 0 14px 28px rgba(34, 211, 238, 0.22);
}

.admin-dashboard #adminPanel > .grid button:not(:first-child) {
  background: #123454 !important;
  border-color: rgba(103, 232, 249, 0.44) !important;
  color: #f8fafc !important;
}

.admin-dashboard #adminPanel > .grid button span:first-child {
  color: #a5f3fc !important;
}

.admin-dashboard #adminUpcomingClassesList > button,
.admin-dashboard #adminVideosDashboardList > button,
.admin-dashboard #adminResourcesDashboardList > button,
.admin-dashboard #adminTestimonialsDashboardList > button {
  background: #091827 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #f8fafc !important;
}

.admin-dashboard #adminUpcomingClassesList > button:hover,
.admin-dashboard #adminVideosDashboardList > button:hover,
.admin-dashboard #adminResourcesDashboardList > button:hover,
.admin-dashboard #adminTestimonialsDashboardList > button:hover {
  border-color: #22d3ee !important;
  background: #0f263b !important;
}

.admin-dashboard .rounded-full.bg-teal\/10,
.admin-dashboard .text-teal {
  color: #67e8f9 !important;
}

.admin-dashboard button[id*="Download"],
.admin-dashboard #adminDownloadAllRegistrations,
.admin-dashboard button[onclick^="downloadClassRegistrations"] {
  background: #10b981 !important;
  border-color: #6ee7b7 !important;
  color: #052e1c !important;
}

.admin-dashboard button[onclick^="archiveAdminClass"] {
  background: #f59e0b !important;
  border-color: #fcd34d !important;
  color: #1f1300 !important;
}

.admin-dashboard button[onclick^="deleteAdminItem"] {
  background: #e11d48 !important;
  border-color: #fb7185 !important;
  color: #fff1f2 !important;
}

.admin-dashboard button[onclick^="openTestimonialRequestModal"],
.admin-dashboard button[onclick^="openClassEditModal"],
.admin-dashboard button[onclick^="copyTestimonialLink"] {
  background: #2563eb !important;
  border-color: #93c5fd !important;
  color: #eff6ff !important;
}

.admin-dashboard [id$="Modal"] > div {
  background: #081827 !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
}

.admin-dashboard table thead {
  background: #0f2538 !important;
}

.admin-dashboard table th {
  color: #bae6fd !important;
}

.admin-dashboard table td {
  color: #e2e8f0 !important;
}

.admin-confirm-dialog {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  animation: adminConfirmIn 160ms ease-out;
}

#adminConfirmMessage {
  color: #cbd5e1;
}

#adminConfirmAction,
#adminConfirmCancel {
  min-width: 112px;
}

@keyframes adminConfirmIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}