/* ==========================================================================
   WORKFORCE SAUDIA — OWNED PLATFORM · CLIENT PACKAGE DESIGN SYSTEM
   Brand-teal heritage · RTL-native · IBM Plex Sans Arabic
   Tokens follow the brand logo (#0E7C75 teal, #22302E ink, #F6F4EF sand)
   with gold #C9A24B + national green #1F6B3A as scarce heritage accents.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand palette (logo-derived) */
  --teal:#0E7C75;
  --teal-pressed:#0A5F5A;
  --teal-tint:#E4F1EF;
  --teal-tint-2:#D5E8E6;
  --ink:#22302E;
  --ink-2:#3D4A48;
  --body:#5B6B68;
  --muted:#8A948F;
  --faint:#98A3A0;
  --sand:#F6F4EF;
  --sand-2:#EDEAE2;
  --sand-3:#E3E0D8;
  --surface:#FFFFFF;
  --hairline:#F1EFE9;
  --border:#E3E0D8;

  /* heritage accents (scarce) */
  --green:#1F6B3A;
  --green-pressed:#14522A;
  --green-tint:#E7F0E9;
  --gold:#C9A24B;
  --gold-deep:#B08A35;
  --gold-tint:#F3ECDD;

  /* semantics */
  --success:#1B7A46;
  --success-tint:#E7F0E9;
  --warn:#B8860B;
  --warn-tint:#FBF3E0;
  --error:#B3261E;
  --error-tint:#FDECEA;

  /* type */
  --font-ar:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
  --font-lat:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;

  /* scale */
  --fs-display:28px; --lh-display:38px;
  --fs-title:22px;   --lh-title:32px;
  --fs-h3:17px;      --lh-h3:25px;
  --fs-body:15px;    --lh-body:24px;
  --fs-caption:13px; --lh-caption:20px;
  --fs-micro:11.5px; --lh-micro:17px;

  /* radii */
  --r-xl:20px; --r-lg:16px; --r-md:14px; --r-sm:12px; --r-xs:9px; --r-pill:999px;

  /* elevation (design file shadow scale) */
  --e1:0 1px 4px rgba(34,48,46,.06);
  --e2:0 6px 16px rgba(34,48,46,.10);
  --e3:0 12px 28px rgba(34,48,46,.16);
  --e-cta:0 6px 16px rgba(14,124,117,.30);

  /* motion */
  --ease-out:cubic-bezier(.32,.72,0,1);
  --ease-wipe:cubic-bezier(.4,0,.2,1);
  --t-fast:100ms; --t-sheet:340ms; --t-wipe:600ms;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html[dir="rtl"]{--fwd:1}
html[dir="ltr"]{--fwd:-1}
body{
  font-family:var(--font-ar);
  font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink);background:var(--sand);
  min-height:100vh;
}
img,svg{display:block;max-width:100%}
a{color:var(--teal);text-decoration:none;transition:color var(--t-fast) ease}
a:hover{color:var(--teal-pressed)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* latin digits always render in IBM Plex Sans for clean numerals */
.latin,.price,code{font-family:var(--font-lat)}
.price{font-variant-numeric:tabular-nums}

/* ---------- 3. DECK SHELL (sidebar + stage + pager) ---------- */
/* In RTL, grid auto-flows columns right→left, so the same declaration
   puts the 264px sidebar on the right in Arabic and left in English. */
.deck{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.deck .stage{grid-column:2}

/* sidebar */
.side{
  background:var(--surface);
  border-inline-start:1px solid var(--hairline);
  padding:22px 14px 18px;
  display:flex;flex-direction:column;gap:14px;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;
  z-index:40;
}
html[dir="ltr"] .side{border-inline-start:none;border-inline-end:1px solid var(--hairline)}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 12px;border-bottom:1px solid var(--hairline)}
.brand-mark{width:40px;height:40px;flex:none}
.brand-name{font-weight:700;font-size:15px;line-height:1.25;color:var(--ink)}
.brand-name small{display:block;font-weight:500;font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:12px;
  font-size:13px;font-weight:500;color:var(--ink-2);
  transition:background var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-fast) ease;
  position:relative;
}
.nav-item .n-icon{width:30px;height:30px;border-radius:9px;background:var(--sand);display:flex;align-items:center;justify-content:center;flex:none;color:var(--muted);transition:all var(--t-fast) ease}
.nav-item .n-num{font:600 10px var(--font-lat);color:var(--faint);margin-inline-start:auto}
.nav-item:hover{background:var(--sand);color:var(--ink)}
.nav-item:hover .n-icon{background:var(--teal-tint);color:var(--teal)}
.nav-item.active{background:var(--teal-tint);color:var(--teal)}
.nav-item.active .n-icon{background:var(--teal);color:#fff}
.nav-item.active::before{
  content:"";position:absolute;inset-inline-start:-14px;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:var(--teal);
}
.nav-group{font:600 10px var(--font-lat);color:var(--faint);letter-spacing:.08em;padding:10px 10px 2px;text-transform:uppercase}
html[dir="rtl"] .nav-group{letter-spacing:0}

/* lang toggle */
.lang{display:flex;align-items:center;justify-content:center;gap:2px;background:var(--sand);border-radius:12px;padding:3px;margin-top:4px}
.lang button{flex:1;padding:7px 0;border-radius:9px;font-weight:600;font-size:12.5px;color:var(--muted);transition:all var(--t-fast) ease}
.lang button.on{background:var(--surface);color:var(--teal);box-shadow:var(--e1)}
.lang button:hover:not(.on){color:var(--ink)}
.side-foot{font-size:10.5px;color:var(--faint);text-align:center;padding-top:8px;line-height:1.5}

/* stage */
.stage{
  display:flex;flex-direction:column;
  min-width:0;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(14,124,117,.05), transparent 60%),
    var(--sand);
}
.stage-inner{
  flex:1;width:100%;max-width:1120px;margin:0 auto;
  padding:34px 44px 28px;
  display:flex;flex-direction:column;gap:22px;
  animation:pageIn .5s var(--ease-out) both;
}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* top meta row */
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.crumbs .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.sec-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  font:600 11.5px var(--font-lat);color:var(--teal);
  letter-spacing:.03em;
}
.sec-tag .diamond{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);border-radius:1.5px}

/* section hero */
.hero-h{display:flex;flex-direction:column;gap:8px;max-width:760px}
.hero-kicker{font:600 12px var(--font-lat);color:var(--teal);letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
html[dir="rtl"] .hero-kicker{letter-spacing:0;text-transform:none;font-weight:600}
.hero-kicker::before{content:"";width:26px;height:1.5px;background:var(--gold)}
.hero-h h1{
  font-size:var(--fs-display);line-height:var(--lh-display);font-weight:700;color:var(--ink);
  letter-spacing:-.01em;
}
.hero-h .kashida{font-weight:700}
.hero-sub{font-size:15px;line-height:26px;color:var(--body);max-width:640px}
.hero-sub strong{color:var(--ink);font-weight:600}

/* diamond ornament divider */
.ornament{display:flex;align-items:center;gap:10px;margin:2px 0}
.ornament .line{flex:1;height:1px;background:linear-gradient(to left,transparent,rgba(31,107,58,.45),transparent)}
.ornament .dm{width:8px;height:8px;background:var(--green);opacity:.55;transform:rotate(45deg);border-radius:1.5px}
.ornament .dm.small{width:5px;height:5px;opacity:.35}

/* ---------- 4. COMPONENTS ---------- */

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 22px;border-radius:14px;
  font-weight:600;font-size:15px;
  transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease,background var(--t-fast) ease,opacity var(--t-fast) ease;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--e-cta)}
.btn-primary:hover{background:var(--teal-pressed);color:#fff}
.btn-primary::after{
  content:"";position:absolute;top:0;height:100%;width:40%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  inset-inline-start:-60%;animation:sheen 3.2s ease infinite;
}
@keyframes sheen{0%,55%{inset-inline-start:-60%}85%,100%{inset-inline-start:130%}}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-deep);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-pressed);color:#fff}
.btn-secondary{background:var(--surface);border:1.5px solid var(--border);color:var(--ink-2)}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal)}
.btn-ghost{background:transparent;color:var(--teal)}
.btn-ghost:hover{background:var(--teal-tint)}
.btn-danger{background:var(--error);color:#fff}
.btn-danger:hover{background:#8C1D17}
.btn-block{width:100%}
.btn-sm{height:42px;padding:0 16px;font-size:13.5px;border-radius:12px}
.btn-lg{height:58px;font-size:16px;border-radius:16px}
.btn[disabled]{background:var(--sand-3);color:#98937F;box-shadow:none;cursor:not-allowed;transform:none}

/* stamp badge — signature element */
.stamp{
  position:relative;flex:none;
  width:92px;height:92px;border-radius:50%;
  border:2px solid var(--gold);
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-8deg);
  box-shadow:0 2px 10px rgba(176,138,53,.18);
  animation:stampIn .55s var(--ease-out) .2s both;
}
.stamp::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px dashed var(--gold)}
.stamp .stamp-txt{font:700 12px var(--font-ar);color:var(--gold-deep);text-align:center;line-height:1.35;z-index:1}
.stamp.green{border-color:var(--green)}
.stamp.green::after{border-color:var(--green)}
.stamp.green .stamp-txt{color:var(--green)}
.stamp.green::before{content:"✓";position:absolute;top:6px;font:700 11px var(--font-lat);color:var(--green)}
@keyframes stampIn{0%{transform:rotate(-18deg) scale(1.4);opacity:0}60%{transform:rotate(-6deg) scale(.96);opacity:1}100%{transform:rotate(-8deg) scale(1)}}
.stamp-center{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.stamp-center .stamp-label{font-weight:600;font-size:14px;color:var(--ink)}

/* cards */
.card{
  background:var(--surface);border-radius:var(--r-lg);
  padding:18px;display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--e1);
  transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease;
}
.card.tappable{cursor:pointer}
.card.tappable:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.card.tappable:active{transform:scale(.98)}
.card h3{font-size:var(--fs-h3);font-weight:600;color:var(--ink);display:flex;align-items:center;gap:9px}
.card .card-sub{font-size:13px;color:var(--body);line-height:22px}
.card-grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* service cards (home) */
.svc{
  background:var(--surface);border-radius:var(--r-xl);
  padding:20px;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--e1);cursor:pointer;position:relative;
  transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease;
}
.svc:hover{transform:translateY(-3px);box-shadow:var(--e2)}
.svc:active{transform:scale(.97)}
.svc .svc-icon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center}
.svc .svc-name{font-weight:700;font-size:16.5px;color:var(--ink)}
.svc .svc-from{font-size:12.5px;color:var(--body)}
.svc .svc-price{font:700 22px var(--font-lat);color:var(--teal)}
.svc .svc-price small{font-size:12px;font-weight:600;color:var(--muted)}
.svc .svc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.svc .svc-go{width:34px;height:34px;border-radius:50%;background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;transition:all var(--t-fast) ease}
.svc:hover .svc-go{background:var(--teal);color:#fff}
.svc .stamp-mini{
  position:absolute;top:-14px;inset-inline-end:-10px;
  width:64px;height:64px;border-radius:50%;
  border:1.5px solid var(--gold);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(10deg);box-shadow:0 2px 10px rgba(176,138,53,.22);
}
.svc .stamp-mini span{font:700 10px var(--font-ar);color:var(--gold-deep);text-align:center;line-height:1.3}

/* trust strip */
.trust{display:flex;gap:10px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--hairline);font-size:13px;font-weight:600;color:var(--ink-2)}
.trust-item .t-ic{width:22px;height:22px;border-radius:50%;background:var(--green-tint);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:11px}
.trust-item.gold .t-ic{background:var(--gold-tint);color:var(--gold-deep)}

/* chips & tags */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--teal-tint);color:var(--teal)}
.chip.gold{background:var(--gold-tint);color:var(--gold-deep)}
.chip.green{background:var(--green-tint);color:var(--green)}
.chip.neutral{background:var(--sand);color:var(--ink-2);border:1px solid var(--border)}
.chip.light{background:var(--surface);border:1px solid var(--border);color:var(--ink-2)}
.chip .lang-ic{font-size:10px;background:#fff;border-radius:4px;padding:1px 4px;border:1px solid var(--border);color:var(--ink-2)}

/* timeline (status) */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:14px;position:relative;padding-bottom:22px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;top:26px;bottom:2px;inset-inline-start:10px;width:2.5px;background:var(--sand-3);border-radius:2px}
.tl-item.done::before{background:linear-gradient(var(--teal) 70%,var(--sand-3) 70%)}
.tl-item:last-child::before{display:none}
.tl-dot{width:23px;height:23px;border-radius:50%;flex:none;background:var(--surface);border:2.5px solid var(--sand-3);display:flex;align-items:center;justify-content:center;z-index:1;transition:all .3s var(--ease-wipe)}
.tl-item.done .tl-dot{border-color:var(--teal);background:var(--teal);color:#fff;animation:pop .18s var(--ease-out)}
.tl-item.now .tl-dot{border-color:var(--gold);box-shadow:0 0 0 5px var(--gold-tint);animation:pulseDot 1.8s ease infinite}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px var(--gold-tint)}50%{box-shadow:0 0 0 8px rgba(201,162,75,.12)}}
.tl-body{display:flex;flex-direction:column;gap:2px;padding-top:2px}
.tl-title{font-weight:600;font-size:14.5px;color:var(--ink)}
.tl-meta{font-size:12.5px;color:var(--body)}
.tl-item.done .tl-title{color:var(--teal)}
.tl-item.now .tl-title{color:var(--gold-deep)}

/* price breakdown */
.price-card{display:flex;flex-direction:column}
.price-row{display:flex;align-items:baseline;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--hairline);font-size:14.5px}
.price-row .k{color:var(--body)}
.price-row .v{font-weight:600;color:var(--ink);font-family:var(--font-lat);font-variant-numeric:tabular-nums}
.price-row .v.dim{color:var(--muted);font-weight:500}
.price-row .v.pos{color:var(--success)}
.price-row .v.neg{color:var(--error)}
.price-row.grand{border-bottom:none;padding-top:14px;align-items:center}
.price-row.grand .k{font-weight:700;font-size:16px;color:var(--ink)}
.price-row.grand .v{font:700 26px var(--font-lat);color:var(--ink)}
.price-row.grand .v small{font-size:13px;color:var(--muted);font-weight:600}
.price-row .sub{font-size:11.5px;color:var(--muted)}

/* form controls */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-weight:600;font-size:13.5px;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--muted)}
.input{
  height:50px;padding:0 16px;border-radius:13px;
  border:1.5px solid var(--border);background:var(--surface);
  font-size:14.5px;color:var(--ink);width:100%;
  transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease;
}
.input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3.5px var(--teal-tint)}
textarea.input{height:auto;padding:13px 16px;resize:vertical;min-height:92px}
.select-wrap{position:relative}
.select-wrap::after{
  content:"";position:absolute;top:50%;inset-inline-end:16px;
  width:8px;height:8px;border-left:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(-45deg);pointer-events:none;
}
html[dir="rtl"] .select-wrap::after{transform:translateY(-70%) rotate(135deg)}
select.input{appearance:none;-webkit-appearance:none;cursor:pointer}
input[type=radio],input[type=checkbox]{accent-color:var(--teal);width:17px;height:17px;cursor:pointer}

/* segmented / option rows */
.opt-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;border-radius:14px;
  border:1.5px solid var(--border);background:var(--surface);
  cursor:pointer;transition:all var(--t-fast) ease;
}
.opt-row:hover{border-color:var(--teal-tint-2);background:var(--teal-tint)}
.opt-row.sel{border-color:var(--teal);background:var(--teal-tint);box-shadow:inset 0 0 0 1px var(--teal)}
.opt-row .o-main{display:flex;flex-direction:column;gap:2px}
.opt-row .o-title{font-weight:600;font-size:14.5px;color:var(--ink)}
.opt-row .o-sub{font-size:12.5px;color:var(--body)}
.opt-row .o-price{font:700 16px var(--font-lat);color:var(--teal)}
.opt-row .o-price small{font-size:11px;color:var(--muted);font-weight:600}
.opt-row .radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);flex:none;display:flex;align-items:center;justify-content:center;transition:all var(--t-fast) ease}
.opt-row.sel .radio{border-color:var(--teal)}
.opt-row.sel .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal);animation:pop .18s var(--ease-out)}

/* frequency chips */
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.freq{
  flex:1;min-width:88px;padding:11px 8px;border-radius:13px;
  border:1.5px solid var(--border);background:var(--surface);
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  transition:all var(--t-fast) ease;text-align:center;
}
.freq .f-k{font-weight:600;font-size:13.5px;color:var(--ink)}
.freq .f-v{font:600 11px var(--font-lat);color:var(--muted)}
.freq.sel{border-color:var(--teal);background:var(--teal-tint)}
.freq.sel .f-k{color:var(--teal)}
.freq.sel .f-v{color:var(--teal)}

/* toggle */
.toggle{position:relative;width:46px;height:27px;border-radius:999px;background:var(--sand-3);transition:background var(--t-fast) ease;cursor:pointer;flex:none}
.toggle::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-start var(--t-fast) ease}
.toggle.on{background:var(--teal)}
.toggle.on::after{inset-inline-start:22px}

/* stepper */
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:40px;height:40px;border-radius:12px;background:var(--teal-tint);color:var(--teal);font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all var(--t-fast) ease}
.stepper button:hover{background:var(--teal);color:#fff}
.stepper button:active{transform:scale(.9)}
.stepper button[disabled]{background:var(--sand);color:var(--faint);cursor:not-allowed}
.stepper .s-val{font:700 22px var(--font-lat);color:var(--ink);min-width:34px;text-align:center;animation:pop .18s var(--ease-out)}

/* notice banners */
.notice{display:flex;gap:11px;padding:13px 15px;border-radius:14px;font-size:13.5px;line-height:21px;align-items:flex-start}
.notice .n-ic{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px}
.notice.info{background:var(--teal-tint);color:var(--teal-pressed)}
.notice.info .n-ic{background:var(--teal);color:#fff}
.notice.warn{background:var(--warn-tint);color:#8a6400}
.notice.warn .n-ic{background:var(--warn);color:#fff}
.notice.success{background:var(--success-tint);color:var(--green-pressed)}
.notice.success .n-ic{background:var(--success);color:#fff}
.notice.error{background:var(--error-tint);color:var(--error)}
.notice.error .n-ic{background:var(--error);color:#fff}
.notice b{font-weight:700}
.notice a{font-weight:600;text-decoration:underline}

/* worker card — trust-first */
.worker-card{
  background:var(--surface);border-radius:var(--r-lg);padding:16px;
  display:flex;gap:14px;align-items:center;
  box-shadow:var(--e1);cursor:pointer;position:relative;
  transition:all var(--t-fast) ease;border:1.5px solid transparent;
}
.worker-card:hover{box-shadow:var(--e2);transform:translateY(-1px)}
.worker-card.sel{border-color:var(--teal);background:linear-gradient(0deg,var(--teal-tint),var(--surface) 55%)}
.worker-ava{
  width:64px;height:64px;border-radius:18px;flex:none;
  background:linear-gradient(135deg,var(--teal-tint),var(--teal-tint-2));
  display:flex;align-items:center;justify-content:center;
  font:700 22px var(--font-ar);color:var(--teal);
  position:relative;
}
.worker-card.sel .worker-ava{background:linear-gradient(135deg,var(--teal),#0A5F5A);color:#fff}
.worker-ava .v-badge{
  position:absolute;bottom:-4px;inset-inline-end:-4px;
  width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  border:2px solid var(--surface);
}
.worker-info{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.worker-name{font-weight:700;font-size:15.5px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.worker-meta{font-size:12.5px;color:var(--body);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.worker-langs{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.wlang{font-size:10.5px;font-weight:600;color:var(--ink-2);background:var(--sand);border:1px solid var(--border);border-radius:5px;padding:1.5px 6px}
.rating{display:inline-flex;align-items:center;gap:4px;color:var(--gold-deep);font-weight:700;font-size:13px}
.rating .stars{color:var(--gold);font-size:12px;letter-spacing:1px}
.worker-cta{margin-inline-start:auto}

/* map card */
.map-wrap{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e1);position:relative;background:var(--surface)}
.map{width:100%;display:block}
.map-pin-label{position:absolute;top:14px;inset-inline-start:14px;background:var(--surface);border-radius:12px;padding:9px 13px;box-shadow:var(--e2);font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.map-pin-label .pin-ic{color:var(--error)}
.arrival-chip{
  position:absolute;bottom:14px;inset-inline-start:14px;
  background:var(--ink);color:#fff;border-radius:999px;padding:9px 16px;
  font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px;
  box-shadow:var(--e3);
}
.arrival-chip .live-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;animation:pulseDot 1.6s ease infinite}

/* tables */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{font-weight:600;font-size:12px;color:var(--muted);text-align:start;padding:9px 12px;border-bottom:1px solid var(--border);letter-spacing:.02em}
.table td{padding:11px 12px;border-bottom:1px solid var(--hairline);color:var(--ink-2);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table .num{font-family:var(--font-lat);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.table .pos{color:var(--success);font-weight:700}
.table .neg{color:var(--error);font-weight:700}
.table tbody tr{transition:background var(--t-fast) ease}
.table tbody tr:hover{background:var(--sand)}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--success-tint);color:var(--green-pressed)}
.pill.warn{background:var(--warn-tint);color:#8a6400}
.pill.err{background:var(--error-tint);color:var(--error)}
.pill.info{background:var(--teal-tint);color:var(--teal-pressed)}
.pill.gold{background:var(--gold-tint);color:var(--gold-deep)}

/* progress bar */
.prog{height:8px;border-radius:4px;background:var(--sand-2);overflow:hidden;position:relative}
.prog > i{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,var(--teal),#2BA99F);transform-origin:0 50%;animation:progFill 1.1s var(--ease-out) both;display:block}
@keyframes progFill{from{transform:scaleX(0)}to{transform:scaleX(var(--p,1))}}

/* dual date */
.dual-date{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);font-weight:500;flex-wrap:wrap}
.dual-date .hijri{font-size:12px;color:var(--muted);background:var(--sand);border-radius:6px;padding:2px 8px;border:1px solid var(--border)}

/* payment rail */
.rail{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);cursor:pointer;transition:all var(--t-fast) ease}
.rail:hover{border-color:var(--teal-tint-2)}
.rail.sel{border-color:var(--teal);background:var(--teal-tint)}
.rail .r-logo{width:44px;height:30px;border-radius:8px;background:var(--sand);display:flex;align-items:center;justify-content:center;font:700 12px var(--font-lat);color:var(--ink-2);flex:none}
.rail .r-name{font-weight:600;font-size:14.5px;color:var(--ink);flex:1}
.rail .r-sub{font-size:11.5px;color:var(--muted)}
.rail .radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);flex:none;display:flex;align-items:center;justify-content:center}
.rail.sel .radio{border-color:var(--teal)}
.rail.sel .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal);animation:pop .18s var(--ease-out)}

/* toast / confirm overlay */
.overlay{
  position:fixed;inset:0;background:rgba(20,30,28,.45);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .22s ease;z-index:100;
}
.overlay.center{align-items:center;padding:20px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;max-width:480px;background:var(--surface);
  border-radius:24px 24px 0 0;padding:22px 24px 26px;
  animation:sheetUp var(--t-sheet) var(--ease-out);
  display:flex;flex-direction:column;gap:14px;
  max-height:86vh;overflow-y:auto;
}
.overlay.center .sheet{border-radius:24px}
@keyframes sheetUp{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--sand-3);margin:0 auto}
.sheet h3{font-size:18px;font-weight:700;color:var(--ink)}
.sheet .sheet-sub{font-size:13.5px;color:var(--body);line-height:22px}
.sheet-close{position:absolute;top:16px;inset-inline-end:16px;width:34px;height:34px;border-radius:50%;background:var(--sand);color:var(--ink-2);font-size:15px;display:flex;align-items:center;justify-content:center}

/* refund ladder */
.ladder{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.ladder .ld-row{display:grid;grid-template-columns:1.3fr 1fr .9fr;gap:8px;padding:11px 14px;border-bottom:1px solid var(--hairline);align-items:center;font-size:13px}
.ladder .ld-row:last-child{border-bottom:none}
.ladder .ld-head{background:var(--sand);font-weight:700;font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.ladder .ld-row .c1{font-weight:600;color:var(--ink)}
.ladder .ld-row .c2{color:var(--body);font-size:12.5px}
.ladder .ld-row .c3{font-family:var(--font-lat);font-weight:700;color:var(--green)}
.ladder .ld-row.now{background:var(--gold-tint)}
.ladder .ld-row.now .c1{color:var(--gold-deep)}
.ladder .ld-row.none .c3{color:var(--error)}

/* confetti (dopamine) */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.confetti i{
  position:absolute;top:-12px;width:9px;height:9px;border-radius:2px;
  animation:confFall 2.4s var(--ease-wipe) both;
}
@keyframes confFall{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(105vh) rotate(720deg);opacity:0}
}

/* pager */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:8px;padding-top:20px;border-top:1px solid var(--hairline);
}
.pager .pg{display:flex;align-items:center;gap:10px}
.pager .pg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 18px;border-radius:13px;
  background:var(--surface);border:1.5px solid var(--border);
  font-weight:600;font-size:13.5px;color:var(--ink-2);
  transition:all var(--t-fast) ease;
}
.pager .pg-btn .pg-txt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;line-height:1.25;min-width:0;
}
.pager .pg-btn .pg-label{font-size:11px;color:var(--muted);font-weight:600}
.pager .pg-btn .pg-title{font-size:13.5px;color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.pager .pg-btn .pg-arrow{display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.pager .pg-btn:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-1px)}
.pager .pg-btn:active{transform:scale(.97)}
.pager .pg-btn.next{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:var(--e-cta)}
.pager .pg-btn.next:hover{background:var(--teal-pressed)}
.pager .pg-btn[disabled]{opacity:.4;pointer-events:none}
.pager .pg-pos{font:600 12px var(--font-lat);color:var(--faint)}

/* watermark */
.wm{
  position:fixed;bottom:14px;inset-inline-end:16px;
  font:700 11px var(--font-lat);color:var(--ink);opacity:.07;
  letter-spacing:.18em;text-transform:uppercase;pointer-events:none;z-index:300;
  display:flex;align-items:center;gap:6px;
}
.wm .wm-dm{width:6px;height:6px;background:var(--teal);transform:rotate(45deg)}

/* feature checklist */
.feat{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--hairline)}
.feat:last-child{border-bottom:none}
.feat .f-check{width:26px;height:26px;border-radius:9px;background:var(--green-tint);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none;margin-top:1px}
.feat .f-check.bad{background:var(--error-tint);color:var(--error)}
.feat .f-check.gold{background:var(--gold-tint);color:var(--gold-deep)}
.feat .f-body{flex:1}
.feat .f-title{font-weight:600;font-size:14.5px;color:var(--ink)}
.feat .f-sub{font-size:13px;color:var(--body);line-height:21px;margin-top:2px}

/* kpi row (admin) */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi .kpi-card{background:var(--surface);border-radius:var(--r-lg);padding:15px 16px;box-shadow:var(--e1);display:flex;flex-direction:column;gap:3px}
.kpi .k-label{font-size:11.5px;color:var(--muted);font-weight:600}
.kpi .k-value{font:700 24px var(--font-lat);color:var(--ink)}
.kpi .k-delta{font-size:11.5px;font-weight:700}
.kpi .k-delta.up{color:var(--success)}
.kpi .k-delta.down{color:var(--error)}

/* split layout */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.split .sticky-col{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px}

/* phone mockup (product frames) */
.phone{
  width:100%;max-width:330px;margin:0 auto;
  background:#1c1c1e;border-radius:40px;padding:10px;
  box-shadow:0 24px 60px rgba(20,30,28,.28);
}
.phone .screen{
  background:var(--sand);border-radius:32px;overflow:hidden;
  position:relative;aspect-ratio:390/700;
  display:flex;flex-direction:column;
}
.phone .screen .p-status{display:flex;justify-content:space-between;align-items:center;padding:10px 22px 4px;font:600 12px var(--font-lat);color:var(--ink)}
.phone .screen .p-status .batt{width:17px;height:11px;border-radius:2.5px;border:1.5px solid var(--ink);position:relative}
.phone .screen .p-status .batt::after{content:"";position:absolute;inset:1.5px;background:var(--ink);border-radius:1px}
.phone .screen .p-body{flex:1;overflow:hidden;display:flex;flex-direction:column}
.p-nav{display:flex;align-items:center;justify-content:space-around;padding:9px 6px 12px;background:var(--surface);border-top:1px solid var(--hairline)}
.p-nav .pn{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:600;color:var(--muted);flex:1}
.p-nav .pn.on{color:var(--teal)}
.p-nav .pn .pn-ic{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.p-nav .pn.book{margin-top:-18px}
.p-nav .pn.book .pn-ic{width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;box-shadow:var(--e-cta);display:flex;align-items:center;justify-content:center;font-size:18px}

/* ---------- 5. DECISION TABLES / PROPOSAL ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.dtable th{background:var(--sand);font-weight:700;font-size:12px;color:var(--ink-2);text-align:start;padding:11px 13px;border-bottom:1px solid var(--border)}
.dtable td{padding:11px 13px;border-bottom:1px solid var(--hairline);vertical-align:top;line-height:21px;color:var(--ink-2)}
.dtable tr:last-child td{border-bottom:none}
.dtable .did{font:700 12px var(--font-lat);color:var(--teal);white-space:nowrap;display:inline-block;padding:3px 10px;border-radius:999px;background:var(--teal-tint);letter-spacing:.02em}
.dtable .def{font-size:12.5px;color:var(--body)}
.dtable .flag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--gold-tint);color:var(--gold-deep)}
.dtable .flag.ask{background:var(--teal-tint);color:var(--teal)}

/* lock-in table badges */
.lock{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.lock.low{background:var(--success-tint);color:var(--green-pressed)}
.lock.mid{background:var(--warn-tint);color:#8a6400}
.lock.hi{background:var(--error-tint);color:var(--error)}

/* ---------- 6. ANIMATION HELPERS ---------- */
.rise{animation:rise .5s var(--ease-out) both}
.rise-1{animation-delay:.08s}.rise-2{animation-delay:.16s}.rise-3{animation-delay:.24s}.rise-4{animation-delay:.32s}.rise-5{animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.spin-slow{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tick{animation:pop .25s var(--ease-out)}
.count-flash{animation:flash .4s ease}
@keyframes flash{0%{background:var(--teal-tint)}100%{background:transparent}}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .sticky-col{position:static}
  .kpi{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .deck{grid-template-columns:1fr}
  html[dir="rtl"] .deck{grid-template-columns:1fr}
  .deck .stage,html[dir="rtl"] .deck .stage{grid-column:1}
  .side{position:fixed;inset-inline-start:0;top:0;bottom:0;width:264px;transform:translateX(calc(100% * var(--fwd) * -1));transition:transform .3s var(--ease-out);z-index:90}
  .side.open{transform:none;box-shadow:var(--e3)}
  .stage-inner{padding:22px 18px 20px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .phone{max-width:280px}
}
/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.15s !important}
}