/* Selectors start with #e: the popup lives inside the e-template wrapper and its base look (tokens, light/dark) is set with #e rules in wildcard-popup.php, so a theme has to be at least as specific.
   wildcard-themes.css -- looks for Wild Card campaign popups (templates/wildcard-popup.php).
   A campaign with offer_type 'wildcard_<slug>' gets  class="wildcard-popup-box wc-campaign wc-theme-<slug>".
   New campaign = copy one block below, rename the slug, change the colours. A campaign without a block here
   still works: it just uses the plain popup look.
   Colour variables used by every block:  --wc-bg  --wc-text  --wc-head  --wc-accent  --wc-accent-text  --wc-mute  --wc-border */

#e .wildcard-popup-box.wc-campaign {
  background: var(--wc-bg, #fff);
  color: var(--wc-text, #333);
  border: 1px solid var(--wc-border, transparent);
}
/* !important: site-wide h2 rules (e.g. the dark-theme popup heading fix) would otherwise win */
#e .wildcard-popup-box.wc-campaign h2 { color: var(--wc-head, inherit) !important; }
#e .wildcard-popup-box.wc-campaign p,
#e .wildcard-popup-box.wc-campaign #wildcard-popup-message { color: var(--wc-text, #333) !important; }
#e .wildcard-popup-box.wc-campaign .wildcard-popup-close { color: var(--wc-mute, #999); }
#e .wildcard-popup-box.wc-campaign .wildcard-popup-close:hover { color: var(--wc-head, #333); }
#e .wildcard-popup-box.wc-campaign .wildcard-popup-price {
  color: var(--wc-accent, inherit);
  background: linear-gradient(90deg, transparent 15%, color-mix(in srgb, var(--wc-accent, #888) 14%, transparent) 50%, transparent 85%) !important;
}
#e .wildcard-popup-box.wc-campaign .wildcard-popup-price span { color: var(--wc-text, #333); }
#e .wildcard-popup-box.wc-campaign .wild-card-button { background-color: var(--wc-accent, #0174DF) !important; border-color: var(--wc-accent, #0174DF) !important; color: var(--wc-accent-text, #fff) !important; }
#e .wildcard-popup-box.wc-campaign .wild-card-button:hover { filter: brightness(1.1); }

/* ── Halloween ── */
#e .wc-theme-halloween {
  --wc-bg: radial-gradient(ellipse at 50% 0%, #3a1b5e 0%, #1a0b2e 70%);
  --wc-text: #e6dcf4; --wc-head: #ff9a1f; --wc-accent: #ff7a00; --wc-accent-text: #2a0f4a; --wc-mute: #b7a6d3; --wc-border: #ff7a00;
  box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 28px rgba(255,122,0,.25);
}

/* ── Christmas (starter, adjust to taste) ── */
#e .wc-theme-xmas {
  --wc-bg: radial-gradient(ellipse at 50% 0%, #1f5a3a 0%, #0f2f20 70%);
  --wc-text: #eaf5ee; --wc-head: #ffd9d9; --wc-accent: #e0343c; --wc-accent-text: #fff; --wc-mute: #a9c9b6; --wc-border: #e0343c;
  box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 28px rgba(224,52,60,.22);
}

/* Campaign header: big icon, title, ribbon (icon = leading emoji of services.description, ribbon = the rest) */
#e .wildcard-popup-box.wc-campaign .wc-ic { font-size: 40px; line-height: 1; margin: 4px 0 6px; }
#e .wildcard-popup-box.wc-campaign h2 { margin: 0 0 4px !important; text-align: center; font-size: 28px; line-height: 1.15; }
#e .wildcard-popup-box.wc-campaign .wc-ribbon-wrap { margin: 6px 0 9px; }
#e .wildcard-popup-box.wc-campaign .wc-ribbon {
  display: inline-block; padding: 4px 24px; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  background: var(--wc-accent, #0174DF); color: var(--wc-accent-text, #fff) !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
}