@charset "utf-8";

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

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



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

/* 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:600px;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 #7804fa;
  border-radius: 10px;
  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-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);
}


/* changed from 100 vh to 90vh so that the footer would rise add the logout/list detail buttons did not overlap*/
.panel {
  position: relative;
  height: 90vh;
  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 */
	  /* push image upward; tweak -120px to taste */
  background-position: center calc(50% - 120px);
  /* OPTIONAL: make the image a bit smaller (comment out if you prefer 'contain') */
   background-size: 90% auto;
}





/* 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,
.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)
  );
}
/* Auto-dismiss animation for flashes */
.nr-flash {
  transition: opacity .35s ease, transform .35s ease;
}
.nr-flash.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}
/* 1) Make the column layout fill the viewport */
html, body { height: 100%; }
.wrap { min-height: 100vh; display: flex; justify-content: center; }

/* 2) Sticky header + sticky “Top 3 / totals” */
.rate-header { position: sticky; top: 0; z-index: 21; }



/* (optional) smooth scrollbar feel */
.song-list { padding-bottom: 12px; }
/* =========================
   Requests page: final layout fixes
   (Place at the very end of nextreq.css)
   ========================= */


/* =========================
   Requests page: final layout fixes
   (Place at the very end of nextreq.css)
   ========================= */




/* sticky bits above the scroll */
.nr-sticky { position: sticky; top: 0; z-index: 20; }
.rate-header { position: sticky; top: 0; z-index: 21; }

/* everything after the list should not be part of the scroll area */
#djMoreToggle,
#djMore,
.logout-wrap,
.nr-footer {
  flex-shrink: 0;
}
/* Reset song list bullets + spacing */
.song-list {
  list-style: none;
  margin: 0;
  padding: 0 12px;
}




/* sticky bars above the scroll */
.nr-sticky { position: sticky; top: 0; z-index: 100; }
.rate-header { position: sticky; top: 0; z-index: 101; }

/* keep these OUT of the scroll */
#djMoreToggle,
#djMore,
.logout-wrap,
.nr-footer {
  flex-shrink: 0 !important;
}
/* Reset song list bullets + spacing */
.song-list { list-style: none; margin: 0; padding: 0 12px; }


/* sticky bars above the scroll */
.nr-sticky { position: sticky; top: 0; z-index: 100; }
.rate-header { position: sticky; top: 0; z-index: 101; }

/* keep these OUT of the scroll */
#djMoreToggle, #djMore, .logout-wrap, .nr-footer { flex-shrink: 0 !important; }

/* Headers stick above the scroll */
.nr-sticky{ position:sticky; top:0; z-index:100; }
.rate-header{ position:sticky; top:0; z-index:101; }


/* Stuff below the list should NOT be in the scroll area */
#djMoreToggle, #djMore, .logout-wrap, .nr-footer{ flex-shrink:0 !important; }

/* bullet reset (if they reappeared) */
.song-list{ list-style:none; margin:0; padding:0 12px; }
#songsScroll{ outline:1px dashed #7804fa; }
/* Allow the page to scroll when content exceeds the viewport */
html, body { overflow: auto; }


/* Sticky bits above the scroll */
.nr-sticky{ position:sticky; top:0; z-index:100; }
.rate-header{ position:sticky; top:0; z-index:101; }


/* Make sure bullets stay off */
.song-list{ list-style:none; margin:0; padding:0 12px; }

/* Things after the list are not inside the scroll area */
#djMoreToggle, #djMore, .logout-wrap, .nr-footer { flex-shrink:0; }


/* Only the list scrolls inside its own box */
.songs-scroll{
  flex:1 1  auto;
  min-height: 260px; 
	max-height: 350px;/* you noticed this helps – keep it */
  /*max-height: 400px;*/
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
  border-radius: 10px;
}

.songs-scroll::-webkit-scrollbar{
  width: 0; height: 0;        /* Chrome/Safari */

}


/* Remove side borders (and card chrome) — keep only a thin separator */
.song-list { list-style: None; padding-right: 0 12px; margin: 0; }  /* ensure no bullets */
.song-item{
	border-right: 0px;
	border-left: 0px;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-radius: 0 !important;                      /* no rounded corners */
  box-shadow: none !important;                      /* no card shadow */
  background: transparent !important;               /* optional: remove card bg */
  margin: 0;                                        /* so borders line up edge-to-edge */
  padding: 12px;
}

/* Optional: avoid double-thick edges at top/bottom of the list */
.song-item:first-child { border-top: 0; }
.song-item:last-child  { border-bottom: 0; }
/* Top 3: single-line with ellipsis, votes pinned on the right */
.top3-list { margin: 0; padding-left: 10px; }
.top3-item {
  display: flex;
  align-items: center;
  gap: 8px;
	list-style: circle;
}
.top3-title {
  flex: 1 1 auto;
  min-width: 0;                 /* allows ellipsis to work in flex */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;      /* visually truncates ~32 chars depending on width */
}
.top3-score {
  flex: 0 0 auto;
  opacity: .75;
}
/* Public voting page: keep the form visually above the list */
#publicReqForm{
  position: sticky;      /* sticks to top while the page scrolls */
  top: 0;
  z-index: 5;            /* above the scrolling list */
  background: rgba(0,0,0,.92);           /* make it opaque so list doesn't show through */
  backdrop-filter: saturate(140%) blur(3px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 8px 0 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* A bit of breathing room below the sticky block */
#publicVoteList {  /* if you have an id; otherwise the UL or section that holds the list */
  margin-top: 6px;
}

/* In case bullets reappeared anywhere */
.song-list, .vote-list, #publicVoteList { list-style: none; margin: 0; padding: 0; }
#publicReqForm { position: sticky; top: 0; z-index: 10; background: rgba(0,0,0,.92);
  backdrop-filter: saturate(140%) blur(3px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 8px 0 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Stick the bar immediately below the sticky form */
#bumpBar{
  position: sticky;
  top: var(--publicFormH, 0px);
  z-index: 9;                          /* below the form */
  background: rgba(0,0,0,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 6px 0 8px;
}
/* SUBMIT button: temporary "received" state */
.nr-savelist.is-busy {
  background: transparent;
	border: 1px dashed #ccc;
  cursor: default;
  pointer-events: none;
  filter: saturate(0.9);
}
/* add to nextreq.css */
.nr-savelist.is-success {
  background: #666 !important;
  cursor: default;
}
/* highlight pulse when duplicate detected */
.song-item.dupe-pulse {
  outline: 2px solid #2ec866;
  box-shadow: 0 0 0 6px rgba(46,200,102,.25);
  transition: box-shadow .4s ease, outline-color .4s ease;
  animation: dupeBlink 1.2s ease-in-out 2;
}
@keyframes dupeBlink {
  0%   { box-shadow: 0 0 0 2px rgba(46,200,102,.00); }
  50%  { box-shadow: 0 0 0 10px rgba(46,200,102,.35); }
  100% { box-shadow: 0 0 0 2px rgba(46,200,102,.00); }
}