/* ================================================================
   PROMOTIONAL POPUP — site-wide, admin-managed (Admin -> Popup Banners,
   Target Site = "Main Site"). Prefix: pb-
   ================================================================ */
.pb-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(11,16,32,.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--t2), visibility .35s var(--t2);
}
.pb-overlay.is-visible { opacity: 1; visibility: visible; }

.pb-card {
  position: relative;
  display: flex;
  width: 100%; max-width: 820px; max-height: 90vh;
  overflow: hidden;
  border-radius: var(--r5);
  background: linear-gradient(155deg, rgba(11,16,32,.92) 0%, rgba(20,18,63,.92) 55%, rgba(46,42,114,.9) 100%);
  border: 1px solid rgba(89,216,255,.25);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.6);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  transform: scale(.92) translateY(18px);
  transition: transform .4s var(--t2);
}
.pb-overlay.is-visible .pb-card { transform: scale(1) translateY(0); }

/* Ambient glow, matches the hero section's FX language */
.pb-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, rgba(89,216,255,.16), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(54,164,217,.14), transparent 45%);
}

.pb-media { flex: 0 0 45%; position: relative; min-height: 280px; background-size: cover; background-position: center; z-index: 1; }
.pb-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,16,32,.15) 0%, rgba(11,16,32,0) 45%); }

.pb-body { position: relative; z-index: 1; flex: 1; min-width: 0; padding: 2.5rem 2.5rem 2.25rem; display: flex; flex-direction: column; justify-content: center; }

.pb-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
  padding: .4rem .9rem .4rem .7rem; border-radius: var(--rf);
  background: rgba(89,216,255,.1); border: 1px solid rgba(89,216,255,.3);
  color: var(--hx-accent); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.1rem;
}

.pb-title { font-family: var(--ff-display, var(--ff)); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.85rem); color: #fff; line-height: 1.22; margin: 0 0 .6rem; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.pb-subtitle { font-size: .95rem; color: rgba(255,255,255,.72); line-height: 1.65; margin: 0 0 1.6rem; }

.pb-cta {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  padding: .85rem 1.6rem; border-radius: var(--r2);
  background: linear-gradient(135deg, var(--hx-secondary) 0%, var(--hx-accent) 100%);
  color: var(--hx-dark); font-weight: 700; font-size: .9rem; text-decoration: none;
  box-shadow: 0 10px 30px -6px rgba(89,216,255,.45);
  transition: all var(--t2);
}
.pb-cta:hover { color: var(--hx-dark); transform: translateY(-2px); box-shadow: 0 16px 38px -6px rgba(89,216,255,.6); }

.pb-close {
  position: absolute; top: .9rem; right: .9rem; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: #fff;
  font-size: .95rem; cursor: pointer; backdrop-filter: blur(8px);
  transition: all var(--t2);
}
.pb-close:hover { background: rgba(89,216,255,.18); border-color: rgba(89,216,255,.5); color: var(--hx-accent); transform: rotate(90deg); }

.pb-dontshow { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; margin-top: 1.4rem; }
.pb-dontshow input { width: 15px; height: 15px; accent-color: var(--hx-accent); cursor: pointer; }
.pb-dontshow label { font-size: .8rem; color: rgba(255,255,255,.55); cursor: pointer; margin: 0; }

@media (max-width: 767.98px) {
  .pb-card { flex-direction: column; max-height: 85vh; overflow-y: auto; }
  .pb-media { flex: 0 0 auto; min-height: 220px; }
  .pb-body { padding: 1.75rem 1.5rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-overlay, .pb-card, .pb-cta, .pb-close { transition: none !important; }
}