/* =====================================================================
   ALDEEM — RESPONSIVE WEB · D3 (Packages + B2B) · D4 (Account + Payment)
   Continues web.css. Shares tokens.css. RTL · tenant-tokened.
   Reuses the view-system + .wrap container from web.css.
   ===================================================================== */

/* shared section header for the inner pages */
.page-head { margin-top:30px; }
.page-head h1 { font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-.5px; }
.page-head h1 span { color:var(--tenant-primary); }
.page-head p { font-size:14.5px; color:var(--muted); font-weight:600; margin-top:7px; max-width:640px; }

.riyal { font-size:.62em; color:var(--muted); font-weight:700; }

/* =====================================================================
   D3 ·  PACKAGES (الباقات)
   ===================================================================== */
.pk-filters { position:sticky; top:74px; z-index:30; display:flex; align-items:center; flex-wrap:wrap; gap:10px;
              padding:16px 0; margin-top:18px; background:color-mix(in srgb,var(--bg) 90%,transparent);
              backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); }
.svc-chip { font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
            background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
            padding:10px 16px; font-size:13.5px; font-weight:700; color:var(--muted); transition:.16s; }
.svc-chip svg { width:15px; height:15px; color:var(--faint); transition:.16s; }
.svc-chip:hover { border-color:var(--tenant-primary); color:var(--ink); }
.svc-chip.active { background:var(--tenant-primary); color:#fff; border-color:var(--tenant-primary); }
.svc-chip.active svg { color:#fff; }
.pk-natwrap { margin-inline-start:auto; }
.pk-count { font-size:13.5px; font-weight:700; color:var(--muted); }
.pk-count b { color:var(--ink); }

.pk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:24px 0 50px; align-items:start; }

.pkg-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:20px;
            box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:0; transition:.18s; }
.pkg-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--tenant-primary) 24%,var(--line)); }
.pkg-card.featured { border-color:color-mix(in srgb,var(--tenant-primary) 45%,var(--line)); box-shadow:var(--shadow-md); }
.pkg-top { display:flex; flex-wrap:wrap; gap:7px; }
.pbadge { font-size:11.5px; font-weight:800; padding:6px 12px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:6px; }
.pbadge svg { width:13px; height:13px; }
.pbadge.svc { background:var(--tenant-primary-soft); color:var(--tenant-primary); }
.pbadge.sel { background:var(--tenant-accent-soft); color:var(--tenant-accent-dark); }
.pbadge.top { background:var(--ink); color:#fff; margin-inline-start:auto; }
.pkg-name { font-size:20px; font-weight:800; letter-spacing:-.3px; margin-top:14px; }
.pkg-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; font-size:13px; color:var(--muted); font-weight:600; }
.pkg-meta .flag { font-size:15px; }
.pkg-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--faint); }

.pkg-figs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.fig { background:var(--bg); border:1px solid var(--line-soft); border-radius:13px; padding:11px 14px; }
.fig .fk { font-size:11px; color:var(--muted); font-weight:700; margin-bottom:4px; }
.fig .fv { font-size:16px; font-weight:800; }
.fig .fv small { font-size:11px; color:var(--muted); font-weight:600; }
.fig.price { background:var(--tenant-primary-soft); border-color:transparent; grid-column:1 / -1; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.fig.price .fv { font-size:24px; color:var(--tenant-primary); white-space:nowrap; }
.fig.price .fv .riyal { font-size:13px; color:var(--tenant-primary); font-weight:700; }
.fig.price .vat { font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.fig.price .vat.inc { background:var(--success-soft); color:var(--success); }
.fig.price .vat.exc { background:var(--warning-soft); color:var(--warning); }

.penalties { display:none; margin-top:15px; padding-top:14px; border-top:1px dashed var(--line); }
.penalties.open { display:block; }
.pen-h { font-size:13px; font-weight:800; margin-bottom:9px; display:flex; align-items:center; gap:7px; color:var(--ink); }
.pen-h svg { width:15px; height:15px; color:var(--warning); }
.pen-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:12.5px; }
.pen-row .pk { display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600; }
.pen-row .pv { font-weight:800; }
.pdot { width:8px; height:8px; border-radius:50%; flex:none; }
.pdot.a { background:var(--warning); } .pdot.r { background:var(--danger); }

.pkg-foot { display:flex; gap:10px; align-items:center; margin-top:auto; padding-top:16px; }
.det-btn { flex:none; font-family:inherit; cursor:pointer; background:var(--surface); border:1.5px solid var(--line); color:var(--ink);
           font-size:13px; font-weight:800; padding:13px 16px; border-radius:var(--r-btn); display:flex; align-items:center; gap:7px; transition:.16s; }
.det-btn:hover { border-color:var(--tenant-primary); color:var(--tenant-primary); }
.det-btn svg { width:14px; height:14px; transition:transform .2s; }
.det-btn.open svg { transform:rotate(180deg); }
.subscribe { flex:1; font-family:inherit; cursor:pointer; background:var(--tenant-accent); color:#fff; border:none;
             font-size:14.5px; font-weight:800; padding:13px 0; border-radius:var(--r-btn);
             box-shadow:0 5px 14px color-mix(in srgb,var(--tenant-accent) 40%,transparent); transition:.16s; }
.subscribe:hover { transform:translateY(-1px); }

/* =====================================================================
   D3 ·  COMPANY SERVICES (B2B / خدمات الشركات)
   ===================================================================== */
.b2b-hero { display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:center;
            background:var(--tenant-primary-dark); color:#fff; border-radius:30px; padding:clamp(28px,4vw,52px);
            margin-top:28px; position:relative; overflow:hidden; box-shadow:var(--shadow-md); }
.b2b-hero::after { content:""; position:absolute; top:-120px; inset-inline-start:-90px; width:360px; height:360px; border-radius:50%;
                   background:radial-gradient(circle, color-mix(in srgb,var(--tenant-accent) 55%,transparent), transparent 70%); opacity:.5; }
.b2b-hero .bh-tx { position:relative; z-index:2; }
.b2b-hero .bh-tx .bk { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.14); color:#fff; white-space:nowrap;
                font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:var(--r-pill); margin-bottom:20px; }
.b2b-hero .bh-tx .bk svg { width:15px; height:15px; color:var(--tenant-accent); }
.b2b-hero h1 { font-size:clamp(26px,3.2vw,44px); font-weight:800; line-height:1.3; letter-spacing:-.5px; margin-bottom:14px; }
.b2b-hero p { font-size:clamp(14px,1.3vw,16px); font-weight:500; color:rgba(255,255,255,.82); line-height:1.7; margin-bottom:24px; }
.b2b-stats { display:flex; gap:12px; flex-wrap:wrap; }
.b2b-stat { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:14px 18px; flex:1; text-align:center; min-width:80px; }
.b2b-stat b { font-size:22px; font-weight:800; display:block; letter-spacing:-.5px; }
.b2b-stat span { font-size:11px; color:rgba(255,255,255,.72); font-weight:600; }

/* Feature rows in hero left column */
.b2b-vis { position:relative; z-index:2; display:flex; flex-direction:column; gap:12px; }
.b2b-vis .vrow { display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
                 border-radius:16px; padding:14px 16px; }
.b2b-vis .vrow .vi { width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,.16); display:grid; place-items:center; flex:none; }
.b2b-vis .vrow .vi svg { width:22px; height:22px; color:var(--tenant-accent); }
.b2b-vis .vrow b { font-size:14px; font-weight:800; display:block; }
.b2b-vis .vrow span { font-size:11.5px; color:rgba(255,255,255,.72); font-weight:600; }

/* Why section — 4 feature cards */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:10px; }
.why-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px 20px; box-shadow:var(--shadow-sm); }
.why-card .wic { width:50px; height:50px; border-radius:15px; background:var(--tenant-primary-soft); color:var(--tenant-primary); display:grid; place-items:center; margin-bottom:14px; }
.why-card .wic svg { width:24px; height:24px; }
.why-card b { font-size:15px; font-weight:800; display:block; margin-bottom:7px; }
.why-card span { font-size:13px; color:var(--muted); font-weight:600; line-height:1.6; }

/* Quote form — 2-column layout */
.quote-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:24px; align-items:start; margin-top:8px; }
.quote-left { background:var(--tenant-primary-dark); color:#fff; border-radius:22px; padding:28px 24px; position:sticky; top:90px; }
.quote-left h3 { font-size:17px; font-weight:800; margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.quote-left h3 svg { width:18px; height:18px; color:var(--tenant-accent); }
.quote-left .ql-row { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.quote-left .ql-row:last-of-type { border-bottom:none; }
.quote-left .ql-ic { width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.12); display:grid; place-items:center; flex:none; }
.quote-left .ql-ic svg { width:19px; height:19px; color:var(--tenant-accent); }
.quote-left .ql-row b { font-size:13.5px; font-weight:800; display:block; }
.quote-left .ql-row span { font-size:11.5px; color:rgba(255,255,255,.72); font-weight:600; line-height:1.5; }
.quote-left .ql-contact { margin-top:18px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:rgba(255,255,255,.82); }
.quote-left .ql-contact svg { width:16px; height:16px; color:var(--tenant-accent); }

/* Chip selectors inside the form */
.q-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.q-chip { font-family:inherit; cursor:pointer; font-size:13px; font-weight:700; padding:9px 18px; border-radius:var(--r-pill);
          border:1.5px solid var(--line); background:var(--surface); color:var(--muted); transition:.15s; }
.q-chip:hover { border-color:var(--tenant-primary); color:var(--tenant-primary); }
.q-chip.sel { background:var(--tenant-primary); border-color:var(--tenant-primary); color:#fff; }

/* Quote form right side */
.quote-form-card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px 24px; box-shadow:var(--shadow-sm); }
.qfield { margin-bottom:18px; }
.qfield label { font-size:13px; font-weight:800; display:block; margin-bottom:8px; }
.qfield label .opt { color:var(--muted); font-weight:600; font-size:11.5px; }
.qfield input, .qfield select, .qfield textarea {
  width:100%; box-sizing:border-box; font-family:inherit; font-size:14px; font-weight:600;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:13px; outline:none;
  background:var(--bg); color:var(--ink); transition:border-color .16s;
}
.qfield input:focus, .qfield select:focus, .qfield textarea:focus { border-color:var(--tenant-primary); }
.qfield textarea { resize:none; }
.q2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.cpkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.cpkg { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:.18s; }
.cpkg:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.cpkg.recommend { border-color:color-mix(in srgb,var(--tenant-accent) 55%,var(--line)); box-shadow:var(--shadow-md); }
.cpkg-top { display:flex; align-items:center; gap:8px; }
.cpkg-tier { font-size:11.5px; font-weight:800; padding:6px 12px; border-radius:var(--r-pill); background:var(--tenant-primary-soft); color:var(--tenant-primary); display:inline-flex; align-items:center; gap:6px; }
.cpkg-tier svg { width:13px; height:13px; }
.cpkg-recommend { font-size:11px; font-weight:800; color:#fff; background:var(--tenant-accent); padding:6px 12px; border-radius:var(--r-pill); margin-inline-start:auto; }
.cpkg-name { font-size:19px; font-weight:800; margin-top:14px; }
.cpkg-figs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.cfig { background:var(--bg); border:1px solid var(--line-soft); border-radius:13px; padding:11px 13px; }
.cfig .k { font-size:11px; color:var(--muted); font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.cfig .k svg { width:14px; height:14px; }
.cfig .v { font-size:15.5px; font-weight:800; }
.cfig.price { grid-column:1 / -1; background:var(--tenant-primary-soft); border-color:transparent; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.cfig.price .k { color:var(--tenant-primary); }
.cfig.price .v { font-size:21px; color:var(--tenant-primary); }
.cfig.price .v .riyal { font-size:12px; color:var(--tenant-primary); }
.cfig.price .vat { font-size:11px; font-weight:800; background:var(--warning-soft); color:var(--warning); padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap; }
.cpkg .nats { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.cpkg .nats .n { font-size:11.5px; font-weight:700; color:var(--ink); background:var(--bg); border:1px solid var(--line); padding:5px 10px; border-radius:var(--r-pill); }
.cpkg-cta { width:100%; margin-top:auto; padding-top:0; font-family:inherit; cursor:pointer; border:1.5px solid var(--tenant-primary);
            background:var(--surface); color:var(--tenant-primary); font-size:13.5px; font-weight:800; border-radius:var(--r-btn); transition:.16s; }
.cpkg-cta span { display:block; padding:13px 0; }
.cpkg-cta:hover { background:var(--tenant-primary); color:#fff; }

/* why-us features */
.cfeat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cfeat { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); }
.cf-ic { width:48px; height:48px; border-radius:14px; background:var(--tenant-primary-soft); color:var(--tenant-primary); display:grid; place-items:center; margin-bottom:14px; }
.cf-ic svg { width:24px; height:24px; }
.cfeat b { font-size:15px; font-weight:800; display:block; margin-bottom:6px; }
.cfeat span { font-size:13px; color:var(--muted); font-weight:600; line-height:1.6; }

/* quote request */
.quote-wrap { display:grid; grid-template-columns:1.3fr .7fr; gap:24px; align-items:start; }
.quote-form { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(22px,3vw,30px); box-shadow:var(--shadow-sm); }
.qfield { margin-bottom:18px; }
.qfield > label { font-size:13.5px; font-weight:800; display:block; margin-bottom:9px; }
.qfield > label .opt { font-size:11.5px; color:var(--muted); font-weight:600; }
.field { width:100%; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink); background:var(--bg);
         border:1.5px solid var(--line); border-radius:var(--r-btn); padding:13px 16px; transition:.16s; }
.field:focus { outline:none; border-color:var(--tenant-primary); background:var(--surface); }
.qgrid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chiprow { display:flex; flex-wrap:wrap; gap:9px; }
.selchip { font-family:inherit; cursor:pointer; font-size:13.5px; font-weight:700; color:var(--muted); background:var(--bg);
           border:1.5px solid var(--line); border-radius:var(--r-pill); padding:10px 16px; transition:.16s; }
.selchip:hover { border-color:var(--tenant-primary); }
.selchip.sel { background:var(--tenant-primary-soft); border-color:var(--tenant-primary); color:var(--tenant-primary); }
.qsubmit { width:100%; font-family:inherit; cursor:pointer; background:var(--tenant-primary); color:#fff; border:none;
           font-size:15.5px; font-weight:800; padding:16px 0; border-radius:var(--r-btn); margin-top:4px;
           box-shadow:0 8px 20px color-mix(in srgb,var(--tenant-primary) 32%,transparent); transition:.16s; display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.qsubmit svg { width:18px; height:18px; }
.qsubmit:hover { transform:translateY(-1px); }
.quote-side { background:var(--tenant-primary-dark); color:#fff; border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-md); position:sticky; top:96px; }
.quote-side h3 { font-size:17px; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.quote-side h3 svg { width:18px; height:18px; color:var(--tenant-accent); }
.qs-row { display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.qs-row:last-of-type { border-bottom:none; }
.qs-row .qi { width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.13); display:grid; place-items:center; flex:none; }
.qs-row .qi svg { width:16px; height:16px; color:var(--tenant-accent); }
.qs-row b { font-size:13.5px; font-weight:800; display:block; }
.qs-row span { font-size:12px; color:rgba(255,255,255,.74); font-weight:600; line-height:1.5; }
.qs-contact { margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; }
.qs-contact svg { width:17px; height:17px; color:var(--tenant-accent); }

/* =====================================================================
   D4 ·  CUSTOMER ACCOUNT (حسابي)
   ===================================================================== */
.profile { display:flex; align-items:center; gap:16px; margin-top:30px; background:var(--surface); border:1px solid var(--line);
           border-radius:var(--r-card); padding:20px 24px; box-shadow:var(--shadow-sm); }
.pf-av { width:60px; height:60px; border-radius:18px; background:var(--tenant-primary); color:#fff; font-size:21px; font-weight:800;
         display:grid; place-items:center; flex:none; box-shadow:var(--shadow-sm); }
.pf-tx { margin-inline-end:auto; }
.pf-tx b { font-size:20px; font-weight:800; display:block; letter-spacing:-.3px; }
.pf-tx span { font-size:13px; color:var(--muted); font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-top:3px; }
.pf-tx span svg { width:14px; height:14px; color:var(--success); }
.pf-btn { display:inline-flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); color:var(--ink);
          font-size:13.5px; font-weight:800; padding:11px 18px; border-radius:var(--r-btn); transition:.16s; }
.pf-btn:hover { border-color:var(--tenant-primary); color:var(--tenant-primary); }
.pf-btn svg { width:16px; height:16px; }

/* account page header + segment wrapper */
.acc-head { margin-top:30px; margin-bottom:4px; }
.acc-head h2 { font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-.5px; }
.seg-wrap { margin-top:18px; }

.acc-seg { display:inline-flex; gap:4px; margin-top:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px; box-shadow:var(--shadow-sm); }
.acc-seg button { font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:8px; border:none; background:none;
                  font-size:14px; font-weight:800; color:var(--muted); padding:11px 22px; border-radius:var(--r-pill); transition:.16s; }
.acc-seg button .cnt { font-size:11px; font-weight:800; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--bg); color:var(--muted); display:inline-grid; place-items:center; }
.acc-seg button.on { background:var(--tenant-primary); color:#fff; box-shadow:var(--shadow-sm); }
.acc-seg button.on .cnt { background:rgba(255,255,255,.22); color:#fff; }

.acc-pane { display:none; padding:24px 0 50px; }
.acc-pane.on { display:block; }
.acc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }

/* booking card */
.statpill { font-size:11.5px; font-weight:800; padding:6px 12px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:6px; }
.statpill .sd { width:7px; height:7px; border-radius:50%; }
.statpill.upcoming { background:var(--tenant-primary-soft); color:var(--tenant-primary); } .statpill.upcoming .sd { background:var(--tenant-primary); }
.statpill.done { background:var(--success-soft); color:var(--success); } .statpill.done .sd { background:var(--success); }
.statpill.cancel { background:#EEEEF3; color:var(--muted); } .statpill.cancel .sd { background:var(--faint); }
.statpill.active { background:var(--success-soft); color:var(--success); } .statpill.active .sd { background:var(--success); }
.statpill.suspended { background:var(--warning-soft); color:var(--warning); } .statpill.suspended .sd { background:var(--warning); }

.bk-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow-sm); transition:.18s; }
.bk-card:hover { box-shadow:var(--shadow-md); }
.bk-top { display:flex; align-items:center; gap:10px; }
.bk-svc { font-size:12.5px; color:var(--muted); font-weight:700; margin-inline-start:auto; }
.bk-body { display:flex; align-items:center; gap:13px; margin-top:14px; }
.bk-av { width:54px; height:54px; border-radius:15px; overflow:hidden; flex:none; }
.bk-av .ill { width:100%; height:100%; }
.bk-info b { font-size:16px; font-weight:800; display:block; }
.bk-info .when { font-size:12.5px; color:var(--muted); font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-top:4px; }
.bk-info .when svg { width:14px; height:14px; }
.bk-foot { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.pinned { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--tenant-accent-dark);
          background:var(--tenant-accent-soft); padding:6px 12px; border-radius:var(--r-pill); margin-inline-end:auto; }
.pinned svg { width:14px; height:14px; }
.bk-btn { display:inline-flex; align-items:center; gap:7px; font-family:inherit; cursor:pointer; font-size:13px; font-weight:800;
          padding:10px 16px; border-radius:var(--r-btn); border:1.5px solid var(--tenant-primary); background:var(--surface); color:var(--tenant-primary); transition:.16s; }
.bk-btn:hover { background:var(--tenant-primary); color:#fff; }
.bk-btn svg { width:15px; height:15px; }

/* contract card */
.ct-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow-sm); transition:.18s; }
.ct-card:hover { box-shadow:var(--shadow-md); }
.ct-top { display:flex; align-items:center; gap:9px; }
.ct-type { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; }
.ct-type svg { width:16px; height:16px; color:var(--tenant-primary); }
.ct-body { display:flex; align-items:center; gap:13px; margin-top:15px; }
.ct-av { width:54px; height:54px; border-radius:15px; overflow:hidden; flex:none; }
.ct-av .ill { width:100%; height:100%; }
.ct-name b { font-size:16px; font-weight:800; display:block; }
.ct-name span { font-size:12.5px; color:var(--muted); font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-top:3px; }
.ct-figs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.ct-fig { background:var(--bg); border:1px solid var(--line-soft); border-radius:12px; padding:10px 13px; }
.ct-fig .k { font-size:10.5px; color:var(--muted); font-weight:700; margin-bottom:4px; }
.ct-fig .v { font-size:14px; font-weight:800; }
.ct-fig .v small { font-size:10.5px; color:var(--muted); font-weight:600; }

/* warranty */
.warn-note { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:var(--muted);
             background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 16px; margin-bottom:18px; }
.warn-note svg { width:17px; height:17px; color:var(--tenant-primary); flex:none; }
.war-list { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.war-sum { display:flex; align-items:center; gap:15px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow-sm); cursor:pointer; transition:.18s; }
.war-sum:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.mini-ring { --p:69; --col:var(--success); width:66px; height:66px; border-radius:50%; flex:none; display:grid; place-items:center;
             background:conic-gradient(var(--col) calc(var(--p)*1%), var(--line) 0); }
.mini-ring .mi { width:52px; height:52px; border-radius:50%; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mini-ring .mi b { font-size:19px; font-weight:800; line-height:1; }
.mini-ring .mi span { font-size:9px; color:var(--muted); font-weight:700; }
.war-tx { margin-inline-end:auto; }
.war-tx b { font-size:15px; font-weight:800; display:block; }
.wstate { font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px; margin-top:5px; }
.wstate .sd { width:7px; height:7px; border-radius:50%; }
.wstate.green { color:var(--success); } .wstate.green .sd { background:var(--success); }
.wstate.amber { color:var(--warning); } .wstate.amber .sd { background:var(--warning); }
.wstate.red { color:var(--danger); } .wstate.red .sd { background:var(--danger); }
.war-go { color:var(--faint); flex:none; } .war-go svg { width:20px; height:20px; }

/* =====================================================================
   D4 ·  CHECKOUT (الدفع)
   ===================================================================== */
.co-wrap { display:grid; grid-template-columns:1.25fr .75fr; gap:30px; align-items:start; margin-top:22px; padding-bottom:50px; }
.co-block { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; box-shadow:var(--shadow-sm); margin-bottom:20px; }
.co-h { font-size:16px; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.co-h svg { width:18px; height:18px; color:var(--tenant-primary); }

.co-order { display:flex; align-items:center; gap:14px; }
.co-ic { width:58px; height:58px; border-radius:16px; overflow:hidden; flex:none; background:var(--tenant-primary-soft); color:var(--tenant-primary); display:grid; place-items:center; }
.co-ic .ill { width:100%; height:100%; }
.co-ic svg { width:28px; height:28px; }
.co-tx { margin-inline-end:auto; }
.co-tx b { font-size:17px; font-weight:800; display:block; }
.co-tx span { font-size:13px; color:var(--muted); font-weight:600; }
.co-dur { font-size:12.5px; font-weight:800; color:var(--tenant-primary); background:var(--tenant-primary-soft); padding:7px 13px; border-radius:var(--r-pill); white-space:nowrap; }

.pay { display:flex; align-items:center; gap:13px; padding:15px 16px; border:1.5px solid var(--line); border-radius:var(--r-btn); margin-bottom:11px; cursor:pointer; transition:.16s; }
.pay:last-child { margin-bottom:0; }
.pay:hover { border-color:color-mix(in srgb,var(--tenant-primary) 40%,var(--line)); }
.pay.sel { border-color:var(--tenant-primary); background:var(--tenant-primary-soft); }
.plogo { width:50px; height:34px; border-radius:8px; color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; flex:none; }
.pname { font-size:14.5px; font-weight:800; }
.psub { font-size:12px; color:var(--muted); font-weight:600; margin-inline-start:auto; }
.pay .radio { width:22px; height:22px; border-radius:50%; border:2px solid var(--line); flex:none; transition:.16s; position:relative; }
.pay:not(:has(.psub)) .radio { margin-inline-start:auto; }
.pay.sel .radio { border-color:var(--tenant-primary); }
.pay.sel .radio::after { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--tenant-primary); }

.inst-wrap { display:none; margin-top:14px; padding-top:16px; border-top:1px dashed var(--line); }
.inst-wrap.show { display:block; }
.inst-h { font-size:13px; font-weight:800; color:var(--tenant-primary); padding-bottom:8px; display:flex; align-items:center; gap:7px; }
.inst-h svg { width:15px; height:15px; }
.inst-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.inst-row:last-child { border-bottom:none; }
.inst-row .istep { width:30px; height:30px; border-radius:10px; background:var(--bg); color:var(--muted); font-size:13px; font-weight:800; display:grid; place-items:center; flex:none; }
.inst-row.now .istep { background:var(--tenant-primary); color:#fff; }
.inst-row .idate { margin-inline-end:auto; font-size:13.5px; font-weight:700; }
.inst-row .idate small { display:block; font-size:11px; color:var(--muted); font-weight:600; }
.inst-row .iamt { font-size:14.5px; font-weight:800; }
.inst-row .ibadge { font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:var(--r-pill); }
.inst-row.now .ibadge { background:var(--tenant-primary-soft); color:var(--tenant-primary); }
.inst-row .ibadge.later { background:#EEEEF3; color:var(--muted); }

/* sticky order summary aside */
.co-aside { position:sticky; top:96px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow-md); }
.co-aside .ca-h { font-size:15px; font-weight:800; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.co-aside .ca-h svg { width:17px; height:17px; color:var(--tenant-primary); }
.sumrow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; font-size:13.5px; border-bottom:1px solid var(--line-soft); }
.sumrow .k { color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sumrow .v { font-weight:800; white-space:nowrap; }
.vatnote { font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:var(--r-pill); }
.vatnote.inc { background:var(--success-soft); color:var(--success); }
.vatnote.exc { background:var(--warning-soft); color:var(--warning); }
.sumrow.total { border-bottom:none; padding-top:14px; }
.sumrow.total .k { color:var(--ink); font-weight:800; font-size:15px; }
.sumrow.total .v { font-size:22px; color:var(--tenant-primary); }
.pay-btn { width:100%; font-family:inherit; cursor:pointer; background:var(--tenant-primary); color:#fff; border:none; margin-top:18px;
           font-size:15.5px; font-weight:800; padding:16px 0; border-radius:var(--r-btn); display:inline-flex; align-items:center; justify-content:center; gap:9px;
           box-shadow:0 8px 20px color-mix(in srgb,var(--tenant-primary) 32%,transparent); transition:.16s; }
.pay-btn:hover { transform:translateY(-1px); }
.pay-btn svg { width:18px; height:18px; }
.co-secure { display:flex; align-items:center; justify-content:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--muted); margin-top:13px; }
.co-secure svg { width:14px; height:14px; color:var(--success); }

/* =====================================================================
   D4 ·  INVOICE (الفاتورة)
   ===================================================================== */
.inv-view { max-width:680px; margin-inline:auto; padding:40px 0 60px; text-align:center; }
.checkwrap { display:grid; place-items:center; margin-bottom:20px; }
.ck { width:84px; height:84px; border-radius:50%; background:var(--success-soft); color:var(--success); display:grid; place-items:center;
      box-shadow:0 0 0 10px color-mix(in srgb,var(--success) 9%,transparent); }
.ck svg { width:40px; height:40px; }
.inv-view h2 { font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-.4px; }
.inv-view .sub { font-size:14.5px; color:var(--muted); font-weight:600; margin-top:8px; max-width:440px; margin-inline:auto; }

.invoice { width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-sm); text-align:start; margin-top:26px; }
.inv-top { display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line-soft); }
.inv-logo { width:44px; height:44px; border-radius:12px; background:var(--tenant-primary); display:grid; place-items:center; flex:none; }
.inv-logo svg { width:24px; height:24px; }
.inv-m b { font-size:15px; font-weight:800; display:block; }
.inv-m span { font-size:11.5px; color:var(--muted); font-weight:600; }
.inv-no { margin-inline-start:auto; text-align:end; }
.inv-no b { font-size:14px; font-weight:800; display:block; }
.inv-no span { font-size:11.5px; color:var(--muted); font-weight:600; }
.inv-rows { padding:8px 22px; }
.inv-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.inv-row .ik { color:var(--muted); font-weight:600; }
.inv-row .iv { font-weight:800; }
.inv-row.tot { border-bottom:none; padding-top:15px; }
.inv-row.tot .ik { color:var(--ink); font-weight:800; font-size:15px; }
.inv-row.tot .iv { font-size:21px; color:var(--tenant-primary); }
.inv-zatca { display:flex; align-items:center; gap:14px; padding:18px 22px; background:var(--bg); border-top:1px solid var(--line-soft); }
.inv-qr { width:66px; height:66px; border-radius:10px; flex:none;
  background:conic-gradient(#16162B 0 0) padding-box, #fff;
  background-image:linear-gradient(90deg,#16162B 40%,transparent 0), linear-gradient(0deg,#16162B 40%,transparent 0);
  background-size:11px 11px; border:4px solid #fff; box-shadow:inset 0 0 0 1px var(--line); }
.inv-zatca .zt b { font-size:13px; font-weight:800; display:block; }
.inv-zatca .zt span { font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.5; }
.inv-actions { display:flex; gap:14px; margin-top:26px; }
.inv-actions button { flex:1; font-family:inherit; cursor:pointer; font-size:15px; font-weight:800; padding:15px 0; border-radius:var(--r-btn); transition:.16s; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.inv-actions button svg { width:17px; height:17px; }
.inv-actions .ghost { background:var(--surface); border:1.5px solid var(--line); color:var(--ink); }
.inv-actions .ghost:hover { border-color:var(--tenant-primary); color:var(--tenant-primary); }
.inv-actions .prim { background:var(--tenant-primary); color:#fff; border:none; box-shadow:0 8px 20px color-mix(in srgb,var(--tenant-primary) 32%,transparent); }
.inv-actions .prim:hover { transform:translateY(-1px); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .pk-grid { grid-template-columns:repeat(2,1fr); }
  .b2b-hero { grid-template-columns:1fr; gap:26px; }
  .cpkg-grid { grid-template-columns:repeat(2,1fr); }
  .cfeat-grid { grid-template-columns:repeat(2,1fr); }
  .quote-wrap { grid-template-columns:1fr; }
  .quote-side { position:relative; top:0; }
  .co-wrap { grid-template-columns:1fr; gap:0; }
  .co-aside { position:relative; top:0; margin-bottom:24px; }
}

@media (max-width:720px){
  .pk-filters { top:62px; gap:8px; padding:12px 0; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .pk-filters::-webkit-scrollbar { display:none; }
  .svc-chip { flex:none; }
  .pk-natwrap { margin-inline-start:0; }
  .pk-grid { grid-template-columns:repeat(2,1fr); gap:13px; }
  .pkg-card { padding:15px; }
  .pkg-name { font-size:17px; }
  .pkg-figs { gap:8px; }
  .fig.price .fv { font-size:20px; }
  .pkg-foot { flex-direction:column; gap:9px; }
  .det-btn, .subscribe { width:100%; justify-content:center; }

  .cpkg-grid { grid-template-columns:1fr; }
  .cfeat-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .cfeat { padding:16px; }
  .qgrid2 { grid-template-columns:1fr; }

  .profile { flex-wrap:wrap; gap:13px; padding:16px; }
  .pf-btn { width:100%; justify-content:center; order:3; }
  .acc-seg { display:flex; width:100%; }
  .acc-seg button { flex:1; justify-content:center; padding:11px 8px; }
  .acc-grid, .war-list { grid-template-columns:1fr; gap:13px; }
  .ct-figs { grid-template-columns:1fr 1fr; }

  .co-aside { position:sticky; bottom:78px; top:auto; margin-bottom:0; order:2; }

  .inv-actions { flex-direction:column-reverse; }
}

@media (max-width:380px){
  .pk-grid { grid-template-columns:1fr; }
  .cfeat-grid { grid-template-columns:1fr; }
}