/* =========================================================================
   Micro Mania — deals  (2026-09)

   One look for every discount on the site. The prebuilt sale, the builder
   discount, the combo deals and the home hero all print the same two things
   from inc/mmi-deals.php, and this file is how they look:

     - The fire badge (.mmi-fire). A drawn, animated flame in the shop's own
       colours, never an emoji glyph: magenta and violet outside, neon cyan in
       the middle, a white-cyan core. Three variants — inline (flame and a
       "−7%" pill beside a name), corner (a bigger flame with the number in its
       belly, pinned over a button's top-right corner), mark (the flame alone).
       It moves only by transform and opacity on a few SVG groups, on several
       unrelated durations so it never reads as a loop, stops dead under
       prefers-reduced-motion, and pauses off screen when mmi-deals.js marks
       it .is-idle. Without the script it simply keeps burning.

     - The was/now price (.mmi-price). The old price stays readable but muted,
       crossed by one red stroke from its bottom-left corner to its top-right
       corner, through the dollar and the dinar line; the new price follows it in reading order
       in Micro Mania blue with a soft glow. Old is left of new in English and
       right of new in Arabic. "Was" and "Now" are spoken, not shown.

   With no deal the price markup is the plain price, and its wrapper is set
   to display:contents below, so inside the old containers (.pb-price,
   .option-price, .build-total …) everything renders exactly as it did.

   Two regions belong to the flame's drawing and are replaced as a unit:
   everything between @mmi-fire:start and @mmi-fire:end. Placement of the
   badge and the price inside a feature lives in that feature's own section
   at the bottom of this file (or its own file), never in the shared rules.

   Knobs a feature may set in its own scope:
     --fire-h            flame height (inline 22px, corner 44px, mark 26px)
     --fire-gap          space between flame and pill
     --fire-pct-size     pill text size
     --fire-x, --fire-y  corner offset from the parent's top-right corner
     --fire-num-top      where the corner number sits in the flame
     --deal-now, --deal-now-lyd, --deal-was, --deal-was-lyd   type sizes
     --deal-gap          space between old and new price
     --deal-align        cross-axis alignment of the two prices
     --deal-justify      line alignment inside each price (LTR)
     --deal-justify-rtl  line alignment inside each price (RTL)
     --deal-was-justify  line alignment inside the old price (both, center)
     --deal-red, --deal-strike-width
     --deal-was-color, --deal-now-color, --deal-now-lyd-color, --deal-now-glow
   ====================================================================== */


/* ---- 0. Tokens ------------------------------------------------------------
   Sale red is brighter than the APEX tier's red so the stroke is never read
   as a tier colour, and bright enough to hold on the #101018 panels. */
body.mmi-page{
  --deal-red:#FF4D5E;
  --deal-was-color:rgba(255,255,255,.55);
  --deal-now-color:var(--cyan);
  --deal-now-lyd-color:var(--cyan-lit);
  --deal-now-glow:rgba(79,216,224,.45);
  --deal-strike-width:2px;
}

/* Spoken, not shown. Same recipe as .screen-reader-text in mmi-home.css. */
.mmi-page .mmi-vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ---- 1. The fire badge: layout -------------------------------------------
   The flame box is 4:5, the drawing's own proportion, so a height is all a
   feature ever sets. */
.mmi-page .mmi-fire{
  --fire-h:22px;
  position:relative;display:inline-flex;align-items:center;gap:var(--fire-gap,3px);
  flex:0 0 auto;vertical-align:middle;line-height:1;white-space:nowrap;
  text-transform:none;letter-spacing:0;
}
.mmi-page .mmi-fire-flame{
  position:relative;display:block;flex:0 0 auto;
  height:var(--fire-h);width:calc(var(--fire-h) * .8);
}
.mmi-page .mmi-fire-svg{display:block;width:100%;height:100%;overflow:visible}

/* inline: the percentage pill, in the flame's colours. */
.mmi-page .mmi-fire-pct{
  display:inline-flex;align-items:center;min-height:calc(var(--fire-h) * .82);
  padding:1px 7px 0;border:1px solid rgba(249,79,224,.6);border-radius:99px;
  background:linear-gradient(115deg,rgba(217,47,196,.3),rgba(139,92,246,.22) 55%,rgba(79,216,224,.18));
  box-shadow:0 0 14px -4px rgba(249,79,224,.85);
  color:#fff;font:900 var(--fire-pct-size,11.5px)/1 "Cairo",var(--fallback-ar);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 0 8px rgba(249,79,224,.55);
}

/* corner: pinned to the physical top-right of its positioned parent in both
   languages — the owner's words — half hanging off the edge. The parent must
   be position:relative and must not clip (see the HOME HERO section). */
.mmi-page .mmi-fire--corner{
  --fire-h:44px;
  position:absolute;top:0;right:0;left:auto;z-index:4;display:block;
  transform:translate(var(--fire-x,42%),var(--fire-y,-50%));
  pointer-events:none;
}
.mmi-page .mmi-fire--corner .mmi-fire-num{
  position:absolute;left:0;right:0;top:var(--fire-num-top,71%);display:block;
  transform:translateY(-50%);
  color:#fff;font:900 calc(var(--fire-h) * .28)/1 "Cairo",var(--fallback-ar);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-align:center;white-space:nowrap;
  /* A dark ring so the figure holds over the white core and the cyan body. */
  text-shadow:0 0 1px #12051c,0 0 2px #12051c,0 1px 3px rgba(18,5,28,.95);
}
.mmi-page .mmi-fire--corner.is-2d .mmi-fire-num{font-size:calc(var(--fire-h) * .25)}
.mmi-page .mmi-fire--corner .mmi-fire-num small{font-size:.62em;font-weight:900;margin-left:.03em}

/* mark: the flame alone. */
.mmi-page .mmi-fire--mark{--fire-h:26px}

@media (max-width:620px){
  .mmi-page .mmi-fire{--fire-h:20px}
  .mmi-page .mmi-fire--corner{--fire-h:38px}
  .mmi-page .mmi-fire--mark{--fire-h:22px}
}


/* ---- 2. The fire badge: drawing and motion ------------------------------- */
/* @mmi-fire:start */
/* The flame — "emoji-crisp", drawn by mmi_fire_svg() in inc/mmi-deals.php.
   Chosen from three designs by the flame judge (2026-09-14); why, and the
   full motion spec, are in the build's flame/DECISION.md.

   A sticker, not a painting: one bold silhouette with a dark rim, a clean
   cyan inner flame and a white-hot core, readable as fire at 20px before
   the colours are even noticed. The rim is what lets the corner badge sit on
   the cyan, amber and green hero buttons without melting into them.

   Motion is a calm idle, never a flicker. Four parts move, each on its own
   clock (3.7s, 2.3s, 1.7s, 4.3s, plus the 5.9s glow), none a multiple of
   another, so the combined movement does not visibly repeat. Every keyframe
   is a turning point — each value alternates up, down, up, down — so with an
   ease-in-out curve the speed only ever reaches zero where the direction
   reverses, which is why nothing hitches. Every loop begins and ends on the
   same pose. Only transform and opacity change; nothing re-rasterises a
   filter. */

/* The drawing fills its box whatever the surrounding markup does to icons.
   The hero's `.mmi-page .btn svg{width:16px;height:16px}` outranks the plain
   .mmi-fire-svg rule and would shrink a corner flame to a 16px icon. */
.mmi-page .mmi-fire .mmi-fire-flame>.mmi-fire-svg{display:block;width:100%;height:100%;overflow:visible}

/* Every moving part grows from its own base. The children never leave their
   parent's box (checked frame by frame), so a parent's fill-box — and so its
   origin — stays put while the children move. */
.mmi-page .mmi-fire .mmi-fire-body,
.mmi-page .mmi-fire .mmi-fire-mid,
.mmi-page .mmi-fire .mmi-fire-core{transform-box:fill-box;transform-origin:50% 100%}
.mmi-page .mmi-fire .mmi-fire-halo{opacity:.8}
.mmi-page .mmi-fire .mmi-fire-shade{display:none}
.mmi-page .mmi-fire .mmi-fire-ember{display:none;opacity:0;transform-box:fill-box;transform-origin:50% 50%}

/* ---- inline: flame, then the pill tucked under its belly ------------------
   The pill starts under the flame's right flank (left flank in Arabic, where
   the flame comes first from the right), so flame and number read as one
   sticker. The dark rim keeps the overlap crisp. The fill is the builder's
   step-number gradient, so the badge belongs to the site; white on it holds
   at least 5.7:1 everywhere along the gradient. */
.mmi-page .mmi-fire--inline .mmi-fire-flame{z-index:1}
.mmi-page .mmi-fire--inline .mmi-fire-pct{
  position:relative;
  margin-inline-start:calc(var(--fire-h) * -.24);
  padding-block:0 .07em;
  padding-inline:calc(6px + var(--fire-h) * .24) 7px;
  min-height:calc(var(--fire-h) * .78);
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(135deg,#5A25B0 0%,#8E23B6 52%,#B11FB0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 14px -7px rgba(217,47,196,.9);
  text-shadow:none;
}
/* Cairo's digits sit .03em low in a line-height:1 box; the .07em of bottom
   padding above lifts them back to the middle. (text-box trimming would be
   exact, but it does not apply to a flex container, which the pill is.) */

/* ---- corner: dark figure on the white-hot belly --------------------------
   The number sits on the core and the inner flame, both bright, so it is
   dark ink (about 12:1 on the cyan, 19:1 on the core) rather than white with
   a shadow ring. The button colour never touches the digits: the magenta
   ring and the dark rim sit between them. */
.mmi-page .mmi-fire--corner .mmi-fire-halo{display:none}
.mmi-page .mmi-fire--corner .mmi-fire-shade{display:inline;opacity:.85}
.mmi-page .mmi-fire--corner .mmi-fire-num{
  top:var(--fire-num-top,72.4%);
  transform:translateY(calc(-50% - .03em));
  color:#0B0716;letter-spacing:-.03em;
  text-shadow:none;
}
.mmi-page .mmi-fire--corner .mmi-fire-num small{
  font-size:.72em;line-height:0;vertical-align:.26em;margin-left:.02em;
}
@supports (text-box:trim-both cap alphabetic){
  .mmi-page .mmi-fire--corner .mmi-fire-num{transform:translateY(-50%);text-box:trim-both cap alphabetic}
}

/* ---- mark: the flame alone gets its sparks --------------------------------
   Sparks would be sub-pixel specks beside a 20px name and would drift over
   the hero copy above a corner badge, so only the decorative mark has them. */
.mmi-page .mmi-fire--mark .mmi-fire-ember{display:inline}

/* ---- motion ---------------------------------------------------------------
   --mmi-fire-t is a per-flame negative delay printed on the svg, so badges on
   one page never breathe in step. */
@media (prefers-reduced-motion:no-preference){
  .mmi-page .mmi-fire .mmi-fire-body{animation:mmiFireSway 3.7s cubic-bezier(.45,0,.55,1) var(--mmi-fire-t,0s) infinite}
  .mmi-page .mmi-fire .mmi-fire-mid{animation:mmiFireLick 2.3s cubic-bezier(.45,0,.55,1) var(--mmi-fire-t,0s) infinite}
  .mmi-page .mmi-fire .mmi-fire-core{animation:mmiFireCore 1.7s cubic-bezier(.45,0,.55,1) var(--mmi-fire-t,0s) infinite}
  .mmi-page .mmi-fire .mmi-fire-gloss{animation:mmiFireGloss 4.3s cubic-bezier(.45,0,.55,1) var(--mmi-fire-t,0s) infinite}
  .mmi-page .mmi-fire .mmi-fire-halo{animation:mmiFireHalo 5.9s cubic-bezier(.45,0,.55,1) var(--mmi-fire-t,0s) infinite}
  .mmi-page .mmi-fire .mmi-fire-ember{animation:mmiFireEmber 3.1s cubic-bezier(.4,0,.6,1) calc(var(--mmi-fire-t,0s) - .8s) infinite}
  .mmi-page .mmi-fire .mmi-fire-ember--2{animation-name:mmiFireEmber2;animation-duration:5.3s;animation-delay:calc(var(--mmi-fire-t,0s) - 2.9s)}
}

/* Off screen (mmi-deals.js): hold the pose, resume from it. */
.mmi-page .mmi-fire.is-idle .mmi-fire-body,
.mmi-page .mmi-fire.is-idle .mmi-fire-mid,
.mmi-page .mmi-fire.is-idle .mmi-fire-core,
.mmi-page .mmi-fire.is-idle .mmi-fire-gloss,
.mmi-page .mmi-fire.is-idle .mmi-fire-halo,
.mmi-page .mmi-fire.is-idle .mmi-fire-ember{animation-play-state:paused}

/* Reduced motion, or .is-static to force it: the resting pose is the drawing
   itself — upright, gloss at half strength, glow steady, no sparks. */
.mmi-page .mmi-fire.is-static .mmi-fire-body,
.mmi-page .mmi-fire.is-static .mmi-fire-mid,
.mmi-page .mmi-fire.is-static .mmi-fire-core,
.mmi-page .mmi-fire.is-static .mmi-fire-gloss,
.mmi-page .mmi-fire.is-static .mmi-fire-halo,
.mmi-page .mmi-fire.is-static .mmi-fire-ember{animation:none}
@media (prefers-reduced-motion:reduce){
  .mmi-page .mmi-fire .mmi-fire-body,
  .mmi-page .mmi-fire .mmi-fire-mid,
  .mmi-page .mmi-fire .mmi-fire-core,
  .mmi-page .mmi-fire .mmi-fire-gloss,
  .mmi-page .mmi-fire .mmi-fire-halo,
  .mmi-page .mmi-fire .mmi-fire-ember{animation:none}
}

/* The body leans from its base: tip travels about 1.8 units, the base none. */
@keyframes mmiFireSway{
  0%,100%{transform:skewX(-1.6deg) scale(1,1)}
  29%{transform:skewX(1.5deg) scale(.985,1.035)}
  52%{transform:skewX(-.7deg) scale(1.006,.992)}
  77%{transform:skewX(2.1deg) scale(.99,1.025)}
}
/* The inner flame bobs up and stretches, leaning against the body. */
@keyframes mmiFireLick{
  0%,100%{transform:translate(0px,0px) skewX(.4deg) scale(1,1)}
  33%{transform:translate(0px,-.6px) skewX(-.8deg) scale(.982,1.05)}
  58%{transform:translate(0px,-.12px) skewX(.9deg) scale(1.008,1.004)}
  81%{transform:translate(0px,-.75px) skewX(-.6deg) scale(.986,1.056)}
}
/* The core breathes: taller and narrower, then settles. */
@keyframes mmiFireCore{
  0%,100%{transform:translate(0px,0px) scale(1,1)}
  36%{transform:translate(0px,-.5px) scale(.955,1.09)}
  63%{transform:translate(0px,.1px) scale(1.02,.985)}
  84%{transform:translate(0px,-.35px) scale(.97,1.06)}
}
@keyframes mmiFireGloss{
  0%,100%{opacity:.38}
  31%{opacity:.78}
  57%{opacity:.5}
  80%{opacity:.7}
}
@keyframes mmiFireHalo{
  0%,100%{opacity:.72}
  34%{opacity:1}
  61%{opacity:.8}
  83%{opacity:.95}
}
/* A spark lifts off a tongue tip and fades out by 64%; the rest of the loop
   it travels home invisible, so the loop starts and ends on the same pose. */
@keyframes mmiFireEmber{
  0%,100%{opacity:0;transform:translate(0px,0px) scale(1)}
  16%{opacity:1}
  64%{opacity:0;transform:translate(1.2px,-13px) scale(.4)}
}
@keyframes mmiFireEmber2{
  0%,100%{opacity:0;transform:translate(0px,0px) scale(1)}
  18%{opacity:.9}
  66%{opacity:0;transform:translate(-1.4px,-11px) scale(.45)}
}
/* @mmi-fire:end */


/* ---- 3. The fire badge: resting ----------------------------------------
   Off screen (mmi-deals.js) the flame holds its pose; under reduced motion it
   never moves at all. Both are written against every descendant so they keep
   working whatever the drawing above names its parts. */
.mmi-page .mmi-fire.is-idle *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .mmi-page .mmi-fire *{animation:none!important;transition:none!important}
}


/* ---- 4. The price: no deal ----------------------------------------------
   The wrapper and the current-price span take no box, so the dollar and
   dinar elements behave as direct children of whatever held the price before
   and pick up that container's existing rules. The combo size has no older
   container and styles itself (section 7). */
.mmi-page .mmi-price:not(.is-deal):not(.mmi-price--combo),
.mmi-page .mmi-price:not(.is-deal):not(.mmi-price--combo)>.mmi-price-now{display:contents}
.mmi-page .mmi-price [hidden]{display:none!important}


/* ---- 5. The price: was → now ---------------------------------------------
   The wrapper lays the two prices out left to right on its own terms, then
   Arabic reverses the row. Doing it this way rather than inheriting the
   container's direction matters: the builder's .option-price is forced to
   direction:ltr in both languages, and would otherwise put the old price on
   the wrong side on the Arabic site. Long figures wrap the new price under
   the old one instead of overflowing a narrow card. */
/* No size variables here: this rule outranks the size classes in section 6,
   so declaring them here silently turned every size into the card size.
   The card values survive as the fallbacks where the variables are read. */
.mmi-page .mmi-price.is-deal{
  display:inline-flex;flex-wrap:wrap;align-items:var(--deal-align,flex-end);
  column-gap:var(--deal-gap,10px);row-gap:2px;
  max-width:100%;min-width:0;vertical-align:bottom;
  direction:ltr;unicode-bidi:isolate;line-height:1.1;white-space:nowrap;
}
[dir="rtl"] .mmi-page .mmi-price.is-deal{flex-direction:row-reverse}

.mmi-page .mmi-price.is-deal>.mmi-price-was,
.mmi-page .mmi-price.is-deal>.mmi-price-now{
  position:relative;display:inline-grid;align-content:end;
  justify-items:var(--deal-justify,start);row-gap:var(--deal-line-gap,2px);
  min-width:0;margin:0;color:inherit;font-style:normal;text-decoration:none;
}
[dir="rtl"] .mmi-page .mmi-price.is-deal>.mmi-price-was,
[dir="rtl"] .mmi-page .mmi-price.is-deal>.mmi-price-now{justify-items:var(--deal-justify-rtl,end)}
/* The old price centres its two lines in both languages. The stroke crosses
   the dinar line on its left half; a shorter dinar pushed to the right edge
   (Arabic) slipped out from under it on wide figures such as $1,310.00. */
.mmi-page .mmi-price.is-deal>.mmi-price-was,
[dir="rtl"] .mmi-page .mmi-price.is-deal>.mmi-price-was{justify-items:var(--deal-was-justify,center)}

.mmi-page .mmi-price.is-deal .mmi-price-usd,
.mmi-page .mmi-price.is-deal .mmi-price-lyd{
  display:block;margin:0;font-style:normal;line-height:1.1;letter-spacing:0;
  text-align:inherit;text-transform:none;white-space:nowrap;
}

/* Old: muted white, both lines. */
.mmi-page .mmi-price.is-deal>.mmi-price-was .mmi-price-usd{color:var(--deal-was-color);font-size:var(--deal-was,14px);font-weight:800}
.mmi-page .mmi-price.is-deal>.mmi-price-was .mmi-price-lyd{color:var(--deal-was-color);font-size:var(--deal-was-lyd,10px);font-weight:750}

/* The red stroke: one line from the bottom-left corner of the old price to
   its top-right corner, the way the owner drew it on the English card and
   on the Arabic builder — through the dollar line and the dinar line both.
   A fixed rotation cannot do that: it runs through the gap between the two
   lines, and in Arabic, where the dinar sits under the right end, it missed
   the dinar entirely (measured in QA, 2026-09-14). A gradient band laid
   corner to corner follows whatever width the figures have, so the slope
   adapts and both lines are always crossed. The band's 50% line joins the
   bottom-left and top-right corners ("to top left" puts it there); a dark
   band under it keeps it off the digits, a static drop-shadow gives the
   faint red glow. Same slope in both languages. */
.mmi-page .mmi-price.is-deal>.mmi-price-was::after{
  content:"";position:absolute;inset:-2px -4px;pointer-events:none;
  background:
    linear-gradient(to top left,transparent calc(50% - var(--deal-strike-width) / 2 - .8px),var(--deal-red) calc(50% - var(--deal-strike-width) / 2),var(--deal-red) calc(50% + var(--deal-strike-width) / 2),transparent calc(50% + var(--deal-strike-width) / 2 + .8px)),
    linear-gradient(to top left,transparent calc(50% - var(--deal-strike-width) / 2 - 2px),rgba(7,7,13,.5) calc(50% - var(--deal-strike-width) / 2 - 1px),rgba(7,7,13,.5) calc(50% + var(--deal-strike-width) / 2 + 1px),transparent calc(50% + var(--deal-strike-width) / 2 + 2px));
  filter:drop-shadow(0 0 3px rgba(255,77,94,.5));
}

/* New: neon blue with a soft glow, the dinar a step lighter. */
.mmi-page .mmi-price.is-deal>.mmi-price-now .mmi-price-usd{
  color:var(--deal-now-color);font-size:var(--deal-now,22px);font-weight:900;
  text-shadow:0 0 14px var(--deal-now-glow),0 0 3px var(--deal-now-glow);
}
.mmi-page .mmi-price.is-deal>.mmi-price-now .mmi-price-lyd{
  color:var(--deal-now-lyd-color);font-size:var(--deal-now-lyd,11.5px);font-weight:850;
  text-shadow:0 0 10px rgba(111,234,242,.3);
}


/* ---- 6. The price: sizes ------------------------------------------------
   Starting points matched to the places each size replaces; a feature tunes
   them in its own section by setting the same properties. */
.mmi-page .mmi-price--card{--deal-now:22px;--deal-now-lyd:11.5px;--deal-was:14px;--deal-was-lyd:10px;--deal-gap:10px}
.mmi-page .mmi-price--detail{--deal-now:31px;--deal-now-lyd:13px;--deal-was:18px;--deal-was-lyd:11.5px;--deal-gap:16px}
.mmi-page .mmi-price--option{--deal-now:11px;--deal-now-lyd:11px;--deal-was:9.5px;--deal-was-lyd:9px;--deal-gap:9px;--deal-line-gap:3px}
.mmi-page .mmi-price--summary{--deal-now:26px;--deal-now-lyd:11px;--deal-was:14px;--deal-was-lyd:10px;--deal-gap:12px}
.mmi-page .mmi-price--total{--deal-now:19px;--deal-now-lyd:11px;--deal-was:12px;--deal-was-lyd:9.5px;--deal-gap:9px}
.mmi-page .mmi-price--combo{--deal-now:28px;--deal-now-lyd:13px;--deal-was:16px;--deal-was-lyd:11px;--deal-gap:14px}

@media (max-width:620px){
  .mmi-page .mmi-price--card{--deal-now:17px;--deal-now-lyd:10.5px;--deal-was:12px;--deal-was-lyd:9.5px;--deal-gap:7px}
  .mmi-page .mmi-price--detail{--deal-now:27px;--deal-now-lyd:12px;--deal-was:16px;--deal-was-lyd:10.5px;--deal-gap:12px}
  .mmi-page .mmi-price--option{--deal-now:11px;--deal-now-lyd:10.5px;--deal-was:9.5px;--deal-was-lyd:9px;--deal-gap:7px}
  .mmi-page .mmi-price--summary{--deal-now:22px;--deal-now-lyd:10.5px;--deal-was:13px;--deal-was-lyd:9.5px;--deal-gap:10px}
  .mmi-page .mmi-price--combo{--deal-now:24px;--deal-now-lyd:12px;--deal-was:14px;--deal-was-lyd:10.5px;--deal-gap:11px}
}


/* ---- 7. The price: the combo size without a deal ------------------------
   The combos page has no older price container to inherit from. */
.mmi-page .mmi-price--combo:not(.is-deal){display:inline-grid;row-gap:3px;line-height:1.1}
.mmi-page .mmi-price--combo:not(.is-deal)>.mmi-price-now{display:contents}
.mmi-page .mmi-price--combo:not(.is-deal) .mmi-price-usd{display:block;color:#fff;font-size:var(--deal-now);font-weight:900}
.mmi-page .mmi-price--combo:not(.is-deal) .mmi-price-lyd{display:block;color:var(--muted);font-size:var(--deal-now-lyd);font-style:normal;font-weight:800}


/* ---- 8. The price inside the builder's total ----------------------------
   .build-total places its parts with child selectors (">span", ">em"). A
   wrapper in between would let ">span" stretch the price over the label's
   rows and lose ">em"'s colour, so both are restated for the price. */
.mmi-page .build-total>.mmi-price.is-deal{grid-column:2;grid-row:1/3;justify-self:end;align-self:end}
.mmi-page .build-total .mmi-price:not(.is-deal) .mmi-price-lyd{font-style:normal;color:var(--cyan);font-size:11px;text-align:end}


/* ==== PREBUILT SALE ==== */
/* The prebuilt sale (page-mmi-prebuilt.php). Only a build on sale prints
   these classes — .pbs-title on its name, .pbs-foot on its card foot,
   .pbs-purchase around the detail price — so a build without a sale keeps
   its old markup and never meets a rule below.

   The name, then the flame, where the owner drew it beside MELLOW
   (sale.png). The flame is the point of the badge, so it stands taller than
   the name's capitals; when a long family name leaves no room the badge
   drops under the name rather than squeezing it. */
.mmi-page .pb-card-body h3.pbs-title{display:flex;flex-wrap:wrap;align-items:center;column-gap:9px;row-gap:4px}
.mmi-page .pb-card-body h3.pbs-title>a{min-width:0;overflow-wrap:anywhere}
.mmi-page .pb-card-body h3.pbs-title>.mmi-fire{--fire-h:30px;--fire-pct-size:13.5px}

.mmi-page .pb-purchase-panel h1.pbs-title{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:8px}
.mmi-page .pb-purchase-panel h1.pbs-title>.pbs-name{min-width:0;overflow-wrap:anywhere}
.mmi-page .pb-purchase-panel h1.pbs-title>.mmi-fire{--fire-h:50px;--fire-pct-size:21px}

/* The saving, spelled out once under the detail price. */
.mmi-page .pbs-purchase .pbs-save{
  display:block;width:fit-content;max-width:100%;margin:11px 0 0;padding:5px 12px;
  border:1px solid rgba(79,216,224,.38);border-radius:99px;background:rgba(79,216,224,.08);
  color:var(--cyan-lit);font-size:11.5px;font-weight:900;line-height:1.3;letter-spacing:.02em;
}

/* The card foot (sale 2.jpeg): old price, new price, then the + button.
   Today's foot is one row of price and button, and the compare wrapped under
   itself in it on a phone (measured by the foundation QA). The foot's own
   width decides instead of the viewport, because the same card is ~505px
   wide at 1280, ~265px on a tablet and ~140px in the two-column phone grid:
   the foot is a size container and the figures step down to fit beside the
   button. Widths assume the widest figures on the page ("$2,469.00"), at
   5.5em each, plus the 42-45px button and its 10px gap. Below 210px two
   legible prices and a button cannot share one row, so the compare stands
   old-over-new, deliberately, still beside the button. Browsers without
   container queries keep the foundation's card sizes and wrapping. */
.mmi-page .pb-card-foot.pbs-foot{container:pbs-foot/inline-size}

@container pbs-foot (min-width:360px){
  .mmi-page .pbs-foot .mmi-price{--deal-now:25px;--deal-now-lyd:12px;--deal-was:15px;--deal-was-lyd:10.5px;--deal-gap:12px}
}
@container pbs-foot (min-width:260px) and (max-width:359.98px){
  .mmi-page .pbs-foot .mmi-price{--deal-now:20px;--deal-now-lyd:11px;--deal-was:13px;--deal-was-lyd:9.5px;--deal-gap:9px}
}
@container pbs-foot (min-width:210px) and (max-width:259.98px){
  .mmi-page .pbs-foot .mmi-price{--deal-now:16px;--deal-now-lyd:10px;--deal-was:11px;--deal-was-lyd:9px;--deal-gap:7px}
}
@container pbs-foot (max-width:209.98px){
  .mmi-page .pbs-foot .mmi-price{--deal-now:15px;--deal-now-lyd:9.5px;--deal-was:11px;--deal-was-lyd:8.5px}
  .mmi-page .pbs-foot .mmi-price.is-deal{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;row-gap:4px}
  [dir="rtl"] .mmi-page .pbs-foot .mmi-price.is-deal{flex-direction:column;align-items:flex-end}
}

@media (max-width:640px){
  .mmi-page .pb-card-body h3.pbs-title{column-gap:6px;row-gap:3px}
  .mmi-page .pb-card-body h3.pbs-title>.mmi-fire{--fire-h:22px;--fire-pct-size:10.5px}
  .mmi-page .pb-purchase-panel h1.pbs-title{column-gap:12px}
  .mmi-page .pb-purchase-panel h1.pbs-title>.mmi-fire{--fire-h:38px;--fire-pct-size:16px}
  .mmi-page .pbs-purchase .pbs-save{font-size:10.5px}
}
/* ==== END PREBUILT SALE ==== */


/* ==== BUILDER DISCOUNT ==== */
/* The builder discount (inc/mmi-builder-discount.php, 2026-09).

   Step headers. The owner circled the empty space between a step's title and
   its chevron. Dropped into the header's existing grid the badge took a
   column that was not there and wrapped the row (the chevron fell to a second
   line, measured by the flame judge at 1280 and 375 in both languages), so a
   header with a deal gets one more column, right there. .has-deal is printed
   only on a discounted stage; every other header keeps the grid it had. The
   grid runs in the document's direction, so Arabic mirrors by itself: badge
   left of the title, beside the chevron, as drawn.

   The flame leads: it is bigger here than the shared inline default so the
   discount reads at a glance next to a 12px title. */
.mmi-page .build-step.has-deal>summary{grid-template-columns:34px 48px minmax(120px,1fr) auto minmax(100px,.7fr) 25px}
.mmi-page .step-deal{display:flex;align-items:center;justify-content:center;min-width:0;line-height:1}
.mmi-page .step-deal .mmi-fire{--fire-h:30px;--fire-pct-size:13px}

/* A locked stage dims its header to 40%. The discount is the reason to keep
   going, so it stays readable there. */
.mmi-page .build-step.is-locked>summary>.step-deal{opacity:.85}

@media (max-width:1000px){
  .mmi-page .build-step.has-deal>summary{grid-template-columns:31px 44px minmax(0,1fr) auto minmax(0,.55fr) 20px}
  .mmi-page .step-deal .mmi-fire{--fire-h:27px;--fire-pct-size:12px}
}

/* Phone: the chosen part already moves under the title (mmi-home.css), so the
   badge takes the title row's spare space and the chevron keeps the edge. */
@media (max-width:620px){
  .mmi-page .build-step.has-deal>summary{grid-template-columns:31px 40px minmax(0,1fr) auto 20px}
  .mmi-page .build-step.has-deal>summary>.step-deal{grid-column:4;grid-row:1}
  .mmi-page .build-step.has-deal>summary>.step-selected{grid-column:3/6}
  .mmi-page .build-step.has-deal>summary>.step-chevron{grid-column:5;grid-row:1}
  .mmi-page .step-deal .mmi-fire{--fire-h:26px;--fire-pct-size:12px}
}

/* Options: the old price crossed out beside the new one (build sale 2), a
   step larger than the plain 11px price so the new figure leads. */
.mmi-page .option-price>.mmi-price.is-deal{--deal-now:12.5px;--deal-now-lyd:11px;--deal-was:10px;--deal-was-lyd:9.5px;--deal-gap:10px}

/* Between 621 and 800px the options sit two to a row in a full-width panel
   and the price column is at its narrowest, so the two prices stack there
   (old above new) rather than squeezing the part name. */
@media (min-width:621px) and (max-width:800px){
  .mmi-page .option-price>.mmi-price.is-deal,
  [dir="rtl"] .mmi-page .option-price>.mmi-price.is-deal{flex-direction:column;align-items:flex-end;row-gap:3px}
}

/* The saving under the total, filled by mmi-builder.js. */
.mmi-page .build-saving{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:2px 6px;
  margin:9px 0 0;padding:6px 9px;border:1px solid rgba(79,216,224,.24);border-radius:8px;
  background:rgba(79,216,224,.06);color:var(--cyan-lit);font-size:10.5px;font-weight:800;line-height:1.35;text-align:end;
}
.mmi-page .build-saving[hidden]{display:none}
.mmi-page .build-saving b{display:inline;color:var(--cyan);font-size:inherit;font-weight:900}
.mmi-page .build-saving small{display:inline;margin:0;color:var(--muted);font-size:10px;font-weight:700}
/* ==== END BUILDER DISCOUNT ==== */


/* ==== HOME HERO ==== */
/* Combo Deals, the fourth hero action. Neon green, lit exactly the way the
   cyan and amber buttons beside it are: dark label, a three-stop sweep, and a
   coloured under-glow that deepens on hover. */
.mmi-page .btn-4{
  color:#04150a;
  border-color:rgba(57,255,106,.55);
  background:linear-gradient(118deg,#12b457 0%,#39FF6A 52%,#b8ffc9 100%);
  box-shadow:0 12px 30px -18px rgba(57,255,106,.95),inset 0 1px 0 rgba(255,255,255,.3);
}
.mmi-page .btn-4:hover{
  color:#04150a;
  box-shadow:0 20px 40px -18px rgba(57,255,106,1),inset 0 1px 0 rgba(255,255,255,.4);
}

/* A button wearing a corner flame. .btn clips its travelling sheen with
   overflow:hidden, which would also cut the flame hanging off the corner, so
   only these buttons let go of the clip and the sheen moves into .btn-clip — an
   inner layer in the button's own shape that does the clipping instead. The
   lift, the press, the focus ring and the flame all stay on the button, so the
   flame rides along. Every other .btn on the site is untouched. */
.mmi-page .btn.has-fire{overflow:visible}
.mmi-page .btn.has-fire::after{display:none}
.mmi-page .btn-clip{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none;
}
.mmi-page .btn-clip::after{
  content:"";position:absolute;top:0;bottom:0;width:45%;
  inset-inline-start:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);opacity:0;
}
[dir="rtl"] .mmi-page .btn-clip::after{transform:skewX(18deg)}
.mmi-page .btn.has-fire:hover .btn-clip::after,
.mmi-page .btn.has-fire:focus-visible .btn-clip::after{
  animation:mmiSheen .72s cubic-bezier(.25,.6,.3,1) forwards}

/* A flame stands half above its button and hangs about 15px past the corner,
   so a wrapped second row needs a taller gap and the next button along keeps
   clear of it. Only when a flame is actually showing. */
.mmi-page .hero .btns.has-fires{column-gap:20px;row-gap:26px}

/* Phone: four offers make a clean 2×2 grid, so Prebuilt no longer takes the
   whole row the way it did when it was the odd third button. The 14px column
   gap is wider than a phone flame's overhang (about 13px), and the overhang
   past the right-hand column stays inside the wrap's side padding. */
@media (max-width:640px){
  .mmi-page .hero .btns{display:grid;grid-template-columns:1fr 1fr}
  .mmi-page .hero .btns .btn-3{grid-column:auto}
  .mmi-page .hero .btns.has-fires{gap:26px 14px}
}
/* The wrap's padding drops to 14px here; pull the flame in so it keeps a margin. */
@media (max-width:370px){
  .mmi-page .hero .btn.has-fire>.mmi-fire--corner{--fire-x:34%}
}

@media (prefers-reduced-motion:reduce){
  .mmi-page .btn-clip::after{display:none}
}

/* Six links now share the white bar with the search. Below 1001px they move
   into the burger menu; between 1001 and 1280px the row is tightened just
   enough that the search keeps its width and no label breaks onto two lines.
   Every link stays. */
@media (min-width:1001px) and (max-width:1280px){
  .mmi-page .nav-links{gap:14px;font-size:13px}
}
@media (min-width:1001px) and (max-width:1120px){
  .mmi-page .nav-links{gap:9px;font-size:12px}
}
/* ==== END HOME HERO ==== */


/* ==== CHECKOUT ==== */
/* A discounted basket line: the old line total struck beside the new one. It
   stands where the plain line total stood (12-15px), so it is sized to that
   rather than to the builder option whose markup it borrows. On a narrow row
   the new price drops under the old one instead of pushing the stepper. */
.mmi-page .checkout-item-copy>.mmi-price.is-deal{--deal-now:14px;--deal-now-lyd:10px;--deal-was:11px;--deal-was-lyd:9px;--deal-gap:9px;--deal-line-gap:2px}
@media (max-width:620px){
  .mmi-page .checkout-item-copy>.mmi-price.is-deal{--deal-now:15px;--deal-now-lyd:10.5px;--deal-was:11.5px;--deal-was-lyd:9.5px;--deal-gap:8px}
}

/* The order summary's one saving line, above the total. The sentence and the
   dinar figure never break inside themselves; in a narrow aside the dinar
   figure moves under the sentence as a whole. */
.mmi-page .summary-save{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:3px 10px;
  margin:12px 0 0;padding:8px 11px;border:1px solid rgba(79,216,224,.24);border-radius:9px;
  background:rgba(79,216,224,.06);line-height:1.35;
}
.mmi-page .summary-save b{color:var(--cyan-lit);font-size:11.5px;font-weight:900;white-space:nowrap}
.mmi-page .summary-save bdi{color:var(--cyan)}
.mmi-page .summary-save small{color:var(--muted);font-size:10.5px;font-weight:750;white-space:nowrap}
@media (max-width:620px){
  .mmi-page .summary-save b{font-size:13px}
  .mmi-page .summary-save small{font-size:11.5px}
}
/* ==== END CHECKOUT ==== */