/* =========================================================
   WOOTZ — occasion popup (اليوم الوطني / التأسيس / رمضان / …)
   Driven by Settings › Pages Settings (`pages.promo_popup`).

   Loaded ONLY when the campaign is live for the current page, so this file
   never costs a request on a store that has the popup switched off.

   The popup is the admin's image and nothing else: no card, no border, no
   background, no shadow — only rounded corners. Anything else that would frame
   the artwork is deliberately absent — the only styled chrome is the close
   button, which has just enough backing to stay visible on a light or a dark
   image.

   Two uploads share one <img>: the wide artwork, and an optional phone-shaped
   one that <picture> swaps in below 640px — the same line the layout switches
   its padding on.
   ========================================================= */

.pp{
  position:fixed;inset:0;z-index:150;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.pp[hidden]{display:none!important}
/* `open` only lays the dialog out; `show` is the animated end state. They
   are set on separate frames so the transition has a start to run from. */
.pp.open,.pp.closing{display:flex}

/* ---------- scrim ---------- */
.pp-scrim{
  position:absolute;inset:0;
  background:rgba(0,0,0,.66);
  opacity:0;transition:opacity .3s ease;
}
.pp.show .pp-scrim{opacity:1}
.pp.closing .pp-scrim{opacity:0}

/* ---------- the image ---------- */
/* Shrink-wrapped to the artwork so the close button lands on the image's own
   corner rather than on empty space beside it. */
.pp-dialog{
  position:relative;z-index:1;
  display:inline-block;line-height:0;
  max-width:100%;
  opacity:0;transform:scale(.94);
  transition:opacity .32s ease,transform .32s ease;
}
.pp.show .pp-dialog{opacity:1;transform:none}
.pp.closing .pp-dialog{opacity:0;transform:scale(.97);transition-duration:.22s}

.pp-media{display:block}
.pp-media picture{display:block;line-height:0}
.pp-media img{
  display:block;
  max-width:min(92vw,900px);
  max-height:86vh;
  width:auto;height:auto;
  /* Rounded corners, but no border, shadow or background: whatever the admin
     uploaded is exactly what shows, transparent PNG edges included. */
  border-radius:18px;
  object-fit:contain;
}

/* ---------- close ---------- */
.pp-close{
  position:absolute;inset-block-start:8px;inset-inline-end:8px;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;
  padding:0;border:0;border-radius:50%;cursor:pointer;line-height:0;
  /* The one concession to styling: a dark disc so the X is findable on a
     white artwork as well as a dark one. */
  background:rgba(0,0,0,.55);color:#fff;
  transition:background .2s ease;
}
.pp-close:hover,.pp-close:focus-visible{background:rgba(0,0,0,.8);outline:none}
.pp-close svg{width:16px;height:16px}

/* ---------- mobile ---------- */
/* Same 640px line the <picture> switches artwork on, so the phone image and
   the phone padding start together. */
@media (max-width:640px){
  .pp{padding:14px}
  .pp-media img{max-width:94vw;max-height:82vh}
}

/* ---------- reduced motion ---------- */
/* Movement goes; the fade stays so the popup still reads as arriving rather
   than blinking into place. */
@media (prefers-reduced-motion:reduce){
  .pp-dialog{transform:none!important;transition:opacity .2s linear!important}
}