/* ==========================================================================
   dd-gc-popup.css — seasonal popup, 3 escalating tiers (class names kept
   from the gift-cert original):
     .dd-gc-popup-overlay--private_event  9/1–10/31  small corner card
     .dd-gc-popup-overlay--combo          11/1–11/30 standard modal (base)
     .dd-gc-popup-overlay--gift_cert      12/1–1/9   large spotlight modal

   Split out of page-content.css and conditionally enqueued (see
   hello_elementor_child_enqueue_scripts() in functions.php) ONLY when
   dd_get_seasonal_popup_state() is non-null — i.e. only 9/1–1/9. The
   rest of the year this file isn't requested at all, instead of shipping its rules
   inside page-content.css site-wide, year-round, for a feature that's
   dormant almost the whole time.

   Rendered by dd_render_gift_cert_popup() (functions.php), which is now a
   lazy build: the markup below is constructed by JS only after a
   localStorage check confirms this guest hasn't seen it yet this season,
   so the background-image below is only ever fetched for guests who will
   actually see the popup — not on every page view during the window.

   Same visual language as .dd-seasonal-banner* (front-page.php): generated
   bokeh background, gold eyebrow/headline, red CTA.
   ========================================================================== */

/* ── Gift-certificate popup — site-wide, 12/1–1/9 only, shown once per
   guest per season (localStorage) — dd_render_gift_cert_popup() (functions.php),
   hooked to wp_footer so it runs on every page of every dd-locations-v5
   site (main site + every location subsite), not just the front page.
   Same visual language as .dd-seasonal-banner*: generated bokeh
   background, gold eyebrow/headline, red CTA. ── */
.dd-gc-popup-overlay {
  position:        fixed;
  inset:           0;
  z-index:         99999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  background:      rgba(0, 0, 0, 0.72);
  opacity:         0;
  visibility:      hidden;
  pointer-events:  none;
  transition:      opacity var(--dd-transition-base), visibility var(--dd-transition-base);
}

.dd-gc-popup-overlay.is-visible {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
}

.dd-gc-popup {
  position:            relative;
  isolation:           isolate;
  max-width:           440px;
  width:               100%;
  padding:             40px 32px 32px;
  border:              1px solid var(--dd-gold);
  border-radius:       var(--dd-radius-lg);
  background-image:    url('https://www.thedinnerdetective.com/_images/seasonal-banner-bkgd-mobile.avif');
  background-position: center;
  background-repeat:   no-repeat;
  background-size:     cover;
  text-align:          center;
  box-shadow:          0 20px 60px rgba(0, 0, 0, 0.5);
  transform:           scale(0.94);
  transition:          transform var(--dd-transition-base);
}

.dd-gc-popup-overlay.is-visible .dd-gc-popup {
  transform: scale(1);
}

/* Light overlay for text legibility over the bokeh, same technique as
   .dd-seasonal-banner::before. */
.dd-gc-popup::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     rgba(0, 0, 0, 0.45);
  border-radius:  inherit;
  z-index:        0;
  pointer-events: none;
}

.dd-gc-popup > * {
  position: relative;
  z-index:  1;
}

.dd-gc-popup-close {
  position:    absolute;
  top:         8px;
  right:       12px;
  z-index:     2;
  background:  none;
  border:      none;
  color:       var(--dd-gold);
  font-size:   28px;
  line-height: 1;
  cursor:      pointer;
  padding:     4px 8px;
  text-shadow: 1px 1px 0 #000;
}
.dd-gc-popup-close:hover,
.dd-gc-popup-close:focus-visible {
  color: #FFFFFF;
}

.dd-gc-popup-copy { margin-bottom: 22px; }

.dd-gc-popup-eyebrow {
  margin:         0 0 8px;
  color:          gray;
  font-family:    var(--dd-font-case);
  font-weight:    700;
  font-size:      var(--dd-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height:    1.2;
  text-shadow:    2px 2px 0 #000;
}

.dd-gc-popup-headline {
  margin:         0 0 14px;
  color:          var(--dd-gold);
  font-family:    var(--dd-font-display);
  font-weight:    800;
  font-size:      clamp(1.4rem, 1rem + 2vw, 1.9rem);
  text-transform: uppercase;
  line-height:    var(--dd-leading-tight);
  text-shadow:    2px 2px 0 #000;
}

.dd-gc-popup-text {
  margin:      0;
  color:       var(--dd-text-body);
  font-size:   var(--dd-text-sm);
  line-height: var(--dd-leading-normal);
  text-shadow: 1px 1px 0 #000;
}

.dd-gc-popup-btn {
  display:         inline-block;
  padding:         14px 32px;
  background:      var(--dd-red);
  color:           #FFFFFF !important;
  font-family:     var(--dd-font-display);
  font-size:       var(--dd-text-sm);
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  var(--dd-track-button);
  text-decoration: none;
  text-shadow:     1px 1px 0 #000;
  border-radius:   var(--dd-radius-sm);
  transition:      background var(--dd-transition-fast);
}
.dd-gc-popup-btn:hover,
.dd-gc-popup-btn:focus-visible {
  background: var(--dd-red-hover);
  color:      var(--dd-gold) !important;
}

@media (max-width: 480px) {
  .dd-gc-popup { padding: 34px 22px 26px; }
}

/* ── CTA row (1 or 2 buttons) ── */
.dd-gc-popup-actions {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             12px;
}

.dd-gc-popup-btn--alt {
  background: transparent;
  border:     1px solid var(--dd-gold);
  color:      var(--dd-gold) !important;
}
.dd-gc-popup-btn--alt:hover,
.dd-gc-popup-btn--alt:focus-visible {
  background: var(--dd-gold);
  color:      var(--dd-bg-dark) !important;
}

/* ==========================================================================
   Tier 1 — private_event (9/1–10/31): small, non-modal corner card.
   No backdrop, no scroll lock; the page stays clickable around it.
   ========================================================================== */
.dd-gc-popup-overlay--private_event {
  inset:           auto 20px 20px auto;
  width:           320px;
  max-width:       calc(100vw - 40px);
  padding:         0;
  background:      transparent;
  pointer-events:  none;
}
.dd-gc-popup-overlay--private_event.is-visible { pointer-events: none; }
.dd-gc-popup-overlay--private_event .dd-gc-popup {
  pointer-events: auto;
  max-width:      320px;
  padding:        24px 20px 20px;
  border-width:   1px;
  box-shadow:     0 10px 30px rgba(0, 0, 0, 0.45);
  transform:      translateY(24px);
}
.dd-gc-popup-overlay--private_event.is-visible .dd-gc-popup { transform: translateY(0); }
.dd-gc-popup-overlay--private_event .dd-gc-popup-copy     { margin-bottom: 14px; }
.dd-gc-popup-overlay--private_event .dd-gc-popup-eyebrow  { font-size: 10px; margin-bottom: 6px; }
.dd-gc-popup-overlay--private_event .dd-gc-popup-headline { font-size: 1.15rem; margin-bottom: 8px; }
.dd-gc-popup-overlay--private_event .dd-gc-popup-text     { font-size: 13px; }
.dd-gc-popup-overlay--private_event .dd-gc-popup-btn      { padding: 10px 22px; font-size: 12px; }
.dd-gc-popup-overlay--private_event .dd-gc-popup-close    { font-size: 22px; top: 4px; right: 6px; }

@media (max-width: 480px) {
  .dd-gc-popup-overlay--private_event { inset: auto 12px 12px 12px; width: auto; max-width: none; }
  .dd-gc-popup-overlay--private_event .dd-gc-popup { max-width: none; }
}

/* ==========================================================================
   Tier 2 — combo (11/1–11/30): the base modal above, slightly wider to
   fit two CTAs side by side.
   ========================================================================== */
.dd-gc-popup-overlay--combo .dd-gc-popup { max-width: 500px; }

/* ==========================================================================
   Tier 3 — gift_cert (12/1–1/9): large spotlight modal — darker blurred
   backdrop, bigger card and type, gold glow, pulsing CTA.
   ========================================================================== */
.dd-gc-popup-overlay--gift_cert {
  background:              rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter:         blur(4px);
}
.dd-gc-popup-overlay--gift_cert .dd-gc-popup {
  max-width:    600px;
  padding:      56px 44px 44px;
  border-width: 2px;
  box-shadow:   0 0 0 1px rgba(245, 184, 32, 0.35), 0 0 60px rgba(245, 184, 32, 0.35), 0 30px 80px rgba(0, 0, 0, 0.6);
  transform:    scale(0.88);
}
.dd-gc-popup-overlay--gift_cert.is-visible .dd-gc-popup { transform: scale(1); }
.dd-gc-popup-overlay--gift_cert .dd-gc-popup-copy     { margin-bottom: 28px; }
.dd-gc-popup-overlay--gift_cert .dd-gc-popup-eyebrow  { font-size: var(--dd-text-sm); }
.dd-gc-popup-overlay--gift_cert .dd-gc-popup-headline { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.8rem); }
.dd-gc-popup-overlay--gift_cert .dd-gc-popup-text     { font-size: var(--dd-text-base, 1rem); }
.dd-gc-popup-overlay--gift_cert .dd-gc-popup-btn {
  padding:   18px 40px;
  font-size: var(--dd-text-base, 1rem);
  animation: dd-gc-popup-pulse 2.2s ease-in-out 1s infinite;
}
.dd-gc-popup-overlay--gift_cert .dd-gc-popup-close { font-size: 34px; }

@keyframes dd-gc-popup-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 32, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(245, 184, 32, 0); }
}

@media (max-width: 480px) {
  .dd-gc-popup-overlay--gift_cert .dd-gc-popup { padding: 44px 24px 32px; }
  .dd-gc-popup-overlay--gift_cert .dd-gc-popup-btn { padding: 16px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-gc-popup-overlay--gift_cert .dd-gc-popup-btn { animation: none; }
}