/* ======================================================================
   KILZ — انماط قوالب كود المنصات (الفصل 3.2)
   مولد آليا من tools/build_page_css.php — لا يحرر يدويا.
   البنية منقولة من القوالب الرسمية: home · service · content · faqs
   sitemap · error · cookiesBanner · feedback · rating
   كل القيم رموز من theme.css. لا قيمة لونية ثابتة هنا.
   ====================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
/* نص لقارئ الشاشة وحده — تعرف هنا لا في كل صفحة */
.sr-only{
  position:absolute!important; inline-size:1px!important; block-size:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important;
}
html{scroll-behavior:smooth}
body.tpl-page{
  font-family:var(--font-ar);
  font-size:var(--fs-text-md); line-height:var(--lh-text-md);
  color:var(--ink-soft); background:var(--surface);
  min-block-size:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body.tpl-page > main{flex:1}
img{max-inline-size:100%;display:block}
a{color:var(--brand-2);text-underline-offset:3px}
/* العناوين ترث لون سياقها. فرض لون عام هنا يقلب النص الى داكن فوق كل
   لوحة داكنة (الهيرو، بطاقة الدعوة، ترويسة النافذة) — فيحدد اللون في
   موضعه لا عالميا. */
h1,h2,h3,h4,h5{ text-wrap:balance; }
.page-head h1, .articles h2, .articles h3, .acc summary,
.help-card h2, .err h1, .toc h2, .sec-title{ color:var(--ink); }

/* 2.3 الحاوية — 1280، وحشوة الاقسام 16 جوال / 80 سطح مكتب كما في القوالب */
.wrap{ inline-size:100%; margin-inline:auto; padding-inline:var(--sp-2xl); }
@media (min-width:640px){  .wrap{ max-inline-size:640px;  padding-inline:var(--sp-xl); } }
@media (min-width:768px){  .wrap{ max-inline-size:768px;  } }
@media (min-width:1024px){ .wrap{ max-inline-size:1024px; } }
@media (min-width:1280px){ .wrap{ max-inline-size:var(--container-max); } }

.skip-link{
  position:absolute; inset-block-start:calc(var(--sp-6xl) * -1);
  inset-inline-start:var(--sp-xl); z-index:2000;
  background:var(--brand-2); color:var(--brand-ink);
  padding:var(--sp-lg) var(--sp-3xl); border-radius:var(--r-sm);
  font-weight:600; text-decoration:none; transition:.2s;
}
.skip-link:focus{ inset-block-start:var(--sp-xl); }

/* ---------- شريط التنقل — مقيس من ideas.mawani.gov.sa ----------
   ترويسة بيضاء لاصقة بظل، لا خضراء داكنة. */
#hdr{
  position:sticky; inset-block-start:env(safe-area-inset-top,0px); z-index:1000;
  background:var(--surface); box-shadow:var(--shadow-sm);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3xl); }
.nav-start{ display:flex; align-items:center; gap:26px; min-inline-size:0; }
.nav-end{ display:flex; align-items:center; gap:var(--sp-lg); }
.brand{ display:flex; align-items:center; flex:none; min-block-size:var(--touch-min); }
.brand img{ inline-size:100px; block-size:auto; }

.nav-links{ display:none; align-items:center; }
@media (min-width:960px){ .nav-links{ display:flex; } }
.nav-link{
  position:relative; block-size:72px; min-inline-size:90px;
  padding-inline:var(--sp-xl); display:flex; align-items:center; justify-content:center;
  gap:6px; text-decoration:none; color:var(--ink);
  font-weight:500; font-size:var(--fs-text-md); line-height:var(--lh-text-md);
  border-start-start-radius:var(--r-md); border-start-end-radius:var(--r-md);
  transition:background .15s, color .15s;
}
.nav-link:hover{ background:var(--tint-2); }
.nav-ind{
  position:absolute; inset-block-end:0; inset-inline:6px; block-size:6px;
  border-radius:var(--r-full); background:var(--disabled); display:none;
}
.nav-link:hover .nav-ind{ display:block; }
.nav-link.is-active{ background:var(--brand-2); color:var(--brand-ink); }
.nav-link.is-active .nav-ind{ display:none; }

.lang-btn{
  display:inline-flex; align-items:center; justify-content:center;
  block-size:40px; padding-inline:var(--sp-xl); border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  text-decoration:none; font-weight:500; font-size:var(--fs-text-sm); transition:.15s;
}
.lang-btn:hover{ border-color:var(--brand-2); color:var(--brand-2); }
.nav-toggle{
  display:inline-flex; align-items:center; min-block-size:var(--touch-min);
  padding-inline:var(--sp-xl); border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font-weight:500;
  font-size:var(--fs-text-sm); cursor:pointer;
}
@media (min-width:960px){ .nav-toggle{ display:none; } }
.nav-mob{
  display:flex; flex-direction:column; border-block-start:1px solid var(--line);
  padding:var(--sp-md) var(--sp-xl) var(--sp-xl);
}
.nav-mob[hidden]{ display:none; }
@media (min-width:960px){ .nav-mob{ display:none!important; } }
.nav-mob .nav-link{
  block-size:auto; min-block-size:var(--touch-min); justify-content:flex-start;
  border-radius:var(--r-sm); padding-inline:var(--sp-lg);
}
.nav-mob .nav-ind{ display:none!important; }

/* ---------- عنوان القسم — الشريط الاخضر المميز ---------- */
.sec-title{
  display:flex; align-items:center; gap:var(--sp-md);
  font-size:var(--fs-text-lg); line-height:1.3; font-weight:700; color:var(--ink);
}
.sec-title::before{
  content:""; flex:none; inline-size:4px; block-size:20px;
  border-radius:var(--r-full); background:var(--brand);
}
@media (min-width:600px){ .sec-title{ font-size:var(--fs-text-xl); } }
@media (min-width:960px){
  .sec-title{ font-size:36px; line-height:1.25; }
  .sec-title::before{ block-size:42px; }
}

/* ---------- ايقاع الاقسام ---------- */
.sec{ display:flex; flex-direction:column; gap:var(--sp-2xl); margin-block:var(--sp-2xl); }
@media (min-width:600px){ .sec{ margin-block:36px; } }
@media (min-width:960px){ .sec{ gap:var(--sp-5xl); margin-block:var(--sp-8xl); } }

/* ---------- شريط مسار التصفح والعنوان (خلفية crumb-bg في القوالب) ---------- */
.page-head{ background:var(--crumb-bg); }
.page-head .wrap{ padding-block:var(--sp-5xl); }
.page-head + .section .wrap{ padding-block-start:var(--sp-5xl); }
.crumbs{
  display:flex; flex-wrap:wrap; gap:var(--sp-md); align-items:center;
  font-size:var(--fs-text-sm); line-height:var(--lh-text-sm);
  color:var(--muted); min-block-size:var(--touch-min);
}
.crumbs a{
  color:var(--brand-2); text-decoration:none;
  display:inline-flex; align-items:center; min-block-size:var(--touch-min);
  padding-inline:var(--sp-xs); border-radius:var(--r-xs);
}
.crumbs a:hover{ text-decoration:underline; }
.crumbs span[aria-hidden]{ color:var(--disabled); }
/* h1 القوالب: 30/38/700 في sitemap و service — و 48/60 في content و faqs */
.page-head h1{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); font-weight:700; }
.page-head.lg h1{ font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); font-weight:600; }
@media (min-width:960px){
  .page-head.lg h1{ font-size:var(--fs-display-lg); line-height:var(--lh-display-lg); letter-spacing:-.02em; }
}
.page-head .lede{
  margin-block-start:var(--sp-xl); color:var(--ink-soft);
  font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); font-weight:600;
  max-inline-size:var(--paragraph-max);
}
.page-head .sub{ margin-block-start:var(--sp-md); color:var(--ink-soft); max-inline-size:var(--paragraph-max); }

.section{ padding-block:var(--sp-5xl); }
/* الترويسة لاصقة بارتفاع 72px: كل هدف مرساة يترك لها مساحة
   حتى لا يقص عنوانه عند القفز اليه. */
[id]{ scroll-margin-block-start:88px; }
html{ scroll-padding-block-start:88px; }

/* ---------- قالب: صفحة المحتوى (content) ---------- */
.content-layout{ display:flex; flex-direction:column; gap:var(--sp-4xl); }
@media (min-width:960px){ .content-layout{ flex-direction:row; align-items:flex-start; } }
.toc{
  background:var(--surface-2); padding:var(--sp-3xl);
  border-radius:var(--r-md); flex:none; inline-size:100%;
}
@media (min-width:960px){ .toc{ position:sticky; inset-block-start:88px; inline-size:280px; } }
.toc .toc-head{ font-size:var(--fs-text-sm); color:var(--muted); font-weight:500; margin-block-end:var(--sp-xs); }
.toc h2{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); font-weight:700; margin-block-end:var(--sp-lg); }
.toc ul{ list-style:none; }
.toc a{
  display:flex; align-items:center; min-block-size:var(--touch-min);
  color:var(--ink-soft); text-decoration:none;
  font-size:var(--fs-text-sm); border-radius:var(--r-xs);
  padding-inline:var(--sp-md); transition:.2s;
}
.toc a:hover, .toc a:focus-visible{ background:var(--brand-pale); color:var(--brand); }
.toc .sub{ padding-inline-start:var(--sp-xl); }
.toc .sub a{ color:var(--muted); font-size:var(--fs-text-sm); }
.articles{ flex:1; display:flex; flex-direction:column; gap:var(--sp-4xl); min-inline-size:0; }
.articles article{ display:flex; flex-direction:column; gap:var(--sp-md); scroll-margin-block-start:var(--sp-8xl); }
.articles h2{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); font-weight:700; }
.articles h3{ font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); font-weight:700; }
.articles p, .articles li{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); max-inline-size:var(--paragraph-max); }
.articles ul, .articles ol{ padding-inline-start:var(--sp-3xl); display:flex; flex-direction:column; gap:var(--sp-md); }
.articles strong{ color:var(--ink); font-weight:600; }

/* ---------- قالب: صفحة الخدمة (service) — شبكة 12 عمودا ---------- */
.svc-layout{ display:grid; grid-template-columns:1fr; gap:var(--sp-4xl); }
@media (min-width:1280px){ .svc-layout{ grid-template-columns:7fr 5fr; } }
.svc-title{ display:flex; flex-wrap:wrap; gap:var(--sp-xl); align-items:center; justify-content:space-between; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:var(--sp-md); margin-block:var(--sp-xl); }
.tag-chip{
  display:inline-flex; align-items:center; border-radius:var(--r-full);
  padding:var(--sp-xs) var(--sp-lg); font-size:var(--fs-text-sm); font-weight:500;
  background:var(--info-bg); color:var(--info);
}
.tag-chip.ok{ background:var(--ok-bg); color:var(--ok); }
.svc-steps{ list-style:decimal; padding-inline-start:var(--sp-3xl); display:flex; flex-direction:column; gap:var(--sp-xl); color:var(--brand); }
.svc-steps li{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); }
.svc-steps li > span{ color:var(--ink-soft); }
/* بطاقة الخدمة */
.svc-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-2xl); padding:var(--sp-5xl);
  display:flex; flex-direction:column; gap:var(--sp-3xl);
}
.svc-card .row{ display:flex; flex-direction:column; gap:var(--sp-xs); }
.svc-card .row dt{ font-size:var(--fs-text-md); font-weight:700; color:var(--ink); }
.svc-card .row dd{ font-size:var(--fs-text-md); color:var(--ink-soft); }
.svc-card hr{ border:0; border-block-start:1px solid var(--line); }
.svc-card a{ min-block-size:var(--touch-min); display:inline-flex; align-items:center; }

/* ---------- قالب: الاسئلة الشائعة (faqs) — dga-accordion ---------- */
.acc{ border-block-start:1px solid var(--line); background:var(--surface); }
.acc:last-of-type{ border-block-end:1px solid var(--line); }
.acc summary{
  cursor:pointer; list-style:none; padding:var(--sp-xl);
  font-weight:600; color:var(--ink);
  font-size:var(--fs-text-md); line-height:var(--lh-text-md);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-xl);
  min-block-size:var(--touch-min); transition:.2s;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ background:var(--brand-pale); }
.acc summary:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
/* الشيفرون: يشير جانبا عند الاغلاق ولاسفل عند الفتح.
   الشكل الاساس مرسوم بحدين فيزيائيين (right + bottom) فيكون سهما
   لاسفل عند rotate(45). الحد المنطقي لا يصلح هنا لانه ينقلب مع
   الاتجاه فيغير معنى الدوران. الاتجاه الجانبي وحده يعكس بين
   العربية والانجليزية: يسار في RTL ويمين في LTR. */
.acc summary::after{
  content:""; inline-size:10px; block-size:10px; flex:none;
  border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(135deg);                 /* مغلق — يسار (الافتراضي RTL) */
  transition:transform .3s ease-in-out;
}
html[dir="ltr"] .acc summary::after{ transform:rotate(-45deg); }  /* مغلق — يمين */
.acc[open] summary::after,
html[dir="ltr"] .acc[open] summary::after{ transform:rotate(45deg); }  /* مفتوح — تحت */
.acc .acc-body{
  padding-inline:var(--sp-xl) var(--sp-6xl); padding-block-end:var(--sp-xl);
  font-size:var(--fs-text-md); line-height:var(--lh-text-md);
}
.acc .acc-body p + p{ margin-block-start:var(--sp-lg); }
/* بطاقة التعليقات والاقتراحات في قالب faqs */
.help-card{
  border:1px solid var(--line); border-radius:var(--r-2xl); background:var(--surface);
  padding:var(--sp-4xl); display:flex; flex-wrap:wrap; gap:var(--sp-3xl);
  align-items:center; justify-content:space-between; margin-block-start:var(--sp-6xl);
}
.help-card .ico{
  inline-size:56px; block-size:56px; border-radius:var(--r-full); flex:none;
  background:var(--brand-pale); color:var(--brand);
  display:grid; place-items:center;
}
.help-card .ico svg{ inline-size:var(--icon); block-size:var(--icon); }
.help-card h2{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); font-weight:600; margin-block-end:var(--sp-xs); }
.help-card p{ font-size:var(--fs-text-md); color:var(--ink-soft); }

/* ---------- قالب: صفحة الخطا (error) ---------- */
.err{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-7xl); padding-block:var(--sp-8xl);
}
.err .art{ inline-size:100%; max-inline-size:460px; }
.err .msg{ max-inline-size:460px; }
.err h1{ font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); font-weight:600; margin-block-end:var(--sp-xl); }
.err p{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--ink-soft); margin-block-end:var(--sp-4xl); }

/* ---------- قالب: خريطة الموقع (sitemap) — قائمة متعششة لا اعمدة ---------- */
.sitemap{ display:flex; flex-direction:column; gap:var(--sp-2xl); color:var(--brand-2); }
.sitemap ul{ display:flex; flex-direction:column; gap:var(--sp-2xl); list-style-position:inside; }
.sitemap > ul{ list-style-type:disc; }
.sitemap ul ul{ margin-inline-start:var(--sp-xl); list-style-type:circle; }
.sitemap a{
  color:var(--brand-2); text-decoration:none;
  font-size:var(--fs-text-md); font-weight:500;
}
.sitemap ul ul a{ font-size:var(--fs-text-sm); font-weight:400; }
.sitemap a:hover{ text-decoration:underline; }
.sitemap li{ min-block-size:var(--touch-min); display:flex; align-items:center; }
.sitemap .tpl{ color:var(--muted); font-size:var(--fs-text-xs); font-weight:400; margin-inline-start:var(--sp-md); }

/* ---------- تاريخ اخر تعديل ---------- */
.last-mod{
  font-size:var(--fs-text-sm); line-height:var(--lh-text-sm); color:var(--muted);
  text-align:end; padding-block-start:var(--sp-4xl);
}

/* ---------- الفواصل الافقية ---------- */
hr{ border:0; border-block-start:1px solid var(--line); color:var(--line); }

/* ---------- الفاصل dga-divider ---------- */
.divider{ border:0; border-block-start:1px solid var(--line); color:var(--line); margin:0; }

/* ---------- الازرار dga-btn ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-block-size:var(--touch-min); block-size:44px; padding-inline:var(--sp-xl);
  border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-weight:500;
  font-size:var(--fs-text-md); line-height:var(--lh-text-md);
  text-decoration:none; transition:.2s;
}
.btn-primary{ background:var(--brand-2); color:var(--brand-ink); }
.btn-primary:hover{ background:var(--brand-hover); }
.btn-primary:active{ background:var(--brand-dim); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-soft); }
.btn-outline:hover{ border-color:var(--brand); color:var(--brand); }
.btn-transparent{ background:transparent; color:var(--ink); }
.btn-transparent:hover{ background:var(--surface-2); }
.btn-line{ background:var(--surface); color:var(--brand); border-color:var(--line); }
.btn-line:hover{ border-color:var(--brand); background:var(--brand-pale); }
@media (min-width:960px){ .btn{ block-size:50px; } }

/* ---------- التذييل — مقيس من ideas.mawani.gov.sa ---------- */
footer{
  background:var(--deep); color:var(--brand-ink);
  padding-block:var(--sp-2xl) var(--sp-xl);
}
@media (min-width:960px){ footer{ padding-block:56px var(--sp-3xl); } }
.foot-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3xl); }
@media (min-width:768px){ .foot-grid{ grid-template-columns:repeat(4,1fr); } }
.foot-col h2{
  color:var(--brand-ink); font-size:var(--fs-text-md); line-height:var(--lh-text-md);
  font-weight:600; padding-block-end:var(--sp-md);
  border-block-end:1px solid var(--brand-ink); inline-size:fit-content;
  margin-block-end:var(--sp-md);
}
.foot-col ul{ list-style:none; display:flex; flex-direction:column; }
.foot-col a{
  display:inline-flex; align-items:center; min-block-size:var(--touch-min);
  color:var(--brand-ink); text-decoration:none;
  font-size:var(--fs-text-sm); line-height:var(--lh-text-sm);
}
.foot-col a:hover{ text-decoration:underline; }
.foot-end{
  padding-block-start:var(--sp-5xl); text-align:center;
  display:flex; flex-direction:column-reverse; align-items:center;
  justify-content:space-between; gap:var(--sp-lg);
}
@media (min-width:960px){
  .foot-end{ flex-direction:row; padding-block-start:100px; }
}
.foot-end p{ font-size:var(--fs-text-md); font-weight:500; color:var(--brand-ink); max-inline-size:none; }
.foot-logos{ display:flex; align-items:center; gap:var(--sp-3xl); flex-wrap:wrap; justify-content:center; }
.foot-logos img{ block-size:48px; inline-size:auto; }
/* شارة عام الذكاء الاصطناعي — الاصل الرسمي، ابيض على الداكن */
.ai-badge{
  block-size:48px; inline-size:auto; flex:none;
  padding-inline-start:var(--sp-3xl);
  border-inline-start:1px solid color-mix(in srgb, var(--brand-ink) 28%, transparent);
}

/* ---------- مكون: لافتة ملفات تعريف الارتباط (cookiesBanner) ---------- */
.cookie-bar{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:1500;
  background:var(--surface); border-block-start:1px solid var(--line);
  box-shadow:var(--shadow-2xl);
}
.cookie-bar[hidden]{ display:none; }
.cookie-inner{ padding-block:var(--sp-4xl); display:flex; flex-direction:column; gap:var(--sp-xl); }
.cookie-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-xl); }
.cookie-head .t{ display:flex; align-items:center; gap:var(--sp-md); }
.cookie-head h2{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); font-weight:600; color:var(--ink); }
.cookie-ico{
  inline-size:56px; block-size:56px; border-radius:var(--r-full); flex:none;
  background:var(--brand-pale); color:var(--ok); display:grid; place-items:center;
}
.cookie-ico svg{ inline-size:20px; block-size:20px; }
.cookie-close{
  inline-size:var(--touch-min); block-size:var(--touch-min); flex:none;
  border:0; background:transparent; color:var(--ink); border-radius:var(--r-sm);
  cursor:pointer; display:grid; place-items:center;
}
.cookie-close:hover{ background:var(--surface-2); }
.cookie-close svg{ inline-size:var(--icon); block-size:var(--icon); }
.cookie-bar p{ color:var(--ink-soft); font-size:var(--fs-text-md); line-height:var(--lh-text-md); max-inline-size:none; }
.cookie-bar .pol{ margin-block-start:var(--sp-md); display:inline-flex; align-items:center; min-block-size:var(--touch-min); }
.cookie-acts{ display:flex; flex-direction:column; gap:var(--sp-md); }
.cookie-acts .btn{ inline-size:100%; }
@media (min-width:600px){
  .cookie-acts{ flex-direction:row; }
  .cookie-acts .btn{ inline-size:auto; }
}

/* ---------- مكون: قسم التعليقات (feedback) ---------- */
.feedback .wrap{ padding-block:var(--sp-3xl); }
.feedback .row{ display:flex; flex-direction:column; gap:var(--sp-xl); }
@media (min-width:960px){
  .feedback .row{ flex-direction:row; align-items:center; justify-content:space-between; }
}
.feedback .ask{ display:flex; flex-direction:column; gap:var(--sp-xl); }
@media (min-width:960px){ .feedback .ask{ flex-direction:row; align-items:center; gap:var(--sp-3xl); } }
.feedback .q{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--ink); flex:none; max-inline-size:none; }
.feedback .opts{ display:flex; gap:var(--sp-xl); }
.feedback .stat{ font-size:var(--fs-text-sm); line-height:var(--lh-text-sm); color:var(--ink); }
.feedback .thanks{ font-size:var(--fs-text-md); color:var(--ok); font-weight:600; }

/* ---------- مكون: قسم التقييم (rating) ---------- */
.rating .wrap{ padding-block:var(--sp-3xl); }
.rating .row{ display:flex; flex-direction:column; gap:var(--sp-xl); }
@media (min-width:960px){
  .rating .row{ flex-direction:row; align-items:center; justify-content:space-between; }
}
.rating .left{ display:flex; flex-direction:column; gap:var(--sp-xl); }
@media (min-width:960px){ .rating .left{ flex-direction:row; align-items:center; gap:var(--sp-3xl); } }
.rating .avg{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--ink); flex:none; max-inline-size:none; }
.rating .avg b{ font-weight:700; }
.rating .stars-wrap{ display:flex; align-items:center; gap:var(--sp-md); }

.rating .thanks, .feedback .thanks{ max-inline-size:none; }
.rating .count{ font-size:var(--fs-text-sm); line-height:var(--lh-text-sm); color:var(--muted); }
/* نجوم dga-rating — 5 نجوم بخطوة نصف نجمة، ذهبي، 32px */
.stars{ display:inline-flex; direction:rtl; gap:2px; border:0; padding:0; margin:0; }
.stars legend{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
.stars label{
  color:var(--line); font-size:32px; line-height:1; cursor:pointer;
  min-inline-size:var(--touch-min); min-block-size:var(--touch-min);
  display:inline-grid; place-items:center; transition:color .15s;
}
.stars input{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
.stars label:hover, .stars label:hover ~ label,
.stars input:checked ~ label{ color:var(--star); }
.stars input:focus-visible + label{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs); }
.stars.done label{ cursor:default; }

/* حدود المدخلات — ارضية موحدة حتى للحقول غير المصنفة */
input, select, textarea{ border-color:var(--field-border); }

/* خلفية حاوية الخريطة — leaflet يفرض رماديا خارج اللوحة */
.leaflet-container{ background:var(--surface-2); }


/* ---------- مجموعة الايقونات ----------
   المرجع علامة موانئ: كتل واضحة لا خطوط شعرية. بلاطة خضراء عميقة
   والعلامة بيضاء (تباين 10.8:1)، وفي كل ايقونة عنصر واحد ممتلئ
   بالاخضر الفاتح يجمع المجموعة كعائلة. */
.ico, .conn-item .n{
  inline-size:56px; block-size:56px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-2xl); background:var(--deep); color:var(--brand-ink);
  border:0;
  transition:background .25s cubic-bezier(.2,.7,.2,1), transform .25s cubic-bezier(.2,.7,.2,1);
}
.ico svg, .conn-item .n svg{ inline-size:32px; block-size:32px; }
.ico svg .f, .conn-item .n svg .f{ fill:var(--brand-light); stroke:none; }
.ico svg .s, .conn-item .n svg .s{ fill:currentColor; stroke:none; }
.card:hover .ico, .card:focus-within .ico,
.conn-item:hover .n{ background:var(--brand-2); transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){
  .ico, .conn-item .n{ transition:none; }
  .card:hover .ico, .conn-item:hover .n{ transform:none; }
}

/* ---------- 5.2 مؤشر التركيز ---------- */
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs); }

/* ---------- 5.2 اهداف اللمس (44px) — كود المنصات 1.0 / WCAG 2.5.8 ----------
   الروابط المضمنة داخل فقرات نصية مستثناة (inline exception). */
.lang-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:44px; min-inline-size:44px;
}
.sitemap li > a{
  display:inline-flex; align-items:center;
  min-block-size:44px; min-inline-size:44px; padding-block:2px;
}
.foot-links a{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:44px; min-inline-size:44px;
}
/* ازرار الاجراء: ضمان 44px عرضا للنصوص القصيرة مثل «لا» */
.btn, .btn-primary, .btn-ghost{ min-inline-size:44px; }
.foot-col ul li a{
  display:inline-flex; align-items:center;
  min-block-size:44px; min-inline-size:44px;
}