/* ============================================================================
   pages.css — أنماط الصفحات المكمّلة (Fu Operation)          [FDX_FUOP_PAGES_CSS]
   يخدم: cart.html · checkout.html · pricing.html · how.html · login.html · contact.html
   يعتمد توكنات fuop.css ولا يعدّلها. مالك الملف: كلود (سطح الصفحات المكمّلة).
   كل ما هنا خاص بهذه الصفحات الست — المكوّن العام مكانه fuop.css.
   ========================================================================= */

/* ═════════════════ مشترك ═════════════════ */

/* الحالة الفارغة برسم من /assets/art — الصندوق نفسه من fuop.css */
.empty .art img{inline-size:60px;block-size:60px;display:block}
.empty.lg .art{inline-size:112px;block-size:112px}
.empty.lg .art img{inline-size:76px;block-size:76px}
.empty .btns{margin-block-start:var(--s2)}

/* لوح جانبي لاصق (ملخّص السلة / ملخّص الطلب) */
.side-sticky{position:sticky;inset-block-start:calc(var(--topbar) + var(--s4))}

/* شبكة عمودين: محتوى + جانب */
.two-pane{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s5);align-items:start}
.two-pane > *{min-inline-size:0}

/* شارة «نموذج توضيحي» */
.demo-note{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;
  color:var(--ink-3);background:var(--surface-2);border:1px dashed var(--line);
  padding:5px 12px;border-radius:var(--r-full)}
.demo-note .ico{inline-size:14px;block-size:14px}

/* قائمة تدقيق بعلامات (نفس روح ticks في الهبوط، معرّفة هنا لأن home.css غير محمّل) */
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.ticks li{position:relative;padding-inline-start:26px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.65}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:7px;
  inline-size:16px;block-size:16px;border-radius:50%;background:var(--brand-050);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,transparent)}
.ticks li::after{content:"";position:absolute;inset-inline-start:5px;inset-block-start:11px;
  inline-size:5px;block-size:8px;border:solid var(--brand);border-width:0 1.8px 1.8px 0;
  transform:rotate(40deg)}
.ticks.lg li{font-size:var(--fs-md);padding-block:2px}
.ticks.no li::before{background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line)}
.ticks.no li::after{inline-size:8px;block-size:8px;border:0;
  background:linear-gradient(var(--ink-4),var(--ink-4)) center/8px 1.6px no-repeat;transform:none;
  inset-block-start:11px;inset-inline-start:4px}

/* صندوق ملاحظة جانبية */
.callout{display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--surface-2);border:1px solid var(--line);border-inline-start:3px solid var(--brand);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);font-size:var(--fs-sm);
  color:var(--ink-2);line-height:1.75}
.callout .ico{color:var(--brand);flex:none;inline-size:20px;block-size:20px;margin-block-start:2px}
.callout.deep{border-inline-start-color:var(--deep)}
.callout.deep .ico{color:var(--deep)}

/* ═════════════════ التذييل (نفس تذييل الهبوط — home.css غير محمّل هنا) ═════ */
.foot{background:var(--surface-2);border-block-start:1px solid var(--line);
  padding-block:var(--s8) var(--s5);margin-block-start:var(--s8)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s6)}
.foot-grid>div{display:flex;flex-direction:column;gap:8px}
.foot-h{font-weight:700;font-size:var(--fs-sm);margin-block-end:4px}
.foot-grid a{color:var(--ink-3);font-size:var(--fs-sm);text-decoration:none}
.foot-grid a:hover{color:var(--brand)}
.foot-brand .nm-full{font-size:var(--fs-xl);font-weight:800;color:var(--ink)}
.foot-brand .nm-full em{font-style:normal;color:var(--brand)}
.foot-bar{margin-block-start:var(--s6);padding-block-start:var(--s4);
  border-block-start:1px solid var(--line);display:flex;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap}
.foot-bar a{color:var(--ink-3)}

/* ═════════════════ ① السلة — cart.html ═════════════════ */
.cart-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:var(--s4);
  padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);align-items:start}
.cart-item + .cart-item{margin-block-start:var(--s3)}
.cart-item.bad{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.ci-ico{inline-size:52px;block-size:52px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand)}
.ci-ico.seat{background:var(--deep-050);color:var(--deep)}
.ci-main{min-inline-size:0;display:flex;flex-direction:column;gap:var(--s2)}
.ci-title{font-size:var(--fs-lg);font-weight:800;color:var(--ink);line-height:1.35}
.ci-tags{display:flex;flex-wrap:wrap;gap:6px}
.ci-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ci-lines li{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
.ci-note{font-size:var(--fs-xs);color:var(--ink-3);background:var(--surface-2);
  padding:6px 10px;border-radius:var(--r-sm);align-self:flex-start;max-inline-size:100%}
.ci-controls{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;margin-block-start:var(--s2)}
.ci-controls .field{gap:4px}
.ci-controls .field>label{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}
.ci-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);text-align:end}
.ci-price{font-size:var(--fs-xl);font-weight:800;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ci-price small{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);display:block;margin-block-start:2px}
.ci-unit{font-size:var(--fs-xs);color:var(--ink-3)}

.cart-sum .btn.block{margin-block-start:var(--s2)}
.coupon-row{display:flex;gap:var(--s2);align-items:stretch}
.coupon-row .input{flex:1;min-inline-size:0}
.coupon-on{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  background:var(--ok-050,var(--surface-2));border:1px solid var(--line);border-radius:var(--r);
  padding:8px 12px;font-size:var(--fs-sm)}
.cart-trust{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.cart-trust li{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
.cart-trust .ico{inline-size:15px;block-size:15px;color:var(--brand);flex:none;margin-block-start:2px}

/* ═════════════════ ② إتمام الطلب — checkout.html ═════════════════ */
.co-steps{margin-block-end:var(--s6)}
.co-pane[hidden]{display:none!important}
.co-block{display:flex;flex-direction:column;gap:var(--s5)}
.co-svc{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.co-svc-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);
  background:var(--surface-2);border-block-end:1px solid var(--line)}
.co-svc-head .t{font-weight:800;color:var(--ink);min-inline-size:0}
.co-svc-head .ico{color:var(--brand);flex:none}
.co-svc-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.co-nav{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-block-start:var(--s6);padding-block-start:var(--s5);border-block-start:1px solid var(--line)}
.co-files{display:flex;flex-direction:column;gap:var(--s2)}
.co-file{display:flex;align-items:center;gap:var(--s2)}
.co-file .input{flex:1;min-inline-size:0}
.pay-mock{border:1.5px dashed color-mix(in srgb,var(--warn) 55%,var(--line));
  border-radius:var(--r-lg);padding:var(--s5);background:color-mix(in srgb,var(--warn) 7%,var(--surface));
  display:flex;gap:var(--s3);align-items:flex-start}
.pay-mock .ico{color:var(--warn-ink,var(--warn));flex:none;inline-size:22px;block-size:22px;margin-block-start:2px}
.pay-mock .t{font-weight:800;color:var(--ink);display:block;margin-block-end:4px}
.pay-mock p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.75}
.co-done{max-inline-size:760px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);padding-block:var(--s7)}
.co-done .seal{inline-size:96px;block-size:96px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-fill);color:#fff}
.co-done .seal .ico{inline-size:46px;block-size:46px;stroke-width:2.2}
.co-ref{font-family:var(--font-mono);font-size:var(--fs-2xl);font-weight:800;color:var(--brand-ink);
  background:var(--brand-050);border-radius:var(--r);padding:8px 18px;letter-spacing:.04em}
.co-next{text-align:start;inline-size:100%;margin-block-start:var(--s3)}

/* ═════════════════ ③ الأسعار — pricing.html ═════════════════ */
.pr-hero{text-align:center;max-inline-size:70ch;margin-inline:auto;margin-block-end:var(--s7)}
.pr-model{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5)}
.pr-card{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s6) var(--s5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);position:relative}
.pr-card.hi{border-color:var(--brand);box-shadow:var(--sh-brand,var(--sh-2))}
.pr-card .p-ico{inline-size:46px;block-size:46px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand)}
.pr-card.deep .p-ico{background:var(--deep-050);color:var(--deep)}
.pr-card .p-from{font-size:var(--fs-sm);color:var(--ink-3);margin-block-start:auto;
  padding-block-start:var(--s3);border-block-start:1px solid var(--line)}
.pr-card .p-from b{font-size:var(--fs-2xl);color:var(--ink);font-weight:800;display:block;line-height:1.2}

.lvl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.lvl-card{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  display:flex;flex-direction:column;gap:var(--s2)}
.lvl-card .n{font-size:var(--fs-lg);font-weight:800}
.lvl-card .y{font-size:var(--fs-xs);color:var(--brand-ink);font-weight:700}
.lvl-card p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.75}

.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s6);align-items:start}
.calc > *{min-inline-size:0}
.calc-form{display:flex;flex-direction:column;gap:var(--s4)}
.calc-out{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);min-block-size:220px}
.calc-total{font-size:clamp(30px,4.4vw,var(--fs-4xl));font-weight:800;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.calc-total .cur{font-size:var(--fs-md);font-weight:700;color:var(--ink-2);margin-inline-start:6px}
.calc-sub{font-size:var(--fs-sm);color:var(--ink-3)}
.calc-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.calc-lines li{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.65}
.calc-lines li.disc{color:var(--ok-ink)}

.pr-table td.num,.pr-table th.num{text-align:end;font-variant-numeric:tabular-nums}
.pr-inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5)}

/* ═════════════════ ④ كيف تعمل — how.html ═════════════════ */
.hw-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s5)}
.hw-step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s6);box-shadow:var(--sh-1)}
.hw-n{inline-size:56px;block-size:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-050);border:2px solid var(--brand);color:var(--brand);
  font-weight:800;font-size:var(--fs-xl)}
.hw-body{min-inline-size:0;display:flex;flex-direction:column;gap:var(--s3)}
.hw-body h3{margin:0}
.hw-body p{color:var(--ink-2);line-height:1.85;max-inline-size:70ch}
.hw-out{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;
  color:var(--deep);background:var(--deep-050);padding:5px 12px;border-radius:var(--r-full);align-self:flex-start}
.hw-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3);
  padding-block-start:var(--s2)}
.hw-detail .d{background:var(--surface-2);border-radius:var(--r);padding:var(--s3) var(--s4)}
.hw-detail .d .k{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);display:block;margin-block-end:3px}
.hw-detail .d .v{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.65}

.hw-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5)}
.g-card{display:flex;flex-direction:column;gap:var(--s2);block-size:100%}
.g-card h3{margin-block:var(--s3) 0}
.g-card p{color:var(--ink-3);font-size:var(--fs-sm);line-height:1.8}
.g-ico{inline-size:46px;block-size:46px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand);flex:none}
.g-ico.deep{background:var(--deep-050);color:var(--deep)}
.measure-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5)}
.measure-box{padding:var(--s5);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.measure-box.no{background:var(--surface-2)}
.measure-box h3{margin-block-end:var(--s3)}

.hw-timeline{position:relative;padding-inline-start:var(--s6);margin:0;list-style:none;
  display:flex;flex-direction:column;gap:var(--s5)}
.hw-timeline::before{content:"";position:absolute;inset-block:8px 8px;inset-inline-start:7px;
  inline-size:2px;background:linear-gradient(var(--brand),var(--deep));opacity:.28}
.hw-timeline li{position:relative}
.hw-timeline li::before{content:"";position:absolute;inset-inline-start:calc(var(--s6) * -1 + 2px);
  inset-block-start:6px;inline-size:12px;block-size:12px;border-radius:50%;
  background:var(--surface);border:2.5px solid var(--brand)}
.hw-timeline .tt{font-weight:800;color:var(--ink);display:block;margin-block-end:3px}
.hw-timeline .td{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.75}
.hw-timeline .trg{font-size:var(--fs-xs);color:var(--ink-3);display:block;margin-block-start:4px}

/* ═════════════════ ⑤ الدخول — login.html ═════════════════ */
.lg-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--s8);
  align-items:center;min-block-size:66vh;padding-block:var(--s8)}
.lg-wrap > *{min-inline-size:0}
.lg-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);padding:var(--s7) var(--s6);display:flex;flex-direction:column;gap:var(--s5);
  max-inline-size:460px;inline-size:100%;margin-inline:auto}
.lg-brand{display:flex;align-items:center;gap:var(--s2);justify-content:center}
.lg-brand .mark{inline-size:34px;block-size:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--grad);color:#fff}
.lg-brand .nm{font-size:var(--fs-xl);font-weight:800}
.lg-brand .nm em{font-style:normal;color:var(--brand)}
.lg-door{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);background:var(--surface)}
.lg-door.main{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));background:var(--brand-050)}
.lg-door .dh{display:flex;align-items:center;gap:var(--s2)}
.lg-door .dh .ico{color:var(--brand);inline-size:20px;block-size:20px}
.lg-door.team .dh .ico{color:var(--deep)}
.lg-door .dt{font-weight:800;color:var(--ink)}
.lg-door p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7}
.lg-side{display:flex;flex-direction:column;gap:var(--s4);min-inline-size:0}
.lg-side .lg-pt > div,.lg-side > div{min-inline-size:0}
.lg-side .lg-pt{display:flex;gap:var(--s3);align-items:flex-start}
.lg-side .lg-pt .ico{inline-size:20px;block-size:20px;color:var(--brand);flex:none;margin-block-start:3px}
.lg-side .lg-pt .t{font-weight:700;color:var(--ink);display:block;margin-block-end:2px}
.lg-side .lg-pt p{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.7}
.lg-nopass{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-xs);color:var(--ink-3);
  line-height:1.65;background:var(--surface-2);border-radius:var(--r);padding:10px 12px}
.lg-nopass .ico{inline-size:15px;block-size:15px;flex:none;margin-block-start:2px;color:var(--ok)}

/* ═════════════════ ⑥ تواصل معنا — contact.html ═════════════════ */
.ct-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:var(--s6);align-items:start}
.ct-grid > *{min-inline-size:0}
.ct-ways{display:flex;flex-direction:column;gap:var(--s3)}
.ct-way{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.ct-way .w-ico{inline-size:40px;block-size:40px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand);flex:none}
.ct-way .w-ico.deep{background:var(--deep-050);color:var(--deep)}
.ct-way .t{font-weight:700;color:var(--ink);display:block;margin-block-end:2px}
.ct-way p{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.65}
.ct-way a{font-size:var(--fs-sm);font-weight:600}
.ct-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);
  padding:var(--s7) var(--s5)}
.ct-done .seal{inline-size:76px;block-size:76px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-fill);color:#fff}
.ct-done .seal .ico{inline-size:36px;block-size:36px;stroke-width:2.2}

/* ═════════════════ متجاوب ═════════════════ */
@media (max-width:1080px){
  .two-pane{grid-template-columns:minmax(0,1fr)}
  .side-sticky{position:static}
  .calc{grid-template-columns:minmax(0,1fr)}
  .lg-wrap{grid-template-columns:minmax(0,1fr);gap:var(--s6);padding-block:var(--s6)}
  .lg-side{order:2}
  .ct-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .cart-item{grid-template-columns:44px minmax(0,1fr)}
  .ci-ico{inline-size:44px;block-size:44px}
  .ci-side{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;
    text-align:start;padding-block-start:var(--s3);border-block-start:1px solid var(--line)}
  .hw-step{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .cart-item{padding:var(--s4)}
  .ci-controls{gap:var(--s3)}
  .co-nav .btn{flex:1}
  .foot-grid{grid-template-columns:1fr}
  .co-done .seal{inline-size:76px;block-size:76px}
  .co-ref{font-size:var(--fs-lg)}
}