/* ============================================================
   KMC RADIO — Master Stylesheet
   Powered by Atine Broadcast | Atine Labs™ Limited
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Variables ── */
:root {
  --bg:        #080b12;
  --bg2:       #0d1117;
  --bg3:       #111827;
  --bg4:       #1a2235;
  --gold:      #c9a227;
  --gold-l:    #e6b84a;
  --gold-d:    #a07d1a;
  --gold-m:    rgba(201,162,39,.12);
  --red:       #e53e3e;
  --green:     #22c55e;
  --txt1:      #ffffff;
  --txt2:      #94a3b8;
  --txt3:      #64748b;
  --bdr:       rgba(255,255,255,.07);
  --bdr-g:     rgba(201,162,39,.25);
  --glass:     rgba(8,11,18,.82);
  --ph:        90px;  /* player height */
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt1);
  font-family:'Inter',system-ui,sans-serif;
  padding-bottom:var(--ph);overflow-x:hidden;min-height:100vh;
}
::selection{background:rgba(201,162,39,.28);color:var(--gold-l)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bdr-g);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ── Typography helpers ── */
.font-head{font-family:'Oswald',sans-serif}
.gold-text{color:var(--gold)}
.gold-grad{
  background:linear-gradient(120deg,#a07d1a 0%,#e6b84a 45%,#c9a227 75%,#f0d070 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}

/* ── Waveform ── */
@keyframes wv{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.wv{display:inline-flex;align-items:flex-end;gap:2px;height:20px}
.wv span{
  display:inline-block;width:3px;border-radius:2px;
  background:var(--gold);transform-origin:bottom center;
  animation:wv 1.2s ease-in-out infinite;
}
.wv span:nth-child(1){height:8px;animation-delay:0s}
.wv span:nth-child(2){height:14px;animation-delay:.12s}
.wv span:nth-child(3){height:19px;animation-delay:.24s}
.wv span:nth-child(4){height:11px;animation-delay:.36s}
.wv span:nth-child(5){height:20px;animation-delay:.48s}
.wv span:nth-child(6){height:14px;animation-delay:.6s}
.wv span:nth-child(7){height:10px;animation-delay:.72s}
.wv span:nth-child(8){height:17px;animation-delay:.84s}
.wv.paused span{animation-play-state:paused;transform:scaleY(.25)}

/* Wide waveform hero bg */
.wv-wide{display:flex;align-items:flex-end;gap:3px;height:48px}
.wv-wide span{
  display:inline-block;width:4px;border-radius:2px;
  background:var(--gold);opacity:.35;transform-origin:bottom center;
  animation:wv 1.4s ease-in-out infinite;
}

/* ── Live dot ── */
@keyframes ldot{0%,100%{box-shadow:0 0 0 0 rgba(229,62,62,.7)}70%{box-shadow:0 0 0 8px rgba(229,62,62,0)}}
.ldot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--red);animation:ldot 1.6s ease infinite
}
@keyframes sig{0%,100%{opacity:1}50%{opacity:.35}}
.sig-anim{animation:sig 2s ease infinite}

/* ── Glass ── */
.glass{
  background:var(--glass);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border:1px solid var(--bdr)
}
.glass-g{
  background:rgba(13,17,23,.78);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border:1px solid var(--bdr-g)
}

/* ── Buttons ── */
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--gold-d) 0%,var(--gold-l) 50%,var(--gold) 100%);
  color:#000;font-weight:700;padding:12px 28px;border-radius:4px;
  font-family:'Oswald',sans-serif;letter-spacing:.6px;font-size:15px;
  transition:all .2s;white-space:nowrap;
}
.btn-gold:hover{
  background:linear-gradient(135deg,var(--gold) 0%,#f0c84a 50%,var(--gold-l) 100%);
  transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,162,39,.38)
}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--gold);border:1px solid var(--gold);
  padding:11px 24px;border-radius:4px;
  font-family:'Oswald',sans-serif;letter-spacing:.5px;font-size:14px;
  transition:all .2s;
}
.btn-outline:hover{background:var(--gold-m);transform:translateY(-1px)}
.btn-sm{padding:7px 16px;font-size:13px}

/* ── Nav ── */
.nav-lnk{
  font-family:'Oswald',sans-serif;font-size:13.5px;letter-spacing:.5px;
  font-weight:500;color:var(--txt2);transition:color .15s;
  position:relative;padding:4px 0;white-space:nowrap;
}
.nav-lnk:hover{color:var(--gold-l)}
.nav-lnk.active{color:var(--gold)}
.nav-lnk.active::after{
  content:'';position:absolute;bottom:-6px;left:0;width:100%;
  height:2px;background:var(--gold);border-radius:1px
}

/* ── Dropdown ── */
.drop-wrap{position:relative}
.dropdown{
  position:absolute;top:100%;left:0;min-width:220px;
  background:var(--bg3);border:1px solid var(--bdr);border-radius:8px;
  padding:8px 0 6px;z-index:200;
  box-shadow:0 24px 60px rgba(0,0,0,.65);
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .18s,transform .18s,pointer-events 0s;
  transition-delay:100ms;
}
.drop-wrap:hover .dropdown,
.drop-wrap:focus-within .dropdown{
  opacity:1;pointer-events:auto;transform:translateY(0);
  transition-delay:0s;
}
.dropdown a{
  display:block;padding:9px 16px;color:var(--txt2);font-size:13.5px;
  transition:all .12s;
}
.dropdown a:hover{background:rgba(255,255,255,.04);color:var(--gold);padding-left:20px}

/* ── Cards ── */
.card{
  background:var(--bg3);border:1px solid var(--bdr);
  border-radius:10px;overflow:hidden;transition:all .25s;
}
.card:hover{border-color:var(--bdr-g);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 24px rgba(201,162,39,.08)}

/* ── Schedule row ── */
.sched-row{
  display:flex;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--bdr);transition:background .15s;
}
.sched-row:hover{background:rgba(255,255,255,.015);border-radius:6px;padding-left:8px}
.sched-row.on-air{border-left:3px solid var(--gold);padding-left:12px;background:rgba(201,162,39,.05);border-radius:0 6px 6px 0}

/* ── Player bar ── */
#radio-player{
  position:fixed;bottom:0;left:0;right:0;height:var(--ph);
  background:rgba(6,9,14,.96);backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border-top:1px solid var(--bdr-g);z-index:1000;
  display:flex;align-items:center;padding:0 16px;gap:12px;
}

/* ── Range slider ── */
input[type=range]{
  -webkit-appearance:none;appearance:none;height:3px;
  background:rgba(255,255,255,.12);border-radius:2px;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--gold);cursor:pointer;transition:background .15s
}
input[type=range]::-webkit-slider-thumb:hover{background:var(--gold-l)}

/* ── Progress bar ── */
.prog-track{height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(to right,var(--gold-d),var(--gold-l));border-radius:2px;transition:width .6s linear}

/* ── Chip ── */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.07);border:1px solid var(--bdr);
  border-radius:20px;padding:3px 10px;font-size:11.5px;color:var(--txt2)
}
.chip-g{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#4ade80}
.chip-r{background:rgba(229,62,62,.12);border-color:rgba(229,62,62,.35);color:#fc8181}
.chip-gold{background:rgba(201,162,39,.1);border-color:var(--bdr-g);color:var(--gold)}

/* ── Section chrome ── */
.sec-label{
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:3px;
  color:var(--gold);text-transform:uppercase;font-weight:500
}
.sec-title{font-family:'Oswald',sans-serif;font-size:32px;font-weight:700;line-height:1.1}
.sec-line{flex:1;height:1px;background:linear-gradient(to right,var(--bdr-g),transparent)}

/* ── Animations ── */
@keyframes fiu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.anim{animation:fiu .6s ease both}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}

/* ── Form ── */
.form-inp{
  width:100%;background:var(--bg3);border:1px solid var(--bdr);
  border-radius:6px;color:var(--txt1);padding:10px 14px;font-size:14px;
  font-family:'Inter',sans-serif;transition:border-color .2s;
}
.form-inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.1)}
.form-inp::placeholder{color:var(--txt3)}
textarea.form-inp{resize:vertical;min-height:100px}

/* ── Status dots ── */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot-g{background:var(--green)}
.dot-y{background:#f59e0b}
.dot-r{background:#ef4444}

/* ── Admin sidebar ── */
.adm-side{
  width:240px;background:var(--bg2);border-right:1px solid var(--bdr);
  height:100vh;overflow-y:auto;position:fixed;left:0;top:0;z-index:50;
}
.adm-lnk{
  display:flex;align-items:center;gap:10px;padding:9px 16px;
  color:var(--txt3);font-size:13px;transition:all .12s;
  border-left:3px solid transparent;cursor:pointer;
}
.adm-lnk:hover{background:rgba(255,255,255,.04);color:var(--txt2)}
.adm-lnk.active{background:rgba(201,162,39,.08);color:var(--gold);border-left-color:var(--gold)}

/* ── Responsive ── */
@media(max-width:1024px){
  .hide-lg{display:none!important}
}
@media(max-width:768px){
  .hide-md{display:none!important}
  :root{--ph:72px}
  .sec-title{font-size:24px}
  body{padding-bottom:var(--ph)}
}
@media(max-width:480px){
  .hide-sm{display:none!important}
  .btn-gold,.btn-outline{padding:10px 18px;font-size:13px}
}
@media(min-width:769px){
  .show-md{display:none!important}
}

/* ── Mobile nav ── */
#mobile-nav{
  display:none;position:fixed;inset:0;
  background:rgba(6,9,14,.98);z-index:998;
  padding:80px 24px 100px;overflow-y:auto;
}
#mobile-nav.open{display:flex;flex-direction:column;gap:4px}
.mob-lnk{
  font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;
  color:var(--txt2);padding:12px 0;border-bottom:1px solid var(--bdr);
  transition:color .15s;
}
.mob-lnk:hover{color:var(--gold)}

/* ── Toaster ── */
#toaster{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--bg3);border:1px solid var(--bdr-g);border-radius:8px;
  padding:10px 16px;font-size:13px;color:var(--txt1);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:fiu .3s ease both;min-width:240px;
}

/* ── Search overlay ── */
#search-overlay{
  display:none;position:fixed;inset:0;background:rgba(6,9,14,.96);
  z-index:999;padding:80px 24px;
}
#search-overlay.open{display:block}

/* ═══════════════════════════════════════════
   KMC FLOATING EMBLEM — nav + hero
═══════════════════════════════════════════ */
@keyframes kmc-float{0%,100%{transform:translateY(0px) rotate(0deg)}33%{transform:translateY(-7px) rotate(.5deg)}66%{transform:translateY(-4px) rotate(-.4deg)}}
@keyframes kmc-glow-pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes kmc-ring-spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* wrapper in nav */
.kmc-nav-emblem{position:relative;width:52px;height:52px;flex-shrink:0}
/* light bloom behind the real PNG logo */
.kmc-nav-emblem::before{
  content:'';position:absolute;top:50%;left:50%;
  width:88px;height:88px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.6) 0%,rgba(201,162,39,.22) 42%,transparent 70%);
  transform:translate(-50%,-50%);
  animation:kmc-glow-pulse 2.8s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
/* the PNG logo floats — ::after ring removed (logo has own gold ring) */
.kmc-nav-emblem img{
  position:relative;z-index:1;
  animation:kmc-float 3.4s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(201,162,39,.9)) drop-shadow(0 2px 20px rgba(201,162,39,.5));
  border-radius:50%;
}

/* HERO watermark emblem */
.kmc-hero-watermark{
  position:absolute;right:6%;top:50%;
  transform:translateY(-50%);
  z-index:1;opacity:.18;
  animation:kmc-float 4s ease-in-out infinite;
  filter:drop-shadow(0 0 40px rgba(201,162,39,.6));
  pointer-events:none;
}
.kmc-hero-watermark::before{
  content:'';position:absolute;top:50%;left:50%;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.45) 0%,transparent 65%);
  transform:translate(-50%,-50%);
  animation:kmc-glow-pulse 3s ease-in-out infinite;
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-sw{position:relative;display:inline-block}
.lang-sw-btn{
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.07);border:1px solid rgba(201,162,39,.3);
  color:#e2c870;font-size:.72rem;font-weight:600;letter-spacing:.04em;
  padding:3px 9px 3px 8px;border-radius:4px;cursor:pointer;
  transition:background .2s,border-color .2s;white-space:nowrap;
}
.lang-sw-btn:hover{background:rgba(201,162,39,.18);border-color:rgba(201,162,39,.6)}
.lang-caret{opacity:.6;transition:transform .2s;flex-shrink:0}
.lang-dropdown.open ~ .lang-sw-btn .lang-caret,
.lang-sw-btn[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}
.lang-dropdown{
  display:none;position:absolute;top:calc(100% + 4px);right:0;
  background:#0e1420;border:1px solid rgba(201,162,39,.35);border-radius:6px;
  padding:4px;min-width:140px;z-index:9999;
  box-shadow:0 8px 32px rgba(0,0,0,.55);
}
.lang-dropdown.open{display:block;animation:fadeInDown .15s ease}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.lang-opt{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:6px 10px;border-radius:4px;cursor:pointer;
  font-size:.78rem;color:#cbd5e1;background:transparent;border:none;
  transition:background .15s;text-align:left;
}
.lang-opt:hover{background:rgba(201,162,39,.15);color:#e6b84a}
.lang-opt.active{color:#c9a227;font-weight:700}
.lang-opt span:first-child{font-size:1rem;line-height:1}
.lang-full{opacity:.65;font-size:.72rem}

/* ── Source Switcher Pills ─────────────────────────────────── */
.source-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 18px;border-radius:50px;
  border:1px solid rgba(201,162,39,.3);
  background:rgba(255,255,255,.04);
  color:#94a3b8;font-family:'Oswald',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:1.5px;
  cursor:pointer;transition:all .2s;user-select:none;
}
.source-pill:hover{
  border-color:rgba(201,162,39,.7);
  background:rgba(201,162,39,.1);color:#e6b84a;
}
.source-pill.active{
  background:linear-gradient(135deg,var(--gold-d,#a07818),var(--gold-l,#e6b84a));
  border-color:transparent;color:#000;
  box-shadow:0 0 18px rgba(201,162,39,.35);
}
.source-pill.active .pill-badge{color:#000}
.pill-badge{
  font-size:13px;font-weight:700;line-height:1;
  font-family:'Oswald',sans-serif;
}
.pill-label{white-space:nowrap}

/* ── Now-Streaming section ─────────────────────────────────── */
#now-streaming{background:#080b12;padding:44px 0 36px;border-bottom:1px solid rgba(201,162,39,.1)}
#now-streaming .stream-hdr{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:22px;
}
#kmc-yt-embed-wrap{
  position:relative;padding-bottom:56.25%;height:0;
  border-radius:12px;overflow:hidden;
  box-shadow:0 0 60px rgba(201,162,39,.12),0 24px 60px rgba(0,0,0,.5);
  border:1px solid rgba(201,162,39,.15);
}
#kmc-yt-embed-wrap iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;border:0;
}
#audio-source-status{
  display:none;flex-wrap:wrap;align-items:center;gap:16px;
  border-radius:12px;padding:20px 24px;
  border:1px solid rgba(201,162,39,.2);
  background:rgba(255,255,255,.03);
}
#audio-src-name{font-size:20px;font-weight:700;color:#fff}
#audio-src-desc{color:#94a3b8;font-size:14px;flex:1;min-width:160px}