@charset "utf-8";

/* Base */
html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #000;
  color: #fff;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }

.wrap {
  width: 100%;
  margin: 0;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
}

/* Panel */
.panel {
  position: relative;
  height: 100vh;
  width: 320px;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.75)),
    url(../images/bg.jpg) center/contain no-repeat;
  overflow: visible; /* allow popups */
}

.logo {
  display: block;
  margin: 25px auto 8px;
  width: 320px;
  max-width: 100%;
  height: auto;
}

/* Sticky header */
.nr-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0,0,0,.75);
  backdrop-filter: saturate(140%) blur(3px);
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Dropdown */
.nr-select {
  appearance: none;
  width: 100%;
  padding: 14px 44px 14px 12px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #000 url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center/16px;
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
}

 body{background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
  input[type=text], select{
    padding:10px;font-size:22px;width:280px;background:transparent;border:1px solid #ccc;color:#fff;margin:5px 0;border-radius:6px
  }
  input[type=text]:focus{border-color:#7f04e3;background:#111;outline:none}
  input[type=submit]{
    padding:30px 15px;font-size:22px;max-width:300px;min-width:300px;background:#7302d0;color:#fff;border:0;margin-top:25px;border-radius:6px;cursor:pointer
  }
  input[type=submit]:hover{background:#777}

  .card {min-height:600px;max-height:750px;width:320px;padding:0;overflow:hidden;background:url(/images/bg.jpg) no-repeat center;}
  .logo {max-width:100%;min-width:100%;margin:25px 0}

  /* Polished flash like eriksummers.com */
  .flash {
    display:flex; align-items:flex-start; gap:10px;
    max-width:320px; margin:12px auto 0;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.18);
    border-left-width:4px;
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,.35);
    line-height:1.35; font-size:14px;
  }
  .flash__icon { flex:0 0 auto; font-size:18px; line-height:1; margin-top:2px; }
  .flash__text { flex:1 1 auto; color:#eaeaea; }
  .flash__close {
    flex:0 0 auto; background:none; border:0; color:#fff; opacity:.7; cursor:pointer;
    font-size:18px; line-height:1; padding:0 2px;
  }
  .flash__close:hover { opacity:1; }
  .flash--ok   { background:rgba(46,200,102,.14); border-left-color:#2ec866; }
  .flash--err  { background:rgba(255,0,72,.12);  border-left-color:#ff0048; }
  .flash--ok  .flash__icon { color:#2ec866; }
  .flash--err .flash__icon { color:#ff6b8a; }

  .event-name{line-height:35px;font-size:20px;color:#fff}
  .socialLink{color:#fff;text-decoration:none}
  .socialLink:hover{color:#ddd}
.nr-select option, .nr-select optgroup { background: #000; color: #fff; }
.nr-select:focus { outline: none; box-shadow: inset 0 0 0 2px #7302d0; border-color: #7302d0; }
.nr-select:hover { border-color: #666; }
.nr-select::-ms-expand { display: none; }

/* Totals */
.nr-total { color: #fff; font: 14px/1.4 Arial, sans-serif; margin-top: 8px; text-align: center; }

/* QR */
.qr-wrap {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  text-align: center;
  transition: max-height .25s, opacity .25s, margin-top .25s;
}
.qr-wrap.open { max-height: 160px; opacity: 1; margin-top: 8px; }
.qr-wrap img { width: 100px; height: 100px; }

.qr-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  margin: 8px auto 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .05s;
}
.qr-toggle:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.qr-toggle:active { transform: translateY(1px); }
.qr-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.qr-toggle[aria-expanded="true"] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }

/* Song list */
.songs-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.songs-scroll::-webkit-scrollbar { display: none; }

.song-list { list-style: none; margin: 0; padding: 0 12px; }
.song-item {
  position: relative;
  margin: 8px 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #fff;
  text-align: center;
  transition: opacity .2s, filter .2s;
}
.song-item .row-top { display: flex; align-items: center; gap: 8px; }
.song-item .title { font-weight: bold; }
.song-item .meta { color: #bbb; font-size: .85rem; margin-top: 4px; text-align: left; }
.song-item .actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { background: none; border: 0; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.icon-btn i { font-size: 18px; }
.item-inner { position: relative; }

.song-item.played .item-inner { opacity: .3; filter: grayscale(18%); }
.song-item.played .title { text-decoration: line-through; }

/* Ratings */
.rating-pill {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  background: rgba(255,255,255,.08);
}
.rating-fire   { background: rgba(255,77,0,.18); border-color: rgba(255,77,0,.5); }
.rating-ok     { background: rgba(58,197,85,.18); border-color: rgba(58,197,85,.5); }
.rating-sucked { background: rgba(255,0,72,.18); border-color: rgba(255,0,72,.5); }

/* Rate menu */
.rate-menu {
  position: absolute;
  right: 8px;
  top: 36px;
  z-index: 10001;
  display: none;
  background: #fff;
  color: #111;
  border: 1px solid #cfcfcf;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(0,0,0,.5);
  padding: 10px;
  min-width: 190px;
}
.rate-menu.open { display: block; }

.rate-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 16px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}
.rate-option .fa { width: 18px; text-align: center; color: #111; opacity: .9; }
.rate-option:hover { background: #ececec; }

.song-item.elevated { z-index: 10000; }

/* Buttons */
.nr-logout, .nr-savelist {
  display: inline-block;
  padding: 10px;
  font-size: 15px;
  text-align: center;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: #7302d0;
  color: #fff;
}
.nr-logout { width: 125px; }
.nr-savelist { width: 100%; margin-top: 25px; }
.nr-logout:hover, .nr-logout:active { background: #777; }
.nr-logout:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.nr-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #7302d0;
  color: #fff;
  font-size: 20px;
  line-height: 44px;
  cursor: pointer;
  display: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  z-index: 20;
}
.nr-top:hover { filter: brightness(1.1); }
.nr-top:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Footer */
.nr-footer {
  flex-shrink: 0;
  z-index: 12;
  background: rgba(0,0,0,.85);
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
  padding: 10px 12px 14px;
}
.nr-footer .footer-links { color: #fff; font-size: 12px; margin-bottom: 10px; }
.nr-footer .llc { color: #666; font-size: 10px; margin-top: 5px; }
.nr-footer img.logo1 { margin-top: 15px; max-width: 100%; height: auto; }
.nr-footer img.logo2 { width: 75px; height: auto; margin-top: 6px; }

/* New List */
.newlist-wrap {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  padding: 0 12px;
  text-align: left;
  transition: max-height .25s, opacity .25s, margin-top .25s;
}
.newlist-wrap.open { max-height: 600px; opacity: 1; margin-top: 10px; overflow: visible; }

.newlist-form .form-row { margin: 10px 0; }
.newlist-form label { display: block; font-size: 12px; color: #bbb; margin-bottom: 6px; }

.nr-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-size: 16px;
}
.nr-input:focus { outline: none; box-shadow: inset 0 0 0 2px #7302d0; border-color: #7302d0; }

/* Flash banners */
.nr-flash {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  border-left: 4px solid transparent;
}
.nr-flash--error   { background: rgba(255,0,72,.12); border-left-color: #ff0048; color: #ffd9e5; }
.nr-flash--success { background: rgba(46,200,102,.14); border-left-color: #2ec866; color: #e0ffe9; }

.nr-flash-share { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nr-share-link { text-decoration: underline; color: #e0ffe9; }
.nr-share-copy { display: inline-flex; align-items: center; gap: 6px; }
.nr-share-input {
  width: 220px; max-width: 70vw;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 13px;
}
.nr-share-copybtn {
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: #2ec866;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.nr-share-copybtn:active { transform: translateY(1px); }

/* Admin drawer starts closed; mirrors your .qr-wrap behavior */
.admin-more {
  display: none;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}
.admin-more.open { display: block; }

.dj-more { display: none; margin: 8px 0 12px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.06); }
.dj-more.open { display: block; }

/* Button look similar to your qr-toggle */
.dj-toggle-btn {
  background: #7302d0;
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.dj-toggle-btn:hover { background:#777; }
.qr-wrap#qrPanel {
  max-height: auto;             /* or auto */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rate-head{
  position: sticky; top: 0; z-index: 2;
  background: rgba(0,0,0,.75);
  backdrop-filter: saturate(140%) blur(3px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 8px 12px; text-align:center; font-weight:600;
  color: mediumpurple;
}
.icon-btn { width: 34px; height: 34px; }
.icon-btn i { font-size: 20px; }
.song-item { padding: 12px; }
.song-item .meta { margin-top: 2px; }

 .song-item{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
/* give a touch more space to footer on very short screens */
.panel { min-height: 100vh; }
.songs-scroll { padding-bottom: 72px; }

/* subtle fade over the background image while rating is enabled */
.panel::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(100% 60% at 50% 100%, rgba(0,0,0,.35), transparent 60%);
  opacity: .6; transition: opacity .2s ease;
}

/* smooth fade-out for flash banners */
.flash { transition: opacity .4s ease, transform .4s ease; }
.flash.is-fading { opacity: 0; transform: translateY(-4px); }

/* Keep drawer fields inside the rounded panel */
.dj-more .nr-input,
.dj-more .nr-select,
.dj-more input[type="text"],
.dj-more select {
  box-sizing: border-box;
  width: 100% !important;  /* beat the global 280px */
  max-width: 100%;
  display: block;
}

/* (optional) tighten drawer padding so it feels roomy on 320px cards */
.dj-more {
  padding: 12px;
}

/* make the Save button behave like a full-width block inside the drawer */
.dj-more .nr-savelist {
  width: 100%;
}

/* was global; scope it instead if needed on / (public page) */
.public-form input[type=text],
.public-form select { width: 280px; }


/* drawer hardening */
.dj-more * { box-sizing: border-box; }
.dj-more .nr-input,
.dj-more .nr-select { width: 100% !important; display:block; }
.dj-more .nr-savelist { width: 100%; }

.panel.has-list {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.75)),
    url(../images/bg.jpg) center/cover no-repeat;
}

.panel.no-list {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.45)), /* lighter overlay */
    url(../images/bg.jpg) center/cover no-repeat;
}

.panel.has-list,
.panel.no-list {
  background-size: 100% auto;        /* zoom out a bit */
  background-position: center +175px; /* move image upward */
}
/* Sticky sub-header inside the scrollable panel */
.rate-head{
  position: sticky;
  top: 0;                       /* sticks to the top of the scrolling area */
  z-index: 5;
  padding: 8px 12px;
  text-align: center;
  font-weight: 700;
  opacity: .95;

  /* Make it readable over the bg while scrolling */
  background: rgba(0,0,0,.75);
  backdrop-filter: saturate(140%) blur(3px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Nice spacing so first item doesn’t sit flush against the header */
#ratePanel .song-list{ margin-top: 6px; }

/* Sticky bar */
#ratePanel .rate-header {
  position: sticky;
  top: 0;
  background: rgba(0,0,0,0.85);  /* keep it solid */
  padding: 6px 0 8px;
  text-align: center;
  opacity: .9;
  font-weight: 600;
  z-index: 2;
}

/* Gradient fade below the sticky header */
#ratePanel .rate-header::after {
  content: "";
  display: block;
  height: 12px;
  margin-top: -4px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0)
  );
}