/* Standard Popup Wrapper */
.popup-wrapper {
  width: 100%;
  max-width: 460px;
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0 auto;
  background: #fff;   /* reset to white background */
  color: #000;        /* standard readable text */
}

/* Media Zone */
.popup-media {
  text-align: center;
  margin-bottom: 10px;
}

/* Message Zone */
.popup-message {
  text-align: center;
  margin: 10px 0;
  font-weight: bold;
}

/* Lyrics Layout */
.popup-lyrics {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.popup-lyrics .lyrics-col {
  flex: 1;
}

/* Credits */
.popup-credits {
  font-size: 0.7rem;
  color: #666;
  margin-top: 10px;
  text-align: center;
}

/* Gig Popup Styling */
.popup-details {
  margin: 15px 0;
  padding: 10px;
  background: #f5f5f5;          /* light grey for contrast */
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #333;
}

.popup-details p {
  margin: 6px 0;
  display: flex;
  align-items: center;
}

.popup-details strong {
  min-width: 80px;              /* aligns labels like Date, Venue */
  display: inline-block;
  color: #444;                  /* darker label text */
  font-weight: 600;
}

.popup-details a {
  color: #0066cc;
  text-decoration: none;
  font-weight: 600;
}

.popup-details a:hover {
  text-decoration: underline;
}

/* Reset popup page background */
html, body.view-article {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #fff !important;  /* force white background */
  color: #000;
}

/* Ensure container is transparent so wrapper background shows */
body.view-article .container-component {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Kill any MediaBox white background overrides */
.wf-mediabox-container,
.wf-mediabox-content,
.wf-mediabox-content-iframe,
.wf-mediabox-content-item {
  background: transparent !important;
}

/* Optional: darken the overlay behind the popup */
.wf-mediabox-content {
  background: rgba(0,0,0,0.6) !important; /* subtle semi-transparent overlay */
}

.moonlight-btn {
  display: inline-block;
  background-color: #004d4d;   /* dark teal */
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
}

.moonlight-btn i {
  margin-right: 8px;          /* space between icon and text */
}

.moonlight-btn:hover {
  background-color: #006666;  /* lighter teal on hover */
  text-decoration: none;
  color: #fff;
}


/* END OF POPUP.CSS */