/* ═══════════════════════════════════════════════
   NISHLAB CREATIONS — ASTRO THEME DESIGN SYSTEM
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Rajdhani:wght@400;500;600;700&family=Exo+2:ital,wght@0,300;0,400;0,600;0,800;1,300&display=swap');

:root {
  --space-black:   #03020a;
  --space-deep:    #07051a;
  --space-card:    #0d0b28;
  --space-border:  #1e1a4a;
  --space-border2: #2a2460;
  --nebula-violet: #7c3aed;
  --nebula-mid:    #a855f7;
  --nebula-light:  #c084fc;
  --stellar-gold:  #f59e0b;
  --stellar-warm:  #fbbf24;
  --comet-cyan:    #06b6d4;
  --aurora-green:  #10b981;
  --red-dwarf:     #ef4444;
  --text-bright:   #f0eeff;
  --text-mid:      #9d96cc;
  --text-dim:      #4a4680;
  --font-display:  'Rajdhani', sans-serif;
  --font-body:     'Exo 2', sans-serif;
  --font-ui:       'Space Grotesk', sans-serif;
  --glow-violet: 0 0 24px #7c3aed55, 0 0 60px #7c3aed22;
  --glow-gold:   0 0 20px #f59e0b55, 0 0 50px #f59e0b22;
  --glow-cyan:   0 0 20px #06b6d455, 0 0 50px #06b6d422;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--space-black); font-family: var(--font-body); color: var(--text-bright); min-height: 100vh; overflow-x: hidden; }

#starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.nebula-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, #7c3aed0a 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 70%, #06b6d408 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, #f59e0b06 0%, transparent 60%);
}

.page-wrap { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 0 20px; }

.topbar { background: linear-gradient(90deg,#7c3aed,#a855f7,#06b6d4); padding:9px 20px; display:flex; align-items:center; justify-content:center; gap:10px; position:sticky; top:0; z-index:100; }
.topbar-text { font-family:var(--font-ui); font-size:11px; font-weight:600; letter-spacing:1.5px; color:#fff; text-transform:uppercase; }
.topbar-dot { width:6px; height:6px; border-radius:50%; background:#fff; animation:blink 1.2s infinite; flex-shrink:0; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--space-border); }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo { width:40px; height:40px; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--nebula-violet); box-shadow:var(--glow-violet); flex-shrink:0; }
.nav-logo img { width:36px; height:36px; object-fit:contain; }
.nav-name { font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:2px; color:var(--text-bright); text-transform:uppercase; }
.nav-sub  { font-family:var(--font-ui); font-size:8px; color:var(--nebula-light); letter-spacing:2px; text-transform:uppercase; margin-top:1px; }
.nav-links { display:flex; gap:4px; }
.nav-link { font-family:var(--font-ui); font-size:11px; font-weight:500; color:var(--text-mid); text-decoration:none; padding:6px 10px; border-radius:6px; transition:color .2s, background .2s; letter-spacing:.5px; }
.nav-link:hover, .nav-link.active { color:var(--nebula-light); background:#7c3aed18; }

.sec-label { font-family:var(--font-ui); font-size:9px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--nebula-mid); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.sec-label::before { content:''; width:20px; height:1px; background:var(--nebula-mid); flex-shrink:0; }

.card { background:var(--space-card); border:1px solid var(--space-border); border-radius:14px; padding:20px; position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--nebula-violet),transparent); opacity:.5; }

.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-family:var(--font-ui); font-size:9px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.badge-violet { background:#7c3aed22; border:1px solid #7c3aed66; color:var(--nebula-light); }
.badge-gold   { background:#f59e0b22; border:1px solid #f59e0b66; color:var(--stellar-warm); }
.badge-cyan   { background:#06b6d422; border:1px solid #06b6d466; color:var(--comet-cyan); }
.badge-red    { background:#ef444422; border:1px solid #ef444466; color:#f87171; }
.badge-green  { background:#10b98122; border:1px solid #10b98166; color:var(--aurora-green); }

.star-divider { border:none; height:1px; background:linear-gradient(90deg,transparent,var(--space-border),transparent); margin:24px 0; position:relative; }
.star-divider::after { content:'✦'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:10px; color:var(--text-dim); background:var(--space-black); padding:0 8px; }

.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,var(--nebula-violet),var(--nebula-mid)); border:none; border-radius:10px; padding:14px 28px; font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:2px; color:#fff; text-transform:uppercase; cursor:pointer; text-decoration:none; transition:transform .2s,box-shadow .2s; box-shadow:var(--glow-violet); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 40px #7c3aed88,0 8px 20px #7c3aed44; }

.btn-gold { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,#d97706,var(--stellar-gold)); border:none; border-radius:10px; padding:14px 28px; font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:2px; color:#000; text-transform:uppercase; cursor:pointer; text-decoration:none; transition:transform .2s,box-shadow .2s; box-shadow:var(--glow-gold); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 0 40px #f59e0b88,0 8px 20px #f59e0b44; }

.btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; border:1px solid var(--space-border2); border-radius:10px; padding:13px 24px; font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:1.5px; color:var(--text-mid); text-transform:uppercase; cursor:pointer; text-decoration:none; transition:border-color .2s,color .2s,background .2s; }
.btn-outline:hover { border-color:var(--nebula-violet); color:var(--nebula-light); background:#7c3aed11; }

.field-wrap { display:flex; flex-direction:column; gap:6px; }
.field-label { font-family:var(--font-ui); font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); }
.field-label .req { color:var(--red-dwarf); }
input, select, textarea { background:#07051a; border:1px solid var(--space-border); border-radius:8px; padding:11px 14px; font-family:var(--font-body); font-size:13px; color:var(--text-bright); outline:none; width:100%; transition:border-color .2s,box-shadow .2s; }
input::placeholder, textarea::placeholder { color:var(--text-dim); }
input:focus, select:focus, textarea:focus { border-color:var(--nebula-violet); box-shadow:0 0 0 3px #7c3aed18; }
select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234a4680' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; padding-right:36px; }
select option { background:var(--space-deep); color:var(--text-bright); }
textarea { resize:none; line-height:1.6; }

.countdown-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.cd-box { background:var(--space-deep); border:1px solid var(--space-border); border-radius:10px; padding:12px 6px; text-align:center; position:relative; overflow:hidden; }
.cd-box::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; }
.cd-box.days::after  { background:var(--nebula-violet); box-shadow:var(--glow-violet); }
.cd-box.hours::after { background:var(--comet-cyan);    box-shadow:var(--glow-cyan); }
.cd-box.mins::after  { background:var(--stellar-gold);  box-shadow:var(--glow-gold); }
.cd-box.secs::after  { background:var(--aurora-green); }
.cd-num { font-family:var(--font-display); font-size:30px; font-weight:700; display:block; line-height:1; }
.cd-box.days .cd-num  { color:var(--nebula-light); }
.cd-box.hours .cd-num { color:var(--comet-cyan); }
.cd-box.mins .cd-num  { color:var(--stellar-warm); }
.cd-box.secs .cd-num  { color:var(--aurora-green); }
.cd-lbl { font-family:var(--font-ui); font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-top:4px; display:block; }

.course-card { background:var(--space-card); border:1px solid var(--space-border); border-radius:12px; padding:16px; position:relative; overflow:hidden; transition:border-color .3s,transform .2s; }
.course-card:hover { border-color:var(--space-border2); transform:translateY(-2px); }
.course-card .accent-bar { position:absolute; top:0; left:0; right:0; height:2px; }
.course-card .course-icon { font-size:22px; margin-bottom:8px; display:block; }
.course-card .course-name { font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:1px; color:var(--text-bright); margin-bottom:4px; }
.course-card .course-desc { font-size:10px; color:var(--text-dim); line-height:1.5; }

.feat-item { display:flex; align-items:center; gap:10px; background:var(--space-card); border:1px solid var(--space-border); border-radius:8px; padding:10px 12px; }
.feat-dot { width:18px; height:18px; border-radius:50%; background:#10b98118; border:1px solid #10b98144; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feat-dot-inner { width:6px; height:6px; border-radius:50%; background:var(--aurora-green); }
.feat-text { font-size:10px; color:var(--text-mid); line-height:1.4; }

.stat-box { background:var(--space-card); border:1px solid var(--space-border); border-radius:12px; padding:18px 14px; text-align:center; }
.stat-num { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--nebula-light); display:block; }
.stat-lbl { font-family:var(--font-ui); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); margin-top:4px; }

.price-block { background:linear-gradient(135deg,#7c3aed18,#06b6d412); border:1px solid #7c3aed44; border-radius:12px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price-old { font-family:var(--font-display); font-size:14px; color:var(--text-dim); text-decoration:line-through; }
.price-new { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--text-bright); }
.price-gst { font-size:9px; color:var(--text-dim); margin-top:2px; }
.per-day   { background:#f59e0b18; border:1px solid #f59e0b44; border-radius:20px; padding:6px 14px; font-family:var(--font-ui); font-size:10px; color:var(--stellar-warm); font-weight:600; white-space:nowrap; }

.testi-card { background:var(--space-card); border:1px solid var(--space-border); border-radius:12px; padding:18px; }
.testi-stars { color:var(--stellar-gold); font-size:12px; margin-bottom:10px; letter-spacing:2px; }
.testi-text  { font-size:12px; color:var(--text-mid); line-height:1.7; font-style:italic; margin-bottom:14px; }
.testi-author { display:flex; align-items:center; gap:10px; }
.testi-av { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:12px; font-weight:700; flex-shrink:0; }
.testi-name { font-family:var(--font-ui); font-size:11px; font-weight:600; color:var(--text-bright); }
.testi-role { font-family:var(--font-ui); font-size:9px; color:var(--text-dim); letter-spacing:.5px; }

.contact-item { display:flex; align-items:center; gap:12px; background:var(--space-card); border:1px solid var(--space-border); border-radius:10px; padding:14px; text-decoration:none; transition:border-color .2s,transform .2s; }
.contact-item:hover { border-color:var(--nebula-violet); transform:translateX(4px); }
.contact-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.contact-lbl { font-family:var(--font-ui); font-size:9px; color:var(--text-dim); letter-spacing:1.5px; text-transform:uppercase; }
.contact-val { font-family:var(--font-ui); font-size:12px; font-weight:600; color:var(--text-bright); margin-top:2px; }

.footer { border-top:1px solid var(--space-border); padding:28px 0 40px; text-align:center; }
.footer-brand { font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:3px; color:var(--text-mid); text-transform:uppercase; margin-bottom:6px; }
.footer-copy { font-size:10px; color:var(--text-dim); }

.back-link { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-ui); font-size:10px; color:var(--text-dim); letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; margin-bottom:24px; transition:color .2s; }
.back-link:hover { color:var(--nebula-light); }

.state { display:none; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:48px 20px; }
.state.active { display:flex; }
.state-icon { font-size:52px; }
.state-title { font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:2px; }
.state-title.success { color:var(--aurora-green); }
.state-title.error   { color:var(--red-dwarf); }
.state-msg { font-size:12px; color:var(--text-mid); line-height:1.7; max-width:300px; }
.spinner { width:36px; height:36px; border:3px solid var(--space-border); border-top-color:var(--nebula-violet); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}
.flex{display:flex;} .flex-col{flex-direction:column;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .flex-wrap{flex-wrap:wrap;} .gap-8{gap:8px;}

@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.fade-up{animation:fadeUp .6s ease both;} .delay-1{animation-delay:.1s;} .delay-2{animation-delay:.2s;} .delay-3{animation-delay:.3s;} .delay-4{animation-delay:.4s;}

.alert { display:none; background:#ef444418; border:1px solid #ef444455; border-radius:8px; padding:10px 14px; font-size:11px; color:#f87171; margin-bottom:14px; }

@media(max-width:480px){
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .nav-links{display:none;}
}

/* ── VIDEO CARDS ── */
.video-card { background: var(--space-card); border: 1px solid var(--space-border); border-radius: 12px; overflow: hidden; transition: transform .2s, border-color .2s; }
.video-card:hover { border-color: var(--nebula-violet); transform: translateY(-4px); }
.video-thumb { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border: 2px solid; border-radius: 10px; cursor: pointer; position: relative; overflow: hidden; }
.video-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.2), transparent); }
.play-btn { font-size: 32px; color: #fff; z-index: 2; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); transition: transform .2s; }
.video-thumb:hover .play-btn { transform: scale(1.2); }

/* ── VIDEO LIST ITEMS ── */
.video-list-card { background: var(--space-card); border: 1px solid var(--space-border); border-radius: 10px; overflow: hidden; transition: transform .2s, border-color .2s; }
.video-list-card:hover { border-color: var(--nebula-violet); transform: translateY(-2px); }
.video-list-thumb { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border: 2px solid; border-radius: 8px; cursor: pointer; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(124,58,237,.1), transparent); }
.play-btn-small { font-size: 24px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); transition: transform .2s; }
.video-list-thumb:hover .play-btn-small { transform: scale(1.15); }
.video-list-item { animation: fadeUp .6s ease both; }

/* ── VIDEO STYLING ── */
.video-list-card { background: var(--space-card); border: 1px solid var(--space-border); border-radius: 10px; overflow: hidden; transition: transform .2s, border-color .2s; }
.video-list-card:hover { border-color: var(--nebula-violet); transform: translateY(-2px); }
.video-list-thumb { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border: 2px solid; border-radius: 8px; cursor: pointer; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(124,58,237,.1), transparent); }
.play-btn-small { font-size: 24px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); transition: transform .2s; z-index: 2; }
.video-list-thumb:hover .play-btn-small { transform: scale(1.15); }
.video-list-item { animation: fadeUp .6s ease both; }

/* ── VIDEO MODAL ── */
.video-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.98); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(4px); padding: 20px; }
.video-modal-content { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.8); }
.video-modal-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.2); border: none; color: #fff; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; font-size: 20px; z-index: 10000; transition: background .2s; }
.video-modal-close:hover { background: rgba(255,255,255,.4); }

/* ── FILTER BUTTONS ── */
.filter-btn { background: transparent; border: 1px solid var(--space-border); color: var(--text-mid); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; transition: all .2s; white-space: nowrap; }
.filter-btn:hover { border-color: var(--nebula-violet); color: var(--nebula-light); }
.filter-btn.active { background: var(--nebula-violet); border-color: var(--nebula-violet); color: #fff; }

/* ── RESPONSIVE VIDEO MODAL ── */
@media (max-width: 768px) {
  .video-modal-content { aspect-ratio: auto; max-height: 60vh; }
}