/* Startup announcement popup (cnf_startup_popup), shown once per member per day.
   Ported from css/custom-ex.css; the Bootstrap modal wrapper was dropped, so the
   overlay and centering are handled here instead of by .modal/.modal-dialog. */

#lbPopupModal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: rgba(0, 0, 0, .72);
}

#lbPopupModal.is-open {
  display: flex;
}

#lbPopupModal .lbp-dialog {
  position: relative;
  width: 25rem;
  max-width: 25rem;
  margin: 1.25rem auto;
}

#lbPopupModal .lbp-modal {
  position: relative;
  border: none;
  border-radius: 1.25rem;
  overflow: hidden;
  background: linear-gradient(180deg, #1a1509 0%, #100d07 55%, #0b0904 100%);
  color: #efe6cf;
  box-shadow: 0 0 0 0.0625rem rgba(212, 178, 84, .35), 0 0 3.125rem rgba(224, 169, 46, .10), 0 1.75rem 4.375rem rgba(0, 0, 0, .75);
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: none;
}

#lbPopupModal .lbp-modal::-webkit-scrollbar {
  display: none;
}

#lbPopupModal .lbp-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  z-index: 4;
  background: linear-gradient(90deg, #e0a92e, #ffd94a 40%, #fff1b8 60%, #ffd94a 80%, #e0a92e);
}

#lbPopupModal .lbp-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 6;
  background: rgba(0, 0, 0, .5);
  border: 0.0625rem solid rgba(255, 255, 255, .14);
  color: #fff;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  font-size: 1.0625rem;
  line-height: 1.625rem;
  text-align: center;
  cursor: pointer;
  padding: 0;
  transition: all .18s;
}

#lbPopupModal .lbp-close:hover {
  background: rgba(0, 0, 0, .8);
  transform: rotate(90deg);
}

/* Image: always shown in full, never cropped.
   The box is full card width and takes the image's own aspect ratio for its height.
   Only a portrait image hits max-height -- object-fit:contain then scales the whole
   image down to fit, leaving transparent gaps at the sides that show the card's own
   gradient (not black bars). The wrap background must stay transparent for that.
   Was: object-fit:cover + max-height:14.375rem, which cropped a square image by ~43%.
   55vh leaves room for title + text + CTA inside the card's 88vh cap. */
#lbPopupModal .lbp-img-wrap {
  position: relative;
  background: transparent;
}

#lbPopupModal .lbp-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 55vh;
  object-fit: contain;
}

#lbPopupModal .lbp-body {
  padding: 1.25rem 1.5rem 0.25rem;
  text-align: center;
}

#lbPopupModal .lbp-title {
  margin: 0 0 0.625rem;
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: .01875rem;
  background: linear-gradient(180deg, #fff4cf, #e6a72c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e6a72c;
}

#lbPopupModal .lbp-content {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #c9bfa6;
  word-break: break-word;
}

#lbPopupModal .lbp-content p {
  margin: 0 0 0.5rem;
}

#lbPopupModal .lbp-content p:last-child {
  margin-bottom: 0;
}

#lbPopupModal .lbp-content b,
#lbPopupModal .lbp-content strong {
  color: #ffd94a;
}

#lbPopupModal .lbp-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

#lbPopupModal .lbp-content a {
  color: #ffd94a;
  text-decoration: underline;
}

#lbPopupModal .lbp-actions {
  padding: 1.125rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

#lbPopupModal .lbp-cta {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(180deg, #ffe27a, #e6a72c);
  color: #241a05;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: .01875rem;
  padding: 0.8125rem 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 0.375rem 1.125rem rgba(224, 169, 46, .32);
  transition: transform .15s, box-shadow .15s, filter .15s;
}

#lbPopupModal .lbp-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.5625rem 1.5rem rgba(224, 169, 46, .42);
  color: #241a05;
}

#lbPopupModal .lbp-dont {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: .01875rem;
  color: #8c8168;
  text-transform: none;
  padding: 0.375rem 0.75rem;
  border-radius: 1.25rem;
  border: 0.0625rem solid rgba(212, 178, 84, .18);
  background: rgba(255, 255, 255, .02);
  transition: all .18s;
}

#lbPopupModal .lbp-dont:hover {
  color: #bfb192;
  border-color: rgba(212, 178, 84, .4);
}

#lbPopupModal .lbp-dont input {
  margin: 0;
  width: 0.875rem;
  height: 0.875rem;
  accent-color: #e6a72c;
  cursor: pointer;
}

/* Light theme — gold top bar and CTA stay as-is */
[data-theme="light"] #lbPopupModal {
  background: rgba(20, 20, 30, .55);
}

[data-theme="light"] #lbPopupModal .lbp-modal {
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 55%, #ffffff 100%);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.0625rem rgba(200, 150, 12, .30), 0 1.75rem 4.375rem rgba(0, 0, 0, .22);
}

[data-theme="light"] #lbPopupModal .lbp-close {
  background: rgba(255, 255, 255, .85);
  border-color: rgba(0, 0, 0, .12);
  color: var(--text-primary);
}

[data-theme="light"] #lbPopupModal .lbp-close:hover {
  background: #fff;
}

[data-theme="light"] #lbPopupModal .lbp-title {
  background: linear-gradient(180deg, #d99a1c, #9a6a06);
  -webkit-background-clip: text;
  background-clip: text;
  color: #9a6a06;
}

[data-theme="light"] #lbPopupModal .lbp-content {
  color: var(--text-secondary);
}

[data-theme="light"] #lbPopupModal .lbp-content b,
[data-theme="light"] #lbPopupModal .lbp-content strong,
[data-theme="light"] #lbPopupModal .lbp-content a {
  color: var(--gold-dark-text);
}

[data-theme="light"] #lbPopupModal .lbp-dont {
  color: var(--text-muted);
  border-color: rgba(200, 150, 12, .28);
  background: rgba(0, 0, 0, .02);
}

[data-theme="light"] #lbPopupModal .lbp-dont:hover {
  color: var(--text-secondary);
  border-color: rgba(200, 150, 12, .5);
}

@media (max-width: 35.9375rem) {
  #lbPopupModal .lbp-dialog {
    width: 88vw;
    max-width: 88vw;
  }

  #lbPopupModal .lbp-img {
    max-height: 50vh;
  }

  #lbPopupModal .lbp-title {
    font-size: 1.1875rem;
  }
}