/* Popup — reusable modal built on native <dialog>
   See DEV_PLAN §16 and core/classes/Popup.class.php

   ⚠ Not to be confused with core/assets/css/pop_up_overlay.css, which styles the
   old PII-style overlay (§16.1). Nothing here is shared with it.

   Naming is MHL-neutral BEM (.popup, .popup__panel …). The cookie component is
   still mwd-* from the MWD copy and gets renamed when its copy is rewritten.

   SKINS (2.3.7, Stage 1 §16.4) — every colour here reads a --popup-* custom property
   whose FALLBACK is the core look: a white box on a black backdrop. That is what cor
   gets, and any site that sets nothing. A site changes only the tokens it needs, on
   :root in its own main CSS (mhl: main.css, mwd: main_mwd.css), so load order never
   matters. core/assets/css/cookie_consent.css reads the SAME tokens, so one set of
   values skins both the popups and the cookie banner.
   ⚠ Core never DECLARES a token — only var(--popup-x, fallback). A declaration on
   dialog.popup would sit closer to the element than a site's :root and beat it.
   ⚠ ::backdrop — browsers before early 2024 pass no custom properties into it, so
   there the fallback below always wins. Fine while every site that uses popups keeps
   the core backdrop; a site wanting another would also need a literal ::backdrop rule.
-------------------------------------------------- */

dialog.popup {
  width:100%;
  max-width:none;
  margin:auto;
  padding:20px;
  border:0;
  background:transparent;
  color:var(--popup-text, #3f4449);
  overflow:visible;
}

/* Closed is the browser's default for <dialog>; stated for the no-showModal
   fallback path in popup.js, which toggles the open attribute. */
dialog.popup:not([open]) {
  display:none;
}

dialog.popup[open] {
  display:flex;
  align-items:center;
  justify-content:center;
}

dialog.popup::backdrop {
  background:var(--popup-backdrop, rgba(0,0,0,0.7));
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.popup__panel {
  width:100%;
  margin:0 auto;
  padding:clamp(22px, 3vw, 36px);
  background:var(--popup-bg, #fff);
  border:1px solid var(--popup-line, rgba(0,0,0,0.12));
  border-radius:24px;
  box-shadow:0 28px 80px rgba(0,0,0,0.38);
  text-align:left;
}

.popup--sm .popup__panel { max-width:420px; }
.popup--md .popup__panel { max-width:640px; }
.popup--lg .popup__panel { max-width:960px; }

.popup__head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px;
}

.popup__title {
  margin:0;
  color:var(--popup-fg, #171717);
  font-size:1.15rem;
  line-height:1.3;
  font-weight:700;
}

/* A real <button>, so it is keyboard reachable — the PII overlay used a <div>. */
.popup__close {
  flex:0 0 auto;
  margin-left:auto;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--popup-line, rgba(0,0,0,0.12));
  border-radius:50%;
  background:transparent;
  color:var(--popup-fg, #171717);
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}

.popup__close:hover,
.popup__close:focus-visible {
  background:var(--popup-surface, rgba(0,0,0,0.04));
}

.popup__body {
  color:var(--popup-text, #3f4449);
  font-size:0.95rem;
  line-height:1.6;
}

.popup__body > *:first-child { margin-top:0; }
.popup__body > *:last-child  { margin-bottom:0; }

/* Triggers carry no look of their own — the consumer's class does that. */
.popup-trigger {
  cursor:pointer;
}

@media all and (max-width: 480px) {
  .popup__panel { border-radius:18px; }
}