/* ============================================================
   نجم الرايه — واجهة العميل
   الرايه ماركت · إدارة خدمة العملاء
   ============================================================ */

:root{
  --brand:#D1202B;
  --brand-dark:#8E1420;
  --gold:#C9A227;
  --gold-soft:#F5D77A;

  --ink:#1B1215;
  --ink-2:#4A3B40;
  --muted:#7A6A70;
  --bg:#F6F1ED;
  --surface:#fff;
  --line:#EBE1DC;
  --line-2:#DDD0CA;

  --r-lg:26px;
  --r-md:18px;
  --r-sm:13px;

  --sh-1:0 1px 2px rgba(27,18,21,.05), 0 2px 6px rgba(27,18,21,.04);
  --sh-2:0 4px 12px rgba(27,18,21,.06), 0 12px 32px rgba(27,18,21,.07);
  --sh-3:0 10px 24px rgba(27,18,21,.09), 0 28px 60px rgba(27,18,21,.11);
  --sh-brand:0 8px 20px rgba(209,32,43,.28), 0 2px 6px rgba(209,32,43,.2);

  --ease:cubic-bezier(.22,.8,.28,1);
  --ease-back:cubic-bezier(.34,1.42,.5,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

.vote-body{
  font-family:'Tajawal','Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* خلفية زخرفية ناعمة */
.bg-decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-decor span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.bg-decor span:nth-child(1){width:420px;height:420px;top:-160px;inset-inline-end:-120px;
  background:radial-gradient(circle,rgba(209,32,43,.16),transparent 70%)}
.bg-decor span:nth-child(2){width:360px;height:360px;bottom:-140px;inset-inline-start:-120px;
  background:radial-gradient(circle,rgba(201,162,39,.16),transparent 70%)}
.bg-decor span:nth-child(3){width:300px;height:300px;top:42%;inset-inline-start:52%;
  background:radial-gradient(circle,rgba(209,32,43,.07),transparent 70%)}

/* نسيج ورقي خفيف يعطي إحساس الطباعة الفاخرة */
.vote-body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238E1420' stroke-width='.8'%3E%3Cpath d='M60 0 120 60 60 120 0 60Z'/%3E%3Cpath d='M30 30h60v60H30z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* ═══════════════ الترويسة ═══════════════ */
.v-header{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(140deg,#B81C28 0%,var(--brand-dark) 62%,#66101A 100%);
  color:#fff;
  padding-top:env(safe-area-inset-top);
  box-shadow:0 6px 22px rgba(142,20,32,.26);
}
/* خيط ذهبي أسفل الترويسة */
.v-header::after{
  content:'';position:absolute;inset-inline:0;bottom:0;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.9) 22%,#F0D384 50%,rgba(201,162,39,.9) 78%,transparent);
}
.v-header__inner{
  max-width:1040px;margin:0 auto;
  padding:13px clamp(14px,4vw,26px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
/* aspect-ratio يحجز المساحة قبل تحميل الصورة فلا يقفز التخطيط */
.v-logo{height:32px;width:auto;aspect-ratio:820/347;flex-shrink:0}
@media(min-width:720px){.v-logo{height:38px}}

.v-branch{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  padding:6px 14px;border-radius:999px;
  font-size:.85rem;font-weight:700;
  backdrop-filter:blur(6px);
  white-space:nowrap;
}
.v-branch svg{width:15px;height:15px;flex-shrink:0}

/* شريط التقدّم */
.v-progress{max-width:1040px;margin:0 auto;padding:0 clamp(14px,4vw,26px) 12px}
.v-progress__bar{height:5px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.v-progress__bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));
  transition:width .55s var(--ease);
  box-shadow:0 0 12px rgba(245,215,122,.7);
}
.v-progress__steps{
  display:flex;justify-content:space-between;margin-top:7px;
  font-size:.63rem;font-weight:700;color:rgba(255,255,255,.55);
}
.v-progress__steps span{transition:color .3s ease,transform .3s var(--ease-back)}
.v-progress__steps span.on{color:#fff}
.v-progress__steps span.now{color:var(--gold-soft);transform:scale(1.1)}
@media(min-width:560px){.v-progress__steps{font-size:.76rem}}

/* ═══════════════ المسرح ═══════════════ */
.v-main{
  position:relative;z-index:1;flex:1;
  width:100%;max-width:960px;margin:0 auto;
  padding:clamp(18px,4vw,36px) clamp(14px,4vw,26px) 40px;
}
.v-step{display:none}
.v-step.is-active{display:block;animation:stepIn .5s var(--ease) both}
.v-step.is-leaving{display:block;animation:stepOut .28s ease both;pointer-events:none}

@keyframes stepIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes stepOut{to{opacity:0;transform:translateY(-14px) scale(.99)}}

/* ═══════════════ البطاقات ═══════════════ */
.card{
  position:relative;
  background:linear-gradient(180deg,#FFFDFB 0%,#FFFFFF 42%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 14px rgba(27,18,21,.06),
    0 18px 44px rgba(27,18,21,.09);
  padding:clamp(22px,4.4vw,38px);
  overflow:hidden;
}
/* لمسة ذهبية علوية */
.card::before{
  content:'';position:absolute;inset-inline:0;top:0;height:2.5px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.55) 25%,#E0BC63 50%,rgba(201,162,39,.55) 75%,transparent);
}
.card--center{text-align:center}

.t-1{
  font-family:'Cairo',sans-serif;font-weight:800;
  font-size:clamp(1.35rem,4.6vw,2rem);
  margin:0 0 6px;letter-spacing:-.3px;color:var(--ink);
}
/* معيّن ذهبي صغير تحت العنوان */
.card .t-1::after{
  content:'';display:block;width:22px;height:22px;margin:9px 0 0;
  background:
    linear-gradient(90deg,transparent 0,rgba(201,162,39,.5) 46%,transparent 46%) center/22px 1px no-repeat,
    linear-gradient(135deg,transparent 42%,#D6AE4E 42%,#D6AE4E 58%,transparent 58%) center/7px 7px no-repeat;
  opacity:.9;
}
.card--center .t-1::after{margin-inline:auto}
.t-sub{margin:0 0 22px;color:var(--muted);font-size:clamp(.9rem,2.7vw,1.02rem)}
.echo{color:var(--brand);font-weight:800}

/* ═══════════════ الترحيب — لوحة فاخرة ═══════════════ */
.hero{
  position:relative;overflow:hidden;text-align:center;
  border-radius:30px;
  padding:clamp(32px,7vw,58px) clamp(20px,5vw,52px) clamp(28px,6vw,46px);
  background:
    radial-gradient(120% 90% at 50% -20%, #A81A27 0%, #7C1019 42%, #4A0810 78%, #300309 100%);
  border:1px solid rgba(201,162,39,.34);
  box-shadow:
    0 2px 0 rgba(255,232,178,.16) inset,
    0 26px 60px rgba(60,4,12,.36),
    0 8px 20px rgba(60,4,12,.22);
  color:#FFF6EE;
  isolation:isolate;
}

/* نقش هندسي + حبيبات ورق */
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23FFE9A8' stroke-width='1'%3E%3Cpath d='M32 0 64 32 32 64 0 32Z'/%3E%3Cpath d='M16 16h32v32H16z'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:64px 64px;
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 78%);
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(80% 55% at 50% 0%, rgba(255,231,168,.2), transparent 70%);
}
.hero > *{position:relative;z-index:1}

/* خيط ذهبي علوي */
.hero__foil{
  position:absolute;inset-inline:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,#C9A227 12%,#FBEBB6 50%,#C9A227 88%,transparent);
}

/* ═══ الوسام ═══ */
.hero__emblem{
  width:clamp(112px,26vw,148px);margin:0 auto clamp(14px,3vw,20px);
  animation:emblemIn 1s var(--ease-back) both .05s;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.4));
}
.emblem{width:100%;height:auto;display:block}
@keyframes emblemIn{
  from{opacity:0;transform:translateY(-14px) scale(.72) rotate(-10deg)}
  to{opacity:1;transform:none}
}
.emblem__star{transform-origin:60px 57px;animation:starPulse 4.5s ease-in-out infinite}
@keyframes starPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.emblem__sheen{animation:sheenSweep 5.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes sheenSweep{
  0%,58%{transform:translateX(0) skewX(-18deg)}
  86%,100%{transform:translateX(230px) skewX(-18deg)}
}
.emblem__ribbon{animation:ribbonIn .7s var(--ease) both .35s;transform-origin:60px 92px}
@keyframes ribbonIn{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}

/* ═══ خط ذهبي بعنوان في المنتصف ═══ */
.rule{
  display:flex;align-items:center;gap:12px;justify-content:center;
  margin:0 auto 12px;max-width:340px;
}
.rule::before,.rule::after{
  content:'';height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.85));
}
.rule::after{background:linear-gradient(90deg,rgba(201,162,39,.85),transparent)}
/* ملاحظة: العربية لا تقبل letter-spacing (يفصل الحروف) — نستخدم word-spacing */
.rule span{
  font-weight:800;white-space:nowrap;word-spacing:.28em;
  font-size:clamp(.8rem,2.6vw,.95rem);
  color:#EBC969;text-shadow:0 1px 6px rgba(0,0,0,.4);
}

.hero__title{
  font-family:'Cairo',sans-serif;font-weight:900;
  font-size:clamp(2.4rem,10vw,4rem);
  margin:0 0 16px;line-height:1.06;letter-spacing:-1.5px;
  background:linear-gradient(180deg,#FFFDF7 12%,#FBE9BC 46%,#DDB558 78%,#C29A34 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
  animation:fadeUp .7s var(--ease) both .15s;
}
.hero__title--sm{font-size:clamp(1.8rem,7.5vw,2.7rem)}

.hero__desc{
  margin:0 auto 28px;max-width:34ch;
  color:rgba(255,240,228,.86);
  font-size:clamp(.97rem,3vw,1.14rem);line-height:1.8;
  animation:fadeUp .7s var(--ease) both .25s;
}
.hero__desc strong{color:#F6DFA4;font-weight:800}

.hero__steps{
  list-style:none;margin:0 0 30px;padding:0;
  display:flex;justify-content:center;gap:clamp(4px,3vw,28px);flex-wrap:wrap;
}
.hero__steps li{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:76px;
  animation:fadeUp .6s var(--ease) both}
.hero__steps li:nth-child(1){animation-delay:.34s}
.hero__steps li:nth-child(2){animation-delay:.44s}
.hero__steps li:nth-child(3){animation-delay:.54s}
.hero__steps b{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,244,214,.16),rgba(201,162,39,.1));
  border:1px solid rgba(240,211,132,.5);
  color:#F6DFA4;font-weight:900;font-size:1rem;
  box-shadow:0 3px 10px rgba(0,0,0,.24), 0 1px 0 rgba(255,240,200,.2) inset;
}
.hero__steps span{font-size:.81rem;color:rgba(255,240,228,.7);font-weight:600}

.hero__note{
  margin:22px auto 0;max-width:34ch;
  font-size:.78rem;color:rgba(255,240,228,.6);line-height:1.75;
  display:flex;align-items:flex-start;gap:8px;justify-content:center;flex-wrap:nowrap;
}
.hero__note svg{width:15px;height:15px;flex-shrink:0;color:#D9B45A;margin-top:4px}
.hero__note span{text-align:start}
.hero__note--plain{display:block;max-width:36ch;margin:18px auto 22px}

/* ═══════════════ الشبكات ═══════════════ */
.grid{display:grid;gap:clamp(10px,2.4vw,16px)}
.grid--dept{grid-template-columns:repeat(2,1fr)}
.grid--emp{grid-template-columns:repeat(2,1fr)}

@media(min-width:520px){
  .grid--dept{grid-template-columns:repeat(3,1fr)}
  .grid--emp{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:820px){
  /* على الشاشات الكبيرة: عرض ثابت للبطاقة مع توسيط الشبكة حتى لا تتمدد عند قلة العناصر */
  .grid--dept{grid-template-columns:repeat(auto-fit,minmax(168px,196px));justify-content:center}
  .grid--emp{grid-template-columns:repeat(auto-fit,minmax(178px,208px));justify-content:center}
}

/* بطاقة اختيار */
.pick{
  position:relative;
  font:inherit;color:inherit;cursor:pointer;
  background:var(--surface);
  border:1.5px solid var(--line-2);
  border-radius:var(--r-md);
  padding:16px 10px 14px;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  transition:transform .28s var(--ease-back),border-color .22s,box-shadow .28s,background .22s;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
}
.pick::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(209,32,43,.16),transparent 60%);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.pick:hover{border-color:#F0B9BC;box-shadow:var(--sh-2);transform:translateY(-3px)}
.pick:hover::after{opacity:1}
.pick:active{transform:scale(.965)}
.pick:focus-visible{outline:3px solid rgba(209,32,43,.35);outline-offset:2px}

.pick.is-picked{
  border-color:var(--brand);
  background:linear-gradient(160deg,#FFF6F6,#FDEDED);
  box-shadow:var(--sh-brand);
  transform:translateY(-2px) scale(1.02);
}
.pick__icon{
  width:clamp(42px,11vw,52px);height:clamp(42px,11vw,52px);
  border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(150deg,#FDF0F0,#F9E2E3);
  color:var(--brand);border:1px solid #F5D6D8;
  transition:background .25s,color .25s,transform .3s var(--ease-back);
}
.pick__icon svg{width:56%;height:56%}
.pick.is-picked .pick__icon{
  background:linear-gradient(150deg,var(--brand),var(--brand-dark));
  color:#fff;border-color:transparent;transform:scale(1.06);
}
.pick__label{
  font-weight:700;font-size:clamp(.79rem,2.5vw,.94rem);
  text-align:center;line-height:1.35;color:var(--ink);
}
.pick__check{
  position:absolute;inset-block-start:8px;inset-inline-start:8px;
  width:24px;height:24px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;
  transform:scale(0);transition:transform .34s var(--ease-back);
}
.pick__check svg{width:13px;height:13px}
.pick.is-picked .pick__check{transform:scale(1)}

/* بطاقة موظف */
.pick--emp{padding:0;gap:0;border-radius:20px}
.pick--emp .emp-photo{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  background:#F1E7E4;transition:transform .5s var(--ease),opacity .35s ease;
  opacity:0;
}
.pick--emp .emp-photo.ready{opacity:1}
.pick--emp:hover .emp-photo{transform:scale(1.05)}
.pick--emp .emp-meta{
  padding:11px 8px 13px;width:100%;text-align:center;
  background:var(--surface);position:relative;z-index:1;
}
.pick--emp .emp-name{
  display:block;font-weight:800;font-size:clamp(.82rem,2.6vw,.97rem);
  line-height:1.35;color:var(--ink);
}
.pick--emp .emp-title{
  display:block;font-size:.72rem;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pick--emp.is-picked .emp-meta{background:linear-gradient(160deg,#FFF6F6,#FDEDED)}

.empty-note{text-align:center;color:var(--muted);padding:26px 0}

/* ═══════════════ الموظف المختار ═══════════════ */
.chosen{
  display:flex;align-items:center;gap:13px;
  background:linear-gradient(150deg,#FFF7F7,#FCEDED);
  border:1px solid #F4D3D5;border-radius:var(--r-md);
  padding:11px 13px;margin-bottom:20px;
  animation:fadeUp .45s var(--ease) both;
}
.chosen img{width:52px;height:52px;border-radius:14px;object-fit:cover;
  border:2px solid #fff;box-shadow:var(--sh-1);flex-shrink:0}
.chosen b{display:block;font-size:1rem;font-weight:800;line-height:1.4}
.chosen small{color:var(--muted);font-size:.78rem}

/* ═══════════════ الاقتراحات ═══════════════ */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{
  font:inherit;cursor:pointer;
  font-size:.8rem;font-weight:600;
  padding:7px 14px;border-radius:999px;
  background:#FBF5F3;border:1.4px solid var(--line-2);color:var(--ink-2);
  transition:all .22s var(--ease);-webkit-tap-highlight-color:transparent;
}
.chip:hover{border-color:var(--brand);color:var(--brand);background:#FFF3F3}
.chip:active{transform:scale(.94)}
.chip.used{background:var(--brand);border-color:var(--brand);color:#fff}

/* ═══════════════ الحقول ═══════════════ */
.field{margin-bottom:18px}
.label{display:block;font-weight:700;font-size:.88rem;margin-bottom:7px;color:var(--ink-2)}
.input-wrap{position:relative}
.input{
  width:100%;font:inherit;font-size:1rem;
  padding:14px 16px;border-radius:var(--r-sm);
  border:1.6px solid var(--line-2);background:#FEFCFB;color:var(--ink);
  transition:border-color .22s,box-shadow .22s,background .22s;
}
.input::placeholder{color:#B9A9AE}
.input:focus{
  outline:none;border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 4px rgba(209,32,43,.12);
}
.input--area{resize:vertical;min-height:130px;line-height:1.8}
.input--mono{font-family:'Courier New',monospace;font-size:1.06rem;letter-spacing:.6px;font-weight:700}
.input.is-err{border-color:#D93025;background:#FFF7F7;animation:shake .4s}
.input-suffix{
  position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  font-size:.82rem;color:var(--muted);font-weight:700;pointer-events:none;
}
.input-wrap .input{padding-inline-start:52px}

@keyframes shake{0%,100%{transform:translateX(0)}22%{transform:translateX(-7px)}55%{transform:translateX(6px)}80%{transform:translateX(-3px)}}

.field__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;min-height:18px}
.counter{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-inline-start:auto}
.err{color:#D93025;font-size:.79rem;font-weight:600;display:block;min-height:1px}

.privacy{
  display:flex;align-items:flex-start;gap:8px;
  font-size:.78rem;color:var(--muted);line-height:1.6;
  background:#FAF6F4;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;margin:4px 0 20px;
}
.privacy svg{width:17px;height:17px;flex-shrink:0;color:var(--brand);margin-top:2px}

.form-error{
  margin:14px 0 0;background:#FFF2F2;border:1.4px solid #F5C6C6;color:#B3261E;
  border-radius:var(--r-sm);padding:12px 14px;font-size:.87rem;font-weight:600;
  animation:fadeUp .3s var(--ease) both;
}

/* ═══════════════ إرشاد الفاتورة ═══════════════ */
.invoice-hint{margin:0 0 22px}
.invoice-svg{
  width:100%;height:auto;display:block;max-width:480px;margin:0 auto;
  border-radius:var(--r-md);
}
.hl-ring{animation:ringPulse 2.2s ease-in-out infinite}
@keyframes ringPulse{0%,100%{opacity:1;stroke-width:3}50%{opacity:.45;stroke-width:4}}
.hl-badge{animation:badgeBob 2.6s ease-in-out infinite}
@keyframes badgeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hl-arrow{stroke-dasharray:120;stroke-dashoffset:120;animation:drawArrow 1s var(--ease) .3s forwards}
@keyframes drawArrow{to{stroke-dashoffset:0}}

.invoice-hint__note{
  display:flex;align-items:flex-start;gap:8px;
  margin:12px auto 0;max-width:480px;
  font-size:.8rem;color:var(--ink-2);line-height:1.65;
  background:#FFFBF0;border:1px solid #F0E2BE;border-radius:var(--r-sm);padding:10px 13px;
}
.invoice-hint__note svg{width:17px;height:17px;flex-shrink:0;color:var(--gold);margin-top:2px}
.invoice-hint__note strong{color:var(--brand-dark)}

/* ═══════════════ الأزرار ═══════════════ */
.btn{
  font:inherit;font-weight:800;cursor:pointer;
  border:none;border-radius:14px;
  padding:14px 26px;font-size:1rem;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .2s var(--ease-back),box-shadow .25s,background .25s,opacity .2s;
  -webkit-tap-highlight-color:transparent;text-decoration:none;position:relative;overflow:hidden;
}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.96)}
.btn:focus-visible{outline:3px solid rgba(209,32,43,.4);outline-offset:3px}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}

.btn--primary{
  background:linear-gradient(145deg,var(--brand),var(--brand-dark));
  color:#fff;box-shadow:var(--sh-brand);
}
.btn--primary:hover{box-shadow:0 12px 28px rgba(209,32,43,.36);transform:translateY(-2px)}

/* زر ذهبي — للوحة الفاخرة */
.btn--gold{
  background:linear-gradient(170deg,#FDF0C8 0%,#F0D384 26%,#D9B24E 62%,#B9871D 100%);
  color:#4A0810;
  border:1px solid rgba(255,248,220,.6);
  box-shadow:
    0 1px 0 rgba(255,252,238,.75) inset,
    0 -2px 6px rgba(120,80,10,.28) inset,
    0 10px 24px rgba(0,0,0,.32);
  text-shadow:0 1px 0 rgba(255,248,220,.45);
}
.btn--gold::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 48%,transparent 58%);
  transform:translateX(-130%);
}
.btn--gold:hover::after{transform:translateX(130%);transition:transform .75s var(--ease)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.36)}
.btn--gold:focus-visible{outline:3px solid rgba(245,215,122,.65);outline-offset:3px}
.btn--ghost{background:#F7F1EE;color:var(--ink-2);border:1.5px solid var(--line-2)}
.btn--ghost:hover{background:#F1E8E4;color:var(--ink)}
.btn--xl{padding:17px 44px;font-size:1.1rem;border-radius:16px}
.btn--wide{width:100%;margin-top:6px}

.step-nav{display:flex;gap:10px;margin-top:24px}
.step-nav .btn{flex:1}
.step-nav .btn--ghost{flex:0 0 auto;min-width:96px}

.btn--submit .btn__spin{
  width:18px;height:18px;border-radius:50%;display:none;
  border:2.4px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn--submit.is-loading .btn__spin{display:block}
.btn--submit.is-loading .btn__label{opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════ شاشة النجاح ═══════════════ */
.hero--done .hero__emblem{position:relative;width:clamp(104px,24vw,132px)}
.done-tick{
  position:absolute;inset-inline-end:-2px;bottom:16%;
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(150deg,#22B36A,#12854E);
  border:2.5px solid #FFF6EE;
  display:grid;place-items:center;
  box-shadow:0 5px 14px rgba(0,0,0,.35);
  animation:tickPop .5s var(--ease-back) both .55s;
}
@keyframes tickPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.done-tick svg{width:22px;height:22px}
.dm-check{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:dash .4s var(--ease) .8s forwards}
@keyframes dash{to{stroke-dashoffset:0}}

.done-emp{
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,246,238,.1);
  border:1px solid rgba(240,211,132,.42);
  border-radius:999px;padding:8px 22px 8px 8px;
  margin:2px 0 4px;color:#FFF6EE;
  backdrop-filter:blur(4px);
  animation:fadeUp .5s var(--ease) .5s both;
}
.done-emp img{width:48px;height:48px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(240,211,132,.7)}
.done-emp b{font-weight:800;color:#F6DFA4}
.closed-mark{font-size:3rem;margin-bottom:8px}

.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.confetti i{
  position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:0;
  animation:fall linear forwards;
}
@keyframes fall{
  0%{opacity:0;transform:translateY(-20px) rotate(0)}
  10%{opacity:1}
  100%{opacity:0;transform:translateY(460px) rotate(680deg)}
}

/* ═══════════════ التذييل ═══════════════ */
.v-footer{
  position:relative;z-index:1;
  text-align:center;padding:20px 16px calc(24px + env(safe-area-inset-bottom));
  color:var(--muted);font-size:.78rem;
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
}
.v-footer__logo{height:20px;width:auto;opacity:.5}

/* ═══════════════ صفحات مساعدة ═══════════════ */
.simple-wrap{max-width:760px;margin:0 auto;padding:clamp(24px,6vw,60px) 20px}
.branch-list{display:grid;gap:12px;grid-template-columns:1fr;margin-top:22px}
@media(min-width:620px){.branch-list{grid-template-columns:repeat(2,1fr)}}
.branch-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 18px;text-decoration:none;color:inherit;box-shadow:var(--sh-1);
  transition:all .24s var(--ease);
}
.branch-item:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:#F0B9BC}
.branch-item b{font-weight:800}
.branch-item small{color:var(--muted);display:block;font-size:.76rem}
.branch-item .code{
  background:#FDF0F0;color:var(--brand);font-weight:800;font-size:.78rem;
  padding:5px 11px;border-radius:8px;font-family:'Courier New',monospace;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.anim-in{animation:fadeUp .5s var(--ease) both;animation-delay:var(--d,0ms)}

/* ═══════════════ إتاحة ═══════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ═══════════════ شاشات كبيرة ═══════════════ */
@media(min-width:1024px){
  .v-main{max-width:1000px}
  .card{padding:44px}
  .hero{padding:60px 56px}
  .hero__desc{max-width:42ch}
}