/* VOLURR — the welcome-gift modal.
 *
 * The version before this was a generic dialog: small icon, title, sentence, button. The owner
 * pointed at a brokerage promo and said mine looked like a toy, and he was right. What that kind of
 * card actually does is four things this one now does too:
 *
 *   the offer is READ FROM ACROSS THE ROOM — one enormous number, everything else deferring to it
 *   the brand is PRESENT — the real shield, not clip-art
 *   the offer is ITEMISED — four named things, not one adjective
 *   the surface has DEPTH — an aurora mesh, a slow light sweep, a staged reveal
 *
 * COLOUR LAW (Article 3). Crimson is the brand and carries the mark, the kicker and the button.
 * Amber is the announcement accent and carries the number. Green and red as chrome are forbidden —
 * they mean price direction in this product, and a green button on a welcome card is a statement
 * about the market.
 *
 * RTL. Logical properties throughout. The hero digits are LTR-embedded so «7 أيام» never renders as
 * «أيام 7» (Article 13), and the CTA arrow mirrors with the reading direction.
 *
 * MOTION. Every animation is inside a prefers-reduced-motion guard. The sweep is a transform on a
 * composited pseudo-element — it never touches layout.
 *
 * TOUCH. Every control clears 44px on a coarse pointer (Law D9), and the card scrolls inside itself
 * on a short screen rather than pushing the page.
 */

.vgift {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 16px;
  animation: vgFade .26s ease-out;
}
.vgift.out { animation: vgFadeOut .2s ease-in forwards; }
@keyframes vgFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes vgFadeOut { to { opacity: 0 } }

.vgift-veil {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 11, .78);
  backdrop-filter: blur(6px) saturate(120%);
}

/* ── the card ─────────────────────────────────────────────────────────────────────────────────── */
.vgift-card {
  position: relative;
  isolation: isolate;
  width: min(468px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, #151a24 0%, #0d1017 100%);
  box-shadow:
    0 40px 90px -20px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(226, 59, 59, .14),
    0 0 90px -30px rgba(226, 59, 59, .5);
  animation: vgRise .5s cubic-bezier(.16, 1, .3, 1);
}
@keyframes vgRise { from { transform: translateY(22px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }

/* The aurora behind everything — two soft lights, one crimson (brand), one amber (the offer).
   MEASURED: the first version used `inset: -40% -20% auto` to let the glow bleed past the edges, and
   it stuck 92.8px out of each side — 94px of horizontal scroll inside the card. `overflow-x: hidden`
   did not clip it, because when one axis is `auto` the other cannot be a true `hidden` clip. So the
   bleed lives INSIDE the box now and the softness comes from the blur, not from overhang. Article 2:
   no horizontal overflow, measured on the painted box. */
.vgift-mesh {
  position: absolute;
  inset: 0 0 auto;
  height: 320px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(226, 59, 59, .38), transparent 74%) 16% 26% / 74% 128% no-repeat,
    radial-gradient(closest-side, rgba(232, 147, 42, .3), transparent 74%) 88% -6% / 66% 118% no-repeat;
  filter: blur(18px);
}

/* One slow pass of light, the detail that separates a printed card from a lit one. */
.vgift-sweep {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.vgift-sweep::before {
  content: '';
  position: absolute;
  top: -60%;
  inset-inline-start: -70%;
  width: 55%;
  height: 220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: vgSweep 5.4s cubic-bezier(.4, 0, .2, 1) 1s infinite;
}
@keyframes vgSweep { 0% { transform: translateX(0) rotate(18deg) } 55%, 100% { transform: translateX(340%) rotate(18deg) } }

/* ── header ───────────────────────────────────────────────────────────────────────────────────── */
.vgift-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 0 18px;
}
.vgift-brand { display: inline-flex; align-items: center; gap: 9px; }
.vgift-shield { width: 26px; height: 29px; flex: 0 0 auto; filter: drop-shadow(0 3px 8px rgba(226, 59, 59, .45)); }
.vgift-brand b {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #f2f5fa;
}
.vgift-brand i { font-style: normal; color: #e23b3b; }

.vgift-badge {
  margin-inline-start: auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  color: #e8932a;
  background: rgba(232, 147, 42, .1);
  border: 1px solid rgba(232, 147, 42, .32);
  white-space: nowrap;
}
.vgift-badge.vgift-pv { color: #9aa4b6; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }

.vgift-x {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(170, 180, 196, .8);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .14s, color .14s;
}
.vgift-x svg { width: 14px; height: 14px; }
.vgift-x:hover, .vgift-x:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; outline: none; }

/* ── body ─────────────────────────────────────────────────────────────────────────────────────── */
.vgift-body { padding: 6px 28px 26px; text-align: center; }

.vgift-kicker {
  margin: 0 0 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(160, 170, 186, .9);
}

/* THE HERO. The number is the largest thing on the card and everything else defers to it. */
.vgift-hero {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 6px;
  direction: ltr;                    /* «7 DAYS» / «7 أيام» — the digit leads in every language */
  unicode-bidi: isolate;
}
.vgift-num {
  font-size: clamp(64px, 19vw, 92px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(165deg, #ffd9a3 4%, #e8932a 52%, #c76f16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 22px rgba(232, 147, 42, .38));
}
.vgift-unit {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(232, 147, 42, .88);
}

.vgift-t {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  color: #f2f5fa;
}

/* ── what the week opens ──────────────────────────────────────────────────────────────────────── */
.vgift-rows {
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 0;
  text-align: start;
  border-block: 1px solid rgba(255, 255, 255, .07);
}
.vgift-rows li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(205, 213, 226, .94);
}
.vgift-ri {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #e8932a;
  background: rgba(232, 147, 42, .1);
  border: 1px solid rgba(232, 147, 42, .2);
}
.vgift-ri svg { width: 15px; height: 15px; }

/* ── the call to action ───────────────────────────────────────────────────────────────────────── */
.vgift-go {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 800;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #e8433f 0%, #c02a2a 100%);
  box-shadow: 0 10px 28px -6px rgba(226, 59, 59, .58), inset 0 1px 0 rgba(255, 255, 255, .18);
  touch-action: manipulation;
  transition: transform .14s cubic-bezier(.2, .9, .3, 1), box-shadow .14s, filter .14s;
}
.vgift-go svg { width: 15px; height: 15px; }
/* The arrow points the way you read. Keyed on the MODAL's own dir, not the document's: the card
   declares its direction from the interface language, so it stays correct even if it is mounted
   inside a page whose html[dir] has not been updated yet. */
.vgift[dir=rtl] .vgift-go svg { transform: scaleX(-1); }
.vgift-go:hover, .vgift-go:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 34px -8px rgba(226, 59, 59, .68), inset 0 1px 0 rgba(255, 255, 255, .22);
  outline: none;
}
.vgift-go:active { transform: translateY(0); }

.vgift-foot {
  margin: 14px 0 0;
  font-size: 10.5px;
  line-height: 1.75;
  color: rgba(140, 150, 167, .82);
}

/* ── staged reveal: the eye lands on the number, then the offer, then the button ──────────────── */
.vgift-kicker, .vgift-hero, .vgift-t, .vgift-rows, .vgift-go, .vgift-foot {
  animation: vgIn .55s cubic-bezier(.16, 1, .3, 1) backwards;
}
.vgift-kicker { animation-delay: .10s }
.vgift-hero   { animation-delay: .16s }
.vgift-t      { animation-delay: .24s }
.vgift-rows   { animation-delay: .32s }
.vgift-go     { animation-delay: .40s }
.vgift-foot   { animation-delay: .48s }
@keyframes vgIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  .vgift, .vgift-card, .vgift-kicker, .vgift-hero, .vgift-t, .vgift-rows, .vgift-go, .vgift-foot {
    animation: none;
  }
  .vgift-sweep::before { animation: none; opacity: 0; }
}

/* ── light theme ──────────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .vgift-card, body.light .vgift-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
  border-color: rgba(20, 25, 35, .1);
  box-shadow: 0 40px 90px -20px rgba(20, 25, 35, .3), 0 0 0 1px rgba(226, 59, 59, .12);
}
html[data-theme="light"] .vgift-mesh, body.light .vgift-mesh { opacity: .55; }
html[data-theme="light"] .vgift-brand b, body.light .vgift-brand b,
html[data-theme="light"] .vgift-t, body.light .vgift-t { color: #14161c; }
html[data-theme="light"] .vgift-rows li, body.light .vgift-rows li { color: #3d4452; }
html[data-theme="light"] .vgift-rows, body.light .vgift-rows { border-block-color: rgba(20, 25, 35, .1); }
html[data-theme="light"] .vgift-x, body.light .vgift-x { color: #5a6474; }
html[data-theme="light"] .vgift-kicker, body.light .vgift-kicker { color: #5a6474; }
html[data-theme="light"] .vgift-foot, body.light .vgift-foot { color: #6b7484; }

/* ── small screens ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 430px), (max-height: 680px) {
  .vgift { padding: 10px; }
  .vgift-card { border-radius: 20px; }
  .vgift-body { padding: 4px 18px 20px; }
  .vgift-num { font-size: clamp(54px, 17vw, 72px); }
  .vgift-t { font-size: 17px; margin-bottom: 14px; }
  .vgift-rows { padding: 11px 0; margin-bottom: 16px; }
  .vgift-rows li { font-size: 12px; padding: 5px 0; }
}