/***********************************************************
 * INFO PANEL
 ***********************************************************/
.info-panel {
  position: fixed;
  bottom: 4vh;
  left: 4vw;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 14px 16px;
  max-width: 420px;
  min-width: 240px;
  backdrop-filter: blur(6px);
  z-index: 100;
}

.info-panel h4 {
  font-family: 'CaesarDressing', cursive;   /* keep this unique */
  font-size: clamp(18px, 2.5vw, 26px);
  margin-bottom: 6px;
}

.info-panel p {
  font-family: 'Montserrat', sans-serif;   /* switched */
  font-size: clamp(14px, 1.6vw, 20px);
  line-height: 1.5;
  color: #ddd;   /* softer than pure white */
}

.info-panel .cta {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,200,110,1), rgba(204,102,0,1));
  color: #111;
  font-weight: 600;
  text-decoration: none;
  font-size: clamp(14px, 1.4vw, 16px);
}

#warning-text {
  font-size: clamp(12px, 2vw, 15px);  /* adjust values to your taste */
  line-height: 1.5;
}



/***********************************************************
 * MODAL BASE
 ***********************************************************/
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: #111;
  padding: 20px;
  max-width: 600px;
  width: 90%;
  border-radius: 12px;
  position: relative;
  color: #fff;
  font-family: 'Montserrat', sans-serif;   /* switched */
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.6;   /* more breathing room */
}


/***********************************************************
 * MODAL TEXT + BUTTONS
 ***********************************************************/
.modal-body {
  text-align: left;   /* align everything left, even on mobile */
}

.modal-body p {
  margin-bottom: 14px;
  color: #ddd;
  font-weight: 400;   /* regular Montserrat */
  line-height: 1.6;
}

/* faded divider line between paragraphs */
.modal-divider {
  height: 1px;
  margin: 12px 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent);
}

/* align subscribe button right */
.subscribe-container {
  text-align: right;
}

.subscribe-btn {
  margin-top: 14px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: #f0d26d;
  color: #111;
  font-weight: 600;   /* semi-bold Montserrat */
  cursor: pointer;
  font-size: clamp(14px, 1.4vw, 18px);
}


/***********************************************************
 * RESPONSIVE IFRAME CONTAINER (FIXED HEIGHT)
 ***********************************************************/
.iframe-container {
  width: 100%;
  height: auto;
  min-height: 500px;   /* taller so you always see captcha + submit */
}

.iframe-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;   /* match container */
  border: none;
}





/***********************************************************
 * RESPONSIVE ADJUSTMENTS
 ***********************************************************/
@media (max-width: 720px) {
  .info-panel {
    left: 4vw;
    transform: none;
    right: auto;
    bottom: 4vh;
    max-width: 90%;
  }
}



/* === HN modal → global interop (append at end) === */
.info-panel{ z-index: 99999; pointer-events: auto; }
.modal{ z-index: 10000; pointer-events: auto; }
.modal .modal-content{ position: relative; z-index: 1; }

/* When HN modal is open, background stops receiving hits */
.hn-modal-open #collectCanvas,
.hn-modal-open #overlay,
.hn-modal-open .hero,
.hn-modal-open .audio-toggle,
.hn-modal-open #lanternTimer,
.hn-modal-open .floating-msg,
.hn-modal-open #fuelGaugeWrap{ pointer-events: none !important; }

/* Safety: keep modal visible during lock */
.hn-modal-open #modal{ z-index: 10000 !important; }


/* Force the HN modal above the hero stack */
#modal { z-index: 10050 !important; }
#modal .modal-content { position: relative; z-index: 10051 !important; }

/* When HN modal is open, drop the hero’s effective stack height */
.hn-modal-open .hero,
.hn-modal-open .center-logo {
  z-index: 0 !important;            /* hero was 99998; logo 99999 */
  pointer-events: none !important;   /* avoid intercepts while open */
}


/* Demote the Tonight panel whenever the modal is open */
.hn-modal-open .info-panel{
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Ensure the modal overlay/content are the top interactive target */
.hn-modal-open #modal{ z-index: 100000 !important; }
.hn-modal-open #modal .modal-content{ z-index: 100001 !important; }



/* When entry overlay is active, push Tonight panel below it */
.entry-active .info-panel{ z-index: 0 !important; pointer-events: none !important; opacity: 0; transition: opacity .2s ease; }


/* Keep Tonight panel above ghosts */
.info-panel{ z-index: 100000; }
.ghost-overlay{ z-index: 99990; }