/*
Theme Name: Nostalgia
Theme URI: https://stratgies.agency/nostalgia
Author: Stratgies Agency
Author URI: https://stratgies.agency
Description: A fully customisable, single-page playlist & greeting-board experience theme. Change the shop/site name, tagline, greeting text (with your own voice recording or tuned text-to-speech), ticket/receipt items, playlists and the background photo or video from the WordPress Customizer and the Nostalgia settings page — no code editing needed.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thela-player
*/

:root{
  --amber:#ffb545;
  --amber-deep:#ff8a3d;
  --pink:#ff5f7e;
  --paper:#f3e6c9;
  --ink:#241407;
  --card:rgba(20,10,28,.72);
  --card-strong:rgba(15,8,22,.92);
  --line:rgba(255,255,255,.16);
  --text:#fbf6ea;
  --text-dim:rgba(251,246,234,.72);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Poppins',sans-serif;
  background:#150a12;
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
.hindi{font-family:'Baloo 2',sans-serif;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:inherit;text-decoration:none;}

/* ---------- SCENE BACKGROUND (photo or video, admin-configurable) ---------- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.scene-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 55%;
  transform:scale(1.04);
  filter:saturate(1.2) contrast(1.08) brightness(1.03);
}
.scene-bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);
  filter:saturate(1.2) contrast(1.08) brightness(1.03);
}
.scene-fade-top{position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(10,4,6,.88) 0%,rgba(10,4,6,.32) 60%,transparent 100%);}
.scene-fade-bottom{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(0deg,rgba(8,3,4,.94) 0%,rgba(8,3,4,.5) 45%,transparent 100%);}
.scene-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(70,20,20,.18),rgba(255,120,40,.1) 45%,rgba(10,4,6,.28));mix-blend-mode:overlay;opacity:.65;}
.firefly{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffe38a;box-shadow:0 0 8px 3px rgba(255,227,138,.8);animation:float-fly 6s ease-in-out infinite;}
@keyframes float-fly{0%,100%{transform:translate(0,0);opacity:.15;}50%{transform:translate(16px,-22px);opacity:.9;}}

/* ---------- TOP RIBBON BANNER ---------- */
/* ---------- HEADER ---------- */
.topbar{position:relative;z-index:5;display:flex;align-items:flex-start;justify-content:space-between;padding:22px 26px;gap:10px;}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;}
.brand .icon{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,var(--amber),var(--amber-deep));
  display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 0 16px rgba(255,150,60,.5);
  overflow:hidden;flex:none;
}
.brand .icon img{width:100%;height:100%;object-fit:cover;}
.brand>div{min-width:0;}
.brand .name{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:18px;line-height:1.1;text-shadow:0 2px 10px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.brand .sub{font-size:10px;letter-spacing:.14em;color:var(--text-dim);text-transform:uppercase;margin-top:2px;text-shadow:0 1px 6px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.clock-wrap{text-align:right;flex:none;}
.clock{font-variant-numeric:tabular-nums;font-weight:600;font-size:20px;letter-spacing:.03em;text-shadow:0 2px 10px rgba(0,0,0,.6);}
.clock .secs{font-size:12px;color:var(--text-dim);}
.customers{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:11px;color:var(--text-dim);margin-top:4px;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.7);}
.dot{width:6px;height:6px;border-radius:50%;background:#ffb545;box-shadow:0 0 6px 2px rgba(255,181,69,.7);animation:pulse-dot 1.6s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:.4;}50%{opacity:1;}}
.driver-btn{
  margin-top:10px;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border-radius:999px;
  background:rgba(10,5,15,.72);border:1px solid var(--line);font-size:12px;font-weight:500;white-space:nowrap;
}
.driver-btn .av{width:22px;height:22px;border-radius:50%;background:#e9c288;display:flex;align-items:center;justify-content:center;font-size:12px;overflow:hidden;}
.driver-btn .av img{width:100%;height:100%;object-fit:cover;}

/* ---------- HERO TEXT ---------- */
.hero{position:relative;z-index:4;text-align:center;margin-top:calc(2vh - 70px);}
.eyebrow{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;letter-spacing:.28em;color:var(--text);text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.7);margin-bottom:18px;}
.title{
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:clamp(46px,10vw,108px);line-height:1;
  margin:8px 0 4px;
  background:linear-gradient(180deg,#fffdf6,#f3d9a8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.55));
}
/* Tagline slot — now shows a random street-greeting phrase (re-rolled on every
   page load / mood switch, see rollGreeting() in app.js) instead of static text */
.tagline{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;letter-spacing:.08em;
  color:var(--text);display:flex;align-items:center;justify-content:center;gap:14px;
  text-shadow:0 1px 8px rgba(0,0,0,.7);min-height:20px;
}
.tagline:before,.tagline:after{content:"";width:34px;height:1px;background:var(--line);}

/* ---------- MOOD SELECTOR (admin-defined moods; a full vibe-swap on tap) ---------- */
.mood-tabs{
  position:relative;z-index:4;display:flex;gap:8px;flex-wrap:nowrap;justify-content:flex-start;
  max-width:820px;width:100%;margin:1.6vh auto 0;padding:0 12px 4px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.mood-tabs::-webkit-scrollbar{display:none;}
.mood-tabs button{
  flex:none;display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:rgba(10,5,15,.55);border:1px solid var(--line);color:var(--text-dim);white-space:nowrap;
  transition:.15s;backdrop-filter:blur(2px);
}
.mood-tabs button .memoji{font-size:14px;}
.mood-tabs button:hover{color:var(--text);border-color:rgba(255,255,255,.3);}
.mood-tabs button.active{background:linear-gradient(145deg,var(--amber),var(--amber-deep));color:#2a1300;border-color:transparent;box-shadow:0 4px 14px rgba(255,150,50,.35);}

/* Text that "dances" for a moment when the mood/fx side-button is triggered */
@keyframes text-dance{
  0%{transform:translateY(0) rotate(0deg);}
  20%{transform:translateY(-4px) rotate(-2deg);}
  40%{transform:translateY(1px) rotate(2deg);}
  60%{transform:translateY(-3px) rotate(-1deg);}
  80%{transform:translateY(1px) rotate(1deg);}
  100%{transform:translateY(0) rotate(0deg);}
}
.dance{animation:text-dance .6s ease-in-out;}

/* Cross-fade helper for smooth background swaps when the mood changes */
.scene-bg,.scene-bg-video{transition:opacity .5s ease;}
.scene-bg.fading,.scene-bg-video.fading{opacity:0;}

.board{
  position:relative;z-index:4;margin:2.2vh auto 0;width:max-content;max-width:88vw;
  background:rgba(10,5,8,.78);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:10px 18px;text-align:center;backdrop-filter:blur(3px);
  cursor:pointer;transition:transform .15s,background .2s;
}
.board:hover{background:rgba(20,8,10,.85);}
.board:active{transform:scale(.97);}
.board.speaking{border-color:rgba(255,180,60,.6);box-shadow:0 0 0 3px rgba(255,180,60,.15);}
.board .hi{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;}
.board .en{font-size:9px;letter-spacing:.16em;color:var(--text-dim);text-transform:uppercase;margin-top:2px;}

/* ---------- SIDE-BUTTON FX (mood-specific sound: horn/auto/chai/bell/pop/lighter) ----------
   A single mode-neutral "glow ping" plays on every mode — a literal flame shape only made
   sense for the lighter mode and looked out of place for horn/auto/chai/etc, so this is a
   plain radiant pulse instead, reused (via the same .flame element/class app.js already
   toggles) regardless of which fx mode is active. */
#fxBtn{position:relative;overflow:visible;}
.flame{
  position:absolute;left:50%;top:50%;width:30px;height:30px;
  transform:translate(-50%,-50%) scale(.4);border-radius:50%;
  background:radial-gradient(circle,rgba(255,181,69,.65) 0%,rgba(255,181,69,.28) 45%,transparent 72%);
  opacity:0;pointer-events:none;
}
#fxBtn.lit .flame{animation:fx-pulse .6s ease-out;}
@keyframes fx-pulse{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:.9;}
  100%{transform:translate(-50%,-50%) scale(1.7);opacity:0;}
}

/* ---------- BOTTOM PLAYER ---------- */
.player-dock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:14px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.genre-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:920px;}
.genre-tabs button{
  padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;
  background:rgba(10,5,15,.55);border:1px solid var(--line);color:var(--text-dim);
  transition:.15s;
}
.genre-tabs button.active{background:linear-gradient(145deg,var(--amber),var(--amber-deep));color:#2a1300;border-color:transparent;box-shadow:0 4px 14px rgba(255,150,50,.35);}
.genre-tabs button.add-tab{border-style:dashed;}

.custom-form{
  display:none;gap:8px;width:100%;max-width:520px;background:var(--card-strong);
  border:1px solid var(--line);border-radius:14px;padding:10px;align-items:center;
}
.custom-form.show{display:flex;}
.custom-form input{
  flex:1;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:9px 12px;font-size:12.5px;outline:none;
}
.custom-form input::placeholder{color:var(--text-dim);}
.custom-form button{background:var(--paper);color:var(--ink);border-radius:10px;padding:9px 14px;font-size:12.5px;font-weight:600;white-space:nowrap;}
.custom-hint{font-size:10px;color:var(--text-dim);text-align:center;max-width:520px;}

.player{
  width:100%;max-width:640px;background:var(--card-strong);border:1px solid var(--line);
  border-radius:20px;padding:12px 16px;display:flex;align-items:center;gap:14px;
  backdrop-filter:blur(10px);box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.art{width:52px;height:52px;border-radius:12px;flex:none;background:linear-gradient(145deg,#5a2e63,#26122f);display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;}
.meta{min-width:0;flex:1;}
.meta .tt{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.meta .ar{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.seek-row{display:flex;align-items:center;gap:6px;margin-top:5px;}
.seek-row span{font-size:9px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:rgba(255,255,255,.18);flex:1;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--amber);cursor:pointer;box-shadow:0 0 6px rgba(255,180,60,.7);}
#seek{accent-color:var(--amber-deep);}
.ctrls{display:flex;align-items:center;gap:10px;flex:none;}
.ctrls button{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:15px;}
.ctrls .play{width:42px;height:42px;background:var(--paper);color:var(--ink);font-size:16px;}
.ctrls .side{width:30px;height:30px;background:rgba(255,255,255,.08);font-size:13px;}

.kbd-hints{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:10px;color:var(--text-dim);letter-spacing:.04em;}
.kbd-hints kbd{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:5px;padding:2px 6px;margin-right:5px;font-family:inherit;font-size:10px;}

/* install toast */
.toast{
  position:fixed;left:50%;bottom:206px;transform:translateX(-50%);z-index:25;
  background:var(--card-strong);border:1px solid var(--line);border-radius:16px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;max-width:340px;width:88vw;
  box-shadow:0 16px 30px rgba(0,0,0,.45);
}
.toast .ic{width:34px;height:34px;border-radius:9px;background:linear-gradient(145deg,var(--amber),var(--amber-deep));flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;}
.toast .ic img{width:100%;height:100%;object-fit:cover;}
.toast .tx b{display:block;font-size:12.5px;}
.toast .tx span{font-size:10.5px;color:var(--text-dim);}
.toast .act{display:flex;gap:6px;margin-left:auto;flex:none;}
.toast button.add{background:var(--paper);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:600;}
.toast button.x{color:var(--text-dim);font-size:16px;padding:4px;}

/* ---------- PANELS (queue / parchi / driver) ---------- */
.overlay{position:fixed;inset:0;background:rgba(5,2,8,.72);backdrop-filter:blur(2px);z-index:40;display:none;align-items:center;justify-content:center;padding:20px;}
.overlay.show{display:flex;}
.panel{
  background:#150a17;border:1px solid var(--line);border-radius:20px;width:100%;max-width:460px;
  max-height:82vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 60px rgba(0,0,0,.6);
}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);}
.panel-head h3{margin:0;font-family:'Baloo 2',sans-serif;font-size:17px;}
.panel-head .close{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);}
.panel-body{overflow-y:auto;padding:6px 8px;}
.track-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;}
.track-row:hover{background:rgba(255,255,255,.05);}
.track-row.playing{background:rgba(255,150,60,.14);}
.track-row .n{width:20px;text-align:center;font-size:11px;color:var(--text-dim);flex:none;}
.track-row .th{width:38px;height:38px;border-radius:9px;flex:none;background:linear-gradient(145deg,#5a2e63,#26122f);object-fit:cover;}
.track-row .info{min-width:0;flex:1;}
.track-row .info .t1{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.track-row .info .t2{font-size:10.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.empty-state{padding:30px 20px;text-align:center;font-size:12.5px;color:var(--text-dim);}

/* parchi (ticket) */
.parchi-name-row{padding:14px 18px 12px;}
.parchi-name-row label{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px;}
.parchi-name-row input{
  width:100%;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:9px 12px;font-size:12.5px;outline:none;
}
.parchi-name-row input::placeholder{color:var(--text-dim);}
.parchi-wrap{padding:20px;}
.parchi{background:var(--paper);color:var(--ink);border-radius:16px;padding:20px;box-shadow:0 20px 40px rgba(0,0,0,.35);position:relative;}
.parchi .row1{display:flex;align-items:center;justify-content:space-between;}
.parchi .brand2{display:flex;align-items:center;gap:8px;}
.parchi .brand2 .ic2{width:24px;height:24px;border-radius:50%;background:linear-gradient(145deg,var(--amber),var(--amber-deep));display:flex;align-items:center;justify-content:center;font-size:13px;overflow:hidden;}
.parchi .brand2 .ic2 img{width:100%;height:100%;object-fit:cover;}
.parchi .brand2 b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:block;}
.parchi .brand2 small{font-size:10px;color:#6b5636;}
.parchi .badge{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#6b5636;}
.parchi hr{border:none;border-top:2px dashed #cbb783;margin:14px 0;}
.parchi label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#7a6640;display:block;margin-bottom:2px;}
.parchi .val{font-weight:700;font-size:14px;margin-bottom:12px;}
.parchi .val.val-sm{font-size:13px;}
.parchi .iname-en{font-weight:400;opacity:.6;}
.parchi .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:12px 0;}
.barcode{height:34px;background:repeating-linear-gradient(90deg,#241407 0 2px,transparent 2px 5px);margin:10px 0;}
.parchi .items{margin:10px 0;}
.parchi .item-row{display:flex;align-items:baseline;gap:8px;font-size:12.5px;padding:3px 0;}
.parchi .item-row .iname{flex:1;font-weight:600;}
.parchi .item-row .iqty{color:#7a6640;font-size:11px;white-space:nowrap;}
.parchi .item-row .iprice{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
.parchi .total-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:8px;border-top:2px dashed #cbb783;}
.parchi .total-row .tlabel{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.parchi .total-row .tval{font-size:19px;font-weight:800;}
.parchi .visitor-name{font-size:11.5px;color:#6b5636;margin-top:2px;}
.parchi .now-playing-note{font-size:10.5px;color:#7a6640;margin-top:10px;line-height:1.5;}
.parchi .foot{display:flex;justify-content:space-between;font-size:10px;color:#6b5636;}
.printing{text-align:center;padding:50px 20px;font-size:13px;letter-spacing:.2em;color:var(--text-dim);}
.panel-actions{padding:14px 18px;display:flex;gap:10px;border-top:1px solid var(--line);}
.panel-actions button{flex:1;padding:12px;border-radius:12px;font-weight:600;font-size:13px;}
.panel-actions .primary{background:var(--paper);color:var(--ink);}
.panel-actions .ghost{background:rgba(255,255,255,.06);color:var(--text-dim);}

/* driver card */
.driver-card{padding:22px;text-align:center;}
.driver-card .av2{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(145deg,#e9c288,#c68d4a);display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;}
.driver-card .av2 img{width:100%;height:100%;object-fit:cover;}
.driver-card h4{margin:0 0 4px;font-family:'Baloo 2',sans-serif;font-size:18px;}
.driver-card p{margin:0 0 16px;font-size:12.5px;color:var(--text-dim);line-height:1.5;}
.follow-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;background:linear-gradient(90deg,#ff8a3d,#ff5f7e,#c04cff);font-weight:600;font-size:13px;color:#fff;}

@media (max-width:640px){
  .topbar{padding:16px;}
  .title{font-size:clamp(38px,15vw,64px);}
  .board{padding:8px 14px;}
  .board .hi{font-size:13px;}
  .player{padding:10px 12px;gap:10px;}
  .kbd-hints{display:none;}
  .toast{bottom:186px;}
}

/* hidden YouTube iframe host — kept in the DOM but visually/interactively invisible */
#ytHolder{position:fixed;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px;}

/* player diagnostics banner (shown by app.js when the YouTube player can't load) */
.thela-player-problem{
  position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:60;display:none;
  background:#3a0f14;color:#ffd9d9;border:1px solid #ff6b6b;border-radius:12px;padding:10px 16px;
  font-size:12.5px;max-width:92vw;width:520px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.thela-player-problem.show{display:block;}

/* ---------- WP ADMIN BAR SPACING (front-end when logged in) ---------- */
.admin-bar .topbar{padding-top:calc(22px + 32px);}
@media (max-width:782px){
  .admin-bar .topbar{padding-top:calc(16px + 46px);}
}