/* ═══════════════════════════════════════════════════════════════
   The flash sale.

   A discount is the one thing on this site that is allowed to be
   loud, and this is the only stylesheet that raises its voice: a
   warm pair — the mark's pink and an amber — chosen precisely
   because it is not the aqua. The aqua says EditFast; this says
   "this ends". Two different sentences should not be the same
   colour.

   Everything that moves here is a clock, or a thing a clock is
   attached to. Nothing moves to be seen moving, and every
   animation stops dead under a reduced-motion preference.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --sale-a: #F2A33C;          /* amber */
  --sale-b: #D96BA2;          /* the mark's pink */
  --sale-glow: 0 10px 34px -12px rgba(242,163,60,.55);
}

/* The rotating border needs an angle it can animate. Where
   @property is missing the angle never changes and the border sits
   still, lit but not turning — a smaller loss than no border. */
@property --sale-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ── the card in the hero ─────────────────────────────────────
   Under the buttons rather than above them: somebody who already
   decided should not have to read an offer to reach "subscribe". */

.sale-card {
  position: relative;
  margin-top: 22px;
  max-width: 430px;
  padding: 16px 18px 15px;
  border-radius: var(--r-card);
  border: 1px solid rgba(242,163,60,.38);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(217,107,162,.13), transparent 60%),
    linear-gradient(150deg, var(--bg-200), var(--bg-100));
  box-shadow: var(--sale-glow);
  animation: sale-breathe 3.4s var(--ease) infinite;
  overflow: hidden;
}

/* The sheen. A single pass across the card every few seconds,
   which is what catches an eye already moving down the page — a
   permanent shine is just a lighter background. */
.sale-card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.10) 47%, transparent 56%);
  background-size: 260% 100%;
  animation: sale-sheen 4.6s var(--ease) infinite;
}

.sale-card-hd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}

.sale-badge {
  font-family: var(--num); font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  color: #2A1600;
  background: linear-gradient(135deg, var(--sale-a), #FFC46B);
  border-radius: var(--r-pill); padding: 4px 11px;
  white-space: nowrap;
}

.sale-head-tx { font-size: 14.6px; font-weight: 600; color: var(--tx); }

/* The hero lays its own rhythm out; the card joins it rather than
   pushing the trust line up against itself. */
.hero .sale-card { margin-bottom: 30px; }

/* ── the count ────────────────────────────────────────────────
   One clock face, reused: beside the button, in the card, and on
   the payment page. The same deadline in all three, so the page
   never argues with itself about how long is left. */

.sale-time { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sale-time-lb { font-size: 13.2px; color: var(--tx-3); }
.sale-digits {
  font-family: var(--num); font-size: 16px; font-weight: 700;
  letter-spacing: .04em; color: var(--sale-a);
  direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

.sale-face { width: 15px; height: 15px; flex: 0 0 auto; color: var(--sale-a); }
.sale-face .sale-hand {
  transform-origin: 12px 12px;
  animation: sale-tick 2s steps(8, end) infinite;
}

.sale-row { display: flex; align-items: center; gap: 9px; }

.sale-code {
  flex: 1 1 auto;
  font-family: var(--num); font-size: 17px; font-weight: 700; letter-spacing: .12em;
  color: var(--tx); text-align: center;
  padding: 10px 12px; border-radius: var(--r-ctl);
  border: 1px dashed rgba(242,163,60,.5);
  background: rgba(242,163,60,.07);
  direction: ltr; unicode-bidi: isolate;
}

.sale-apply {
  flex: 0 0 auto;
  border: 0; cursor: pointer; font-family: var(--ff);
  font-size: 14.5px; font-weight: 600; color: #2A1600;
  padding: 11px 16px; border-radius: var(--r-ctl);
  background: linear-gradient(135deg, var(--sale-a), #FFC46B);
  transition: transform .25s var(--spring), box-shadow .3s var(--ease);
}
.sale-apply:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(242,163,60,.75); }
.sale-apply:focus-visible { outline: 2px solid var(--sale-a); outline-offset: 3px; }
.sale-apply.done {
  background: rgba(74,222,110,.14); color: var(--ok);
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(74,222,110,.4);
  cursor: default;
}

.sale-fine { display: block; margin-top: 11px; font-size: 12.8px; color: var(--tx-3); line-height: 1.55; }

/* ── beside "subscribe now" ───────────────────────────────────
   A chip next to the button, not a badge inside it: the button's
   own text swaps language on a data attribute, and anything
   written inside it would be wiped by that swap. */

.btn.sale-glow {
  border-color: rgba(242,163,60,.55);
  animation: sale-pulse 2.6s var(--ease) infinite;
}

.sale-clock {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(242,163,60,.34);
  background: rgba(242,163,60,.09);
  font-size: 13.4px; color: var(--tx-2);
}
.sale-clock .sale-digits { font-size: 14.5px; }
/* The closing block centres its contents, so the chip needs a gap
   of its own rather than the line break the flex row gave it. */
.cta .sale-clock { margin-inline-start: 10px; }

/* ── the plans ────────────────────────────────────────────────*/

/* The old price goes on a line of its own under the new one. The
   cell is a baseline row, so it takes a full-width child to break
   it — the same trick the converted-currency line already uses. */
/* A wrapping flex row asks for the width of ALL its lines laid
   end to end, and the card next to it loses exactly that much —
   enough to break «مدى الحياة» across two lines. A block asks for
   its widest line instead, which is the honest number. */
.term-price.has-sale { display: block; text-align: start; }
/* The flex gap went with the flex; the currency still needs its
   breathing room beside the figure. */
.term-price.has-sale > b { margin-inline-end: 5px; }
.term-price.has-sale .term-egp { display: block; }
.term-was-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}

/* What it was, kept beside what it is. Struck through and quiet:
   the number that matters is the one they will pay. */
.term-was {
  font-family: var(--num); font-size: 13.5px; font-weight: 600;
  color: var(--tx-4); text-decoration: line-through;
  text-decoration-color: rgba(242,163,60,.85);
  text-decoration-thickness: 1.5px;
}
.term-price b.sale-now,
.term.on .term-price b.sale-now { color: var(--sale-a); }

.term-off {
  font-family: var(--num); font-size: 11px; font-weight: 700;
  color: #2A1600; background: linear-gradient(135deg, var(--sale-a), #FFC46B);
  border-radius: var(--r-tag); padding: 1px 6px; letter-spacing: .02em;
  direction: ltr; unicode-bidi: isolate;
}

/* Lifetime, with a border that turns.

   It is the plan that ends the decision, so it is the one allowed
   to move. The ring is painted into the padding box and the middle
   is masked out of it, which keeps it a border rather than a
   background the text has to sit on. */
.term.sale-life, .term-opt.sale-life {
  position: relative;
  border-color: transparent;
  background: linear-gradient(150deg, var(--bg-200), var(--bg-100));
}
.term.sale-life::before, .term-opt.sale-life::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--sale-ang),
              rgba(242,163,60,0) 0deg 180deg,
              rgba(217,107,162,.75) 250deg,
              var(--sale-a) 310deg,
              #FFD79A 340deg,
              rgba(242,163,60,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: sale-turn 4.2s linear infinite;
}
/* A ring alone reads as a rim light; the halo under it is what
   lifts the card off the page. */
.term.sale-life, .term-opt.sale-life { box-shadow: 0 10px 36px -16px rgba(242,163,60,.75); }
.term.sale-life.on, .term-opt.sale-life.on { box-shadow: 0 12px 40px -14px rgba(242,163,60,.85); }

/* The payment page's own smaller cards. Their price is a `span`
   with a rule of its own, which outranks a class on its own — so
   the old price says so in a selector that can be heard. */
.term-opt .term-was {
  font-size: 14px; font-weight: 600;
  color: var(--tx-4); letter-spacing: 0;
  margin-inline-end: 6px;
}
.term-opt.on .term-was { color: var(--tx-4); }
.term-opt .term-now { color: var(--sale-a); }
.term-opt.on .term-now { color: var(--sale-a); }

.sale-note {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding: 11px 14px;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(242,163,60,.3);
  background: rgba(242,163,60,.07);
  font-size: 13.8px; color: var(--tx-2); line-height: 1.5;
}
.sale-note.on { border-color: rgba(74,222,110,.34); background: rgba(74,222,110,.07); }
.sale-note b { color: var(--tx); font-weight: 600; }
.sale-note svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--sale-a); }
.sale-note.on svg { color: var(--ok); }

/* ── the payment page ─────────────────────────────────────────*/

.sale-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 13px 16px;
  border-radius: var(--r-card);
  border: 1px solid rgba(242,163,60,.36);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(217,107,162,.12), transparent 62%),
    linear-gradient(140deg, var(--bg-200), var(--bg-100));
  box-shadow: var(--sale-glow);
}
.sale-strip-tx { font-size: 14.2px; color: var(--tx-2); line-height: 1.5; }
.sale-strip-tx b { color: var(--tx); font-weight: 600; }
.sale-strip .sale-time { margin-inline-start: auto; }

/* The coupon box, once the code is sitting in it. */
.coupon.sale-lit {
  border-radius: var(--r-card);
  border: 1px solid rgba(242,163,60,.42);
  background: rgba(242,163,60,.06);
  padding: 14px 16px;
  animation: sale-breathe 3.4s var(--ease) infinite;
}
.coupon.sale-lit .inp {
  border-color: rgba(242,163,60,.5);
  font-weight: 700; letter-spacing: .1em;
}

/* ── the movements ────────────────────────────────────────────*/

@keyframes sale-turn  { to { --sale-ang: 360deg; } }
@keyframes sale-sheen { 0%, 62% { background-position: 260% 0; } 100% { background-position: -60% 0; } }
@keyframes sale-breathe {
  0%, 100% { box-shadow: 0 10px 34px -14px rgba(242,163,60,.42); }
  50%      { box-shadow: 0 12px 40px -10px rgba(242,163,60,.7); }
}
@keyframes sale-pulse {
  0%, 100% { box-shadow: 0 8px 26px -10px rgba(242,163,60,.45); }
  50%      { box-shadow: 0 12px 34px -8px rgba(242,163,60,.75); }
}
@keyframes sale-tick { to { transform: rotate(360deg); } }

/* ── phones ───────────────────────────────────────────────────*/

@media (max-width: 560px) {
  .sale-card { max-width: none; padding: 14px 15px 13px; }
  .sale-row { flex-wrap: wrap; }
  .sale-code { flex: 1 0 100%; }
  .sale-apply { flex: 1 0 100%; }
  .sale-strip { flex-direction: column; align-items: flex-start; gap: 9px; }
  .sale-strip .sale-time { margin-inline-start: 0; }
}

/* ── still ────────────────────────────────────────────────────
   The count itself keeps counting — it is information, not
   decoration. Everything that was only there to catch the eye
   stops. */
@media (prefers-reduced-motion: reduce) {
  .sale-card, .sale-card::after, .coupon.sale-lit, .btn.sale-glow,
  .term.sale-life::before, .sale-face .sale-hand {
    animation: none;
  }
  .term.sale-life::before { background: linear-gradient(140deg, var(--sale-a), var(--sale-b)); }
  .sale-apply:hover { transform: none; }
}