/* ==========================================================================
   بوابة مزوّدي الخدمات المعتمدين — هيئة الإعلام والاتصالات
   styles.css
   • تصميم حكومي رسمي: كحلي داكن + أبيض + ذهبي هادئ
   • يدعم RTL (عربي/كردي) و LTR (English) عبر الخصائص المنطقية
   ========================================================================== */

/* ───────────────────────── 1. المتغيّرات ───────────────────────── */
:root{
  /* الألوان الأساسية */
  --navy-900:#0A1F3C;
  --navy-800:#12355F;   /* اللون الرسمي الأساسي */
  --navy-700:#1B4A85;
  --navy-600:#24619F;
  --navy-050:#EAF0F8;

  --gold-600:#A8822F;
  --gold-500:#C7A45B;   /* ذهبي هادئ */
  --gold-300:#DCC489;
  --gold-200:#EFE0BE;
  --gold-050:#FAF4E7;

  --ink:#15243B;
  --ink-soft:#3C4C66;
  --muted:#6B7B93;
  --line:#E3E8EF;
  --line-soft:#EFF2F7;

  --bg:#F1F5FA;
  --surface:#FFFFFF;

  --ok-600:#17875B;
  --ok-050:#E7F5EE;
  --err-600:#C0342B;
  --err-050:#FDECEA;

  /* الأبعاد */
  --maxw:1180px;
  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --r-xl:24px;

  --sh-sm:0 1px 2px rgba(16,35,64,.06), 0 1px 3px rgba(16,35,64,.05);
  --sh:0 2px 6px rgba(16,35,64,.06), 0 8px 24px rgba(16,35,64,.06);
  --sh-lg:0 12px 40px rgba(16,35,64,.12);

  --header-h:76px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ───────────────────────── 2. الأساسيات ───────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

html{ font-size:16px; -webkit-text-size-adjust:100%; }
@media (min-width:1600px){ html{ font-size:17.5px; } }

body{
  margin:0;
  font-family:"Cairo","Noto Kufi Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  font-size:1rem;
  line-height:1.75;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

h1,h2,h3,p,dl,dd,ol,ul{ margin:0; }
ol,ul{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; }
img,svg{ max-width:100%; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:20px;
}

.skip-link{
  position:absolute; inset-block-start:-100px; inset-inline-start:16px;
  z-index:100; background:var(--navy-800); color:#fff;
  padding:10px 18px; border-radius:0 0 var(--r) var(--r);
  text-decoration:none; font-weight:600;
}
.skip-link:focus{ inset-block-start:0; }

:focus-visible{
  outline:3px solid var(--navy-600);
  outline-offset:2px;
  border-radius:4px;
}

/* ───────────────────────── 3. الترويسة ───────────────────────── */
.app-header{
  position:sticky; inset-block-start:0; z-index:40;
  background:var(--surface);
  box-shadow:0 1px 0 rgba(16,35,64,.06);
}
.header-inner{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.header-rule{ height:3px; background:linear-gradient(90deg,var(--navy-800),var(--gold-500) 50%,var(--navy-800)); }

.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-emblem{ flex:0 0 auto; width:54px; height:54px; display:block; }
.brand-emblem img{ width:100%; height:100%; display:block; object-fit:contain; }

.em-disc{ fill:var(--navy-800); }
.em-ring{ fill:none; stroke:var(--gold-500); stroke-width:1.6; }
.em-ring2{ fill:none; stroke:var(--gold-300); stroke-width:1; opacity:.7; }
.em-star{ fill:var(--gold-500); }
.em-wave{ fill:none; stroke:var(--gold-300); stroke-width:2.2; stroke-linecap:round; }

.brand-text{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.brand-org{ font-weight:700; font-size:1.0625rem; color:var(--navy-800); white-space:nowrap; }
.brand-org-en{
  font-size:.625rem; letter-spacing:.02em; color:var(--muted);
  font-family:"Segoe UI",system-ui,sans-serif; white-space:nowrap; direction:ltr;
}
/* لا حاجة للسطر الإنكليزي حين تكون الواجهة بالإنكليزية */
html[lang="en"] .brand-org-en{ display:none; }

.header-actions{ display:flex; align-items:center; gap:10px; }

.lang-switch{
  display:flex; align-items:center; gap:4px;
  background:var(--bg); border:1px solid var(--line);
  border-radius:999px; padding:4px;
}
.lang-btn{
  border:0; background:transparent; cursor:pointer;
  padding:6px 14px; border-radius:999px;
  font-size:.8125rem; font-weight:600; color:var(--ink-soft);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.lang-btn:hover{ background:#fff; color:var(--navy-800); }
.lang-btn.is-active{ background:var(--navy-800); color:#fff; }

.icon-btn{
  display:inline-grid; place-items:center;
  width:42px; height:42px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--navy-800);
  cursor:pointer; transition:background .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover{ background:var(--navy-050); border-color:var(--navy-050); }
.icon-btn svg{ width:20px; height:20px; }
.icon-btn[hidden]{ display:none; }

/* ───────────────────────── 4. الهيكل العام ───────────────────────── */
.app-main{ flex:1 0 auto; padding-block:28px 48px; }
.screen[hidden]{ display:none; }
.screen{ animation:fade .32s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .screen{ animation:none; } }

.page-head{ text-align:center; margin-block-end:28px; }
.page-title{ font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; color:var(--navy-800); line-height:1.4; }
.page-sub{ color:var(--muted); font-size:.9375rem; margin-block-start:6px; }

.page-actions{ display:flex; justify-content:space-between; gap:14px; margin-block-start:28px; flex-wrap:wrap; }
.page-actions .btn{ min-width:150px; }

/* ───────────────────────── 5. مؤشّر الخطوات ───────────────────────── */
.stepper{
  display:flex; align-items:flex-start; justify-content:center;
  gap:0; margin-block-end:34px; max-width:720px; margin-inline:auto;
}
.stepper[hidden]{ display:none; }
.step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; }

.step::before,.step::after{
  content:""; position:absolute; inset-block-start:18px;
  height:2px; background:var(--line); z-index:0;
}
.step::before{ inset-inline-start:0; width:50%; }
.step::after{ inset-inline-end:0; width:50%; }
.step:first-child::before,.step:last-child::after{ display:none; }
.step.is-done::before,.step.is-done::after,.step.is-active::before{ background:var(--navy-700); }

.step-dot{
  position:relative; z-index:1;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface); border:2px solid var(--line);
  color:var(--muted); font-weight:700; font-size:.9375rem;
  transition:all .22s var(--ease);
}
.step-check{ display:none; }
.step-check svg{ width:18px; height:18px; }
.step-label{ font-size:.8125rem; color:var(--muted); text-align:center; font-weight:600; }

.step.is-active .step-dot{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; box-shadow:0 0 0 5px rgba(18,53,95,.12); }
.step.is-active .step-label{ color:var(--navy-800); }
.step.is-done .step-dot{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.step.is-done .step-num{ display:none; }
.step.is-done .step-check{ display:block; }
.step.is-done .step-label{ color:var(--ink-soft); }

/* ───────────────────────── 6. الأزرار ───────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 22px; min-height:48px;
  border:1px solid transparent; border-radius:var(--r);
  font-weight:700; font-size:.9375rem; cursor:pointer;
  text-decoration:none; position:relative;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), box-shadow .18s var(--ease), transform .1s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.btn-lg{ min-height:54px; padding:14px 28px; font-size:1rem; }
.btn-xl{ min-height:62px; padding:16px 38px; font-size:1.0625rem; border-radius:var(--r-lg); }

.btn-primary{ background:var(--navy-800); color:#fff; box-shadow:var(--sh-sm); }
.btn-primary:hover:not(:disabled){ background:var(--navy-700); box-shadow:var(--sh); }

.btn-ghost{ background:var(--surface); color:var(--navy-800); border-color:var(--line); }
.btn-ghost:hover:not(:disabled){ background:var(--navy-050); border-color:#CFDBEA; }

.btn-quiet{ background:rgba(255,255,255,.9); color:var(--navy-800); border-color:var(--line); }
.btn-quiet:hover:not(:disabled){ background:#fff; }

.btn-link{
  background:none; border:0; padding:4px 2px; min-height:auto;
  color:var(--navy-700); font-size:.8125rem; font-weight:700;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.btn-link:hover{ color:var(--gold-600); }

.btn-icon{ display:inline-grid; place-items:center; }
.btn-icon svg{ width:18px; height:18px; }
/* الأسهم فقط تنعكس مع اتجاه القراءة — بقية الأيقونات تبقى كما هي */
[dir="rtl"] .btn-icon[data-icon="arrow"] svg{ transform:scaleX(-1); }
[dir="rtl"] .btn-icon-back[data-icon="arrow"] svg{ transform:none; }
[dir="ltr"] .btn-icon-back[data-icon="arrow"] svg{ transform:scaleX(-1); }

.spinner{ display:none; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.is-loading .spinner{ display:block; }
.btn.is-loading .btn-label,.btn.is-loading .btn-icon{ display:none; }

/* ───────────────────────── 7. البطاقات ───────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}

/* ───────────────────────── 8. الصفحة الرئيسية ───────────────────────── */
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  background:var(--navy-800);
  isolation:isolate;
}
.hero{ min-height:600px; display:flex; flex-direction:column; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
/*  لاستعمال صورة رسمية بدل المشهد المرسوم:
    احذف عنصر <svg class="hero-scene"> من index.html وفعّل السطر التالي
    .hero-bg{ background:url('assets/hero.jpg') center/cover no-repeat; }        */
.hero-scene{ width:100%; height:100%; display:block; object-fit:cover; }
.hero-veil{
  position:absolute; inset:0;
  /* متماثل: يعمل مع RTL و LTR بلا تبديل */
  background:
    radial-gradient(ellipse 70% 62% at 50% 42%,rgba(5,17,34,.74) 0%,rgba(5,17,34,.6) 55%,rgba(5,17,34,.34) 100%),
    linear-gradient(to bottom,rgba(5,17,34,.34) 0%,rgba(5,17,34,0) 24%,rgba(5,17,34,0) 66%,rgba(5,17,34,.42) 100%);
}

/* منصّة البطل: كل ما فوق شريط الميزات */
.hero-stage{ position:relative; flex:1; display:flex; }

/* إطار ذهبي مزدوج بنمط الوثائق الرسمية */
.hero-frame{
  position:absolute; inset:20px; z-index:1; pointer-events:none;
  border:1px solid rgba(199,164,91,.42);
  border-radius:14px;
}
.hero-frame::before{
  content:""; position:absolute; inset:7px;
  border:1px solid rgba(199,164,91,.18);
  border-radius:8px;
}

.hero-body{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:64px 40px 56px;
  max-width:820px; margin-inline:auto;
  color:#fff;
}

/* ميدالية الشعار */
.hero-crest{
  position:relative; width:132px; height:132px;
  display:grid; place-items:center; margin-block-end:24px;
}
.hero-crest::before{
  content:""; position:absolute; inset:-26px; border-radius:50%;
  background:radial-gradient(circle,rgba(199,164,91,.24) 0%,rgba(199,164,91,.06) 52%,transparent 72%);
}
.hero-crest::after{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(199,164,91,.4);
}
.hero-crest img{
  position:relative; width:100%; height:100%; display:block;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.55));
}

.hero-kicker{
  font-size:.75rem; font-weight:700; letter-spacing:.24em;
  color:var(--gold-300); text-transform:uppercase;
}
.hero-org{
  font-size:1.125rem; font-weight:700; color:#fff;
  margin-block-start:6px; letter-spacing:.01em;
}

/* فاصل مزخرف: خط — معيّن — خط */
.hero-orn{ display:flex; align-items:center; gap:14px; margin-block:22px 20px; }
.orn-line{
  display:block; width:90px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,164,91,.85));
}
.orn-line:last-child{ background:linear-gradient(90deg,rgba(199,164,91,.85),transparent); }
.orn-gem{
  display:block; width:9px; height:9px; flex:0 0 auto;
  background:var(--gold-500); transform:rotate(45deg);
  box-shadow:0 0 0 4px rgba(199,164,91,.16);
}

.hero-title{
  font-size:clamp(1.625rem,3.6vw,2.5rem); font-weight:800; line-height:1.42;
  max-width:20ch; text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.hero-text{
  font-size:1.0625rem; color:rgba(255,255,255,.88);
  max-width:58ch; line-height:1.9; margin-block-start:16px;
}

.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-block-start:34px; }
.hero-actions .btn-primary{
  background:linear-gradient(180deg,var(--navy-600),var(--navy-700));
  border-color:rgba(199,164,91,.45);
  box-shadow:0 10px 26px rgba(4,16,32,.45);
}
.hero-actions .btn-primary:hover{
  background:linear-gradient(180deg,#2B6EB0,var(--navy-600));
  border-color:var(--gold-500);
}
.hero-actions .btn-quiet{
  background:rgba(255,255,255,.08); color:#fff;
  border-color:rgba(255,255,255,.3); backdrop-filter:blur(6px);
}
.hero-actions .btn-quiet:hover{ background:rgba(255,255,255,.18); border-color:rgba(199,164,91,.6); }

/* ظهور متدرّج هادئ */
.screen-home .hero-body > *{ animation:heroIn .75s var(--ease) both; }
.screen-home .hero-body > *:nth-child(1){ animation-delay:.04s; }
.screen-home .hero-body > *:nth-child(2){ animation-delay:.12s; }
.screen-home .hero-body > *:nth-child(3){ animation-delay:.18s; }
.screen-home .hero-body > *:nth-child(4){ animation-delay:.24s; }
.screen-home .hero-body > *:nth-child(5){ animation-delay:.30s; }
.screen-home .hero-body > *:nth-child(6){ animation-delay:.36s; }
.screen-home .hero-body > *:nth-child(7){ animation-delay:.44s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .screen-home .hero-body > *{ animation:none; } }

.assurance{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:rgba(4,14,30,.82);
  border-block-start:1px solid rgba(199,164,91,.28);
  backdrop-filter:blur(6px);
}
.assurance li{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:24px 18px; color:#fff; text-align:start;
}
.assurance li + li{ border-inline-start:1px solid rgba(255,255,255,.1); }
.assurance-icon{
  display:grid; place-items:center; flex:0 0 auto;
  width:44px; height:44px; border-radius:50%;
  color:var(--gold-300);
  background:rgba(199,164,91,.1);
  border:1px solid rgba(199,164,91,.34);
}
.assurance-icon svg{ width:21px; height:21px; }
.assurance-text{ font-size:.875rem; font-weight:600; line-height:1.55; color:rgba(255,255,255,.92); }

/* ───────────────────────── 9. بطاقات الخدمات ───────────────────────── */
.service-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3,1fr);
}
.service-card{
  display:flex; flex-direction:column; align-items:flex-start; text-align:start; gap:16px;
  padding:22px 22px 24px;
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  cursor:pointer; position:relative; overflow:hidden;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease),
             transform .2s var(--ease), background .2s var(--ease);
}
/* شريط علوي ملوّن يظهر عند التحديد */
.service-card::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--tone-fg,var(--navy-800));
  transform:scaleX(0); transform-origin:var(--orn-origin,right);
  transition:transform .26s var(--ease);
}
[dir="ltr"] .service-card::before{ transform-origin:left; }

.service-card:hover{ border-color:#C4D3E8; box-shadow:var(--sh); transform:translateY(-2px); }
.service-card.is-selected{
  border-color:var(--navy-800);
  background:linear-gradient(180deg,#F8FAFE 0%,#FFFFFF 60%);
  box-shadow:0 0 0 3px rgba(18,53,95,.09),var(--sh);
}
.service-card.is-selected::before{ transform:scaleX(1); }

/* علامة التحديد */
.service-check{
  position:absolute; inset-block-start:16px; inset-inline-end:16px;
  width:24px; height:24px; border-radius:50%;
  border:1.5px solid var(--line);
  background:var(--surface);
  display:grid; place-items:center;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.service-check svg{ width:14px; height:14px; color:transparent; transition:color .2s var(--ease); }
.service-card.is-selected .service-check{ background:var(--navy-800); border-color:var(--navy-800); }
.service-card.is-selected .service-check svg{ color:#fff; }

.service-icon{
  width:54px; height:54px; border-radius:15px;
  display:grid; place-items:center;
  background:var(--tone-bg,#EEF2F8); color:var(--tone-fg,var(--navy-800));
  box-shadow:inset 0 0 0 1px rgba(18,53,95,.05);
  transition:transform .2s var(--ease);
}
.service-card:hover .service-icon{ transform:scale(1.04); }
.service-icon svg{ width:27px; height:27px; }

.service-text{ display:flex; flex-direction:column; gap:6px; min-width:0; width:100%; }
.service-name{
  font-size:1.0625rem; font-weight:700; color:var(--navy-800);
  line-height:1.45; letter-spacing:-.005em;
}
.service-desc{
  font-size:.8125rem; font-weight:400; color:var(--muted);
  line-height:1.75; min-height:2.75em;
}

/* ───────────────────────── 10. النموذج ───────────────────────── */
.form-layout{ max-width:760px; margin-inline:auto; }
.form-card{ padding:30px 32px; }

/* ── لوحة الخدمات المختارة (هادئة: بلا ألوان زائدة ولا خلفيات صاخبة) ── */
.chosen{
  margin-block-end:30px;
  padding:16px 18px 6px;
  background:#FBFCFE;
  border:1px solid #EAEFF6;
  border-radius:var(--r-lg);
}
.chosen-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-block-end:12px;
  border-block-end:1px solid #EEF2F8;
}
.chosen-title{ display:flex; align-items:baseline; gap:7px; min-width:0; }
.chosen-label{
  font-size:.75rem; font-weight:700; color:var(--muted);
  letter-spacing:.02em;
}
.chosen-count{ font-size:.75rem; font-weight:600; color:#A2AFC2; }
.chosen-count[hidden]{ display:none; }
.chosen-count::before{ content:"("; }
.chosen-count::after{ content:")"; }

.chosen-edit{
  font-size:.75rem; font-weight:600; color:var(--navy-600);
  text-decoration:none; padding:0;
}
.chosen-edit:hover{ color:var(--navy-800); text-decoration:underline; text-underline-offset:3px; }

.chosen-list{ display:flex; flex-wrap:wrap; gap:8px; padding-block:14px 10px; }

.chosen-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding-block:8px; padding-inline:12px 7px;
  border-radius:10px;
  background:var(--surface); border:1px solid #E6EDF6;
  font-size:.875rem; font-weight:600; color:var(--ink);
  transition:border-color .18s var(--ease);
  animation:chipIn .3s var(--ease) both;
}
.chosen-chip:hover{ border-color:#D6E0EE; }
@keyframes chipIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .chosen-chip{ animation:none; } }

/* الأيقونة بلون خدمتها بلا دائرة ملوّنة خلفها */
.chosen-chip-icon{
  display:grid; place-items:center; flex:0 0 auto;
  color:var(--tone-fg,var(--navy-700)); opacity:.85;
}
.chosen-chip-icon svg{ width:18px; height:18px; }
.chosen-chip-name{ white-space:nowrap; }

.chosen-chip-x{
  display:grid; place-items:center; flex:0 0 auto;
  width:22px; height:22px; border-radius:6px;
  border:0; background:transparent; color:#B4C0D0; cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.chosen-chip-x svg{ width:12px; height:12px; stroke-width:2.2; }
.chosen-chip-x:hover{ background:#F1F4F9; color:var(--ink-soft); }

.chosen-empty{
  display:flex; align-items:center; gap:8px;
  color:var(--muted); font-size:.8125rem; padding-block:14px 10px;
}
.chosen-empty-icon{ display:grid; place-items:center; color:#B4C0D0; }
.chosen-empty-icon svg{ width:16px; height:16px; }

.sel-count{
  display:inline-block; margin-block-start:12px;
  padding:5px 14px; border-radius:999px;
  background:var(--navy-050); border:1px solid #D8E3F2;
  font-size:.8125rem; font-weight:700; color:var(--navy-700);
}
.sel-count[hidden]{ display:none; }

.field{ margin-block-end:20px; }
.label{ display:flex; align-items:center; gap:4px; font-size:.875rem; font-weight:700; color:var(--ink-soft); margin-block-end:8px; }
.req{ color:var(--err-600); font-weight:700; }
.optional{ font-weight:500; color:var(--muted); font-size:.8125rem; }

.input-wrap{ position:relative; display:block; }
.input{
  width:100%; min-height:52px;
  padding-block:13px;
  font:inherit; font-size:.9375rem; color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--r);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
/* الحشوة فيزيائية عمداً: بعض الحقول تحمل dir="ltr" (هاتف/بريد)
   بينما الأيقونة تتبع اتجاه الصفحة، فلا يصح استعمال padding-inline هنا */
[dir="rtl"] .input{ padding-left:52px; padding-right:16px; }
[dir="ltr"] .input{ padding-left:16px; padding-right:52px; }
/* توحيد محاذاة الحقول اللاتينية مع بقية الحقول في الواجهة العربية */
[dir="rtl"] .input[dir="ltr"]{ text-align:right; }
.input::placeholder{ color:#A4B0C2; }
.input:hover{ border-color:#CFDBEA; }
.input:focus{ outline:none; border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(27,74,133,.12); }
.textarea{ min-height:96px; resize:vertical; line-height:1.7; }

.input-icon{
  position:absolute; inset-inline-end:0; inset-block-start:0;
  width:48px; height:52px;
  display:grid; place-items:center;
  color:#8B9BB2; pointer-events:none;
  border-inline-end:0;
}
.input-icon::before{
  content:""; position:absolute; inset-block:12px; inset-inline-start:0;
  width:1px; background:var(--line);
}
.input-icon svg{ width:19px; height:19px; }
.input-icon-top{ height:48px; }
.input:focus ~ .input-icon{ color:var(--navy-700); }

.hint{ font-size:.75rem; color:var(--muted); margin-block-start:6px; }
.counter{ text-align:end; direction:ltr; }
.error{ font-size:.8125rem; color:var(--err-600); font-weight:600; margin-block-start:6px; }
.error[hidden]{ display:none; }
.input.is-invalid{ border-color:var(--err-600); background:var(--err-050); }
.input.is-invalid:focus{ box-shadow:0 0 0 3px rgba(192,52,43,.12); }

.form-note{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:var(--r);
  background:var(--gold-050); border:1px solid var(--gold-200);
  font-size:.8125rem; color:var(--ink-soft); line-height:1.65;
}
.note-icon{ color:var(--gold-600); flex:0 0 auto; display:grid; place-items:center; margin-block-start:2px; }
.note-icon svg{ width:17px; height:17px; }

.form-actions{ margin-block-start:26px; }

/* ───────────────────────── 10b. شاشة المراجعة ───────────────────────── */
.review-card{ padding:26px 30px 28px; }

.review-block + .review-block{ margin-block-start:22px; }
.review-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-block-end:10px; border-block-end:1px solid #EEF2F8;
}
.review-title{ font-size:.8125rem; font-weight:700; color:var(--muted); letter-spacing:.02em; }

.review-services{ display:flex; flex-wrap:wrap; gap:8px; padding-block:14px 4px; }
.review-service{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 13px; border-radius:10px;
  background:#FBFCFE; border:1px solid #E6EDF6;
  font-size:.875rem; font-weight:600; color:var(--ink);
}
.review-service-icon{ display:grid; place-items:center; color:var(--tone-fg,var(--navy-700)); opacity:.85; }
.review-service-icon svg{ width:18px; height:18px; }

.review-list{ padding-block:6px; }
.review-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding-block:11px;
}
.review-row + .review-row{ border-block-start:1px solid #F2F5FA; }
.review-row dt{ font-size:.8125rem; color:var(--muted); flex:0 0 auto; }
.review-row dd{
  font-size:.9375rem; font-weight:600; color:var(--ink);
  text-align:end; overflow-wrap:anywhere;
}
.review-note{ margin-block-start:24px; }

/* ── زر «تعديل الطلب» ──
   شكل مستقل عن الزر الأساسي: خلفية بيضاء وإطار كحلي فاتح،
   والأيقونة داخل قرص هادئ — يبيّن كإجراء تصحيحي لا كدعوة رئيسية. */
.btn-edit{
  background:var(--navy-800);
  color:#fff;
  border-color:var(--navy-800);
  box-shadow:var(--sh-sm);
  padding-inline-start:9px;      /* مساحة قرص الأيقونة */
  gap:12px;
}
.btn-edit .btn-icon{
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff;
  transition:background .18s var(--ease);
}
.btn-edit .btn-icon svg{ width:17px; height:17px; }
.btn-edit:hover:not(:disabled){
  background:var(--navy-700);
  border-color:var(--navy-700);
  box-shadow:var(--sh);
}
.btn-edit:hover:not(:disabled) .btn-icon{ background:rgba(255,255,255,.26); }

/* زر العودة: نيلي أيضاً لكن بإطار — يحافظ على الترتيب البصري */
.success-actions .btn-ghost{ color:var(--navy-800); border-color:#BCCDE3; }
.success-actions .btn-ghost:hover:not(:disabled){
  background:var(--navy-050); border-color:var(--navy-600);
}

/* توازن الصف: الزرّان بنفس العرض */
.success-actions .btn{ flex:0 1 240px; }

/* سطر نافذة التعديل — يمهّد لزر «تعديل الطلب» أسفله */
.fix-line{
  margin-block-start:24px; margin-block-end:4px;
  font-size:.8125rem; color:var(--gold-600);
  line-height:1.7; text-align:center;
}
.fix-line:empty{ display:none; }

/* العدّاد التنازلي داخل السطر */
.edit-timer{
  display:inline-block; margin-inline:2px; padding:1px 8px;
  border-radius:999px; background:var(--gold-050);
  border:1px solid var(--gold-200);
  font-variant-numeric:tabular-nums; font-weight:800;
  color:var(--gold-600); unicode-bidi:isolate;
}

/* بعد انتهاء المدة: نبرة محايدة لا تحريضية */
.fix-line.is-closed{
  color:var(--muted);
  max-width:46ch; margin-inline:auto;
}

@media (max-width:560px){
  .review-card{ padding:22px 18px 24px; }
  .review-row{ flex-direction:column; gap:2px; }
  .review-row dd{ text-align:start; }
}

/* ───────────────────────── 11. صفحة النجاح ───────────────────────── */
.success-card{
  max-width:620px; margin-inline:auto;
  padding:44px 36px 34px; text-align:center;
  box-shadow:var(--sh);
}
.success-seal{
  width:92px; height:92px; margin-inline:auto; margin-block-end:22px;
  border-radius:50%; display:grid; place-items:center;
  background:var(--ok-050); color:var(--ok-600);
  box-shadow:0 0 0 8px rgba(23,135,91,.07);
}
.success-seal svg{ width:46px; height:46px; }
.success-title{ font-size:clamp(1.375rem,3vw,1.75rem); font-weight:800; color:var(--navy-800); }

.order-box{
  margin-block:24px;
  padding:18px 24px 16px;
  background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-lg);
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  min-width:min(380px,100%); max-width:100%;
}
.order-label{ font-size:.75rem; font-weight:700; color:var(--muted); }
.order-row{ display:flex; align-items:center; gap:10px; }

/* فاصل بين رقم الطلب والجهة المُحال إليها */
.order-sep{
  display:block; width:100%; height:1px; margin-block:14px 12px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}
.order-company{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-block-start:5px; max-width:100%;
}
.order-company-icon{
  display:grid; place-items:center; flex:0 0 auto;
  width:30px; height:30px; border-radius:50%;
  background:var(--gold-050); color:var(--gold-600);
  border:1px solid var(--gold-200);
}
.order-company-icon svg{ width:16px; height:16px; }
.order-company-name{
  font-size:1.0625rem; font-weight:700; color:var(--navy-800); line-height:1.5;
}
.order-number{
  font-size:clamp(1.25rem,3.4vw,1.625rem); font-weight:800;
  color:var(--navy-800); letter-spacing:.06em;
  font-family:"Segoe UI",Consolas,monospace;
}
.copy-btn{ width:36px; height:36px; border-radius:var(--r-sm); }
.copy-btn svg{ width:17px; height:17px; }

.success-text{ color:var(--ink-soft); font-size:.9375rem; line-height:1.8; }

.receipt{ margin-block-start:28px; text-align:start; }
.receipt-head{
  margin:0 0 10px; font-size:.8125rem; font-weight:800;
  letter-spacing:.02em; color:var(--muted);
  text-transform:none; text-align:start;
}
.receipt-list{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.receipt-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 16px; }
.receipt-row + .receipt-row{ border-block-start:1px solid var(--line-soft); }
.receipt-row:nth-child(odd){ background:#FAFBFD; }
.receipt-row dt{ font-size:.8125rem; font-weight:700; color:var(--muted); flex:0 0 auto; }
.receipt-row dd{ font-size:.875rem; font-weight:600; color:var(--ink); text-align:end; }
.receipt .btn{ margin-block-start:16px; width:100%; }

.success-actions{ justify-content:center; margin-block-start:30px; }

/* ───────────────────────── 12. الشركات المعتمدة ───────────────────────── */
.search-wrap{ position:relative; max-width:560px; margin:0 auto 24px; }
[dir="rtl"] .search-input{ padding-right:48px; padding-left:16px; }
[dir="ltr"] .search-input{ padding-left:48px; padding-right:16px; }
.search-icon{
  position:absolute; inset-inline-start:0; inset-block-start:0;
  width:46px; height:52px; display:grid; place-items:center;
  color:#8B9BB2; pointer-events:none;
}
.search-icon svg{ width:19px; height:19px; }

.company-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.company-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding:26px 18px 22px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.company-card:hover{ border-color:#CFDBEA; box-shadow:var(--sh); transform:translateY(-2px); }

/* رقم التسلسل كما ورد في كتاب الهيئة */
.company-no{
  position:absolute; inset-block-start:12px; inset-inline-start:14px;
  min-width:22px; height:22px; padding-inline:6px;
  display:grid; place-items:center; border-radius:7px;
  background:var(--bg); color:var(--muted);
  font-size:.6875rem; font-weight:700; line-height:1;
}

.company-logo{
  width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(180deg,#F2F6FC,#E8EFF9);
  border:1px solid #DCE6F3;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.8);
}
.company-logo img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.company-mono{
  font-weight:800; font-size:1.25rem; color:var(--navy-800); letter-spacing:.01em;
}

.company-name{
  font-size:.9375rem; font-weight:700; color:var(--navy-800);
  line-height:1.6; min-height:3.2em;
  display:flex; align-items:center; justify-content:center;
}

.company-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  background:var(--gold-050); border:1px solid var(--gold-200);
  font-size:.6875rem; font-weight:700; color:var(--gold-600);
}
.company-badge svg{ width:14px; height:14px; }

.empty{ text-align:center; color:var(--muted); padding-block:32px; font-size:.9375rem; }
.empty[hidden]{ display:none; }

.notice{
  display:flex; align-items:flex-start; gap:10px;
  margin-block-start:24px; padding:12px 16px;
  background:var(--gold-050); border:1px solid var(--gold-200);
  border-radius:var(--r); font-size:.8125rem; color:var(--ink-soft); line-height:1.7;
}
.notice-icon{ color:var(--gold-600); flex:0 0 auto; display:grid; place-items:center; margin-block-start:2px; }
.notice-icon svg{ width:17px; height:17px; }
.notice-source{ display:block; margin-block-start:4px; font-size:.75rem; color:var(--muted); }

/* ───────────────────────── 13. شاشة الشكر ───────────────────────── */
.thanks-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh);
  text-align:center;
  min-height:min(520px,68vh);
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer;
}
.thanks-body{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:56px 28px 36px;
}
.thanks-logo{ position:relative; width:138px; height:138px; margin-block-end:26px; }
.thanks-logo img{ width:100%; height:100%; display:block; filter:drop-shadow(0 8px 22px rgba(10,31,60,.18)); }
.thanks-badge{
  position:absolute; inset-block-end:-4px; inset-inline-end:-4px;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--navy-800); color:var(--gold-300);
  border:3px solid var(--surface);
}
.thanks-badge svg{ width:23px; height:23px; }
.thanks-title{ font-size:clamp(1.5rem,3.4vw,2rem); font-weight:800; color:var(--navy-800); }
.thanks-divider{ display:block; width:72px; height:3px; border-radius:2px; background:var(--gold-500); margin-block:16px; }
.thanks-org{ font-size:1.0625rem; font-weight:700; color:var(--ink-soft); }
.thanks-sub{ font-size:.9375rem; color:var(--muted); margin-block-start:2px; }
.thanks-hint{ font-size:.75rem; color:#93A1B5; margin-block-start:22px; }

.thanks-wave{ position:relative; align-self:stretch; }
.thanks-wave svg{ display:block; width:100%; height:auto; }
.wave-gold{ fill:var(--gold-500); opacity:.55; }
.wave-navy{ fill:var(--navy-800); }
.thanks-motto{
  position:absolute; inset-inline:0; inset-block-end:28px;
  color:#fff; font-weight:700; font-size:1.0625rem; letter-spacing:.01em;
}

/* ───────────────────────── 14. التذييل ───────────────────────── */
.app-footer{
  flex:0 0 auto;
  background:var(--navy-900); color:rgba(255,255,255,.7);
  border-block-start:3px solid var(--gold-500);
}
.footer-inner{ padding-block:22px; text-align:center; display:grid; gap:2px; }
.footer-org{ color:#fff; font-weight:700; font-size:.9375rem; }
.footer-sys{ font-size:.8125rem; }
.footer-copy{ font-size:.75rem; color:rgba(255,255,255,.5); }

/* ───────────────────────── 15. التنبيه العائم ───────────────────────── */
.toast{
  position:fixed; inset-block-end:26px; inset-inline:0;
  margin-inline:auto; width:max-content; max-width:90vw; z-index:80;
  background:var(--navy-900); color:#fff;
  padding:12px 22px; border-radius:999px;
  font-size:.875rem; font-weight:600; box-shadow:var(--sh-lg);
  animation:toastIn .25s var(--ease);
}
.toast[hidden]{ display:none; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

/* ───────────────────────── 16. الاستجابة ───────────────────────── */
@media (max-width:1024px){
  .service-grid,.company-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-body{ padding:52px 38px 46px; }
}

@media (max-width:820px){
  .header-inner{ flex-wrap:wrap; padding-block:10px; gap:10px; }
  .brand-org{ font-size:.9375rem; white-space:normal; }
  .brand-org-en{ display:none; }
  .hero{ min-height:0; }
  .hero-veil{ background:linear-gradient(to top,rgba(8,26,50,.96) 34%,rgba(8,26,50,.62) 100%) !important; }
  .hero-body{ padding:44px 26px 38px; max-width:none; }
  .assurance{ grid-template-columns:1fr; }
  .assurance li + li{ border-inline-start:0; border-block-start:1px solid rgba(255,255,255,.12); }
  .form-card{ padding:24px 20px; }
  .success-card{ padding:34px 22px 26px; }
  .stepper{ margin-block-end:26px; }
  .step-label{ font-size:.6875rem; }
}

@media (max-width:560px){
  .service-grid,.company-grid{ grid-template-columns:1fr; }
  /* بطاقات أفقية مضغوطة على الهاتف */
  .service-card{ flex-direction:row; align-items:center; text-align:start; gap:14px; padding:16px 18px; }
  .service-icon{ width:52px; height:52px; border-radius:14px; }
  .service-icon svg{ width:26px; height:26px; }
  .service-card.is-selected::after{ inset-block-start:50%; transform:translateY(-50%); }
  .company-card{ flex-direction:row; align-items:center; text-align:start; gap:14px; }
  .company-text{ align-items:flex-start; }
  .company-tags{ justify-content:flex-start; }
  .lang-btn{ padding:6px 10px; font-size:.75rem; }
  .page-actions{ flex-direction:column-reverse; }
  .page-actions .btn{ width:100%; }
  .hero-actions .btn{ width:100%; }
  .receipt-row{ flex-direction:column; align-items:flex-start; gap:2px; }
  .receipt-row dd{ text-align:start; }
  .thanks-card{ padding-block-start:44px; min-height:420px; }
}

/* شاشات Kiosk الكبيرة */
@media (min-width:1400px){
  .assurance li{ padding-block:24px; }
  .hero-body{ padding:76px 60px 64px; }
}

/* ───────────────────────── 17. الطباعة ───────────────────────── */
@media print{
  .app-header,.app-footer,.stepper,.success-actions,.receipt .btn,.toast,.skip-link{ display:none !important; }
  body{ background:#fff; }
  .success-card{ box-shadow:none; border:1px solid #999; max-width:none; }
  .receipt{ display:block !important; }
}