@keyframes neonPulse {

    0% {
        text-shadow:
            0 0 5px #ff1a1a,
            0 0 10px #ff0000,
            0 0 20px #990000;
    }

    50% {
        text-shadow:
            0 0 10px #ff1a1a,
            0 0 25px #ff0000,
            0 0 50px #ff0000;
    }

    100% {
        text-shadow:
            0 0 5px #ff1a1a,
            0 0 10px #ff0000,
            0 0 20px #990000;
    }
}


/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{ scroll-behavior:smooth; }


/* BODY */
body{
    background:#050505;
    color:white;
    font-family:Bahnschrift, Arial, sans-serif;
    overflow-x:hidden;
    margin: 0;
    padding: 0;
}


/* HERO */
.hero{
    height:100vh;
    background:linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.88)),url('../img/banner.png') center/cover no-repeat;
    background:linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.88)),image-set(url('../img/banner.avif') type('image/avif'),url('../img/banner.webp') type('image/webp'),url('../img/banner.png') type('image/png')) center/cover no-repeat;
    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
    padding:20px;
}

.hero-banner{

    width:min(90vw, 900px);

    max-width:900px;

    margin-bottom:40px;
    animation: neonPulse 2.5s infinite ease-in-out;

    /*filter:
        drop-shadow(0 0 10px rgba(255,0,0,0.5))
        drop-shadow(0 0 25px rgba(255,0,0,0.3));*/
}

/* HERO CONTENT */
.hero-content{
    z-index:2;
    max-width:900px;
}

/* MAIN TITLE */
.hero h1{
    font-size:clamp(3.5rem, 10vw, 7rem);
    font-family:Bahnschrift, Arial, sans-serif;
    letter-spacing:6px;
    color:#ffffff;
    text-shadow:
        0 0 5px #ff1a1a,
        0 0 10px #ff1a1a,
        0 0 20px #ff0000,
        0 0 40px #990000;
    margin-bottom:25px;
    
    animation: neonPulse 2.5s infinite ease-in-out;
}

/* TAGLINE */
.tagline{
    font-size:clamp(1rem, 2vw, 1.5rem);
    color:#f2f2f2;
    letter-spacing:3px;
    margin-bottom:40px;
    font-weight:600;
}


/* BUTTONS */
.main-button{
    display:inline-block;
    padding:16px 38px;
    border:2px solid #ff2b2b;
    color:white;
    text-decoration:none;
    font-size:1rem;
    letter-spacing:2px;
    transition:0.3s;
    border-radius:4px;
    background:rgba(255,0,0,0.12);
    box-shadow:
        0 0 8px rgba(255,0,0,0.5);

    animation: neonPulse 2.0s infinite ease-in-out;
}

.main-button:hover{
    background:#ff1a1a;
    transform:scale(1.05);
    box-shadow:
        0 0 15px rgba(255,0,0,0.8);
}

/* DISABLED BUTTON */

.disabled-button{
    display:inline-block;
    padding:16px 38px;
    border:2px solid #555;
    color:#888;
    text-decoration:none;
    margin-top:20px;
    letter-spacing:2px;
    cursor:not-allowed;
    border-radius:4px;
}

/* SECTIONS */
.section{
    padding:90px 20px;
    text-align:center;
    max-width:1000px;
    margin:auto;
}

.section h2{
    font-size:2.2rem;
    margin-bottom:30px;
    letter-spacing:4px;
    color:white;
    text-shadow:
        0 0 5px rgba(255,0,0,0.4);
}

.section h3{
    font-size:1.4rem;
    margin-top: 50px;
    margin-bottom:30px;
    letter-spacing:4px;
    color:white;
    text-shadow:
        0 0 5px rgba(255,0,0,0.3);
}

.section p{
    color:#d4d4d4;
    line-height:1.8;
    font-size:1.1rem;
    max-width:750px;
    margin:0 auto 20px auto;
}

/* HOW IT WORKS */

.instructions-container {
    width: 100%;
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}



.instructions-container img {
    width: 100%;
    max-width: 1000px;
    height: auto;
    display: block;
    /*margin: 0 auto;*/
}

/* EVENTS */
.event-card{
    margin-top:40px;
    padding:35px;
    padding-top: 0px;
    background:#161616;
    border:1px solid rgba(255,0,0,0.25);
    border-radius:10px;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
    box-shadow:
        0 0 15px rgba(255,0,0,0.25);
}

.event-card h3{
    font-size:1.8rem;
    margin-top: 30px;
    margin-bottom:5px;
    letter-spacing:3px;
    color:white;
}
.event-card h4{
    font-size:0.8rem;
    margin-left:auto;
    margin-right:auto;
 
    margin-bottom:30px;
    letter-spacing:3px;
    
    color:#cccccc;
}
.event-card h5 {
    /* EVENT TIME **/
    font-size:22px !important;
    color:#fcc001;
    margin-top: 3px;
    margin-bottom: 0px;
}

.event-card p{
    /* (EVERY WEDNESDAY) */
    margin-bottom:-8px;
    margin-top: -8px;
    color:#fcc001 !important;
    font-size:20px !important;
}

.event-subheading {
    /* (Live Karaoke Night) */
    color:#cccccc;
    margin-top: -8px !important;
    font-size:14px !important;
}


/* DARK SECTION */
.dark-section{
    background:#0d0d0d;
    border-top:1px solid rgba(255,255,255,0.05);
    border-bottom:1px solid rgba(255,255,255,0.05);
}

/* INFO BOX */
.info-box{
    margin-top:30px;
    display:flex;
    flex-direction:column;
    gap:15px;
    font-size:1.2rem;
}


/* SOCIALS */
.socials-title{
    margin-top:50px;
    margin-bottom:25px;
    font-size:1rem;
    letter-spacing:5px;
    color:#bbbbbb;
    font-weight:600;
}

.social-icons{
    display:flex;
    justify-content:center;
    gap:35px;
    margin-top:25px;
    flex-wrap:wrap;
}

.social-icons img{
    transform:translateY(-4px) scale(1);
    width:40px;
    height:40px;
    opacity: 0.9;
    transition:0.3s ease;
    filter:
        brightness(0) invert(1)
        drop-shadow(0 0 5px rgba(255,0,0,0.3));
}

.social-icons img:hover{
    transform:translateY(-4px) scale(1.05);

    filter:
        brightness(0) invert(1)
        drop-shadow(0 0 10px rgba(255,0,0,0.6))
        drop-shadow(0 0 20px rgba(255,0,0,0.3));
}

/* FOOTER */
footer{
    padding:40px 20px;
    text-align:center;
    background:black;
    border-top:1px solid rgba(255,255,255,0.05);
}

footer p{
    color:#888;
    margin-bottom:10px;
    letter-spacing:2px;
}

.footer-small{
    font-size:0.85rem;
    color:#666;
}

/* MOBILE */
@media(max-width:768px){
    .hero h1{
        letter-spacing:3px;
    }

    .tagline{
        letter-spacing:1.5px;
        line-height:1.6;
    }

    .section{
        padding:70px 20px;
    }

    .section h2{
        font-size:1.8rem;
    }

}


/* LIVE STATUS */

.live-status{
    font-size: 17px;
}

.live-status-section{
    text-align:center;
    padding:15px 15px;
    background:#161616;
    font-size: 17px;
    border:1px solid rgba(255,0,0,0.25);
    box-shadow: 0 0 20px rgba(255,0,0,0.15);
}

.live-box{
    display:inline-block;
    padding:20px 40px;
    border-radius:14px;
    font-size: 17px;
    /*background:#111;
    border:1px solid rgba(255,0,0,0.25);
    box-shadow: 0 0 20px rgba(255,0,0,0.15);*/
}

.live-box.countdown-line {
    font-size: 17px;
}

.live-now{
    color:#ff2b2b;
    font-size:17px;
    font-weight:bold;
    animation:liveBlink 1s infinite;
    letter-spacing:2px;
}

.live-now-small {
    color: #ff2b2b;
    font-size: 16px;
    font-weight: bold;
    animation: liveBlink 1s infinite;
    letter-spacing: 2px;
}

.live-venue {
    display:inline-block;
    margin-top: 10px !important;
    color: #fcc001 !important;
    font-size: 18px !important;
    letter-spacing: 2px;
    font-weight: 700 !important;
    text-shadow: 0 0 6px rgba(252,192,1,0.4);
    text-transform: uppercase;
}

.live-venue-location {
    margin-top: 15px !important;
    color: #dddddd !important;
    font-size: 16px !important;
    letter-spacing: 2px;
    font-weight: 600 !important;
    /*text-shadow: 0 0 6px rgba(252,192,1,0.4);
    text-transform: uppercase;*/
}

.countdown-line {
    font-size: 17px;
    font-weight: 700;
    color: white;
    letter-spacing: 2.5px;
}

.countdown-venue {
    color: #fcc001 !important;
    font-weight: 700;
    font-size: 18px !important;
    text-shadow: 0 0 6px rgba(252,192,1,0.4);
}

.countdown-venue-location {
    color: #dddddd !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    /*text-shadow: 0 0 6px rgba(252,192,1,0.4);*/
}

@keyframes liveBlink{

    0%{
        opacity:1;
        text-shadow:0 0 5px red;
    }

    50%{
        opacity:0.4;
        text-shadow:0 0 25px red;
    }

    100%{
        opacity:1;
        text-shadow:0 0 5px red;
    }
}


/* ADMIN PAGE */

.admin-body {
    background: #050505;
    color: white;
    font-family: Bahnschrift, Arial, sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}


.admin-container{

    text-align:center;
}


.admin-container h1{

    margin-bottom:20px;

    letter-spacing:3px;
}

.admin-container h2{

    margin-top:50px;

    letter-spacing:3px;
}


.admin-btn{
    display:block;
    width:260px;
    margin:15px auto;
    padding:18px;
    background:#111;
    border:1px solid rgba(255,0,0,0.25);
    color:white;
    font-size:1rem;
    cursor:pointer;
    transition:0.3s;
    border-radius:8px;
}

.admin-btn:hover{
    background:#1a1a1a;
    transform:scale(1.03);
    box-shadow:
        0 0 15px rgba(255,0,0,0.4);
}

.admin-btn-main{
    display:block;
    width:260px;
    margin:15px auto;
    padding:18px;
    background:#400000;
    border:1px solid rgba(255,0,0,0.25);
    color:white;
    font-size:1rem;
    cursor:pointer;
    transition:0.3s;
    border-radius:8px;
}

.admin-btn-main:hover{
    background:#422222;
    transform:scale(1.03);
    box-shadow:
        0 0 15px rgba(255,0,0,0.4);
}


.live-btn{

    border:1px solid rgba(255,0,0,0.5);
}


.admin-console {
    width: 320px;
    height: 220px;
    overflow-y: scroll;
    overflow-x: hidden;
    background: #0b0b0b;
    border: 1px solid rgba(255,0,0,0.3);
    padding: 10px;
    margin: 20px auto;
    margin-top: 20px;
    font-family: monospace;
    font-size: 12px;
    color: #00ff99;
}

.console-line {
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.admin-console::-webkit-scrollbar {
    width: 6px;
}

.admin-console::-webkit-scrollbar-thumb {
    background: rgba(255,0,0,0.6);
    border-radius: 3px;
}

.admin-console::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
}

/* LOGIN GATE */

.password-gate {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #050505;
    z-index: 9999;
}

.gate-box {
    width: 380px;
    max-width: 90vw;
    padding: 40px;

    background: #111;
    border: 1px solid rgba(255,0,0,0.35);
    border-radius: 14px;
    text-align: center;

    box-shadow: 0 0 30px rgba(255,0,0,0.22);
}

.gate-box h2 {
    color: white;
    margin-bottom: 28px;
    letter-spacing: 3px;
    font-size: 1.6rem;
}

.gate-box input {
    display: block;
    width: 100%;
    padding: 15px 16px;
    margin-bottom: 16px;

    background: #070707;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;

    color: white;
    font-size: 16px;
    font-family: Bahnschrift, Arial, sans-serif;
    outline: none;
}

.gate-box input::placeholder {
    color: #777;
}

.gate-box input:focus {
    border-color: rgba(255,0,0,0.8);
    box-shadow: 0 0 12px rgba(255,0,0,0.35);
}

.gate-box button {
    width: 100%;
    padding: 15px;

    background: rgba(255,0,0,0.08);
    border: 1px solid rgba(255,0,0,0.6);
    border-radius: 8px;

    color: white;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;

    transition: 0.25s ease;
}

.gate-box button:hover {
    background: #181818;
    transform: scale(1.02);
    box-shadow: 0 0 18px rgba(255,0,0,0.45);
}

.error {
    margin-top: 15px;
    color: #ff5555;
    min-height: 20px;
    font-size: 14px;
}

.maps-btn {
  display: inline-block;
  margin-top: -8px !important;
  margin-bottom: 8px;
  padding: 10px 18px;

  /*background: rgba(255,255,255,0.08);*/
  background:#161616;
  border: 1px solid #ff2b2b;
  border-radius: 8px;

  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;

  transition: all 0.2s ease;
}

.maps-btn:hover {
  background: #ff2b2b;
  box-shadow: 0 0 15px rgba(255,0,0,.5);
}

.admin-panel {
  width: min(900px, 94%);
  margin: 24px auto;
  padding: 18px;
  background: #111;
  border: 1px solid rgba(255,0,0,0.35);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(255,0,0,0.12);
}

.admin-input,
.admin-textarea {
  display: block;
  width: min(520px, 94%);
  margin: 10px auto;
  padding: 13px;
  background: #070707;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: white;
  font-family: Bahnschrift, Arial, sans-serif;
  font-size: 15px;
}

.admin-textarea {
  min-height: 90px;
  resize: vertical;
}

.admin-btn-main.danger {
  background: #5a0000;
}

.session-dashboard {
  width: min(720px, 94%);
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  text-align: left;
  font-size: 14px;
}

.session-dashboard div {
  background: #080808;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px;
}

.session-dashboard strong {
  color: #fcc001;
}

.active-requests-list {
  width: min(820px, 94%);
  max-height: 360px;
  overflow-y: auto;
  margin: 15px auto;
  background: #080808;
  border: 1px solid rgba(255,0,0,0.25);
  border-radius: 10px;
}

.active-request-row {
  display: grid;
  grid-template-columns: 1fr 70px 60px 42px 42px 42px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.request-main {
  overflow: hidden;
}

.request-main strong,
.request-main span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.request-main span {
  color: #aaa;
  font-size: 13px;
}

.request-bpm {
  color: #fcc001;
  font-weight: 900;
  text-align: center;
}

.request-time {
  color: #aaa;
  font-size: 13px;
  text-align: center;
}

.active-request-row button {
  background: #111;
  color: white;
  border: 1px solid #ff3333;
  border-radius: 7px;
  padding: 8px;
  cursor: pointer;
  font-weight: 900;
}

.active-request-row button:hover {
  color: #fcc001;
  border-color: #fcc001;
}

.dash-empty {
  color: #aaa;
  padding: 16px;
  text-align: center;
}

.admin-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-modal.hidden {
  display: none;
}

.admin-modal-box {
  width: min(460px, 92%);
  background: #111;
  border: 1px solid #ff3333;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}

.admin-modal-box h3 {
  color: #fcc001;
  margin-bottom: 12px;
}

.admin-modal-box textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px;
  background: #050505;
  color: white;
  border: 1px solid #444;
  border-radius: 8px;
  resize: vertical;
}

.admin-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 700px) {
  .session-dashboard {
    grid-template-columns: 1fr;
  }

  .active-request-row {
    grid-template-columns: 1fr 48px 44px;
  }

  .request-bpm,
  .request-time {
    font-size: 12px;
  }
}

.admin-panel {
  width: min(900px, 94%);
  margin: 24px auto;
  padding: 18px;
  background: #111;
  border: 1px solid rgba(255,0,0,0.35);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(255,0,0,0.12);
}

.admin-input,
.admin-textarea {
  display: block;
  width: min(520px, 94%);
  margin: 10px auto;
  padding: 13px;
  background: #070707;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: white;
  font-family: Bahnschrift, Arial, sans-serif;
  font-size: 15px;
}

.admin-textarea {
  min-height: 90px;
  resize: vertical;
}

.admin-btn-main.danger {
  background: #5a0000;
}

.session-dashboard {
  width: min(720px, 94%);
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  text-align: left;
  font-size: 14px;
}

.session-dashboard div {
  background: #080808;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px;
}

.session-dashboard strong {
  color: #fcc001;
}

.active-requests-list {
  width: min(820px, 94%);
  max-height: 360px;
  overflow-y: auto;
  margin: 15px auto;
  background: #080808;
  border: 1px solid rgba(255,0,0,0.25);
  border-radius: 10px;
}

.active-request-row {
  display: grid;
  grid-template-columns: 1fr 70px 60px 42px 42px 42px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.request-main {
  overflow: hidden;
}

.request-main strong,
.request-main span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.request-main span {
  color: #aaa;
  font-size: 13px;
}

.request-bpm {
  color: #fcc001;
  font-weight: 900;
  text-align: center;
}

.request-time {
  color: #aaa;
  font-size: 13px;
  text-align: center;
}

.active-request-row button {
  background: #111;
  color: white;
  border: 1px solid #ff3333;
  border-radius: 7px;
  padding: 8px;
  cursor: pointer;
  font-weight: 900;
}

.active-request-row button:hover {
  color: #fcc001;
  border-color: #fcc001;
}

.dash-empty {
  color: #aaa;
  padding: 16px;
  text-align: center;
}

.admin-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-modal.hidden {
  display: none;
}

.admin-modal-box {
  width: min(460px, 92%);
  background: #111;
  border: 1px solid #ff3333;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}

.admin-modal-box h3 {
  color: #fcc001;
  margin-bottom: 12px;
}

.admin-modal-box textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px;
  background: #050505;
  color: white;
  border: 1px solid #444;
  border-radius: 8px;
  resize: vertical;
}

.admin-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 700px) {
  .session-dashboard {
    grid-template-columns: 1fr;
  }

  .active-request-row {
    grid-template-columns: 1fr 48px 44px;
  }

  .request-bpm,
  .request-time {
    font-size: 12px;
  }
}

.session-button-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 14px auto;
}

.session-button-row button {
  padding: 12px 10px;
  font-weight: 900;
  border-radius: 8px;
  border: 1px solid #ff3333;
  background: #220000;
  color: white;
  cursor: pointer;
}

.session-button-row button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#activeSessionLabels {
  background: #111;
  border: 1px solid rgba(255,0,0,.35);
  border-radius: 10px;
  padding: 12px;
  margin: 10px auto;
  max-width: 520px;
  text-align: left;
}

.session-action-status {
  min-height: 22px;
  color: #ffd400;
  font-weight: 900;
  margin-top: 8px;
}

.session-dashboard {
  margin-top: 18px;
width: 100%;
    max-width: none;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-card {
  background: #0b0b0b;
  border: 1px solid rgba(255,0,0,.35);
  border-radius: 8px;
  padding: 10px;
  color: #ddd;
  text-align: left;
}

.dashboard-card strong {
  color: #FFD400;
}

@media (max-width: 700px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   LIVE KARAOKE PUBLIC STATUS ADDITIONS — keeps original website design
   ======================================================================== */

.hidden {
  display: none !important;
}

/* The live panel made the original vertically-centred hero taller than one
   viewport. That caused the banner to be pushed above the top edge.
   Keep all hero content inside normal flow, starting below the browser edge. */
.hero {
  height: auto !important;
  min-height: 100svh !important;
  align-items: flex-start !important;
  padding-top: 48px !important;
  padding-bottom: 58px !important;
}

.hero-content {
  width: min(900px, 100%);
  margin: 0 auto;
}

.hero-banner {
  margin-top: 0 !important;
}

.hero-live-now {
  width: min(650px, 94vw);
  margin: 22px auto 0;
  padding: 14px;
  border: 1px solid rgba(61,224,96,.62);
  border-radius: 10px;
  background: rgba(3,14,7,.92);
  box-shadow: 0 0 26px rgba(35,216,76,.18);
  text-align: left;
}

.hero-live-now-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.hero-live-now-head strong {
  color: #65e783;
  font-size: 13px;
  letter-spacing: .12em;
}

.hero-live-now-head > span:last-child {
  margin-left: auto;
  color: #dbe2dd;
  font-size: 11px;
  font-weight: 800;
}

.hero-live-pulse,
.public-live-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #39e566;
  box-shadow: 0 0 12px #39e566;
}

.hero-current-song {
  display: grid;
  gap: 3px;
  margin-top: 11px;
  padding: 10px 11px;
  border: 1px solid rgba(61,224,96,.25);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
}

.hero-current-song > span {
  color: #67e68a;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.hero-current-song strong {
  color: #fff;
  font-size: 20px;
}

.hero-current-song small {
  color: #a6afa9;
  font-size: 11px;
  font-weight: 700;
}

.hero-break-status {
  color: #ffd45a !important;
}

.hero-coming-up {
  display: grid;
  gap: 5px;
  margin-top: 9px;
}

.coming-label {
  color: #aaa;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.coming-song {
  display: grid;
  grid-template-columns: 25px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
}

.coming-song > b {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid #505b55;
  border-radius: 50%;
  color: #d5ddd8;
  font-size: 10px;
}

.coming-song > span {
  display: grid;
  min-width: 0;
}

.coming-song strong {
  overflow: hidden;
  color: #f4f4f4;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coming-song small,
.coming-empty {
  overflow: hidden;
  color: #888;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-request-btn {
  display: block;
  width: 100%;
  margin-top: 11px;
  text-align: center;
}

.live-status-section {
  padding: 18px 16px 0;
}

#liveStatus {
  max-width: 800px;
  margin: 0 auto;
}

.public-live-box,
.next-live-karaoke-box {
  min-height: 62px;
  padding: 14px 18px;
  border: 1px solid rgba(255,0,0,.32);
  border-radius: 8px;
  background: #111;
}

.public-live-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.public-live-box > div {
  display: grid;
  gap: 2px;
  text-align: left;
}

.public-live-box strong {
  color: #62e57d;
  font-size: 15px;
}

.public-live-box span:last-child {
  color: #d2d2d2;
  font-size: 11px;
}

.public-break-chip {
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid #a87d25;
  border-radius: 999px;
  background: rgba(133,89,13,.22);
  color: #ffd45a;
  font-size: 9px;
  white-space: nowrap;
}

.next-live-karaoke-box {
  display: grid;
  gap: 4px;
  text-align: center;
}

.next-live-label {
  color: #aaa;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.next-live-karaoke-box strong {
  color: #fff;
  font-size: 20px;
}

.next-live-karaoke-box > span:not(.next-live-label) {
  color: #ccc;
  font-size: 12px;
}

.next-live-karaoke-box b {
  margin-top: 3px;
  color: #ffd44c;
  font-size: 14px;
}

@media (max-width: 640px) {
  .hero {
    min-height: 100svh !important;
    padding: 28px 12px 42px !important;
  }

  .hero-banner {
    width: 94vw !important;
    margin-bottom: 25px !important;
  }

  .hero-live-now {
    width: 100%;
    padding: 10px;
  }

  .hero-current-song strong {
    font-size: 17px;
  }

  .hero-live-now-head > span:last-child {
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .public-live-box {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .public-break-chip {
    width: 100%;
    margin-left: 19px;
    text-align: center;
  }
}


/* ========================================================================
   NEXT FOUR LIVE KARAOKE EVENTS
   ======================================================================== */

.events-intro {
  margin-top: -6px;
  margin-bottom: 12px;
  color: #aaa;
  font-size: 14px;
  font-weight: 700;
}

.live-karaoke-events-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(1050px, 100%);
  margin: 26px auto 0;
}

.live-karaoke-events-grid .event-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 310px;
  margin: 0;
  padding: 24px 22px;
}

.live-event-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(255,62,62,.65);
  border-radius: 999px;
  background: rgba(132,0,0,.2);
  color: #ff6262;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .1em;
}

.live-karaoke-event-card h3 {
  margin-top: 14px !important;
}

.live-karaoke-event-card h4 {
  min-height: 32px;
  margin-bottom: 22px !important;
}

.live-karaoke-event-card .maps-btn {
  margin-top: auto;
}

.live-event-loading,
.live-event-empty {
  grid-column: 1 / -1;
  min-height: 130px !important;
  justify-content: center;
}

@media (max-width: 720px) {
  .live-karaoke-events-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
  }

  .live-karaoke-events-grid .event-card {
    min-height: 0;
    padding: 20px 16px;
  }

  .live-karaoke-event-card h3 {
    font-size: 1.45rem !important;
  }
}


/* Booking enquiry popup */
.enquiry-section .enquiry-open-btn{margin-top:12px;cursor:pointer}
.booking-enquiry-dialog{width:min(820px,calc(100% - 28px));max-height:90vh;overflow:auto;border:1px solid rgba(255,43,43,.65);border-radius:12px;background:#100d0d;color:#fff;padding:28px;box-shadow:0 24px 90px rgba(0,0,0,.8)}
.booking-enquiry-dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(4px)}
.booking-enquiry-close{position:absolute;right:14px;top:10px;border:0;background:transparent;color:#fff;font-size:30px;cursor:pointer}
.booking-enquiry-head{text-align:left;padding-right:45px;margin-bottom:20px}.booking-enquiry-head>span{color:#ff3b3b;font-size:12px;font-weight:800;letter-spacing:.18em}.booking-enquiry-head h2{margin:5px 0 8px;font-size:28px}.booking-enquiry-head p{margin:0;color:#ccc;line-height:1.5}
.booking-enquiry-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.booking-enquiry-grid label{display:grid;gap:6px;text-align:left}.booking-enquiry-grid label.wide{grid-column:1/-1}.booking-enquiry-grid label>span{font-size:11px;font-weight:800;letter-spacing:.08em;color:#eee}.booking-enquiry-grid input,.booking-enquiry-grid select,.booking-enquiry-grid textarea{width:100%;border:1px solid #5d3636;border-radius:6px;background:#090707;color:#fff;padding:12px;outline:none}.booking-enquiry-grid input:focus,.booking-enquiry-grid select:focus,.booking-enquiry-grid textarea:focus{border-color:#ff3b3b}.booking-enquiry-grid textarea{resize:vertical;min-height:120px}
.booking-enquiry-submit{display:block;margin:20px auto 0;cursor:pointer}.booking-enquiry-submit:disabled{opacity:.45;cursor:not-allowed}.booking-enquiry-status{text-align:center;min-height:22px;margin:12px 0 0;color:#ddd}.booking-enquiry-status.success{color:#79e7a0}.booking-enquiry-status.error{color:#ff8d8d}
@media(max-width:650px){.booking-enquiry-dialog{width:calc(100% - 12px);padding:20px 14px}.booking-enquiry-grid{grid-template-columns:1fr}.booking-enquiry-grid label.wide{grid-column:auto}.booking-enquiry-submit{width:100%}}


/* v11 — keep booking dialog centered and show clean success state */
.booking-enquiry-dialog{position:fixed!important;inset:0!important;margin:auto!important;top:0!important;left:0!important;right:0!important;bottom:0!important}
.booking-enquiry-success{text-align:center;padding:36px 12px 18px}
.booking-enquiry-success h2{margin:0 0 12px;font-size:30px}
.booking-enquiry-success p{color:#ddd;line-height:1.6;margin:0 auto 22px;max-width:520px}
.booking-enquiry-success .main-button{display:inline-block;min-width:180px;cursor:pointer}

/* Focused public-site additions; preserve the original artwork and palette. */
.hero .hero-banner{height:auto;max-width:100%}
.hero h1.public-hero-title{font-size:clamp(1.15rem,3.5vw,1.8rem);letter-spacing:.13em;line-height:1.4;margin:0 0 10px;text-shadow:none;animation:none}
.public-hero-copy{font-size:1rem;line-height:1.6;color:#d4d4d4;margin:0 auto 24px;max-width:620px}
.booking-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:30px 0 22px;text-align:left}
.booking-benefits article{padding:22px 18px;background:#111;border:1px solid #493030;border-top:3px solid #b92c2c;border-radius:8px;overflow-wrap:anywhere}
.section .booking-benefits h3{font-size:1rem;line-height:1.5;letter-spacing:.08em;margin:0 0 12px;text-shadow:none}
.section .booking-benefits p{font-size:1rem;line-height:1.6;margin:0;color:#d4d4d4}
.booking-faq{margin:42px auto 0;max-width:760px;text-align:left}
.section .booking-faq h3{font-size:1.2rem;letter-spacing:.1em;margin:0 0 18px;text-shadow:none}
.booking-faq details{border-top:1px solid #493030;padding:0 14px;background:#111}
.booking-faq details:last-child{border-bottom:1px solid #493030}
.booking-faq summary{cursor:pointer;padding:18px 0;color:#f4f4f4;font-size:1rem;line-height:1.5;font-weight:600}
.section .booking-faq p{font-size:1rem;line-height:1.65;margin:0 0 18px;color:#d4d4d4}
:where(a,button,summary,input,select,textarea):focus-visible{outline:2px solid #ff7777;outline-offset:4px}
.booking-enquiry-grid input,.booking-enquiry-grid select,.booking-enquiry-grid textarea{font:inherit;font-size:1rem;min-width:0}
.booking-enquiry-grid label>span{font-size:.875rem}
.booking-enquiry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.enquiry-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.booking-enquiry-dialog [hidden]{display:none!important}
@media(max-width:760px){.booking-benefits{grid-template-columns:1fr}}
@media(max-width:650px){.booking-enquiry-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} .hero-banner,.main-button{animation:none}}