/* =====================================================================
   مرصدك — shell.css (v2)
   قشرة الموقع العام: الشريط السفلي في الجوال، إضافات الرأس (جرس التنبيهات،
   زر الحساب وقائمته، أزرار الزائر المضغوطة)، الدرج الجانبي في الجوال،
   وإضافات التذييل (شريط الدعوة، «تابعنا»، التواصل، الأعمدة الأربعة).

   يُحمَّل عالمياً من layouts/public.php بعد components.css مباشرة.
   خصائص منطقية فقط، ومتغيّرات tokens.css فقط، ولا تباعد حروف للعربية.
   ===================================================================== */

/* =====================================================================
   1) الشريط السفلي — .tabbar (≤١٠٢٤px)
   ===================================================================== */

.tabbar{display:none}

@media (max-width:1024px){
  .tabbar{
    position:fixed;
    inset-inline:0;
    inset-block-end:0;
    z-index:var(--z-tabbar,650);
    display:grid;
    grid-template-columns:repeat(var(--tabbar-cols,5),minmax(0,1fr));
    align-items:stretch;
    block-size:var(--tabbar-h);
    padding-block-end:env(safe-area-inset-bottom,0px);
    padding-inline:max(var(--sp-1),env(safe-area-inset-left,0px)) max(var(--sp-1),env(safe-area-inset-right,0px));
    background:rgba(253,251,247,.88);
    backdrop-filter:blur(18px) saturate(170%);
    -webkit-backdrop-filter:blur(18px) saturate(170%);
    border-block-start:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(16,27,79,.07);
  }

  /* يختفي خلف كل طبقة تغطي الصفحة: الدرج، النوافذ، اللوحات، وأي قفل تمرير */
  html.is-menu-open .tabbar,
  html.is-modal-open .tabbar,
  html.is-drawer-open .tabbar,
  html.is-scroll-locked .tabbar{display:none}

  /* احتياط للمتصفحات الحديثة: أي درج أو نافذة مفتوحة حتى لو لم تُقفل التمرير.
     (قاعدة مستقلة كي لا يُسقط متصفحٌ لا يدعم :has() القواعدَ السابقة معها)
     لوحة تفاصيل الخريطة مستثناة: صُمّمت لتجلس فوق الشريط السفلي الظاهر. */
  html:has(.modal.is-open) .tabbar,
  html:has(.drawer.is-open:not(.mapx-drawer)) .tabbar{display:none}
}

/* بديل عن backdrop-filter حيث لا يُدعم: سطح شبه معتم كي تبقى التسميات مقروءة */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tabbar{background:rgba(253,251,247,.98)}
}

.tabbar__item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-inline-size:0;
  min-block-size:44px;
  padding:6px 2px 4px;
  color:var(--muted);
  font-size:11.5px;
  font-weight:var(--fw-medium);
  line-height:1.2;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dur-2) var(--ease);
}

.tabbar__item:hover{color:var(--violet-700);text-decoration:none}

/* الحبة البنفسجية خلف أيقونة العنصر النشط */
.tabbar__icon{
  position:relative;
  display:grid;
  place-items:center;
  inline-size:54px;
  block-size:30px;
  border-radius:var(--r-pill);
  transition:background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}

.tabbar__item:active .tabbar__icon{transform:scale(.94)}

.tabbar__item.is-active{color:var(--violet-700);font-weight:var(--fw-bold)}
.tabbar__item.is-active .tabbar__icon{background:var(--violet-100)}

.tabbar__item:focus-visible{outline:none}
.tabbar__item:focus-visible .tabbar__icon{
  outline:2px solid var(--violet-500);
  outline-offset:2px;
}

.tabbar__label{
  max-inline-size:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* «حسابي»: الصورة الرمزية أو الحرف الأول */
.tabbar__avatar{
  display:grid;
  place-items:center;
  inline-size:26px;
  block-size:26px;
  border-radius:50%;
  overflow:hidden;
  background-image:var(--grad-brand);
  color:var(--white);
  font-family:var(--font-display);
  font-size:12px;
  font-weight:var(--fw-bold);
  line-height:1;
  box-shadow:0 0 0 2px var(--white);
}

.tabbar__avatar img{inline-size:100%;block-size:100%;object-fit:cover}

.tabbar__item.is-active .tabbar__avatar{box-shadow:0 0 0 2px var(--violet-500)}

/* نقطة التنبيهات غير المقروءة */
.tabbar__dot{
  position:absolute;
  inset-block-start:1px;
  inset-inline-end:12px;
  inline-size:10px;
  block-size:10px;
  border-radius:50%;
  background:var(--danger);
  box-shadow:0 0 0 2px var(--cream-50);
}

@media (max-width:360px){
  .tabbar__item{font-size:11px}
  .tabbar__icon{inline-size:46px}
}

@media print{.tabbar{display:none !important}}

/* =====================================================================
   2) الرأس — إضافات v2
   ===================================================================== */

/* --- 2.1 مواءمة الروابط السبعة مع الأزرار بين ١٠٢٥ و١٢٨٠px --- */
@media (min-width:1025px) and (max-width:1280px){
  .site-header__inner{gap:var(--sp-3)}
  .site-header__nav{margin-inline-start:var(--sp-2);gap:0}
  .site-header__nav .nav__link{padding-inline:10px}
  .site-header__nav .nav__link::after{inset-inline-start:10px}
  .site-header__nav .nav__link.is-active::after{inline-size:calc(100% - 20px)}
}

@media (min-width:1025px) and (max-width:1200px){
  /* الشعار يقوم مقام «الرئيسية» */
  .site-header__nav .nav__link--home{display:none}
  .site-header__logo img{block-size:38px}
  /* الأزرار الجانبية أيقونات فقط — التسمية تبقى في aria-label */
  .hdr-quick__label,
  .hdr-account__name{display:none}
  .hdr-quick{--btn-px:0;inline-size:var(--btn-h);padding:0}
}

/* --- 2.2 أزرار الزائر: نص ظاهر دائماً (لا يطاله إخفاء .btn__label على الهاتف) --- */
.hdr-cta__label{display:inline}

@media (max-width:560px){
  .site-header__inner{gap:var(--sp-2)}
  .site-header__actions{gap:6px}
  .site-header__logo img{block-size:32px}

  .hdr-cta{
    --btn-h:40px;
    --btn-px:12px;
    --btn-fs:13.5px;
    gap:5px;
  }

  /* البحث متاح داخل الدرج — نوفّر مساحة الزرّين النصيّين للزائر */
  .hdr-search--guest{display:none}
  .hdr-cta--join svg{display:none}
}

@media (max-width:380px){
  .site-header__logo img{block-size:28px}
  .hdr-cta{--btn-px:10px;--btn-fs:13px}
  .hdr-cta--login svg{display:none}
}

/* --- 2.3 زر «لوحة الجهة» / «لوحة التحكم» --- */
.hdr-quick.is-active{background:var(--violet-100);color:var(--violet-700)}

@media (max-width:1024px){
  .hdr-quick{display:none}   /* في الجوال: داخل الدرج وفي الشريط السفلي */
}

/* --- 2.4 جرس التنبيهات --- */
.hdr-bell__toggle{position:relative}

.hdr-bell__count{
  position:absolute;
  inset-block-start:-4px;
  inset-inline-end:-4px;
  display:grid;
  place-items:center;
  min-inline-size:19px;
  block-size:19px;
  padding-inline:5px;
  border-radius:var(--r-pill);
  background:var(--danger);
  color:var(--white);
  font-size:10.5px;
  font-weight:var(--fw-bold);
  line-height:1;
  box-shadow:0 0 0 2px var(--cream-50);
  pointer-events:none;
}

.hdr-bell__toggle.has-unread svg{animation:hdr-bell-nudge 1.2s var(--ease) 1 .6s}

@keyframes hdr-bell-nudge{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-14deg)}
  40%{transform:rotate(10deg)}
  60%{transform:rotate(-6deg)}
  80%{transform:rotate(3deg)}
}

@media (prefers-reduced-motion:reduce){
  .hdr-bell__toggle.has-unread svg{animation:none}
}

/* --- 2.5 زر الحساب --- */
.hdr-account__toggle{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  block-size:40px;
  padding-inline:4px var(--sp-3);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--white);
  color:var(--navy-800);
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  cursor:pointer;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);
}

.hdr-account__toggle:hover{border-color:var(--violet-300);background:var(--violet-50)}
.hdr-account__toggle:focus-visible{outline:2px solid var(--violet-500);outline-offset:2px}
.hdr-account.is-open .hdr-account__toggle{border-color:var(--violet-400);box-shadow:var(--ring)}

.hdr-account__avatar{box-shadow:none}
.hdr-account__avatar img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:50%}

.hdr-account__name{
  max-inline-size:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hdr-account__chev{color:var(--muted);transition:transform var(--dur-2) var(--ease)}
.hdr-account.is-open .hdr-account__chev{transform:rotate(180deg)}

@media (max-width:1024px){
  .hdr-account__toggle{padding-inline:3px;inline-size:40px;justify-content:center}
  .hdr-account__name,
  .hdr-account__chev{display:none}
}

/* --- 2.6 اللوحات المنسدلة في الرأس (مشترك) --- */
.hdr-panel{
  max-block-size:calc(100vh - var(--header-h) - 24px);
  max-block-size:calc(100dvh - var(--header-h) - var(--tabbar-h,0px) - 24px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

/* على الهاتف: اللوحة بعرض الشاشة تحت الرأس بدل أن تتدلّى من الزر وتخرج عن الحافة.
   (الرأس يحمل backdrop-filter فيصير هو مرجع position:fixed — أي أسفله مباشرة.) */
@media (max-width:560px){
  .hdr-panel{
    position:fixed;
    inset-inline:var(--sp-3);
    inset-block-start:calc(var(--header-h) + 6px);
    min-inline-size:0;
    inline-size:auto;
  }
}

/* --- 2.7 قائمة التنبيهات --- */
.hdr-notif{
  inline-size:min(380px,calc(100vw - 32px));
  padding:0;
}

.hdr-notif__head{
  position:sticky;
  inset-block-start:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--white);
  border-block-end:1px solid var(--line);
}

.hdr-notif__head form{margin:0}

.hdr-notif__title{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
}

.hdr-notif__pill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:var(--r-pill);
  background:var(--violet-100);
  color:var(--violet-700);
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:var(--fw-bold);
}

.hdr-notif__mark{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-block-size:36px;
  padding-inline:var(--sp-2);
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--violet-700);
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  cursor:pointer;
}

.hdr-notif__mark:hover{background:var(--violet-50)}
.hdr-notif__mark:focus-visible{outline:2px solid var(--violet-500);outline-offset:1px}

.hdr-notif__list{list-style:none;margin:0;padding:var(--sp-1)}
.hdr-notif__list li{margin:0}

.hdr-notif__item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-3);
  border-radius:var(--r-sm);
  color:var(--ink);
  text-decoration:none;
  transition:background-color var(--dur-1) var(--ease);
}

.hdr-notif__item:hover{background:var(--cream-100);text-decoration:none}
.hdr-notif__item.is-unread{background:var(--violet-50)}
.hdr-notif__item.is-unread:hover{background:var(--violet-100)}
.hdr-notif__item:focus-visible{outline:2px solid var(--violet-500);outline-offset:-2px}

.hdr-notif__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-inline-size:0}

.hdr-notif__text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  line-height:var(--lh-snug);
  color:var(--navy-800);
}

.hdr-notif__item.is-unread .hdr-notif__text{font-weight:var(--fw-bold)}

.hdr-notif__meta{font-size:var(--fs-xs);color:var(--muted);line-height:1.4}

.hdr-notif__dot{
  flex:0 0 auto;
  inline-size:9px;
  block-size:9px;
  margin-block-start:6px;
  border-radius:50%;
  background:var(--violet-500);
}

.hdr-notif__empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-1);
  padding:var(--sp-6) var(--sp-5);
  text-align:center;
  color:var(--navy-800);
  font-weight:var(--fw-bold);
}

.hdr-notif__empty p{margin:0}

.hdr-notif__empty-icon{
  display:grid;
  place-items:center;
  inline-size:52px;
  block-size:52px;
  margin-block-end:var(--sp-2);
  border-radius:50%;
  background:var(--violet-50);
  color:var(--violet-500);
}

.hdr-notif__empty-text{font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--muted)}

.hdr-notif__all{
  position:sticky;
  inset-block-end:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-1);
  min-block-size:46px;
  background:var(--white);
  border-block-start:1px solid var(--line);
  color:var(--violet-700);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  text-decoration:none;
}

.hdr-notif__all:hover{background:var(--violet-50);text-decoration:none}

/* --- 2.8 أيقونة نوع التنبيه (مشتركة بين الرأس وصفحة التنبيهات) --- */
.ntf-icon{
  --ntf-bg:var(--violet-100);
  --ntf-ink:var(--violet-700);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  inline-size:36px;
  block-size:36px;
  border-radius:50%;
  background:var(--ntf-bg);
  color:var(--ntf-ink);
}

.ntf-icon--system{--ntf-bg:var(--cream-200);--ntf-ink:var(--ink-soft)}
.ntf-icon--event{--ntf-bg:var(--violet-100);--ntf-ink:var(--violet-700)}
.ntf-icon--job{--ntf-bg:#E7EAF7;--ntf-ink:var(--navy-700)}
.ntf-icon--coverage{--ntf-bg:var(--info-soft);--ntf-ink:var(--info-ink)}
.ntf-icon--accreditation{--ntf-bg:var(--ok-soft);--ntf-ink:var(--ok-ink)}
.ntf-icon--document{--ntf-bg:var(--warn-soft);--ntf-ink:var(--warn-ink)}
.ntf-icon--recommendation{--ntf-bg:var(--grad-violet);--ntf-ink:var(--white);background-image:var(--grad-violet)}
.ntf-icon--organization{--ntf-bg:#E7EAF7;--ntf-ink:var(--navy-800)}

/* --- 2.9 قائمة الحساب --- */
.hdr-menu{inline-size:min(310px,calc(100vw - 32px))}

.hdr-menu__head{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-3);
  margin-block-end:var(--sp-1);
  border-radius:var(--r-sm);
  background:var(--grad-soft);
  border:1px solid var(--line);
  color:inherit;
  text-decoration:none;
}

.hdr-menu__head:hover{border-color:var(--violet-300);text-decoration:none}
.hdr-menu__head:focus-visible{outline:2px solid var(--violet-500);outline-offset:1px}

.hdr-menu__avatar img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:50%}

.hdr-menu__who{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-inline-size:0}

.hdr-menu__name{
  max-inline-size:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--fs-sm);
  color:var(--navy-800);
}

.hdr-menu__line{
  max-inline-size:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--fs-xs);
  color:var(--muted);
}

.hdr-menu__state{font-size:11px}

.hdr-menu__group{
  margin:6px var(--sp-3) 2px;
  font-size:11px;
  font-weight:var(--fw-bold);
  color:var(--muted);
}

/* ١١ رابطاً + المجموعات تتسع في شاشة ٨٠٠px دون تمرير، مع إبقاء الهدف ≥٤٠px */
.hdr-menu .dropdown__item{padding-block:8px;min-block-size:40px}
.hdr-menu__label{flex:1 1 auto;min-inline-size:0}
.hdr-menu__count{flex:0 0 auto}

/* --- 2.10 شارة «موثّق إعلامياً» — عامة لكل الصفحات (partials/verified-badge) ---
   الجزء يعتمد على .badge.badge--free؛ هذه القواعد تضبط المسافات والحجم الصغير
   في أي مكان تظهر فيه (الرأس، البطاقات، الدليل، الملف) دون الحاجة لملف صفحة. */
.verified-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding-inline:10px 12px;
  white-space:nowrap;
}

.verified-badge svg{flex-shrink:0}

.verified-badge--sm{gap:4px;padding:2px 8px;font-size:11px;line-height:1.3}

.hdr-menu__who .verified-badge,
.drawer-account__who .verified-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  line-height:1.3;
}

/* =====================================================================
   3) الدرج الجانبي في الجوال — إضافات v2
   ===================================================================== */

.mobile-menu__body{gap:var(--sp-3)}

/* تسميات المجموعات داخل الدرج */
.drawer-label{
  margin:var(--sp-3) var(--sp-1) 0;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  color:var(--muted);
}

/* --- 3.1 الزائر --- */
.drawer-guest{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:var(--sp-5);
  border-radius:var(--r-lg);
  background:var(--grad-navy);
  color:var(--cream-100);
  box-shadow:var(--shadow-md);
}

.drawer-guest__title{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  color:var(--white);
}

.drawer-guest__text{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:rgba(250,247,241,.8)}

.drawer-guest__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin-block-start:var(--sp-2)}
.drawer-guest__actions .btn{--btn-h:48px}
.drawer-guest__actions .btn--ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:var(--white)}
.drawer-guest__actions .btn--ghost:hover{background:rgba(255,255,255,.18)}
.drawer-guest__actions .btn:only-child{grid-column:1/-1}

/* --- 3.2 المسجّل --- */
.drawer-account{display:flex;flex-direction:column;gap:var(--sp-3)}

.drawer-account__card{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border-radius:var(--r-lg);
  background:var(--grad-navy);
  color:var(--cream-100);
  text-decoration:none;
  box-shadow:var(--shadow-md);
}

.drawer-account__card:hover{text-decoration:none}
.drawer-account__card:focus-visible{outline:2px solid var(--violet-500);outline-offset:2px}

.drawer-account__avatar{inline-size:48px;block-size:48px;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.drawer-account__avatar img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:50%}

.drawer-account__who{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1 1 auto;min-inline-size:0}

.drawer-account__name{
  max-inline-size:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  color:var(--white);
}

.drawer-account__line{
  max-inline-size:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--fs-xs);
  color:rgba(250,247,241,.75);
}

.drawer-account__go{flex:0 0 auto;color:rgba(250,247,241,.7)}

.drawer-account__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2);
}

.drawer-tile{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-block-size:46px;
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--white);
  color:var(--navy-800);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  line-height:1.3;
  text-decoration:none;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}

.drawer-tile svg{flex:0 0 auto;color:var(--violet-500)}
.drawer-tile__label{flex:1 1 auto;min-inline-size:0}
.drawer-tile__count{flex:0 0 auto}

.drawer-tile:hover,
.drawer-tile.is-active{
  background:var(--violet-50);
  border-color:var(--violet-300);
  color:var(--violet-700);
  text-decoration:none;
}

/* --- 3.3 روابط التنقّل وروابط إضافية --- */
.mobile-menu__body .mobile-menu__link{padding-block:var(--sp-3)}

.drawer-more{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

.drawer-more__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-block-size:40px;
  padding-inline:var(--sp-3);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--white);
  color:var(--ink-soft);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  text-decoration:none;
}

.drawer-more__link svg{color:var(--violet-500)}
.drawer-more__link:hover{border-color:var(--violet-300);color:var(--violet-700);text-decoration:none}

@media (max-width:360px){
  .drawer-account__grid{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   4) التذييل — إضافات v2
   ===================================================================== */

/* --- 4.1 شريط الدعوة --- */
.footer-band{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  flex-wrap:wrap;
  margin-block-start:var(--sp-7);
  padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-xl);
  background:linear-gradient(135deg,rgba(129,57,214,.32) 0%,rgba(255,255,255,.06) 100%);
  border:1px solid rgba(255,255,255,.14);
}

.footer-band__icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  inline-size:52px;
  block-size:52px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.12);
  color:var(--white);
}

.footer-band__text{flex:1 1 320px;min-inline-size:0}

.footer-band__title{
  margin:0 0 var(--sp-1);
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  color:var(--white);
}

.footer-band__desc{margin:0;color:rgba(250,247,241,.75);line-height:var(--lh-body)}

.footer-band__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* --- 4.2 الأعمدة: الهوية + أربعة أعمدة --- */
.site-footer__top--v2{
  grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));
  gap:var(--sp-6) var(--sp-5);
  padding-block:var(--sp-7) var(--sp-6);
}

.site-footer__col{min-inline-size:0}

.site-footer__top--v2 .site-footer__col-title{font-size:var(--fs-base)}

.footer-follow,
.footer-contact{margin-block-start:var(--sp-5)}

.footer-follow__title,
.footer-contact__title{
  margin:0 0 var(--sp-3);
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--white);
}

.footer-follow__list{flex-wrap:wrap;list-style:none;margin:0;padding:0}
.footer-follow__list li{margin:0}

.footer-contact__list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  list-style:none;
  margin:0;
  padding:0;
}

.footer-contact__list li{margin:0}

.footer-contact__list a{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  min-block-size:32px;
  color:rgba(250,247,241,.78);
  text-decoration:none;
}

.footer-contact__list a svg{color:var(--violet-300);flex:0 0 auto}
.footer-contact__list a:hover{color:var(--white);text-decoration:none}

@media (max-width:1024px){
  .site-footer__top--v2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__top--v2 .site-footer__brand{grid-column:1/-1;max-inline-size:none}
}

@media (max-width:560px){
  .footer-band{padding:var(--sp-5);gap:var(--sp-4);margin-block-start:var(--sp-6)}
  .footer-band__actions{inline-size:100%}
  .footer-band__actions .btn{flex:1 1 140px}
  .site-footer__top--v2{gap:var(--sp-5) var(--sp-4);padding-block:var(--sp-6) var(--sp-5)}
  /* عمودان متجاوران للروابط حتى على الهاتف — التذييل أقصر بكثير */
  .site-footer__top--v2 .site-footer__links{gap:var(--sp-2)}
  .site-footer__top--v2 .site-footer__links a{min-block-size:32px}
}

@media (max-width:340px){
  .site-footer__top--v2{grid-template-columns:minmax(0,1fr)}
}