/* Martoo loader — خلفية جردينت بألوان البراند — العناصر الأمامية بيضاء عبر --primary */
html:not(.js) #martoo-loader { display: none !important; }
#martoo-loader {
  --primary: #FFFFFF;
  --brand: #3C1D3E; --brand-2: #6A1B54; --magenta: #CC3E8A;
  --ink: #FFFFFF;
  --muted: rgba(255,255,255,.82); --prod-line: #E4D6E3;
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 52%, var(--magenta) 135%);
  direction: rtl;
  font-family: 'Cairo', system-ui, Tahoma, sans-serif;
  transition: opacity .5s ease, visibility .5s ease;
  animation: mlSafe .6s ease 6.5s both;
}
#martoo-loader.go-fade { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes mlSafe { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@media (prefers-color-scheme: dark) {
  #martoo-loader { --primary: #FFFFFF; --ink: #FFFFFF;
    --muted: rgba(255,255,255,.82); --prod-line: #C9AEC7;
    background: linear-gradient(135deg, #241026 0%, var(--brand) 45%, var(--brand-2) 75%, var(--magenta) 140%); }
}
.ml-inner { display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 24px; width: min(340px, 88vw); }
.ml-logo { display: flex; align-items: center; gap: 9px; color: var(--primary); }
.ml-mark { width: 34px; height: 34px; border-radius: 11px; background: var(--primary);
  display: inline-grid; place-items: center;
  box-shadow: 0 6px 16px rgba(60,29,62,.22); }
.ml-mark svg { width: 21px; height: 21px; display: block; }
.ml-logo b { font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: .5px; }
.ml-stage { position: relative; width: min(260px,72vw); height: 198px; margin-top: 4px; }
.ml-move { position: absolute; inset: 0; }
#martoo-loader.go-drive .ml-move { animation: mlDrive .48s cubic-bezier(.55,.06,.75,.4) both; }
@keyframes mlDrive {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-58vw) skewX(-10deg); opacity: 0; } }
.ml-slide { position: absolute; bottom: 4px; left: 50%;
  width: 172px; margin-left: -86px; z-index: 2;
  animation: mlIn .62s cubic-bezier(.2,1.35,.35,1) .05s both; }
@keyframes mlIn {
  0% { opacity: 0; transform: translateX(-52vw); }
  60% { opacity: 1; transform: translateX(12px); }
  78% { transform: translateX(-7px); }
  100% { opacity: 1; transform: translateX(0); } }
.ml-squash { transform-origin: 50% 88%; }
.ml-squash.is-squash { animation: mlSquash .26s ease; }
@keyframes mlSquash {
  0% { transform: scale(1,1); } 35% { transform: scale(1.1,.86); }
  65% { transform: scale(.95,1.06); } 100% { transform: scale(1,1); } }
#martoo-loader.go-hold .ml-squash { animation: mlHold 1s ease-in-out infinite; }
@keyframes mlHold { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ml-prods { position: absolute; top: 0; left: 50%; width: 0; height: 0; z-index: 1; }
.ml-p { position: absolute; top: 0; left: 0; width: 38px; margin-left: -19px;
  opacity: 0; animation: mlDrop .44s cubic-bezier(.3,1.25,.4,1) both;
  filter: drop-shadow(0 6px 10px rgba(60,29,62,.18)); }
.ml-p svg { display: block; width: 100%; height: auto; }
.ml-p.p1 { --x: -46px; --y: 84px; animation-delay: .45s; }
.ml-p.p2 { --x: 32px; --y: 86px; animation-delay: .8s; }
.ml-p.p3 { --x: -8px; --y: 74px; animation-delay: 1.15s; width: 32px; margin-left: -16px; }
.ml-p.p4 { --x: -28px; --y: 96px; animation-delay: 1.45s; }
.ml-p.p5 { --x: 14px; --y: 98px; animation-delay: 1.72s; width: 32px; margin-left: -16px; }
@keyframes mlDrop {
  0% { opacity: 0; transform: translate(var(--x),-112px) scale(.85); }
  18% { opacity: 1; }
  72% { opacity: 1; transform: translate(var(--x),var(--y)) scale(1); }
  84% { transform: translate(var(--x),calc(var(--y) - 12px)) scale(1.03,.97); }
  100% { opacity: 1; transform: translate(var(--x),var(--y)) scale(1); } }
.ml-burst { position: absolute; bottom: 78px; left: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.ml-sp { position: absolute; top: 0; left: 0; width: 8px; height: 8px; margin: -4px;
  background: var(--primary); opacity: 0; }
.ml-sp.c { border-radius: 50%; } .ml-sp.s { border-radius: 2.5px; }
.ml-sp.big { width: 11px; height: 11px; margin: -5.5px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); }
#martoo-loader.go-burst .ml-sp { animation: mlBurst .65s cubic-bezier(.2,.9,.3,1) both; animation-delay: var(--d,0s); }
@keyframes mlBurst {
  0% { opacity: 1; transform: translate(0,0) scale(.5) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--bx),var(--by)) scale(1.1) rotate(140deg); } }
.ml-whoosh { position: absolute; bottom: 52px; left: 0; right: 0; height: 34px; z-index: 1; pointer-events: none; }
.ml-whoosh i { position: absolute; right: 8px; height: 6px; border-radius: 99px;
  background: var(--primary); opacity: 0; }
.ml-whoosh i:nth-child(1) { top: 0; width: 74px; }
.ml-whoosh i:nth-child(2) { top: 13px; width: 56px; right: 22px; }
.ml-whoosh i:nth-child(3) { top: 26px; width: 66px; right: 12px; }
#martoo-loader.go-drive .ml-whoosh i { animation: mlWhoosh .45s ease both; }
#martoo-loader.go-drive .ml-whoosh i:nth-child(2) { animation-delay: .04s; }
#martoo-loader.go-drive .ml-whoosh i:nth-child(3) { animation-delay: .08s; }
@keyframes mlWhoosh {
  0% { opacity: 0; transform: translateX(44px) scaleX(.4); }
  30% { opacity: .45; }
  100% { opacity: 0; transform: translateX(-130px) scaleX(1.25); } }
.ml-pct { margin-top: 2px; font-size: 30px; font-weight: 800; line-height: 1.5;
  color: var(--primary); font-variant-numeric: tabular-nums; }
.ml-pct b { font-weight: 800; }
.ml-tag { color: var(--primary); opacity: .78; font-weight: 700; font-size: 15px; margin-top: 1px; }
.ml-bar { display: none; width: 182px; height: 8px; border-radius: 99px;
  background: rgba(127,127,127,.25); overflow: hidden; margin-top: 14px; }
.ml-bar i { display: block; height: 100%; background: var(--primary);
  border-radius: 99px; transform: scaleX(0); transform-origin: right center; }
#martoo-loader.is-reduced .ml-stage, #martoo-loader.is-reduced .ml-whoosh { display: none !important; }
#martoo-loader.is-reduced .ml-bar { display: block !important; }
#martoo-loader.is-reduced * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #martoo-loader .ml-stage, #martoo-loader .ml-whoosh { display: none !important; }
  #martoo-loader .ml-bar { display: block !important; }
  #martoo-loader * { animation: none !important; } }
.ml-cart { display: block; width: 100%; height: auto; }