/* =========================================================================
 * AMBIENT MANN — stilark (kosmisk mørkt tema)
 * ========================================================================= */
:root{
  --bg:#04060f; --panel:rgba(16,20,38,.66); --panel2:rgba(24,28,52,.6);
  --line:rgba(140,160,255,.16); --text:#eaf0ff; --muted:#9aa6cf;
  --accent:#8ab4ff; --accent2:#c792ff; --live:#ff4d6d; --vipps:#ff5b24;
  --radius:16px; --maxw:920px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text); background:var(--bg); min-height:100vh; line-height:1.55;
  /* Opplastet «universe»-bilde bak den bevegelige stjernehimmelen */
  background-image:var(--bg-image,none);
  background-size:cover; background-position:center; background-attachment:fixed;
}
#starfield{position:fixed; inset:0; z-index:-2; pointer-events:none}
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,0) 40%, rgba(2,4,12,.72) 100%)}
a{color:var(--accent); text-decoration:none}
h1,h2,h3{margin:0 0 .4em; line-height:1.2}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px}
.muted{color:var(--muted)}

/* ---- Topbar ---- */
.topbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:12px 18px; backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(4,6,15,.75), rgba(4,6,15,.15)); border-bottom:1px solid var(--line)}
.nav{display:flex; gap:18px; flex:1}
.nav a{color:var(--text); opacity:.82; font-weight:600; font-size:15px}
.nav a:hover{opacity:1; color:var(--accent)}
.nav-toggle{display:none; background:none; border:0; color:var(--text); font-size:22px; cursor:pointer}

/* ---- Knapper ---- */
.btn{display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:11px 18px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font-weight:700; font-size:15px; cursor:pointer;
  transition:transform .08s ease, background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0a0f2a; border:0}
.btn-ghost{background:transparent}
.btn-tiny{padding:7px 12px; font-size:13px; border-radius:9px; margin:6px 6px 0 0}
.btn-vipps{background:var(--vipps); color:#fff; border:0}

/* ---- Språkvelger ---- */
.lang-picker{background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:12px; padding:9px 12px; font-weight:600; font-size:14px; cursor:pointer;
  max-width:170px; appearance:none; -webkit-appearance:none}
.lang-picker:hover{border-color:var(--accent)}
.lang-picker option{background:#0a0f2a; color:var(--text)}
/* Skjul Googles egen widget-UI (banner/tooltip/uthevning) – vi bruker vår egen */
#google_translate_element{display:none}
.goog-te-banner-frame,.goog-te-gadget-icon,#goog-gt-tt,.goog-tooltip,.goog-tooltip *{display:none !important}
.goog-te-gadget{height:0;overflow:hidden}
body{top:0 !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}

/* ---- Hero: mindre logo m/ bevegelige skyer ---- */
.hero{text-align:center; padding:46px 0 26px}
.logo-wrap{position:relative; display:inline-block; padding:30px 40px}
.am-logo{position:relative; z-index:2; width:clamp(240px,46vw,440px); height:auto;
  border-radius:16px; box-shadow:0 10px 40px rgba(120,160,255,.4)}
.clouds{position:absolute; inset:-10px; z-index:1; overflow:visible; pointer-events:none}
.cloud{position:absolute; width:70%; height:55%;
  background:radial-gradient(closest-side, rgba(220,235,255,.42), rgba(220,235,255,0) 72%);
  filter:blur(16px); mix-blend-mode:screen; opacity:.4; animation:cloudDrift linear infinite}
.cloud.c1{top:6%;  left:2%;  animation-duration:30s}
.cloud.c2{top:38%; left:20%; opacity:.34; animation-duration:42s}
.cloud.c3{top:0;   left:40%; opacity:.38; animation-duration:56s}
@keyframes cloudDrift{from{transform:translateX(-34%)} to{transform:translateX(34%)}}
@media (prefers-reduced-motion:reduce){ .cloud{animation:none} }
.tagline{color:var(--muted); font-weight:600; letter-spacing:.02em; margin:0 0 18px}
.booking-line{margin:14px 0 0; color:var(--muted); font-size:14px}
.booking-line a{font-weight:600}

/* ---- Seksjoner / kort ---- */
.block{padding:26px 0; border-top:1px solid var(--line)}
.section-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.section-head h2{font-size:26px}
.hint{color:var(--muted); font-size:13px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; backdrop-filter:blur(8px); margin-bottom:14px}
.mini-h{font-size:15px; color:var(--accent); margin:14px 0 8px; text-transform:uppercase; letter-spacing:.05em}
.bio{font-size:16px; margin:0 0 12px}
.credits{margin:0; padding-left:18px; color:var(--muted)}
.credits li{margin:3px 0}
.booking-cta{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.note{color:var(--muted); font-size:13px; margin:10px 0 0}
label{display:block; font-size:13px; color:var(--muted); margin:10px 0 4px}
.input{width:100%; padding:11px 13px; border-radius:11px; border:1px solid var(--line);
  background:rgba(8,10,24,.6); color:var(--text); font-size:15px; font-family:inherit}
textarea.input{resize:vertical}
.row{display:grid; grid-template-columns:1fr 120px; gap:12px}
hr{border:0; border-top:1px solid var(--line); margin:16px 0}

/* ---- Musikk / spor ---- */
.tracks{display:flex; flex-direction:column; gap:4px}
.track-row{display:flex; align-items:center; gap:12px; padding:10px; border-radius:11px; cursor:pointer}
.track-row:hover{background:rgba(140,160,255,.08)}
.track-row.playing{background:rgba(140,160,255,.14)}
.track-play{width:38px; height:38px; border-radius:50%; border:0; cursor:pointer; flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0a0f2a; font-size:15px}
.track-meta{flex:1; min-width:0}
.track-title{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.track-sub{color:var(--muted); font-size:12px}

/* ---- Live ---- */
.live-box{display:flex; align-items:center; gap:16px}
.live-meta{flex:1}
.kicker{font-size:12px; letter-spacing:.14em; color:var(--accent); font-weight:700}
.live-box .title{font-size:20px; font-weight:800}
.live-box .sub{color:var(--muted); font-size:14px}
.live-stats{text-align:center; color:var(--muted); font-size:12px}
.live-stats b{display:block; font-size:22px; color:var(--text)}
.live-desc{color:var(--muted); margin:8px 0 18px}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:999px; background:rgba(140,160,255,.14); color:var(--accent)}
.badge-live{background:rgba(255,77,109,.16); color:#ff8ea3}
.dot{width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(255,77,109,.6); animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,77,109,0)} 100%{box-shadow:0 0 0 0 rgba(255,77,109,0)}}

/* ---- Sendeplan ---- */
.schedule{display:flex; flex-direction:column; gap:8px}
.sched-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px}
.sched-when{font-weight:700; font-size:14px}
.sched-title{flex:1; color:var(--muted)}

/* ---- Donasjon ---- */
.don-presets{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.don-preset{padding:10px 16px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font-weight:700; cursor:pointer}
.don-preset.active{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0a0f2a; border:0}
.don-custom{max-width:220px}
.don-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

/* ---- Lenke-forhåndsvisning (LinkPreview) ---- */
.links{display:flex; flex-direction:column; gap:10px}
.link-item{display:flex; align-items:center; gap:8px}
.link-item .cp-prev{flex:1}
.cp-prev-card{display:flex; gap:12px; align-items:center; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; color:var(--text)}
.cp-prev-thumb{position:relative; width:120px; height:80px; flex:0 0 auto; background:#0a0f2a}
.cp-prev-thumb img{width:100%; height:100%; object-fit:cover}
.cp-prev-thumb iframe{width:100%; height:100%; border:0}
.cp-playing .cp-prev-thumb{width:280px; height:160px}
.cp-prev-noimg{display:flex; align-items:center; justify-content:center}
.cp-prev-play{position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%;
  border:0; cursor:pointer; background:rgba(10,15,42,.7); color:#fff}
.cp-prev-play svg{width:22px; height:22px}
.cp-prev-info{padding:10px 12px; min-width:0}
.cp-prev-site{font-size:12px; color:var(--muted)}
.cp-prev-title{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-link{word-break:break-all}

/* ---- Bunn-logoer (mindre enn bakgrunn + hovedlogo) ---- */
.logo-strip{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:center;
  padding:34px 0 12px; border-top:1px solid var(--line)}
.brand-logo{display:inline-flex; opacity:.82; transition:opacity .2s, transform .2s}
.brand-logo:hover{opacity:1; transform:translateY(-2px)}
.brand-logo img{height:56px; width:auto; max-width:120px; object-fit:contain; border-radius:10px;
  font-size:11px; line-height:1.2; text-align:center}

.foot{text-align:center; color:var(--muted); font-size:13px; padding:20px 18px 96px}

/* ---- Live-spiller-bar ---- */
.player-bar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center; gap:14px;
  padding:10px 16px; background:rgba(6,8,20,.9); backdrop-filter:blur(12px); border-top:1px solid var(--line)}
.pb-play{width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0a0f2a; font-size:17px}
.pb-info{flex:1; min-width:0}
.pb-info .now{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pb-info .by{font-size:13px; color:var(--muted)}
.pb-live{color:#ff8ea3; font-weight:700}
.pb-right{display:flex; align-items:center; gap:8px}
.pb-vol{width:110px}

/* ---- Chat ---- */
.chat-fab{position:fixed; right:16px; bottom:78px; z-index:41; padding:11px 16px; border-radius:999px;
  border:0; cursor:pointer; font-weight:700; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0a0f2a}
.chat-panel{position:fixed; right:16px; bottom:130px; z-index:42; width:320px; max-width:calc(100vw - 24px);
  height:420px; max-height:calc(100vh - 160px); display:none; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; backdrop-filter:blur(12px)}
.chat-panel.open{display:flex}
.chat-head{display:flex; align-items:center; justify-content:space-between; padding:10px 12px;
  background:rgba(10,15,42,.7); cursor:move; user-select:none; touch-action:none}
.chat-head .t{font-weight:700; font-size:14px}
.drag-hint{color:var(--muted); font-weight:400; font-size:11px; margin-left:6px}
.x{background:none; border:0; color:var(--muted); font-size:20px; cursor:pointer}
.chat-log{flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:6px}
.chat-msg{font-size:14px; word-wrap:break-word}
.chat-name-row{display:flex; align-items:center; gap:8px; padding:6px 12px}
.chat-name-row label{margin:0}
.chat-name-row .input{padding:7px 10px}
.chat-input{display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line)}
.chat-input .input{padding:9px 11px}

/* ---- Toast ---- */
.toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px); z-index:60;
  background:rgba(10,15,42,.95); color:var(--text); padding:12px 18px; border-radius:12px; border:1px solid var(--line);
  max-width:90vw; text-align:center; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---- Responsivt ---- */
@media (max-width:640px){
  .nav{display:none; position:absolute; top:56px; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(6,8,20,.96); border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:14px 18px; border-top:1px solid var(--line)}
  .nav-toggle{display:block; order:-1}
  .topbar{justify-content:space-between}
  .row{grid-template-columns:1fr}
  .brand-logo img{height:44px}
  .cp-playing .cp-prev-thumb{width:200px; height:120px}
  .track-player{flex-direction:column; text-align:center}
  .tp-cover{width:120px; height:120px}
}

/* ---- Live-bakgrunn (bilde/mp4 mens live) ---- */
.live-bg{position:fixed; inset:0; z-index:-1; opacity:0; transition:opacity .6s;
  background-size:cover; background-position:center; pointer-events:none}
.live-bg.active{opacity:1}
.live-bg video{width:100%; height:100%; object-fit:cover; display:none}

/* ---- Spor-spiller (cover + spoling) ---- */
.track-player{display:flex; gap:16px; align-items:center; padding-bottom:14px; margin-bottom:10px; border-bottom:1px solid var(--line)}
.tp-cover{width:88px; height:88px; flex:0 0 auto; border-radius:12px; background:#0a0f2a center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:26px}
.tp-cover.empty::after{content:"♪"}
.tp-body{flex:1; min-width:0}
.tp-title{font-weight:800; font-size:17px; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tp-controls{display:flex; align-items:center; gap:12px}
.tp-play{width:46px; height:46px; flex:0 0 auto; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0a0f2a; font-size:18px}
.tp-seek{flex:1; accent-color:var(--accent2)}
.tp-time{font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; min-width:88px; text-align:right}
.track-cover{width:36px; height:36px; flex:0 0 auto; border-radius:8px; background:#0a0f2a center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:15px}
.track-cover.empty{background:rgba(140,160,255,.1)}

/* ---- Navngitte lenker (som SoundCloud) ---- */
.link-main{flex:1; min-width:0}
.link-name{display:inline-block; font-weight:700; font-size:16px; margin-bottom:6px}

/* ---- Modal (eier-innlogging) ---- */
.modal-overlay{position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center;
  background:rgba(2,4,12,.72); backdrop-filter:blur(6px); padding:18px}
.modal-overlay.open{display:flex}
.modal{position:relative; width:100%; max-width:380px; margin:0}
.modal .x{position:absolute; top:8px; right:10px}
.field{margin-bottom:4px}