/* «باقات Pips» — /pricing. The approved Pricing design (topa-app-prototype,
   pricing-preview) on the site's design system: royal pure black, the site's
   Thmanyah stack, RTL, and every movement switched off under reduced motion. */
.px-body{background:#000}
.px{
  --px-bg:#000; --px-s1:#0A0B0B; --px-s2:#111313;
  --px-ink:#F5F4EF; --px-ink-2:#CFCEC7; --px-mute:#8F918C; --px-mute-2:#62645F;
  --px-line:rgba(245,244,239,.07); --px-line-2:rgba(245,244,239,.12); --px-line-3:rgba(245,244,239,.22);
  --px-green:#3DDC6F; --px-green-ink:#04140A; --px-green-text:#6FE795;
  --px-green-soft:rgba(61,220,111,.10); --px-green-line:rgba(61,220,111,.32); --px-glow:#1E9A52;
  --px-warn:#E2B45A; --px-warn-line:rgba(226,180,90,.32); --px-danger:#F0776A;
  --px-edge:inset 0 1px 0 rgba(255,255,255,.045);
  --px-r:12px; --px-r-l:16px; --px-r-xl:22px;
  --px-ease:cubic-bezier(.4,0,.2,1); --px-out:cubic-bezier(.16,1,.3,1);
  --px-gutter:18px; --px-max:1080px;
  position:relative;isolation:isolate;overflow-x:clip;
  background:var(--px-bg);color:var(--px-ink);
  font-family:var(--t-text,"thmanyah sans","IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif);
  font-size:15.5px;line-height:1.65;padding-bottom:56px
}
@media (min-width:720px){.px{--px-gutter:28px}}
.px::before{content:"";position:absolute;z-index:-1;inset-inline:0;top:-30vh;height:70vh;background:radial-gradient(closest-side,var(--px-glow),transparent);opacity:.18;filter:blur(8px);pointer-events:none}
.px *,.px *::before,.px *::after{box-sizing:border-box}
.px h1,.px h2,.px p,.px dl,.px dd,.px ol,.px ul{margin:0}
.px ol,.px ul{padding:0;list-style:none}
.px button,.px input{font:inherit;color:inherit}
.px svg{display:block;max-width:100%}
.px-num{font-variant-numeric:tabular-nums lining-nums;direction:ltr;unicode-bidi:isolate}
.px :focus-visible{outline:2px solid var(--px-green);outline-offset:3px;border-radius:6px}
.px [hidden]{display:none!important}

.px-wrap{width:100%;max-width:calc(var(--px-max) + var(--px-gutter) * 2);margin-inline:auto;padding-inline:var(--px-gutter)}
.px-card{position:relative;border-radius:var(--px-r-l);background:linear-gradient(180deg,var(--px-s2),var(--px-s1));border:1px solid var(--px-line-2);box-shadow:var(--px-edge)}
.px-card::before{content:"";position:absolute;inset-inline:18%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#1E7A4C,var(--px-green),transparent);opacity:.5;pointer-events:none}

/* motion: the hero rises on load; cards reveal as they enter (JS only) */
.px-rise{animation:px-rise 620ms var(--px-out) both;animation-delay:calc(var(--d,0) * 90ms)}
@keyframes px-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.px-js .px-reveal{opacity:0;transform:translateY(18px) scale(.985);transition:opacity 620ms var(--px-out),transform 720ms var(--px-out),border-color 240ms var(--px-ease);transition-delay:calc(var(--d,0) * 90ms)}
.px-js .px-reveal.is-in{opacity:1;transform:none}

/* hero */
.px-hero{display:grid;gap:22px;padding-top:34px;padding-bottom:6px}
.px-kicker{font-size:12.5px;color:var(--px-green-text);font-weight:500;letter-spacing:.04em}
.px-hero h1{font-family:var(--t-display,inherit);font-size:clamp(28px,7.5vw,46px);line-height:1.2;font-weight:700;margin-top:4px;text-wrap:balance}
.px-lead{color:var(--px-ink-2);font-size:16px;margin-top:10px;max-width:40ch}
.px-rate{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px;padding:9px 14px;border-radius:999px;border:1px solid var(--px-green-line);background:var(--px-green-soft);font-size:13.5px;color:var(--px-ink-2)}
.px-rate b{color:var(--px-ink);font-size:14.5px}
.px-rate__dot{width:7px;height:7px;border-radius:50%;background:var(--px-green);box-shadow:0 0 0 4px var(--px-green-soft);animation:px-pulse 2.6s ease-out infinite}
@keyframes px-pulse{0%{box-shadow:0 0 0 0 rgba(61,220,111,.45)}70%{box-shadow:0 0 0 8px rgba(61,220,111,0)}100%{box-shadow:0 0 0 0 rgba(61,220,111,0)}}
.px-hero__art{display:grid;justify-items:center;gap:10px;padding:24px 16px;border-radius:var(--px-r-xl);border:1px solid var(--px-line);background:radial-gradient(80% 90% at 50% 0%,rgba(61,220,111,.08),transparent 70%),var(--px-s1)}
.px-eq{display:flex;align-items:center;gap:14px}
.px-eq__side{display:grid;justify-items:center;min-width:92px;padding:14px 16px;border-radius:var(--px-r-l);border:1px solid var(--px-line-2);background:var(--px-s2)}
.px-eq__side--pips{border-color:var(--px-green-line);background:var(--px-green-soft);animation:px-glow 3.2s var(--px-ease) 900ms infinite}
@keyframes px-glow{0%,100%{box-shadow:0 0 0 0 rgba(61,220,111,0)}50%{box-shadow:0 0 28px -6px rgba(61,220,111,.45)}}
.px-eq__n{font-size:30px;font-weight:700;line-height:1.1}
.px-eq__side--pips .px-eq__n{color:var(--px-green-text)}
.px-eq__u{font-size:12px;color:var(--px-mute);direction:ltr}
.px-eq__arrow{width:42px;height:22px;fill:none;stroke:var(--px-mute);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:px-draw 700ms var(--px-out) 450ms forwards}
@keyframes px-draw{to{stroke-dashoffset:0}}
.px-eq__note{font-size:12.5px;color:var(--px-mute)}
@media (min-width:1000px){
  .px-hero{grid-template-columns:1.2fr 1fr;align-items:center;gap:48px;padding-top:56px;padding-bottom:16px}
  .px-hero__art{padding:40px 24px}
  .px-eq__n{font-size:38px}
}

/* «الشحن قريباً» */
.px-soon{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 16px;border-radius:var(--px-r);border:1px dashed var(--px-warn-line);color:var(--px-warn);font-size:14px}
.px-soon__dot{width:8px;height:8px;border-radius:50%;background:var(--px-warn);flex:none}

/* blocks */
.px-block{padding-top:36px}
.px-block__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.px-block__head h2{font-size:20px;font-weight:700}
.px-block__head p{font-size:13.5px;color:var(--px-mute);min-width:0;max-width:100%}

/* buttons */
.px-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--px-r);border:1px solid transparent;background:transparent;color:var(--px-ink);font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 240ms var(--px-ease),border-color 240ms var(--px-ease),transform 140ms var(--px-ease),filter 240ms var(--px-ease)}
.px-btn:active{transform:scale(.98)}
.px-btn--primary{background:var(--px-green);color:var(--px-green-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 26px -16px var(--px-glow)}
.px-btn--outline{border-color:var(--px-line-3)}
@media (hover:hover){
  .px-btn--primary:hover{filter:brightness(1.07)}
  a.px-btn--outline:hover{border-color:var(--px-green-line);background:var(--px-green-soft)}
}
.px-btn--block{width:100%}
.px-btn[aria-disabled="true"]{opacity:.5;cursor:default}
.px-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--px-bg),0 0 0 4px var(--px-green)}
.px-link{color:var(--px-green-text);text-decoration:underline;text-underline-offset:3px;font-size:14px}

/* packages */
.px-packs{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.px-packs > *,.px-split > *{min-width:0}
.px-pack{display:grid;gap:14px;padding:22px 18px 18px;transition:border-color 240ms var(--px-ease),transform 380ms var(--px-out),box-shadow 380ms var(--px-out)}
@media (hover:hover){.px-pack:hover{border-color:var(--px-green-line);transform:translateY(-3px);box-shadow:var(--px-edge),0 22px 40px -28px rgba(61,220,111,.5)}}
.px-pack--rec{border-color:var(--px-green-line);background:radial-gradient(120% 90% at 50% 0%,rgba(61,220,111,.10),transparent 60%),linear-gradient(180deg,var(--px-s2),var(--px-s1))}
.px-pack--rec::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(111,231,149,.18) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:120% 0;animation:px-sheen 5.5s var(--px-ease) 1.4s infinite}
@keyframes px-sheen{0%{background-position:120% 0}35%,100%{background-position:-120% 0}}
.px-pack__badge{position:absolute;top:-11px;inset-inline-start:18px;font-size:11.5px;font-weight:700;color:var(--px-green-ink);background:var(--px-green);padding:3px 10px;border-radius:999px;z-index:1}
.px-pack__price{display:flex;align-items:baseline;gap:6px;direction:ltr;justify-content:flex-end}
.px-pack__price b{font-size:38px;font-weight:700;line-height:1}
.px-pack__price span{font-size:14px;color:var(--px-mute)}
.px-pack__rows{display:grid;gap:8px;padding-block:12px;border-block:1px solid var(--px-line)}
.px-pack__rows div{display:flex;justify-content:space-between;font-size:14px}
.px-pack__rows dt{color:var(--px-mute)}
.px-pack__rows dd{font-weight:500}
.px-pack__rows .is-gift dd{color:var(--px-green-text)}
.px-js .px-reveal .is-gift dd{display:inline-block;transform:scale(.6);opacity:0;transition:transform 520ms var(--px-out),opacity 320ms var(--px-ease);transition-delay:calc(var(--d,0) * 90ms + 380ms)}
.px-js .px-reveal.is-in .is-gift dd{transform:none;opacity:1}
.px-pack__total{display:flex;justify-content:space-between;align-items:baseline}
.px-pack__total > span{font-size:13.5px;color:var(--px-ink-2)}
.px-pack__total b{font-size:21px;font-weight:700}
@media (min-width:720px){
  .px-packs{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:16px}
  .px-pack{padding:26px 18px 18px}
}
@media (min-width:1000px){
  .px-packs{gap:20px}
  .px-pack--rec{transform:translateY(-6px)}
  .px-js .px-reveal.px-pack--rec.is-in{transform:translateY(-6px)}
  @media (hover:hover){.px-pack--rec:hover,.px-js .px-reveal.px-pack--rec.is-in:hover{transform:translateY(-9px)}}
}

/* custom amount + how it works */
.px-split{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:720px){.px-split{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px}}
.px-custom,.px-use{padding:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.px-custom h2,.px-use h2{font-size:17px;font-weight:700}
.px-field{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.px-field__label{font-size:13.5px;color:var(--px-ink-2)}
.px-field__box{display:flex;align-items:center;border-radius:var(--px-r);border:1px solid var(--px-line-2);background:var(--px-bg);transition:border-color 240ms var(--px-ease),box-shadow 240ms var(--px-ease)}
.px-field__box:focus-within{border-color:var(--px-green-line);box-shadow:0 0 0 4px var(--px-green-soft)}
.px-field__box input{flex:1;min-width:0;width:100%;min-height:52px;padding:0 14px;border:0;background:none;outline:none;font-size:20px;font-weight:700;text-align:right}
.px-field__box input:disabled{opacity:.5}
.px-field__unit{padding-inline:14px;color:var(--px-mute);font-size:13.5px;border-inline-start:1px solid var(--px-line)}
.px input[aria-invalid="true"]{color:var(--px-danger)}
.px-hint{font-size:12.5px;color:var(--px-mute)}
.px-err{font-size:12.5px;color:var(--px-danger)}
.px-custom__out{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:var(--px-r);background:var(--px-green-soft);border:1px solid var(--px-green-line);font-size:14px}
.px-custom__out b{font-size:18px}
.px-steps{display:grid;gap:12px}
.px-steps li{display:flex;gap:12px;align-items:flex-start}
.px-steps__n{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;border:1px solid var(--px-green-line);color:var(--px-green-text)}
.px-steps b{display:block;font-size:14.5px}
.px-steps small{font-size:12.5px;color:var(--px-mute)}
.px-note{font-size:12.5px;color:var(--px-mute)}

/* faq */
.px-faq{display:grid;gap:8px}
@media (min-width:1000px){.px-faq{grid-template-columns:1fr 1fr;align-items:start}}
.px-faq details{border-radius:var(--px-r);border:1px solid var(--px-line-2);background:var(--px-s1);padding:0 16px;transition:border-color 240ms var(--px-ease)}
.px-faq details[open]{border-color:var(--px-line-3)}
.px-faq summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px;font-weight:500}
.px-faq summary::-webkit-details-marker{display:none}
.px-faq summary::after{content:"";flex:none;width:9px;height:9px;border-inline-start:1.6px solid var(--px-mute);border-bottom:1.6px solid var(--px-mute);transform:rotate(-45deg);transition:transform 240ms var(--px-ease)}
.px-faq details[open] summary::after{transform:rotate(135deg)}
.px-faq details p{font-size:14px;color:var(--px-ink-2);padding-bottom:14px}
.px-fine{margin-top:14px;font-size:12.5px;color:var(--px-mute)}

@media (prefers-reduced-motion:reduce){
  .px *,.px *::before,.px *::after{animation:none!important;transition:none!important}
  .px-rise,.px-reveal,.px-reveal .is-gift dd{opacity:1!important;transform:none!important}
  .px-eq__arrow{stroke-dashoffset:0}
}