/* Promo popup (public/v2/promo-popup.js) — the /promo offer shown over any public page, staged as a gift:
   a gift box drops from the header on a ribbon, swings, then opens (lid up, confetti) and the offer card falls out of it.
   The card itself: night-blue header with the discount, the countdown and the benefits; payment details to copy; WhatsApp + prices.
   After closing, a small box stays hooked under the header to reopen the offer. Where it shows: PROMO_POPUP (app.js), home page by default. */
:root { --pg-top: 105px; --pg-open: 58px; }   /* where the box hangs: under the sticky header (97px desktop, 73px phones); pulled up once open */
@media (max-width: 575.98px) { :root { --pg-top: 80px; --pg-open: 40px; } }

/* ---------- the gift box (teaser, dialog and docked mini share it) ---------- */
.gift { position: relative; display: block; width: 86px; height: 80px; filter: drop-shadow(0 18px 22px rgba(5, 13, 25, .5)); }
.gift__body { position: absolute; inset: 24px 7px 0; border-radius: 5px 5px 11px 11px; background: linear-gradient(180deg, #1a3f6b 0%, #112a45 55%, #0a1b2e 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.gift__body::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 14px; margin-inline-start: -7px; background: linear-gradient(90deg, #f0a800, #ffd25e 50%, #f0a800); }
.gift__body::after { content: ""; position: absolute; inset: auto 0 10px; height: 12px; background: linear-gradient(90deg, #f0a800, #ffd25e 50%, #f0a800); opacity: .95; }
.gift__lid { position: absolute; top: 14px; inset-inline: 0; height: 18px; border-radius: 5px; background: linear-gradient(180deg, #22507f, #143257); box-shadow: 0 3px 0 rgba(5, 13, 25, .35), inset 0 1px 0 rgba(255, 255, 255, .18); transform-origin: 100% 100%; transition: transform .55s var(--ease), opacity .4s var(--ease); z-index: 2; }
.gift__lid::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 14px; margin-inline-start: -7px; background: linear-gradient(90deg, #f0a800, #ffd25e 50%, #f0a800); }
.gift__bow { position: absolute; left: 50%; top: -13px; width: 44px; height: 18px; margin-left: -22px; }
.gift__bow::before, .gift__bow::after { content: ""; position: absolute; top: 0; width: 18px; height: 18px; border: 4px solid #ffbf24; border-radius: 50% 50% 50% 0; box-sizing: border-box; }
.gift__bow::before { left: 2px; transform: rotate(-45deg); }
.gift__bow::after { right: 2px; transform: rotate(45deg) scaleX(-1); }
.gift__bow i { position: absolute; left: 50%; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 3px; background: #f0a800; z-index: 2; }
.gift.is-open .gift__lid { transform: translate(-16px, -34px) rotate(-26deg); }

/* ---------- teaser: the box drops from the header on its ribbon and swings, page still usable ---------- */
.pg { position: fixed; top: 0; inset-inline-start: calc(50% - 70px); z-index: 1300; width: 140px; pointer-events: none; font-family: var(--font-ui); }
.pg__swing { display: grid; justify-items: center; transform-origin: 50% 0; animation: pg-drop .9s cubic-bezier(.34, 1.4, .64, 1) both, pg-swing 2.2s .85s ease-in-out both; }
.pg__string { display: block; width: 2px; height: var(--pg-top); background: linear-gradient(180deg, rgba(0, 194, 168, .4), var(--g-500) 60%, var(--o-500)); }
.pg__box { position: relative; display: grid; justify-items: center; gap: 2px; margin-top: -2px; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; font: inherit; color: inherit; }
.pg__box::before { content: ""; position: absolute; top: 2px; left: 50%; width: 150px; height: 120px; margin-left: -75px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 191, 36, .42), transparent); animation: pg-glow 1.6s 1s ease-in-out infinite alternate; pointer-events: none; }
.pg__box:focus-visible { outline: 0; }
.pg__box:focus-visible .gift { outline: 3px solid var(--o-500); outline-offset: 6px; border-radius: 12px; }
.pg__box:hover .gift { animation: pg-shake .5s ease-in-out; }
.pg__tag { position: relative; display: grid; justify-items: center; margin-top: 6px; padding: 7px 14px 8px; border-radius: 12px; background: #fff; color: var(--navy-900); font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: var(--sh-2); }
.pg__tag::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.pg__tag b { font: 800 16px/1.2 "Poppins", var(--font-display); color: var(--blue-600); }
.pg__tag b span { direction: ltr; unicode-bidi: isolate; }
.pg__tag small { font-size: 11px; color: var(--ink-3); }
.pg.is-gone { animation: pg-out .25s var(--ease) both; }
@keyframes pg-drop { from { transform: translateY(-110%); } to { transform: none; } }
@keyframes pg-swing { 0% { rotate: 0deg; } 20% { rotate: 7deg; } 45% { rotate: -5deg; } 70% { rotate: 2.5deg; } 88% { rotate: -1deg; } 100% { rotate: 0deg; } }
@keyframes pg-glow { from { opacity: .55; transform: scale(.85); } to { opacity: 1; transform: scale(1.05); } }
@keyframes pg-shake { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 50% { rotate: 6deg; } 75% { rotate: -3deg; } }
@keyframes pg-out { to { opacity: 0; } }

/* docked mini box after closing: hooked under the header at the inline start, click to reopen */
.pg--mini { inset-inline-start: auto; inset-inline-end: 10px; width: 64px; }   /* away from the logo, under the header */
.pg--mini .pg__swing { animation: pg-swing 2.4s ease-in-out both; }
.pg--mini .gift { width: 50px; height: 46px; filter: drop-shadow(0 10px 14px rgba(5, 13, 25, .45)); }
.pg--mini .gift__body { inset: 14px 4px 0; border-radius: 3px 3px 7px 7px; }
.pg--mini .gift__body::before, .pg--mini .gift__lid::before { width: 8px; margin-inline-start: -4px; }
.pg--mini .gift__body::after { height: 7px; bottom: 6px; }
.pg--mini .gift__lid { top: 8px; height: 11px; }
.pg--mini .gift__bow { top: -9px; width: 28px; height: 12px; margin-left: -14px; }
.pg--mini .gift__bow::before, .pg--mini .gift__bow::after { width: 12px; height: 12px; border-width: 3px; }
.pg--mini .gift__bow i { width: 7px; height: 7px; margin-left: -3.5px; top: 6px; }
.pg--mini .pg__box::before { width: 90px; height: 70px; margin-left: -45px; }
.pg--mini .pg__tag { margin-top: 2px; padding: 3px 8px 4px; border-radius: 8px; }
.pg--mini .pg__tag b { font-size: 13px; }
.pg__x { position: absolute; top: 6px; inset-inline-end: -4px; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--navy-900); color: #fff; font: 700 14px/1 var(--font-ui); cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .2s var(--ease); }
.pg--mini:hover .pg__x, .pg__x:focus-visible, .pg--mini.is-touch .pg__x { opacity: 1; }

/* ---------- the dialog: ribbon, open box, then the card hanging from it ---------- */
.pp { position: fixed; inset: 0 0 auto; margin: 0 auto; width: min(520px, 100% - 24px); max-width: none; max-height: 100dvh; padding: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--font-ui); line-height: 1.6; overflow: visible; display: grid; justify-items: center; }
.pp::backdrop { background: rgba(5, 13, 25, .74); backdrop-filter: blur(3px); animation: pp-fade .35s var(--ease) both; }
@keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } }
.pp *, .pp *::before, .pp *::after { box-sizing: border-box; }
.pp p, .pp h2, .pp ul { margin: 0; }
.pp ul { padding: 0; list-style: none; }
.pp .m-ic { width: 18px; height: 18px; flex: none; }
.pp__string { display: block; width: 2px; height: var(--pg-top); background: linear-gradient(180deg, rgba(0, 194, 168, .4), var(--g-500) 60%, var(--o-500)); transition: height .7s var(--ease); }
.pp.is-open .pp__string { height: var(--pg-open); }
.pp__gift { position: relative; z-index: 3; margin: -2px 0 -18px; }
.pp__burst { position: absolute; left: 50%; top: 30px; width: 0; height: 0; pointer-events: none; }
.pp__burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--c, #ffbf24); opacity: 0; }
.pp.is-open .pp__burst i { animation: pp-burst .9s .15s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes pp-burst { 0% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
.pp__card { position: relative; display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - var(--pg-open) - 80px); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--sh-3); transform-origin: 50% 0; opacity: 0; }
.pp.is-open .pp__card { animation: pp-drop .6s .22s cubic-bezier(.22, 1.2, .36, 1) both; }
@keyframes pp-drop { from { opacity: 0; transform: translateY(-40px) scale(.6, .12); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }

/* ---------- header: offer + countdown + benefits ---------- */
.pp__head { position: relative; isolation: isolate; flex: none; overflow: hidden; padding: 16px 20px 18px; background: var(--navy-900); color: #fff; }
.pp__head::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(55% 75% at 100% 0%, rgba(0, 194, 168, .42), transparent 62%),
  radial-gradient(45% 65% at 0% 100%, rgba(13, 78, 216, .55), transparent 64%),
  radial-gradient(28% 40% at 22% 42%, rgba(255, 191, 36, .16), transparent 70%); }
.pp__head::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45; background-image: linear-gradient(rgba(143, 166, 192, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 166, 192, .08) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 90%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); }
.pp__top { display: flex; align-items: center; gap: 10px; padding-inline-end: 48px; }
.pp__logo { display: block; height: 30px; width: auto; }
.pp__pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; background: #e11d2e; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 6px 16px -8px rgba(225, 29, 46, .9); }
.pp__pill .m-ic { width: 14px; height: 14px; }
.pp__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .82); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.pp__x:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.pp__x:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.pp__x .m-ic { width: 22px; height: 22px; }

.pp__offer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.pp__title { display: grid; justify-items: start; gap: 4px; min-width: 0; font: inherit; }
.pp__upto { display: inline-block; padding: 2px 9px; border-radius: 7px; background: rgba(13, 78, 216, .55); border: 1px solid rgba(255, 255, 255, .18); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; }
.pp__pct { display: inline-block; font: 900 clamp(58px, 16vw, 76px)/.9 "Poppins", var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff3c4 0%, #ffd25e 30%, #ffbf24 55%, #e08e00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(110, 60, 0, .55)) drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
.pp__pct small { font-size: .55em; }
.pp__ribbon { display: inline-block; margin-top: 4px; padding: 4px 12px; white-space: nowrap; border-radius: 7px; background: linear-gradient(90deg, #dc2626, #f43f5e); color: #fff; font-size: 13px; font-weight: 800; transform: rotate(1.5deg); box-shadow: 0 10px 22px -10px rgba(136, 19, 55, .9); }

.pp__timer { flex: none; padding: 8px 10px 10px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); text-align: center; }
.pp__timer-lbl { display: block; margin-bottom: 6px; color: rgba(255, 255, 255, .72); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; }
.pp__cd { display: flex; align-items: flex-start; gap: 4px; direction: ltr; }
.pp__cd > span { display: grid; justify-items: center; gap: 4px; }
.pp__cd b { display: grid; place-items: center; min-width: 42px; height: 38px; padding: 0 5px; border-radius: 8px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); font: 800 20px/1 "Poppins", var(--font-ui); font-variant-numeric: tabular-nums; color: #fff; }
.pp__cd small { color: rgba(255, 255, 255, .72); font-size: 10px; font-weight: 600; direction: rtl; }
.pp__cd i { padding-top: 10px; font-style: normal; font-weight: 800; color: rgba(255, 255, 255, .6); }
.pp__over { display: inline-block; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-size: 12px; font-weight: 800; }

.pp__sub { margin-top: 12px; font-size: 15px; font-weight: 800; line-height: 1.35; }
.pp__sub span { display: block; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.pp__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(6px); font-size: 12.5px; line-height: 1.45; }
.pp__benefits li { display: flex; align-items: flex-start; gap: 7px; }
.pp__benefits .m-ic { width: 18px; height: 18px; padding: 3px; margin-top: 1px; border-radius: 50%; background: var(--g-500); color: #fff; box-shadow: 0 4px 10px -4px rgba(0, 122, 106, .9); }

/* ---------- body: payment details ---------- */
.pp__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px; overscroll-behavior: contain; }
.pp__pay summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--navy-900); }
.pp__pay summary::-webkit-details-marker { display: none; }
.pp__pay summary > .m-ic:first-child { color: var(--blue-600); }
.pp__pay summary span { font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.pp__pay summary .pp__chev { margin-inline-start: auto; color: var(--ink-3); transition: transform .25s var(--ease); }
.pp__pay[open] summary .pp__chev { transform: rotate(180deg); }
.pp__rows { margin-bottom: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; }
.pp__rows li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.pp__rows li + li { border-top: 1px solid #f1f5f9; }
.pp__rows .pp__ic { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--blue-50); color: var(--blue-600); }
.pp__rows > li > div { flex: 1 1 auto; min-width: 0; }
.pp__lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.pp__val { font: 700 13.5px/1.4 "Poppins", var(--font-ui); font-variant-numeric: tabular-nums; color: var(--navy-900); direction: ltr; unicode-bidi: isolate; text-align: start; word-break: break-all; }
.pp__det { font-size: 12px; line-height: 1.4; color: var(--ink-3); direction: ltr; unicode-bidi: isolate; text-align: start; }
.pp__copy { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.pp__copy:hover { background: var(--bg); color: var(--blue-600); }
.pp__copy:focus-visible { outline: 2px solid var(--g-500); outline-offset: -2px; }
.pp__copy.is-done { color: var(--g-600); }
.pp__copy .m-ic + .m-ic, .pp__copy.is-done .m-ic:first-child { display: none; }
.pp__copy.is-done .m-ic + .m-ic { display: block; }

/* ---------- footer: WhatsApp first, prices second ---------- */
.pp__foot { display: flex; flex: none; gap: 10px; padding: 12px 20px 18px; border-top: 1px solid #f1f5f9; }
.pp__btn { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; font: 700 15px/1.2 var(--font-ui); text-decoration: none !important; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.pp__btn:active { transform: translateY(1px); }
.pp__btn--wa { flex-grow: 1.25; background: #25d366; color: #fff !important; box-shadow: 0 12px 24px -12px rgba(37, 211, 102, .9); }
.pp__btn--wa:hover { background: #1fb857; }
.pp__btn--wa .m-ic { width: 20px; height: 20px; }
.pp__btn--ghost { background: #fff; border-color: var(--line); color: var(--ink) !important; }
.pp__btn--ghost:hover { background: var(--bg); border-color: #c7d3e3; color: var(--blue-600) !important; }
.pp__btn:focus-visible { outline: 2px solid var(--g-500); outline-offset: 2px; }

/* toast lives inside the dialog: anything outside it sits under the backdrop */
.pp__toast { position: absolute; bottom: 84px; inset-inline: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 40px); padding: 10px 16px; border-radius: 10px; background: var(--navy-900); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: var(--sh-2); opacity: 0; transform: translateY(6px); transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; }
.pp__toast.is-on { opacity: 1; transform: none; }

/* ---------- PC: the three payment methods visible without scrolling ----------
   Wider card; CCP and BaridiMob side by side, the bank RIB on its own line; compact rows. */
@media (min-width: 576px) {
  .pp { width: min(620px, 100% - 32px); }
  .pp__val { white-space: nowrap; word-break: normal; }
  .pp__pay summary { padding: 11px 0; }
  .pp__rows { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 4px; padding: 0; }
  .pp__rows li { gap: 10px; padding: 8px 6px 8px 12px; }
  .pp__rows li + li { border-top: 0; }
  .pp__rows .pp__row--bm { border-inline-start: 1px solid #f1f5f9; }
  .pp__rows .pp__row--bank { grid-column: 1 / -1; border-top: 1px solid #f1f5f9; }
  .pp__rows .pp__ic { width: 32px; height: 32px; }
  .pp__lbl { font-size: 10.5px; line-height: 1.5; }
  .pp__copy { width: 38px; height: 38px; }
  .pp__foot { padding: 10px 20px 14px; }
  .pp__btn { min-height: 46px; }
  .pp__toast { bottom: 74px; }
}
/* short PC screens (laptops 650–800 px tall): tighter header and box so the whole card fits */
@media (min-width: 576px) and (max-height: 800px) {
  :root { --pg-open: 34px; }
  .pp__gift { margin-bottom: -26px; }
  .pp__gift .gift { transform: scale(.82); transform-origin: 50% 100%; }
  .pp__head { padding: 12px 20px 14px; }
  .pp__offer { margin-top: 8px; }
  .pp__pct { font-size: 64px; }
  .pp__benefits { margin-top: 10px; padding: 10px 12px; gap: 7px 12px; }
  .pp__card { max-height: calc(100dvh - var(--pg-open) - 64px); }
}

/* ---------- phones ---------- */
@media (max-width: 575.98px) {
  .pp__card { max-height: calc(100dvh - var(--pg-open) - 72px); }
  .pp__head { padding: 14px 16px 16px; }
  .pp__body { padding-inline: 16px; }
  .pp__offer { gap: 10px; }
  .pp__cd b { min-width: 34px; height: 32px; font-size: 16px; }
  .pp__timer { padding: 7px 8px 9px; }
  .pp__ribbon { padding: 3px 10px; font-size: 12.5px; }
  .pp__benefits { font-size: 12px; gap: 8px 10px; padding: 10px; }
  .pp__foot { flex-direction: column; padding: 10px 16px 16px; }
  .pg__tag { font-size: 12px; }
}
@media (max-width: 359.98px) { .pp__benefits { grid-template-columns: 1fr; } .pp__pct { font-size: 52px; } }
@media (prefers-reduced-motion: reduce) { .pp__string { transition: none; } .pg__swing, .pg__box::before, .pg__box:hover .gift, .pp::backdrop, .pp.is-open .pp__burst i { animation: none; } .pp__card, .pp.is-open .pp__card { animation: none; opacity: 1; } .gift__lid, .pp__copy, .pp__btn, .pp__toast, .pp__chev { transition: none; } }
@media print { .pp, .pg { display: none; } }