/* ============================================================
   LVRN EPK Feature Pack — shared styles
   Modules: geo-banner, qr-card, booking-wizard, voice-intro,
            multi-currency, make-playlist, mood-filter,
            press-kit, version-stamp, sync-catalog, lyrics
   ============================================================ */

/* ---- 1. Geo-fence ticket banner ---- */
.geo-banner{
  position:fixed; top:0; left:0; right:0; z-index:9997;
  background:linear-gradient(90deg,var(--orange,#ff9e5a) 0%, var(--orange-deep,#c9743e) 100%);
  color:#0a0a0a; padding:10px 20px;
  display:flex; justify-content:center; align-items:center; gap:14px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.04em;
  text-transform:uppercase; font-weight:600;
  box-shadow:0 4px 24px rgba(0,0,0,0.4);
  transform:translateY(-100%); transition:transform .4s ease;
}
.geo-banner.show{transform:translateY(0)}
.geo-banner .pulse{
  width:8px;height:8px;border-radius:50%;background:#0a0a0a;
  animation:geo-pulse 1.8s ease-in-out infinite;
}
@keyframes geo-pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.geo-banner a{color:#0a0a0a;text-decoration:none;border-bottom:1px solid #0a0a0a;padding-bottom:1px}
.geo-banner .close{
  background:transparent;border:1px solid rgba(0,0,0,0.4);color:#0a0a0a;
  font-size:14px;width:20px;height:20px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1;
}
.geo-banner .close:hover{background:#0a0a0a;color:var(--orange,#ff9e5a)}

/* ---- 2. QR card on connect slide ---- */
.qr-card{
  background:#f4f1ea; padding:14px; border-radius:12px;
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  margin-top:12px;
}
.qr-card canvas{display:block;border-radius:6px}
.qr-card .qr-label{
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.12em;
  text-transform:uppercase; color:#0a0a0a; opacity:0.7;
}

/* ---- 3. Booking decision wizard ---- */
.book-wizard{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px; padding:24px; margin:20px 0;
  font-family:'Inter',sans-serif; color:#f4f1ea;
}
.book-wizard h3{
  font-family:'Playfair Display',serif; font-style:italic; font-weight:400;
  font-size:24px; margin-bottom:6px; color:var(--orange,#ff9e5a);
}
.book-wizard .step{display:none}
.book-wizard .step.active{display:block;animation:msg-in .3s ease-out}
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.book-wizard .opts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.book-wizard .opt{
  flex:1; min-width:120px; padding:14px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; cursor:pointer; transition:all .2s;
  font-size:13px; text-align:left; color:#f4f1ea; font-family:inherit;
}
.book-wizard .opt:hover{
  background:color-mix(in srgb, var(--orange,#ff9e5a) 12%, transparent);
  border-color:color-mix(in srgb, var(--orange,#ff9e5a) 40%, transparent);
}
.book-wizard .opt.selected{
  background:color-mix(in srgb, var(--orange,#ff9e5a) 18%, transparent);
  border-color:var(--orange,#ff9e5a);
}
.book-wizard .opt strong{display:block;font-size:14px;margin-bottom:4px}
.book-wizard .opt small{display:block;opacity:0.6;font-size:11px}
.book-wizard .wiz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px}
.book-wizard .wiz-foot button{
  background:linear-gradient(135deg,var(--orange,#ff9e5a),var(--orange-deep,#c9743e));
  color:#0a0a0a; border:none; padding:10px 20px; border-radius:10px;
  font-weight:600; cursor:pointer; font-family:inherit;
}
.book-wizard .wiz-foot button:disabled{opacity:0.4;cursor:not-allowed}
.book-wizard .wiz-foot .back{
  background:transparent; color:#9a9a9a; border:1px solid rgba(255,255,255,0.1);
}
.book-wizard .progress{
  height:2px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden;
  margin-bottom:18px;
}
.book-wizard .progress span{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--orange,#ff9e5a),var(--orange-deep,#c9743e));
  transition:width .3s ease;
}
.book-wizard .summary{
  background:rgba(0,0,0,0.3);padding:16px;border-radius:8px;margin-top:16px;
  font-size:13px;line-height:1.7;
}
.book-wizard .summary dt{display:inline-block;width:120px;color:#9a9a9a;font-size:11px;
  letter-spacing:0.08em;text-transform:uppercase}
.book-wizard .summary dd{display:inline-block;margin:0}

/* ---- 4. Multi-currency rate toggle ---- */
.fx-toggle{display:flex;gap:6px;margin:14px 0;flex-wrap:wrap}
.fx-toggle button{
  background:transparent;border:1px solid rgba(255,255,255,0.15);color:#9a9a9a;
  padding:6px 12px;border-radius:999px;cursor:pointer;font-size:11px;
  font-family:'JetBrains Mono',monospace;letter-spacing:0.06em;
  transition:all .2s;
}
.fx-toggle button.active{
  background:var(--orange,#ff9e5a);color:#0a0a0a;border-color:var(--orange,#ff9e5a);
}
.fx-rate{font-family:'WCSpeed','Formula1Bold','Anton',sans-serif;font-size:36px;color:var(--orange,#ff9e5a)}
.fx-rate small{font-size:14px;opacity:0.6;margin-left:6px}

/* ---- 5. Voice intro indicator ---- */
.voice-intro-control{
  position:fixed; bottom:108px; right:24px; z-index:9996;
  background:#0a0a0a; border:1px solid rgba(255,255,255,0.12);
  border-radius:999px; padding:8px 14px; font-size:11px;
  font-family:'JetBrains Mono',monospace; color:#9a9a9a;
  cursor:pointer; display:none; align-items:center; gap:8px;
  letter-spacing:0.08em; text-transform:uppercase;
}
.voice-intro-control.show{display:inline-flex}
.voice-intro-control .vol{
  width:18px;height:18px;display:flex;align-items:flex-end;gap:1.5px;
}
.voice-intro-control .vol span{
  width:2px;background:var(--orange,#ff9e5a);border-radius:1px;
  animation:vol-wave 1s ease-in-out infinite;
}
.voice-intro-control .vol span:nth-child(1){height:30%;animation-delay:0s}
.voice-intro-control .vol span:nth-child(2){height:80%;animation-delay:.15s}
.voice-intro-control .vol span:nth-child(3){height:50%;animation-delay:.3s}
.voice-intro-control .vol span:nth-child(4){height:70%;animation-delay:.45s}
@keyframes vol-wave{0%,100%{transform:scaleY(0.6)}50%{transform:scaleY(1)}}

/* ---- 6. Make-a-playlist sampler ---- */
.playlist-builder{
  position:fixed; bottom:24px; left:24px; z-index:9996;
  background:#0a0a0a; border:1px solid rgba(255,255,255,0.12);
  border-radius:14px; padding:14px 18px; font-family:'Inter',sans-serif;
  display:none; flex-direction:column; gap:8px; min-width:240px;
  box-shadow:0 12px 36px rgba(0,0,0,0.5);
}
.playlist-builder.show{display:flex}
.playlist-builder .pb-head{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#9a9a9a;
  font-family:'JetBrains Mono',monospace}
.playlist-builder .pb-count{font-size:32px;font-family:'WCSpeed','Formula1Bold','Anton',sans-serif;
  color:var(--orange,#ff9e5a);line-height:1}
.playlist-builder .pb-cta{
  background:linear-gradient(135deg,var(--orange,#ff9e5a),var(--orange-deep,#c9743e));
  color:#0a0a0a;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;
  font-weight:600;font-size:13px;
}
.playlist-builder .pb-cta:disabled{opacity:0.5;cursor:not-allowed}
.track.in-playlist{outline:2px solid var(--orange,#ff9e5a);outline-offset:-2px}

/* ---- 7. Sync placement catalog (slide-level) ---- */
.sync-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.sync-card{
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:18px;font-family:'Inter',sans-serif;
}
.sync-card .sc-title{font-family:'Playfair Display',serif;font-style:italic;font-size:20px;
  color:var(--orange,#ff9e5a);margin-bottom:4px}
.sync-card .sc-meta{font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.12em;text-transform:uppercase;color:#9a9a9a}
.sync-card .sc-timecode{font-family:'JetBrains Mono',monospace;font-size:13px;
  color:#f4f1ea;margin-top:8px}
.sync-card .sc-track{font-size:13px;color:#f4f1ea;margin-top:6px;font-weight:500}

/* ---- 8. Version stamp ---- */
.epk-version-stamp{
  position:fixed; bottom:6px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,241,234,0.25);
  z-index:9995; pointer-events:none;
}

@media (max-width:520px){
  .geo-banner{font-size:10px;padding:8px 12px;gap:8px}
  .playlist-builder{left:12px;bottom:90px;min-width:200px}
  .voice-intro-control{right:90px;bottom:24px}
}

@media print{
  .geo-banner,.voice-intro-control,.playlist-builder,.qr-card,.epk-version-stamp{display:none !important}
}