/* ============================================================
   LOUNGE-RADIO.COM – Webplayer (index.html) standalone CSS
   ------------------------------------------------------------
   This file is FULLY INDEPENDENT (no /assets/css/site.css needed).
   It includes:
   - Base vars + background (from site.css)
   - wrap/card/logo/panel/pbd (from site.css)
   - Webplayer-specific tweaks (was inline in index.html)

   ------------------------------------------------------------
   TWEAK ZONE – Quick sizing controls
   1) Overall player/card width:
      --player-card-width

   2) Overall player padding:
      --player-card-padding

   3) Iframe heights (main driver for overall player height):
      --iframe-now-h
      --iframe-next-h

   4) Mobile sizing:
      edit the @media (max-width: 320px) variables
   ============================================================ */


/* ---------- Base / Variables ---------- */
:root{
  /* Site look */
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.12);
  --glass: rgba(20,24,34,.62);
  --glass2: rgba(20,24,34,.48);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 18px;

  /* ---------- TWEAK ZONE (Desktop defaults) ---------- */
  --player-wrap-padding: 18px 12px;

  --player-card-width: 350px;     /* overall “card” width on desktop */
  --player-card-padding: 16px;    /* inner padding of the card */

  --iframe-now-h: 360px;          /* NOW iframe height (desktop) */
  --iframe-next-h: 110px;         /* NEXT iframe height (desktop) */

  --logo-max-w: 280px;            /* logo size */
  --logo-margin: 2px auto 12px;   /* logo spacing */

  --ctrlbtn-size: 42px;           /* round button size */
  --ctrlbtn-icon: 32px;           /* icon size */
}

/* ---------- Reset / base layout ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 50% 10%, rgba(0,0,0,.25), rgba(0,0,0,.55) 60%, rgba(0,0,0,.70)),
    url("/images/background.jpg") center/cover no-repeat fixed;
}

a{ color:inherit; }

/* ---------- Shared layout building blocks (formerly from site.css) ---------- */
.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 26px 14px 26px; /* default fallback (overridden below for webplayer) */
}

.card{
  width: min(880px, 100%);
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 28px 22px 20px;
  position: relative;
}

.logo{
  display:block;
  max-width: 640px;
  width: 92%;
  margin: 0 auto 14px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

.panel{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  overflow: hidden;
}

.panel .pbd{ padding: 12px; }

/* ---------- Webplayer page tweaks (your former inline <style>) ---------- */
body.page-webplayer .wrap{
  padding: var(--player-wrap-padding);
}

body.page-webplayer .card{
  width: min(var(--player-card-width), 100%);
  padding: var(--player-card-padding);
}

/* panels stack */
.webplayer-panels{
  display: grid;
  gap: 10px;
  margin-top: 0;
}

/* iframes */
.frame{
  width: 100%;
  border: 0;
  display: block;
  overflow: hidden;
  background: transparent;
}

/* IMPORTANT: iframe height controls overall “player height” */
.frame.now{ height: var(--iframe-now-h); }
.frame.next{ height: var(--iframe-next-h); }

/* controls */
.controls{ display: grid; gap: 12px; }

.btnrow{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
}

.ctrlbtn{
  width: var(--ctrlbtn-size);
  height: var(--ctrlbtn-size);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: var(--text);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, background .08s ease, border-color .08s ease;
}
.ctrlbtn:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.ctrlbtn:active{ transform: scale(.97); }

.ctrlbtn svg{
  width: var(--ctrlbtn-icon);
  height: var(--ctrlbtn-icon);
  display: block;
}

.ctrlbtn:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* volume */
.vol{
  display: flex;
  align-items: center;
  gap: 12px;
}
.vol label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  width: 74px;
  flex: 0 0 auto;
}
.vol input[type="range"]{
  width: 100%;
  accent-color: white;
}

/* logo override for webplayer */
.webplayer-logo{
  max-width: var(--logo-max-w);
  width: 90%;
  margin: var(--logo-margin);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* play button state */
.ctrlbtn.playing{
  background: rgba(76,217,123,.22);
  border-color: rgba(76,217,123,.55);
  color: rgba(76,217,123,1);
  box-shadow:
    0 0 0 1px rgba(76,217,123,.35),
    0 10px 26px rgba(0,0,0,.22);
}
.ctrlbtn.playing:hover{
  background: rgba(76,217,123,.28);
}

/* stop button hover */
.ctrlbtn.stop{ color: rgba(255,255,255,.88); }
.ctrlbtn.stop:hover{
  background: rgba(229,57,53,.18);
  border-color: rgba(229,57,53,.55);
  color: rgba(229,57,53,1);
}
.ctrlbtn.stop:active{ transform: scale(.95); }

/* Debug/status line */
.statusline{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
  padding-top: 2px;
  text-align: center;
}
.statusline strong{ color: rgba(255,255,255,.92); }

/* ---------- Mobile (small screens) ----------
   TWEAK ZONE (Mobile):
   - You can change iframe heights here to adjust overall player height on mobile
*/
@media (max-width: 420px){
  :root{
    --ctrlbtn-size: 44px;
    --ctrlbtn-icon: 34px;

    --iframe-now-h: 300px;
    --iframe-next-h: 190px;
  }

  body.page-webplayer .card{
    padding: 16px;
    width: 100%;
  }
}

/* Mobile volume behavior: OS controls volume */
.vol-hint{
  display: none;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.3;
  opacity: .8;
}

/* Touch-first devices (most phones) */
@media (pointer: coarse){
  .vol{ display: none; }
  .vol-hint{ display: block; }
}