/* =============================================
   قالب سند — نظام تصميم مؤسسي سعودي
   راجع DESIGN-SYSTEM.md للتوثيق الكامل
   ============================================= */

/* ========== Design Tokens (Single Source of Truth) ========== */
:root {
  /* Legacy tokens (يستخدمها الكود القديم — لا تحذف) */
  --s-navy: #0b2545;
  --s-navy-deep: #061633;
  --s-navy-soft: #1d3a6b;
  --s-emerald: #0d7a4f;
  --s-emerald-soft: #2fa776;
  --s-emerald-deep: #075c3a;
  --s-gold: #b6873a;
  --s-gold-soft: #d9b066;
  --s-sand: #f3ead8;
  --s-ivory: #faf7f0;
  --s-paper: #ffffff;
  --s-mist: #eef2f6;
  --s-text: #0f1d2e;
  --s-muted: #5b6b7d;
  --s-border: #e6ebf1;
  --s-shadow-xs: 0 1px 2px rgba(11,37,69,.06);
  --s-shadow-sm: 0 4px 14px rgba(11,37,69,.06);
  --s-shadow-md: 0 14px 36px rgba(11,37,69,.09);
  --s-shadow-lg: 0 28px 70px rgba(11,37,69,.14);
  --s-grad-hero: radial-gradient(120% 90% at 90% 0%, #103a72 0%, transparent 55%),
                 radial-gradient(110% 100% at 0% 100%, #0a5a3c 0%, transparent 55%),
                 linear-gradient(160deg, #061633 0%, #0b2545 55%, #0a3654 100%);
  --s-grad-gold: linear-gradient(135deg, #d9b066 0%, #b6873a 100%);
  --s-grad-emerald: linear-gradient(135deg, #2fa776 0%, #075c3a 100%);

  /* === Unified Design Tokens (الواجهة الرسمية للنظام الجديد) === */
  --color-primary: var(--s-navy);
  --color-primary-dark: var(--s-navy-deep);
  --color-primary-soft: var(--s-navy-soft);
  --color-secondary: var(--s-emerald);
  --color-secondary-dark: var(--s-emerald-deep);
  --color-secondary-soft: #e8f5f0;
  --color-accent: var(--s-gold);
  --color-accent-soft: #f7efd9;
  --color-bg: var(--s-ivory);
  --color-surface: #ffffff;
  --color-surface-soft: #f4f7f6;
  --color-border: var(--s-border);
  --color-text: var(--s-text);
  --color-text-muted: var(--s-muted);
  --color-success: var(--s-emerald);
  --color-warning: #c58a18;
  --color-danger: #b94a48;

  --shadow-soft: 0 12px 30px rgba(6,36,58,.08);
  --shadow-medium: 0 18px 45px rgba(6,36,58,.14);
  --shadow-strong: 0 28px 70px rgba(6,36,58,.18);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --transition: all .25s cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: IBMPlexSansArabic-Medium, "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--s-ivory);
    color: var(--s-text);
    margin: 0;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga";
}
h1,h2,h3,h4,h5,h6 { font-weight: 700; color: var(--s-navy); letter-spacing:-0.01em; line-height:1.3; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--s-emerald); color: #fff; }

/* ========== Utility patterns ========== */
.s-noise { position: relative; }
.s-noise::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  mix-blend-mode: overlay;
}

.s-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem; border-radius:999px;
  background: rgba(13,122,79,.08); color: var(--s-emerald-deep);
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  border:1px solid rgba(13,122,79,.18);
}
.s-eyebrow.on-dark { background: rgba(255,255,255,.08); color:#e9f5ef; border-color: rgba(255,255,255,.18); }

.s-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.s-title-xl { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height:1.18; }
.s-sub { color: var(--s-muted); font-size:1.05rem; max-width: 760px; }

.s-divider {
  width:54px; height:3px; border-radius:999px;
  background: linear-gradient(90deg, var(--s-emerald), var(--s-gold));
}

/* ========== Buttons ========== */
.s-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.6rem; border-radius:14px; font-weight:600; font-size:.95rem;
  transition: all .25s cubic-bezier(.2,.8,.2,1); cursor:pointer; border:0; white-space:nowrap;
  position:relative; overflow:hidden;
}
.s-btn-primary { background: var(--s-emerald); color:#fff; box-shadow: 0 10px 24px rgba(13,122,79,.28); }
.s-btn-primary:hover { background: var(--s-emerald-deep); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(13,122,79,.36); }
.s-btn-gold { background: var(--s-grad-gold); color:#3a2810; box-shadow: 0 10px 24px rgba(182,135,58,.32); }
.s-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(182,135,58,.42); }
.s-btn-navy { background: var(--s-navy); color:#fff; }
.s-btn-navy:hover { background: var(--s-navy-deep); transform: translateY(-2px); }
.s-btn-ghost { background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); }
.s-btn-ghost:hover { background: rgba(255,255,255,.16); }
.s-btn-outline { background:transparent; color: var(--s-navy); border:1.5px solid var(--s-border); }
.s-btn-outline:hover { border-color: var(--s-navy); background: var(--s-navy); color:#fff; }

/* ========== Header ========== */
.s-topbar { background: var(--s-navy-deep); color: rgba(255,255,255,.82); font-size:.82rem; }
.s-topbar a { transition: color .2s; }
.s-topbar a:hover { color: var(--s-gold-soft); }
.s-header {
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: all .3s ease;
}
.s-header.scrolled {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--s-border);
  box-shadow: var(--s-shadow-sm);
}
.s-nav-link {
  position:relative; padding:.5rem .2rem; font-weight:600; font-size:.95rem;
  color: var(--s-text); transition: color .2s;
}
.s-nav-link::after {
  content:""; position:absolute; bottom:-2px; right:0; left:0; height:2px;
  background: var(--s-emerald); border-radius:2px;
  transform: scaleX(0); transform-origin: right; transition: transform .3s;
}
.s-nav-link:hover { color: var(--s-emerald-deep); }
.s-nav-link:hover::after { transform: scaleX(1); }

.s-logo-mark {
  width:46px; height:46px; border-radius:13px;
  background: linear-gradient(135deg, var(--s-emerald) 0%, var(--s-navy) 100%);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.3rem; box-shadow: 0 10px 22px rgba(13,122,79,.3);
  position:relative;
}
.s-logo-mark::before {
  content:""; position:absolute; inset:3px; border-radius:10px;
  border:1.5px solid rgba(255,255,255,.25);
}

/* ========== Mobile menu ========== */
.s-mobile { transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.s-mobile.open { transform: translateX(0); }
.s-mobile-overlay { opacity:0; pointer-events:none; transition: opacity .3s; }
.s-mobile-overlay.open { opacity:1; pointer-events:auto; }

/* ========== Hero ========== */
.s-hero {
  position:relative; overflow:hidden;
  background: var(--s-grad-hero);
  color:#fff;
}
.s-hero-bg { position:absolute; inset:0; z-index:0; }
.s-hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.4s ease-in-out;
  transform: scale(1.05);
  animation: sHeroZoom 12s ease-in-out infinite alternate;
}
.s-hero-slide.is-active { opacity:1; }
@keyframes sHeroZoom { from { transform:scale(1.02);} to { transform:scale(1.12);} }
.s-hero-veil {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(135deg, rgba(6,22,51,.88) 0%, rgba(11,37,69,.78) 50%, rgba(10,54,84,.72) 100%),
    radial-gradient(120% 90% at 90% 0%, rgba(16,58,114,.55) 0%, transparent 55%),
    radial-gradient(110% 100% at 0% 100%, rgba(10,90,60,.5) 0%, transparent 55%);
}
.s-hero > .s-container { position:relative; z-index:2; }
.s-hero::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 72px 72px; opacity:.5;
  mask-image: radial-gradient(circle at 70% 50%, #000 20%, transparent 75%);
}
.s-hero-orb {
  position:absolute; border-radius:50%; filter: blur(80px); opacity:.45;
  pointer-events:none;
}
.s-hero-orb.a { width:480px; height:480px; background:#0d7a4f; top:-120px; left:-120px; }
.s-hero-orb.b { width:380px; height:380px; background:#b6873a; bottom:-100px; right:10%; opacity:.3; }

.s-hero-card {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px; padding:1.1rem 1.25rem; color:#fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

.s-hero-visual {
  position:relative; aspect-ratio: 4/5;
  border-radius: 28px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(6,22,51,0) 40%, rgba(6,22,51,.55) 100%),
    linear-gradient(135deg, #1d3a6b 0%, #0d7a4f 100%);
  box-shadow: 0 40px 80px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08);
}
.s-hero-visual::before {
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(217,176,102,.18), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(47,167,118,.25), transparent 55%);
}
.s-hero-visual::after {
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 14px);
}
.s-hero-pattern {
  position:absolute; inset:0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1'><path d='M130 0 L260 130 L130 260 L0 130 Z'/><circle cx='130' cy='130' r='90'/><circle cx='130' cy='130' r='60'/><circle cx='130' cy='130' r='30'/></g></svg>") center/cover no-repeat;
  opacity:.5;
}
.s-hero-figure {
  position:absolute; inset:auto 0 0 0; height:78%;
  background: linear-gradient(180deg, transparent 0%, rgba(6,22,51,.7) 100%),
              radial-gradient(ellipse at 50% 100%, rgba(217,176,102,.35), transparent 70%);
}
.s-hero-badge {
  position:absolute; top:1.2rem; right:1.2rem;
  background: rgba(255,255,255,.95); color: var(--s-navy);
  padding:.55rem 1rem; border-radius:999px; font-size:.82rem; font-weight:700;
  display:flex; align-items:center; gap:.4rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
}
.s-pulse {
  width:8px; height:8px; border-radius:50%; background: var(--s-emerald);
  box-shadow: 0 0 0 0 rgba(13,122,79,.7); animation: s-pulse 2s infinite;
}
@keyframes s-pulse {
  0% { box-shadow: 0 0 0 0 rgba(13,122,79,.7); }
  70% { box-shadow: 0 0 0 12px rgba(13,122,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,122,79,0); }
}

/* ========== Sections ========== */
.s-section { padding: clamp(4rem, 8vw, 7rem) 0; position:relative; }
.s-section-tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.s-container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }

/* ========== Quick actions ========== */
.s-quick-grid {
  display:grid; gap:1px; background: var(--s-border);
  border-radius:22px; overflow:hidden; border:1px solid var(--s-border);
  box-shadow: var(--s-shadow-md);
}
.s-quick-item {
  background:#fff; padding:1.4rem 1.1rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  transition: all .25s; cursor:pointer;
}
.s-quick-item:hover { background: var(--s-ivory); transform: translateY(-2px); }
.s-quick-icon {
  width:52px; height:52px; border-radius:14px;
  background: linear-gradient(135deg, rgba(13,122,79,.10), rgba(11,37,69,.08));
  color: var(--s-emerald-deep);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  transition: all .25s;
}
.s-quick-item:hover .s-quick-icon { background: var(--s-emerald); color:#fff; transform: scale(1.08); }
.s-quick-label { font-weight:700; font-size:.92rem; color: var(--s-navy); }

/* ========== About cards ========== */
.s-pillar {
  position:relative; padding:1.8rem; border-radius:20px;
  background:#fff; border:1px solid var(--s-border);
  transition: all .3s;
  overflow:hidden;
}
.s-pillar::before {
  content:""; position:absolute; top:0; right:0; width:100%; height:3px;
  background: var(--s-grad-emerald); transform: scaleX(0); transform-origin:right;
  transition: transform .4s;
}
.s-pillar:hover { transform: translateY(-4px); box-shadow: var(--s-shadow-md); border-color: transparent; }
.s-pillar:hover::before { transform: scaleX(1); }
.s-pillar-num {
  font-family:"IBM Plex Sans Arabic", serif; font-weight:800;
  font-size:2.2rem; color: var(--s-gold);
  opacity:.4; line-height:1;
}

/* ========== Goals strategic ========== */
.s-goal-row {
  display:grid; grid-template-columns: 80px 1fr auto; gap:1.5rem; align-items:center;
  padding:1.6rem 1.4rem; border-radius:18px;
  background:#fff; border:1px solid var(--s-border);
  transition: all .25s;
}
.s-goal-row:hover { border-color: var(--s-emerald-soft); box-shadow: var(--s-shadow-sm); transform: translateX(-6px); }
.s-goal-num {
  font-size:2.4rem; font-weight:800; color: var(--s-emerald);
  line-height:1; letter-spacing:-.02em;
  background: linear-gradient(135deg, var(--s-emerald) 0%, var(--s-navy) 100%);
  -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent;
}
.s-goal-arrow {
  width:42px; height:42px; border-radius:50%;
  background: var(--s-ivory); color: var(--s-emerald);
  display:flex; align-items:center; justify-content:center;
  transition: all .25s;
}
.s-goal-row:hover .s-goal-arrow { background: var(--s-emerald); color:#fff; transform: rotate(-45deg); }

/* ========== Services bento ========== */
.s-bento {
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
}
.s-bento > * { grid-column: span 3; }
.s-bento .s-bento-hero { grid-column: span 6; grid-row: span 2; }
.s-bento .s-bento-tall { grid-row: span 2; }
@media (min-width: 1024px) {
  .s-bento .s-bento-hero { grid-column: span 3; grid-row: span 2; }
  .s-bento .s-bento-md { grid-column: span 3; }
  .s-bento .s-bento-sm { grid-column: span 2; }
}

.s-service {
  position:relative; padding:1.6rem; border-radius:22px; overflow:hidden;
  background:#fff; border:1px solid var(--s-border);
  transition: all .35s; display:flex; flex-direction:column;
}
.s-service:hover { transform: translateY(-4px); box-shadow: var(--s-shadow-md); }
.s-service-icon {
  width:54px; height:54px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  background: linear-gradient(135deg, rgba(13,122,79,.10), rgba(182,135,58,.08));
  color: var(--s-emerald-deep);
  margin-bottom:1rem;
}
.s-service-hero {
  background: linear-gradient(160deg, #0b2545 0%, #0d7a4f 100%);
  color:#fff; border:0;
}
.s-service-hero .s-service-icon {
  background: rgba(255,255,255,.14); color:#fff;
}
.s-service-hero h3 { color:#fff; }
.s-service-hero p { color: rgba(255,255,255,.85); }
.s-service-deco {
  position:absolute; inset:auto -50px -50px auto; width:200px; height:200px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(217,176,102,.20), transparent 70%);
  pointer-events:none;
}

/* ========== Journey rail ========== */
.s-rail { position:relative; }
.s-rail::before {
  content:""; position:absolute; top:42px; right:5%; left:5%; height:2px;
  background: repeating-linear-gradient(90deg, var(--s-emerald) 0 8px, transparent 8px 16px);
  opacity:.5;
}
.s-rail-step .num {
  width:84px; height:84px; border-radius:50%;
  background:#fff; border:2px solid var(--s-border);
  color: var(--s-navy); font-weight:800; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center; margin: 0 auto 1rem;
  box-shadow: var(--s-shadow-sm); position:relative; z-index:2;
  transition: all .3s;
}
.s-rail-step:hover .num {
  background: var(--s-emerald); color:#fff; border-color: var(--s-emerald);
  transform: scale(1.08); box-shadow: 0 14px 30px rgba(13,122,79,.3);
}
.s-rail-step .num::after {
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px dashed var(--s-border);
  opacity:0; transition: opacity .3s;
}
.s-rail-step:hover .num::after { opacity:1; }
@media (max-width:768px) { .s-rail::before { display:none; } }

/* ========== Project cards ========== */
.s-project {
  background:#fff; border-radius:20px; overflow:hidden;
  border:1px solid var(--s-border); transition: all .35s;
  display:flex; flex-direction:column;
}
.s-project:hover { transform: translateY(-6px); box-shadow: var(--s-shadow-lg); }
.s-project-cover {
  aspect-ratio: 16/10; position:relative; overflow:hidden;
  background: linear-gradient(135deg, #1d3a6b, #0d7a4f);
}
.s-project-cover::before {
  content:""; position:absolute; inset:0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><defs><pattern id='p' width='40' height='40' patternUnits='userSpaceOnUse'><circle cx='20' cy='20' r='1.5' fill='%23ffffff' fill-opacity='0.12'/></pattern></defs><rect width='100%25' height='100%25' fill='url(%23p)'/></svg>");
}
.s-project-cover::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,22,51,.55) 100%);
}
.s-project-tag {
  position:absolute; top:1rem; right:1rem; z-index:2;
  background: rgba(255,255,255,.95); color: var(--s-navy);
  padding:.35rem .8rem; border-radius:999px; font-size:.78rem; font-weight:700;
}
.s-project-status {
  position:absolute; top:1rem; left:1rem; z-index:2;
  background: var(--s-emerald); color:#fff;
  padding:.35rem .8rem; border-radius:999px; font-size:.78rem; font-weight:700;
  display:flex; align-items:center; gap:.35rem;
}

/* ========== Donation opportunities ========== */
.s-donate {
  background:#fff; border-radius:22px; padding:1.6rem;
  border:1px solid var(--s-border); transition: all .3s;
  position:relative; overflow:hidden;
}
.s-donate:hover { box-shadow: var(--s-shadow-md); border-color: var(--s-gold-soft); }
.s-progress { height:10px; background: var(--s-mist); border-radius:999px; overflow:hidden; }
.s-progress > span {
  display:block; height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--s-emerald), var(--s-emerald-soft));
  transition: width 1.6s cubic-bezier(.2,.8,.2,1);
}
.s-donate-ribbon {
  position:absolute; top:1rem; left:-2px;
  background: var(--s-grad-gold); color:#3a2810;
  padding:.3rem .8rem; border-radius:0 8px 8px 0; font-size:.72rem; font-weight:700;
}

/* ========== Impact dashboard ========== */
.s-impact {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(47,167,118,.25), transparent 55%),
    radial-gradient(60% 60% at 0% 100%, rgba(217,176,102,.18), transparent 55%),
    linear-gradient(160deg, #061633 0%, #0b2545 60%, #0a3654 100%);
  color:#fff; border-radius:32px; padding: clamp(2.5rem, 5vw, 4rem);
  position:relative; overflow:hidden;
}
.s-impact::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 80%);
}
.s-stat-num {
  font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight:800;
  background: linear-gradient(135deg, #ffffff 0%, #d9b066 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:-.02em; line-height:1;
}
.s-stat-card {
  background: rgba(255,255,255,.06); backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.10); border-radius:18px;
  padding:1.4rem; transition: all .3s;
}
.s-stat-card:hover { background: rgba(255,255,255,.10); transform: translateY(-3px); }

/* ========== Governance ========== */
.s-gov-card {
  background:#fff; border-radius:18px; padding:1.4rem;
  border:1px solid var(--s-border); transition: all .3s;
  display:flex; gap:1rem; align-items:flex-start;
  position:relative;
}
.s-gov-card:hover {
  border-color: var(--s-navy); transform: translateY(-3px);
  box-shadow: var(--s-shadow-md);
}
.s-gov-icon {
  flex-shrink:0; width:48px; height:48px; border-radius:12px;
  background: linear-gradient(135deg, var(--s-navy), var(--s-navy-soft));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.s-gov-meta {
  display:flex; align-items:center; gap:.4rem;
  font-size:.78rem; color: var(--s-muted); margin-top:.4rem;
}

.s-gov-panel {
  background: linear-gradient(135deg, var(--s-navy) 0%, var(--s-navy-deep) 100%);
  color:#fff; border-radius:22px; padding:2rem; overflow:hidden; position:relative;
}
.s-gov-panel::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 90% 10%, rgba(217,176,102,.18), transparent 50%);
}

/* ========== News ========== */
.s-news-hero {
  background:#fff; border-radius:22px; overflow:hidden; border:1px solid var(--s-border);
  display:grid; grid-template-columns: 1fr; transition: all .3s;
}
@media (min-width: 768px) { .s-news-hero { grid-template-columns: 1.1fr 1fr; } }
.s-news-hero:hover { box-shadow: var(--s-shadow-lg); transform: translateY(-4px); }
.s-news-cover {
  aspect-ratio: 16/11; position:relative;
  background: linear-gradient(135deg, #1d3a6b, #0d7a4f);
  background-size: cover; background-position: center;
}
.s-news-cover::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 45%, rgba(11,37,69,.78) 100%);
}
.s-news-cover > * { position: relative; z-index: 2; }
.s-news-mini {
  background:#fff; border-radius:18px; padding:.85rem;
  border:1px solid var(--s-border); transition: all .25s;
  display:grid; grid-template-columns: 96px 1fr; gap:1rem; align-items:center;
}
.s-news-mini:hover { border-color: var(--s-emerald-soft); transform: translateX(-4px); box-shadow: var(--s-shadow-sm); }
.s-news-thumb {
  aspect-ratio: 1/1; border-radius:12px;
  background: linear-gradient(135deg, #1d3a6b, #0d7a4f);
  background-size: cover; background-position: center;
}

/* ========== Partners (شركاء النجاح) ========== */
.s-partners-wrap {
  position:relative; overflow:hidden; direction:ltr;
  padding:.35rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.s-partners-track {
  display:flex; gap:1rem; align-items:center; width:max-content; min-width:200%;
  direction:ltr; will-change:transform;
  animation: s-partners-scroll 34s linear infinite;
}
.s-partners-wrap:hover .s-partners-track { animation-play-state: paused; }
.s-partner-item {
  flex:0 0 auto; width:178px; height:96px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--s-border); border-radius:14px;
  padding:.65rem; transition: all .3s;
}
.s-partner-item:hover { border-color: var(--s-emerald-soft); box-shadow: var(--s-shadow-sm); transform: translateY(-3px); }
.s-partner-item img {
  max-width:100%; max-height:100%; object-fit:contain;
  filter: grayscale(100%) opacity(.65); transition: filter .35s;
}
.s-partner-item:hover img { filter: grayscale(0) opacity(1); }
@keyframes s-partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width:768px) {
  .s-partners-track { gap:.75rem; animation-duration:28s; }
  .s-partner-item { width:138px; height:76px; padding:.55rem; }
}

/* ========== Events ========== */
.s-event {
  background:#fff; border-radius:18px; padding:1.2rem;
  border:1px solid var(--s-border); transition: all .3s;
  display:grid; grid-template-columns: 84px 1fr auto; gap:1.2rem; align-items:center;
}
.s-event:hover { border-color: var(--s-emerald); box-shadow: var(--s-shadow-sm); }
.s-event-date {
  text-align:center; padding:.7rem;
  background: linear-gradient(135deg, var(--s-navy), var(--s-emerald));
  color:#fff; border-radius:14px;
}
.s-event-date .day { font-size:1.6rem; font-weight:800; line-height:1; }
.s-event-date .month { font-size:.72rem; opacity:.9; margin-top:.2rem; }

/* ========== Testimonials ========== */
.s-quote {
  background:#fff; border-radius:22px; padding:1.8rem;
  border:1px solid var(--s-border); position:relative;
  transition: all .3s;
}
.s-quote:hover { box-shadow: var(--s-shadow-md); transform: translateY(-3px); }
.s-quote::before {
  content:"\201D"; position:absolute; top:.4rem; left:1.2rem;
  font-family:"Tajawal", serif; font-size:4.5rem; color: var(--s-emerald);
  opacity:.18; line-height:1;
}
.s-quote-avatar {
  width:48px; height:48px; border-radius:50%;
  background: linear-gradient(135deg, var(--s-navy), var(--s-emerald));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* ========== Partners ========== */
.s-partner {
  background:#fff; border:1px solid var(--s-border); border-radius:14px;
  padding:1.2rem; height:88px; display:flex; align-items:center; justify-content:center;
  color: var(--s-muted); font-weight:700; transition: all .25s;
  filter: grayscale(1); opacity:.7;
}
.s-partner:hover { filter: none; opacity:1; border-color: var(--s-emerald-soft); transform: translateY(-2px); }

/* ========== CTA final ========== */
.s-cta {
  position:relative; overflow:hidden; border-radius:32px;
  padding: clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(217,176,102,.25), transparent 55%),
    linear-gradient(135deg, #061633 0%, #0b2545 55%, #075c3a 130%);
  color:#fff;
}
.s-cta::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'><circle cx='200' cy='200' r='180'/><circle cx='200' cy='200' r='140'/><circle cx='200' cy='200' r='100'/><circle cx='200' cy='200' r='60'/></g></svg>") center/cover no-repeat;
}

/* ========== Footer ========== */
.s-footer {
  background: linear-gradient(180deg, #061633 0%, #030d22 100%);
  color: #c1cbd9; padding-top:4rem;
}
.s-footer h4 { color:#fff; font-size:1rem; margin-bottom:1.1rem; letter-spacing:.01em; }
.s-footer a { transition: color .2s; }
.s-footer a:hover { color: var(--s-emerald-soft); }
.s-social {
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  transition: all .25s;
}
.s-social:hover { background: var(--s-emerald); border-color: var(--s-emerald); color:#fff; transform: translateY(-3px); }
.s-news-input {
  width:100%; padding:.85rem 1.1rem; border-radius:12px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:#fff; font-family:inherit; font-size:.92rem;
  transition: all .2s;
}
.s-news-input::placeholder { color: rgba(255,255,255,.45); }
.s-news-input:focus { outline:none; border-color: var(--s-emerald-soft); background: rgba(255,255,255,.10); }

/* ========== Reveal ========== */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity:1; transform: translateY(0); }
.reveal-delay-1 { transition-delay:.08s; }
.reveal-delay-2 { transition-delay:.16s; }
.reveal-delay-3 { transition-delay:.24s; }

/* ========== Back to top ========== */
.s-to-top {
  position: fixed; bottom:28px; left:28px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  background: var(--s-navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--s-shadow-md); opacity:0; pointer-events:none;
  transition: all .3s; border:0; cursor:pointer;
}
.s-to-top.show { opacity:1; pointer-events:auto; }
.s-to-top:hover { background: var(--s-emerald); transform: translateY(-3px); }

/* =========================================================
   إضافات صفحات "عن الجمعية" — قائمة منسدلة، هيرو داخلي،
   تنقل فرعي، خط زمني، هيكل تنظيمي، بطاقات أعضاء وفروع
   ========================================================= */

/* ===== Dropdown (desktop) ===== */
.s-has-drop { position: relative; }
.s-drop {
  position: absolute; top: calc(100% + 14px); right: -16px;
  min-width: 320px; background:#fff; border:1px solid var(--s-border);
  border-radius: 18px; padding: .8rem; box-shadow: var(--s-shadow-lg);
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s; z-index:60;
}
.s-has-drop:hover .s-drop,
.s-has-drop:focus-within .s-drop { opacity:1; visibility:visible; transform: translateY(0); }
.s-drop::before {
  content:""; position:absolute; top:-6px; right:32px; width:12px; height:12px;
  background:#fff; border-top:1px solid var(--s-border); border-right:1px solid var(--s-border);
  transform: rotate(-45deg);
}
.s-drop-grid { display:grid; grid-template-columns: 1fr 1fr; gap:.25rem; }
.s-drop-item {
  display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem;
  border-radius:12px; transition: background .2s, color .2s;
  font-weight:600; font-size:.9rem; color: var(--s-text);
}
.s-drop-item i {
  width:32px; height:32px; border-radius:9px; display:inline-flex;
  align-items:center; justify-content:center;
  background: rgba(13,122,79,.10); color: var(--s-emerald-deep); font-size:.85rem;
  transition: all .2s;
}
.s-drop-item:hover { background: var(--s-ivory); color: var(--s-emerald-deep); }
.s-drop-item:hover i { background: var(--s-emerald); color:#fff; }
.s-nav-link.s-has-drop > .caret { margin-right:.25rem; font-size:.7rem; opacity:.7; }

/* ===== Mobile collapsible group ===== */
.s-mob-group > summary {
  list-style:none; cursor:pointer; padding: .8rem .8rem;
  border-radius:10px; display:flex; align-items:center; justify-content:space-between;
  font-weight:700; color: var(--s-navy);
}
.s-mob-group > summary::-webkit-details-marker { display:none; }
.s-mob-group > summary:hover { background: var(--s-ivory); }
.s-mob-group[open] > summary { background: var(--s-ivory); }
.s-mob-group .s-mob-sub {
  padding: .25rem .25rem .25rem 1rem; display:flex; flex-direction:column; gap:.1rem;
}
.s-mob-group .s-mob-sub a {
  display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:8px;
  font-size:.9rem; font-weight:500; color: var(--s-text);
}
.s-mob-group .s-mob-sub a:hover { background: var(--s-ivory); color: var(--s-emerald-deep); }
.s-mob-group .s-mob-sub a i { color: var(--s-emerald); width:18px; text-align:center; }

/* ===== Unified inner page hero (calm, official) ===== */
.s-page-hero {
  position:relative; overflow:hidden; color:#fff;
  background-color:#0b2545;
  padding: clamp(4rem, 7.5vw, 6rem) 0 clamp(3.75rem, 6vw, 5rem);
  isolation:isolate;
}
.s-page-hero .s-hero-bg{
  position:absolute; inset:0; z-index:-2;
  background-image: var(--s-hero-img, url('../images/slide/webyan-slide5.jpg'));
  background-size:cover; background-position:center;
  filter:saturate(.85);
}
.s-page-hero::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(115deg, rgba(6,22,51,.94) 0%, rgba(11,37,69,.86) 55%, rgba(7,92,58,.72) 130%);
}
.s-page-hero::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(80% 60% at 88% 100%, rgba(217,176,102,.22), transparent 60%);
}
.s-page-hero h1 {
  color:#fff; font-size: clamp(2rem, 4vw, 2.9rem); font-weight:900;
  margin: .7rem 0 .9rem; letter-spacing:-.01em;
}
.s-page-hero .s-hero-lead{
  color:rgba(255,255,255,.85); font-size:1.02rem; line-height:1.95; max-width:46rem;
}
.s-hero-meta{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1rem;font-size:.85rem;color:rgba(255,255,255,.82);}
.s-hero-meta i{color:#d9b066;margin-left:.3rem;}
.s-hero-tags{display:inline-flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.4rem;}
.s-crumbs {
  display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:.85rem; color: rgba(255,255,255,.75);
  padding:.45rem .9rem; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}
.s-crumbs a { color: rgba(255,255,255,.75); transition: color .2s; }
.s-crumbs a:hover { color:#fff; }
.s-crumbs .sep { color: var(--s-gold-soft); font-size:.7rem; }
.s-crumbs .cur { color:#fff; font-weight:700; }

/* ===== Sub navigation (about pages) ===== */
.s-subnav {
  background:#fff; border:1px solid var(--s-border); border-radius:18px;
  padding:.55rem; box-shadow: var(--s-shadow-sm); margin-top:-32px;
  position:relative; z-index:5;
  display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none;
}
.s-subnav::-webkit-scrollbar { display:none; }
.s-subnav a {
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  padding:.7rem 1rem; border-radius:12px; font-weight:600; font-size:.88rem;
  color: var(--s-text); transition: all .2s; flex-shrink:0;
}
.s-subnav a i { font-size:.8rem; color: var(--s-emerald); }
.s-subnav a:hover { background: var(--s-ivory); color: var(--s-emerald-deep); }
.s-subnav a.active {
  background: linear-gradient(135deg, var(--s-navy), var(--s-emerald));
  color:#fff;
}
.s-subnav a.active i { color: var(--s-gold-soft); }

/* ===== Generic content card ===== */
.s-card {
  background:#fff; border:1px solid var(--s-border); border-radius:20px;
  padding: clamp(1.4rem, 2vw, 2rem); transition: all .3s;
}
.s-card:hover { box-shadow: var(--s-shadow-sm); }
.s-card-icon {
  width:54px; height:54px; border-radius:14px;
  background: linear-gradient(135deg, rgba(13,122,79,.10), rgba(182,135,58,.10));
  color: var(--s-emerald-deep);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:1rem;
}

/* ===== Section title ===== */
.s-section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight:800; color: var(--s-navy); }

/* ===== Timeline ===== */
.s-timeline { position:relative; padding-right: 2.2rem; }
.s-timeline::before {
  content:""; position:absolute; top:0; bottom:0; right:14px; width:2px;
  background: linear-gradient(180deg, var(--s-emerald), var(--s-gold) 50%, var(--s-navy));
  opacity:.35;
}
.s-tl-item { position:relative; padding-bottom:2rem; }
.s-tl-item::before {
  content:""; position:absolute; right:-2.2rem; top:.4rem; width:30px; height:30px;
  border-radius:50%; background:#fff; border:2px solid var(--s-emerald);
  box-shadow: 0 0 0 5px rgba(13,122,79,.12);
}
.s-tl-item::after {
  content:""; position:absolute; right:-1.55rem; top:1rem; width:9px; height:9px;
  border-radius:50%; background: var(--s-emerald);
}
.s-tl-year {
  display:inline-block; padding:.3rem .8rem; border-radius:999px;
  background: var(--s-emerald)/* */; background: rgba(13,122,79,.12);
  color: var(--s-emerald-deep); font-weight:800; font-size:.82rem; margin-bottom:.5rem;
}

/* ===== Org chart ===== */
.s-org { display:flex; flex-direction:column; align-items:center; gap:2rem; }
.s-org-node {
  background:#fff; border:1.5px solid var(--s-border); border-radius:16px;
  padding:1rem 1.5rem; text-align:center; min-width:200px;
  box-shadow: var(--s-shadow-sm); position:relative;
}
.s-org-node .lbl { font-size:.78rem; color: var(--s-muted); }
.s-org-node .ttl { font-weight:800; color: var(--s-navy); }
.s-org-node.primary {
  background: linear-gradient(135deg, var(--s-navy), var(--s-emerald)); color:#fff;
  border-color: transparent;
}
.s-org-node.primary .lbl { color: rgba(255,255,255,.75); }
.s-org-node.primary .ttl { color:#fff; }
.s-org-row { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.s-org-connector {
  width:2px; height:24px; background: var(--s-border);
}

/* ===== Member card ===== */
.s-member {
  background:#fff; border:1px solid var(--s-border); border-radius:20px;
  overflow:hidden; transition: all .3s; display:flex; flex-direction:column;
}
.s-member:hover { transform: translateY(-5px); box-shadow: var(--s-shadow-md); border-color: var(--s-emerald-soft); }
.s-member-photo {
  aspect-ratio: 1/1; position:relative; overflow:hidden;
  background: linear-gradient(135deg, #1d3a6b, #0d7a4f);
  display:flex; align-items:center; justify-content:center;
}
.s-member-photo::before {
  content:""; position:absolute; inset:0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><defs><pattern id='p' width='30' height='30' patternUnits='userSpaceOnUse'><circle cx='15' cy='15' r='1' fill='%23ffffff' fill-opacity='0.18'/></pattern></defs><rect width='100%25' height='100%25' fill='url(%23p)'/></svg>");
}
.s-member-photo i {
  font-size:4.5rem; color: rgba(255,255,255,.85); z-index:1;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}
.s-member-photo img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
}
.s-quote-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.s-news-cover img, .s-news-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.s-news-cover, .s-news-thumb { position:relative; overflow:hidden; }
.s-member-photo .ribbon {
  position:absolute; top:.9rem; right:.9rem; z-index:2;
  background: var(--s-grad-gold); color:#3a2810;
  padding:.3rem .7rem; border-radius:999px; font-size:.7rem; font-weight:800;
}
.s-member-body { padding:1.2rem; text-align:center; }
.s-member-body .name { font-weight:800; color: var(--s-navy); }
.s-member-body .role { font-size:.85rem; color: var(--s-emerald-deep); font-weight:600; margin-top:.2rem; }
.s-member-meta {
  display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; margin-top:.8rem;
  font-size:.72rem; color: var(--s-muted);
}
.s-member-meta span {
  padding:.2rem .55rem; border-radius:999px; background: var(--s-ivory);
}

/* ===== Branch card ===== */
.s-branch {
  background:#fff; border:1px solid var(--s-border); border-radius:20px;
  padding:1.4rem; transition: all .3s;
}
.s-branch:hover { border-color: var(--s-emerald-soft); box-shadow: var(--s-shadow-sm); transform: translateY(-3px); }
.s-branch-head {
  display:flex; align-items:center; gap:.8rem; padding-bottom:1rem;
  border-bottom:1px dashed var(--s-border); margin-bottom:1rem;
}
.s-branch-icon {
  width:44px; height:44px; border-radius:12px;
  background: linear-gradient(135deg, var(--s-navy), var(--s-emerald));
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.s-branch-row {
  display:flex; align-items:center; gap:.6rem;
  font-size:.85rem; color: var(--s-text); padding:.35rem 0;
}
.s-branch-row i { width:22px; color: var(--s-emerald); text-align:center; }

/* ===== Certificate / document panel ===== */
.s-cert {
  position:relative; aspect-ratio: 4/5; border-radius:20px; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(11,37,69,.04) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, #ffffff 0%, #f5efe0 100%);
  border:1px solid var(--s-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 2rem; text-align:center;
  box-shadow: var(--s-shadow-md);
}
.s-cert::before {
  content:""; position:absolute; inset:14px; border:2px double var(--s-gold);
  border-radius:14px; pointer-events:none;
}
.s-cert .seal {
  width:96px; height:96px; border-radius:50%;
  background: radial-gradient(circle, var(--s-gold-soft), var(--s-gold));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; box-shadow: 0 12px 30px rgba(182,135,58,.4); margin-bottom:1rem;
  border:4px solid #fff;
}

/* ===== Map placeholder ===== */
.s-map {
  aspect-ratio: 16/8; border-radius:20px; overflow:hidden; position:relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(13,122,79,.08), transparent 60%),
    linear-gradient(135deg, #eef2f6, #f3ead8);
  border:1px solid var(--s-border);
}
.s-map::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(11,37,69,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,37,69,.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.s-map-pin {
  position:absolute; width:36px; height:36px; border-radius:50% 50% 50% 0;
  background: var(--s-emerald); transform: rotate(-45deg);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow: 0 8px 18px rgba(13,122,79,.4);
}
.s-map-pin i { transform: rotate(45deg); }

/* ===== Stat strip (small) ===== */
.s-stat-strip {
  display:grid; grid-template-columns: repeat(2,1fr); gap:1px;
  background: var(--s-border); border-radius:20px; overflow:hidden;
  border:1px solid var(--s-border);
}
@media (min-width:768px){ .s-stat-strip { grid-template-columns: repeat(4,1fr); } }
.s-stat-cell { background:#fff; padding:1.4rem 1rem; text-align:center; }
.s-stat-cell .n {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:800; color: var(--s-emerald-deep);
  line-height:1;
}
.s-stat-cell .l { color: var(--s-muted); font-size:.85rem; margin-top:.4rem; }

/* ===== CTA inline ===== */
.s-cta-mini {
  background: linear-gradient(135deg, #061633 0%, #0b2545 60%, #075c3a 130%);
  color:#fff; border-radius:24px; padding: clamp(2rem, 4vw, 3rem);
  display:grid; gap:1.2rem; align-items:center;
}
@media (min-width:768px){ .s-cta-mini { grid-template-columns: 1.4fr auto; } }
.s-cta-mini h3 { color:#fff; font-size:1.5rem; font-weight:800; margin:0; }
.s-cta-mini p { color: rgba(255,255,255,.78); margin:.5rem 0 0; }

/* ============ مكوّنات صفحة المشاريع ============ */
.s-pcard{background:#fff;border:1px solid var(--s-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s, box-shadow .3s, border-color .3s;}
.s-pcard:hover{transform:translateY(-6px);box-shadow:var(--s-shadow-md);border-color:transparent;}
.s-pcard-media{position:relative;aspect-ratio:16/10;overflow:hidden;}
.s-pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.s-pcard:hover .s-pcard-media img{transform:scale(1.06);}
.s-pcard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,0) 50%,rgba(11,37,69,.55) 100%);}
.s-pcard-badges{position:absolute;top:.85rem;right:.85rem;left:.85rem;display:flex;justify-content:space-between;gap:.4rem;z-index:2;}
.s-pcard-body{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.s-pcard-body h3{font-size:1.15rem;font-weight:800;color:var(--s-navy);line-height:1.45;}
.s-pcard-body p{color:var(--s-muted);font-size:.9rem;line-height:1.85;}
.s-pcard-meta{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--s-muted);padding-top:.7rem;border-top:1px dashed var(--s-border);margin-top:auto;}
.s-pcard-meta i{color:var(--s-emerald);margin-left:.3rem;}

.s-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700;line-height:1;backdrop-filter:blur(6px);}
.s-badge-status{background:rgba(13,122,79,.92);color:#fff;}
.s-badge-status.is-done{background:rgba(11,37,69,.92);}
.s-badge-status.is-season{background:rgba(182,135,58,.92);color:#3a2810;}
.s-badge-status.is-pending{background:rgba(91,107,125,.92);color:#fff;}
.s-badge-field{background:rgba(255,255,255,.92);color:var(--s-navy);border:1px solid rgba(255,255,255,.6);}

.s-progress{height:8px;background:var(--s-mist);border-radius:999px;overflow:hidden;position:relative;}
.s-progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--s-emerald),var(--s-emerald-soft));border-radius:999px;transition:width 1.6s cubic-bezier(.2,.8,.2,1);}
.s-progress.gold > i{background:linear-gradient(90deg,var(--s-gold),var(--s-gold-soft));}
.s-progress-row{display:flex;justify-content:space-between;font-size:.78rem;color:var(--s-muted);margin-bottom:.45rem;}
.s-progress-row b{color:var(--s-emerald-deep);font-weight:800;}

/* فلاتر */
.s-filter-bar{background:#fff;border:1px solid var(--s-border);border-radius:24px;padding:1.5rem;box-shadow:var(--s-shadow-sm);}
.s-search{position:relative;}
.s-search input{width:100%;height:54px;border:1.5px solid var(--s-border);border-radius:14px;padding:0 3rem 0 1.2rem;font:inherit;color:var(--s-text);background:var(--s-ivory);outline:none;transition:.2s;}
.s-search input:focus{border-color:var(--s-emerald);background:#fff;}
.s-search > i{position:absolute;top:50%;right:1.1rem;transform:translateY(-50%);color:var(--s-emerald);}
.s-filter-group{display:flex;flex-wrap:wrap;gap:.5rem;}
.s-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:999px;background:var(--s-ivory);border:1.5px solid var(--s-border);color:var(--s-navy);font-weight:700;font-size:.85rem;cursor:pointer;transition:.2s;}
.s-chip:hover{border-color:var(--s-emerald-soft);}
.s-chip.active{background:var(--s-navy);color:#fff;border-color:var(--s-navy);}
.s-chip-label{font-size:.78rem;color:var(--s-muted);font-weight:700;display:block;margin-bottom:.55rem;}

/* مشروع مميز */
.s-feature{display:grid;grid-template-columns:1fr;gap:0;background:#fff;border:1px solid var(--s-border);border-radius:28px;overflow:hidden;}
@media(min-width:1024px){.s-feature{grid-template-columns:1.1fr 1fr;}}
.s-feature-media{position:relative;min-height:340px;}
.s-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.s-feature-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,.15),rgba(11,37,69,.55));}
.s-feature-body{padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center;gap:1.1rem;}

/* لوحة مؤشرات */
.s-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
@media(min-width:768px){.s-kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.s-kpi-grid{grid-template-columns:repeat(6,1fr);}}
.s-kpi{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.2rem 1rem;text-align:center;position:relative;overflow:hidden;}
.s-kpi::before{content:"";position:absolute;top:0;right:0;left:0;height:3px;background:linear-gradient(90deg,var(--s-emerald),var(--s-gold-soft));}
.s-kpi-icon{width:42px;height:42px;border-radius:12px;background:var(--s-ivory);color:var(--s-emerald);display:inline-flex;align-items:center;justify-content:center;margin-bottom:.6rem;}
.s-kpi-n{font-size:1.6rem;font-weight:900;color:var(--s-navy);line-height:1;}
.s-kpi-l{font-size:.78rem;color:var(--s-muted);margin-top:.35rem;}

/* مسارات الأثر */
.s-impact-rail{display:grid;grid-template-columns:1fr;gap:.9rem;}
@media(min-width:768px){.s-impact-rail{grid-template-columns:repeat(5,1fr);}}
.s-impact-node{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.4rem 1rem;text-align:center;position:relative;transition:.3s;}
.s-impact-node:hover{transform:translateY(-4px);border-color:var(--s-emerald-soft);box-shadow:var(--s-shadow-sm);}
.s-impact-node i{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--s-navy),var(--s-emerald));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:.7rem;}
.s-impact-node h4{font-weight:800;color:var(--s-navy);font-size:1rem;margin-bottom:.3rem;}
.s-impact-node p{font-size:.78rem;color:var(--s-muted);}

/* خط زمن المراحل */
.s-tline{position:relative;padding-right:0;}
.s-tline-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
@media(min-width:768px){.s-tline-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.s-tline-grid{grid-template-columns:repeat(3,1fr);}}
.s-tline-step{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;transition:.3s;position:relative;overflow:hidden;}
.s-tline-step:hover{border-color:var(--s-emerald-soft);transform:translateY(-3px);}
.s-tline-num{flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:var(--s-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.05rem;}
.s-tline-step:nth-child(odd) .s-tline-num{background:linear-gradient(135deg,var(--s-navy),var(--s-emerald));}
.s-tline-step h4{color:var(--s-navy);font-weight:800;margin-bottom:.3rem;}
.s-tline-step p{font-size:.86rem;color:var(--s-muted);line-height:1.85;}

/* بطاقة دعم */
.s-support{background:linear-gradient(135deg,var(--s-navy),var(--s-navy-soft));border-radius:24px;padding:2rem;color:#fff;position:relative;overflow:hidden;}
.s-support::after{content:"";position:absolute;top:-60px;left:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(182,135,58,.28),transparent 70%);border-radius:50%;}
.s-support h3{color:#fff;font-size:1.5rem;font-weight:900;margin-bottom:.4rem;}
.s-support .row{display:flex;justify-content:space-between;font-size:.85rem;color:rgba(255,255,255,.85);margin-bottom:.4rem;}
.s-support .row b{color:#fff;font-weight:800;}
.s-support .s-progress{background:rgba(255,255,255,.15);height:10px;}
.s-support .s-progress > i{background:linear-gradient(90deg,var(--s-gold),var(--s-gold-soft));}

/* ملفات المشروع */
.s-file{background:#fff;border:1px solid var(--s-border);border-radius:16px;padding:1.1rem;display:flex;gap:.9rem;align-items:center;transition:.25s;}
.s-file:hover{border-color:var(--s-emerald-soft);transform:translateX(-3px);box-shadow:var(--s-shadow-sm);}
.s-file-icon{width:48px;height:48px;border-radius:12px;background:var(--s-ivory);color:var(--s-emerald);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex:0 0 48px;}
.s-file-body{flex:1;min-width:0;}
.s-file-body h5{font-weight:800;color:var(--s-navy);font-size:.95rem;}
.s-file-body span{font-size:.75rem;color:var(--s-muted);}
.s-file > a{color:var(--s-emerald);font-weight:800;font-size:.85rem;}

/* لوحة بيانات المشروع */
.s-dash{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
@media(min-width:768px){.s-dash{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.s-dash{grid-template-columns:repeat(6,1fr);}}
.s-dash-cell{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.1rem;text-align:center;}
.s-dash-cell .ico{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--s-emerald-soft),var(--s-emerald));color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:.5rem;font-size:.9rem;}
.s-dash-cell .n{font-size:1.35rem;font-weight:900;color:var(--s-navy);}
.s-dash-cell .l{font-size:.74rem;color:var(--s-muted);margin-top:.2rem;}

/* فئات مستفيدة */
.s-bene{background:#fff;border:1px solid var(--s-border);border-radius:16px;padding:1.1rem;display:flex;gap:.8rem;align-items:center;transition:.25s;}
.s-bene:hover{border-color:var(--s-emerald-soft);transform:translateY(-3px);}
.s-bene i{width:44px;height:44px;border-radius:12px;background:var(--s-ivory);color:var(--s-emerald);display:inline-flex;align-items:center;justify-content:center;}
.s-bene span{font-weight:700;color:var(--s-navy);}

/* خفي عند الفلترة */
.is-hidden{display:none !important;}

/* =============================================
   بوابة التبرع — Donation Portal
   ============================================= */

/* ===== Hero فرصة بارزة ===== */
.s-dhero{position:relative;background:var(--s-grad-hero);color:#fff;overflow:hidden;}
.s-dhero::before{content:"";position:absolute;inset:0;background:url("../images/donations/hero.jpg") center/cover;opacity:.18;mix-blend-mode:luminosity;}
.s-dhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,22,51,.55) 0%,rgba(11,37,69,.7) 60%,rgba(7,92,58,.55) 100%);}
.s-dhero-inner{position:relative;z-index:2;}
.s-dhero-card{
  background:rgba(255,255,255,.07);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:1.6rem;color:#fff;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.s-dhero-card .cover{border-radius:16px;overflow:hidden;height:200px;position:relative;}
.s-dhero-card .cover img{width:100%;height:100%;object-fit:cover;}
.s-dhero-card .cover .ribbon{position:absolute;top:12px;right:12px;background:var(--s-grad-gold);color:#3a2810;padding:.35rem .75rem;border-radius:999px;font-size:.72rem;font-weight:800;}
.s-dhero-prog{height:10px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;}
.s-dhero-prog>span{display:block;height:100%;background:linear-gradient(90deg,var(--s-emerald-soft),var(--s-gold-soft));border-radius:999px;width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1);}

/* ===== Filters categories ===== */
.s-dfilters{display:flex;gap:.55rem;overflow-x:auto;padding:.5rem 0;scrollbar-width:thin;}
.s-dfilters::-webkit-scrollbar{height:6px;}
.s-dfilters::-webkit-scrollbar-thumb{background:var(--s-border);border-radius:999px;}
.s-dfchip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.1rem;border-radius:14px;border:1.5px solid var(--s-border);
  background:#fff;color:var(--s-navy);font-weight:700;font-size:.88rem;cursor:pointer;transition:.2s;white-space:nowrap;
}
.s-dfchip i{width:28px;height:28px;border-radius:8px;background:var(--s-ivory);color:var(--s-emerald);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;transition:.2s;}
.s-dfchip .cnt{font-size:.72rem;color:var(--s-muted);background:var(--s-mist);padding:.1rem .5rem;border-radius:999px;font-weight:700;}
.s-dfchip:hover{border-color:var(--s-emerald-soft);transform:translateY(-2px);}
.s-dfchip.active{background:var(--s-navy);color:#fff;border-color:var(--s-navy);}
.s-dfchip.active i{background:rgba(255,255,255,.14);color:var(--s-gold-soft);}
.s-dfchip.active .cnt{background:rgba(255,255,255,.16);color:#fff;}

/* ===== Donation cards — shared shell ===== */
.s-dcard{
  background:#fff;border:1px solid var(--s-border);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;transition:.3s;position:relative;
}
.s-dcard:hover{transform:translateY(-6px);box-shadow:var(--s-shadow-md);border-color:transparent;}
.s-dcard .cover{position:relative;height:180px;overflow:hidden;}
.s-dcard .cover img{width:100%;height:100%;object-fit:cover;transition:.6s;}
.s-dcard:hover .cover img{transform:scale(1.06);}
.s-dcard .badges{position:absolute;top:12px;right:12px;display:flex;gap:.4rem;flex-wrap:wrap;}
.s-dbadge{font-size:.7rem;font-weight:800;padding:.3rem .65rem;border-radius:999px;backdrop-filter:blur(8px);}
.s-dbadge.sadaqah{background:rgba(13,122,79,.92);color:#fff;}
.s-dbadge.kafala{background:rgba(11,37,69,.92);color:#fff;}
.s-dbadge.project{background:rgba(182,135,58,.95);color:#fff;}
.s-dbadge.emergency{background:rgba(196,40,40,.95);color:#fff;animation:dpulse 1.6s infinite;}
.s-dbadge.zakat{background:rgba(75,55,30,.95);color:#fff;}
.s-dbadge.waqf{background:rgba(47,77,121,.95);color:#fff;}
.s-dcard .body{padding:1.2rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.s-dcard h3{font-size:1.05rem;font-weight:800;color:var(--s-navy);line-height:1.4;}
.s-dcard .desc{font-size:.86rem;color:var(--s-muted);line-height:1.7;min-height:44px;}

/* Progress */
.s-dprog{height:8px;border-radius:999px;background:var(--s-mist);overflow:hidden;}
.s-dprog>span{display:block;height:100%;background:linear-gradient(90deg,var(--s-emerald),var(--s-emerald-soft));border-radius:999px;width:0;transition:width 1.2s ease;}
.s-dprog.gold>span{background:linear-gradient(90deg,var(--s-gold),var(--s-gold-soft));}
.s-dprog.red>span{background:linear-gradient(90deg,#a51d1d,#e85d5d);}
.s-dmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;font-size:.72rem;text-align:center;}
.s-dmeta .k{color:var(--s-muted);}
.s-dmeta .v{font-weight:800;color:var(--s-navy);font-size:.88rem;}

/* Suggested amount chips */
.s-amt-row{display:flex;flex-wrap:wrap;gap:.4rem;}
.s-amt{padding:.5rem .8rem;border-radius:10px;border:1.5px solid var(--s-border);background:#fff;font-weight:800;color:var(--s-navy);cursor:pointer;font-size:.82rem;transition:.18s;}
.s-amt:hover{border-color:var(--s-emerald);color:var(--s-emerald);}
.s-amt.active{background:var(--s-emerald);color:#fff;border-color:var(--s-emerald);}
.s-amt-custom{flex:1;min-width:120px;padding:.5rem .8rem;border-radius:10px;border:1.5px solid var(--s-border);font-size:.85rem;text-align:center;font-family:inherit;}
.s-amt-custom:focus{outline:none;border-color:var(--s-emerald);}

/* card actions */
.s-dact{display:flex;gap:.5rem;margin-top:.3rem;}
.s-dact .s-btn{flex:1;justify-content:center;padding:.7rem .9rem;font-size:.85rem;border-radius:12px;}

/* Variant: Kafala (emphasizes duration) */
.s-dcard.kafala{background:linear-gradient(180deg,#fff 0%,#f5f9ff 100%);}
.s-kafala-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;}
.s-kafala-opts .o{padding:.45rem .3rem;border:1.5px solid var(--s-border);border-radius:10px;text-align:center;cursor:pointer;font-size:.72rem;font-weight:700;color:var(--s-navy);transition:.18s;background:#fff;}
.s-kafala-opts .o:hover{border-color:var(--s-navy-soft);}
.s-kafala-opts .o.active{background:var(--s-navy);color:#fff;border-color:var(--s-navy);}
.s-kafala-cost{display:flex;align-items:baseline;gap:.4rem;padding:.7rem .9rem;background:var(--s-ivory);border-radius:12px;border:1px dashed var(--s-gold-soft);}
.s-kafala-cost .v{font-size:1.4rem;font-weight:900;color:var(--s-navy);}
.s-kafala-cost .u{font-size:.78rem;color:var(--s-muted);}

/* Variant: Project (full metrics) */
.s-dcard.project{background:#fff;}

/* Variant: Emergency */
.s-dcard.emergency{border:1px solid #f3c7c7;background:linear-gradient(180deg,#fff 0%,#fff6f6 100%);}
.s-dcard.emergency .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(140,20,20,.32),transparent 60%);}
.s-emerg-prio{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:800;color:#9a1f1f;background:#ffe4e4;padding:.35rem .65rem;border-radius:999px;}

/* Variant: Zakat */
.s-dcard.zakat{background:linear-gradient(180deg,#fff 0%,#fbf6ec 100%);border-color:#e9dcc1;}
.s-zakat-note{font-size:.78rem;color:#6b4d1a;background:#fbf3df;border:1px dashed var(--s-gold-soft);border-radius:10px;padding:.6rem .8rem;}

/* Variant: Waqf */
.s-dcard.waqf{background:linear-gradient(180deg,#fff 0%,#f3f6fb 100%);}
.s-waqf-impact{font-size:.78rem;color:var(--s-navy-soft);font-weight:700;display:flex;align-items:center;gap:.4rem;}

@keyframes dpulse{0%,100%{box-shadow:0 0 0 0 rgba(196,40,40,.6);}50%{box-shadow:0 0 0 8px rgba(196,40,40,0);}}

/* ===== Impact stats panel ===== */
.s-dimpact{background:var(--s-grad-hero);color:#fff;border-radius:26px;padding:2.4rem;position:relative;overflow:hidden;}
.s-dimpact::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 0%,rgba(47,167,118,.25),transparent 50%),radial-gradient(circle at 90% 100%,rgba(217,176,102,.18),transparent 50%);}
.s-dimpact-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.2rem;text-align:center;}
.s-dimpact-cell{padding:.8rem;}
.s-dimpact-cell .n{font-size:2.1rem;font-weight:900;background:linear-gradient(90deg,#fff,var(--s-gold-soft));-webkit-background-clip:text;background-clip:text;color:transparent;}
.s-dimpact-cell .l{font-size:.85rem;color:rgba(255,255,255,.78);margin-top:.3rem;}

/* ===== Donation path ===== */
.s-dpath{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;}
.s-dstep{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.2rem;text-align:center;position:relative;transition:.25s;}
.s-dstep:hover{border-color:var(--s-emerald-soft);transform:translateY(-4px);box-shadow:var(--s-shadow-sm);}
.s-dstep .num{width:40px;height:40px;margin:0 auto .7rem;border-radius:50%;background:var(--s-grad-emerald);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;}
.s-dstep h4{font-size:.92rem;font-weight:800;color:var(--s-navy);}
.s-dstep p{font-size:.76rem;color:var(--s-muted);margin-top:.25rem;}

/* ===== Donation details page ===== */
.s-dside{position:sticky;top:90px;background:#fff;border:1px solid var(--s-border);border-radius:22px;padding:1.4rem;box-shadow:var(--s-shadow-md);}
.s-dside h3{font-size:1.05rem;color:var(--s-navy);margin-bottom:.4rem;}
.s-dside .total{display:flex;align-items:baseline;justify-content:space-between;padding:.9rem 1rem;background:var(--s-ivory);border-radius:14px;margin:.8rem 0;}
.s-dside .total .v{font-size:1.6rem;font-weight:900;color:var(--s-emerald-deep);}
.s-dside .total .u{font-size:.8rem;color:var(--s-muted);}
.s-pay-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.6rem;}
.s-pay-tab{padding:.6rem .4rem;border:1.5px solid var(--s-border);border-radius:10px;background:#fff;cursor:pointer;font-size:.78rem;font-weight:700;color:var(--s-navy);transition:.18s;display:flex;align-items:center;justify-content:center;gap:.3rem;}
.s-pay-tab:hover{border-color:var(--s-emerald);}
.s-pay-tab.active{background:var(--s-navy);color:#fff;border-color:var(--s-navy);}
.s-anon-toggle{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:var(--s-ivory);border-radius:12px;border:1px dashed var(--s-border);cursor:pointer;font-size:.84rem;color:var(--s-navy);font-weight:700;}
.s-anon-toggle input{accent-color:var(--s-emerald);width:18px;height:18px;}

/* impact ladder */
.s-impact-row{display:flex;gap:.7rem;align-items:center;padding:.7rem .9rem;background:#fff;border:1px solid var(--s-border);border-radius:12px;}
.s-impact-row .amt{font-weight:900;color:var(--s-emerald-deep);min-width:90px;}
.s-impact-row .txt{font-size:.85rem;color:var(--s-text);}

/* ===== Modals ===== */
.s-modal-overlay{position:fixed;inset:0;background:rgba(7,15,33,.62);backdrop-filter:blur(6px);z-index:100;display:none;align-items:center;justify-content:center;padding:1rem;}
.s-modal-overlay.open{display:flex;animation:dfade .25s ease;}
.s-modal{background:#fff;border-radius:24px;max-width:560px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 40px 80px rgba(0,0,0,.4);animation:dpop .35s cubic-bezier(.2,.8,.2,1);}
.s-modal.wide{max-width:720px;}
.s-modal-head{padding:1.4rem 1.6rem;border-bottom:1px solid var(--s-border);display:flex;align-items:center;justify-content:space-between;}
.s-modal-head h3{font-size:1.1rem;font-weight:800;color:var(--s-navy);}
.s-modal-close{width:36px;height:36px;border-radius:50%;background:var(--s-mist);color:var(--s-navy);display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;}
.s-modal-body{padding:1.6rem;}
.s-field{margin-bottom:1rem;}
.s-field label{display:block;font-size:.82rem;font-weight:700;color:var(--s-navy);margin-bottom:.4rem;}
.s-input{width:100%;padding:.8rem 1rem;border:1.5px solid var(--s-border);border-radius:12px;font-family:inherit;font-size:.92rem;background:#fff;transition:.18s;}
.s-input:focus{outline:none;border-color:var(--s-emerald);box-shadow:0 0 0 3px rgba(13,122,79,.12);}
.s-modal-foot{padding:1.2rem 1.6rem;border-top:1px solid var(--s-border);display:flex;gap:.6rem;justify-content:flex-end;}

@keyframes dfade{from{opacity:0;}to{opacity:1;}}
@keyframes dpop{from{transform:translateY(20px) scale(.96);opacity:0;}to{transform:none;opacity:1;}}

/* ===== Receipt ===== */
.s-receipt{background:#fff;border:1px solid var(--s-border);border-radius:22px;overflow:hidden;max-width:640px;margin:0 auto;position:relative;}
.s-receipt::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--s-emerald),var(--s-gold),var(--s-navy));}
.s-receipt-head{background:linear-gradient(135deg,var(--s-navy) 0%,var(--s-navy-deep) 100%);color:#fff;padding:1.8rem;text-align:center;position:relative;overflow:hidden;}
.s-receipt-head::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(47,167,118,.22),transparent 50%);}
.s-receipt-head .logo{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#fff,#f3ead8);color:var(--s-navy);display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:900;margin-bottom:.7rem;position:relative;z-index:1;}
.s-receipt-head h2{color:#fff;font-size:1.4rem;font-weight:900;position:relative;z-index:1;}
.s-receipt-head .sub{font-size:.85rem;color:rgba(255,255,255,.78);margin-top:.2rem;position:relative;z-index:1;}
.s-receipt-stamp{position:absolute;left:1.4rem;top:1.4rem;transform:rotate(-12deg);border:3px solid var(--s-emerald-soft);color:var(--s-emerald-soft);padding:.4rem .8rem;border-radius:10px;font-weight:900;font-size:.78rem;letter-spacing:.05em;z-index:2;}
.s-receipt-body{padding:1.6rem 1.8rem;}
.s-rrow{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px dashed var(--s-border);font-size:.92rem;}
.s-rrow:last-child{border:0;}
.s-rrow .k{color:var(--s-muted);}
.s-rrow .v{color:var(--s-navy);font-weight:700;}
.s-receipt-amount{background:var(--s-ivory);border:1px dashed var(--s-emerald-soft);border-radius:14px;padding:1.1rem 1.4rem;margin:1rem 0;display:flex;justify-content:space-between;align-items:center;}
.s-receipt-amount .v{font-size:1.8rem;font-weight:900;color:var(--s-emerald-deep);}
.s-receipt-thanks{text-align:center;padding:1.2rem;font-size:.94rem;color:var(--s-text);line-height:1.8;background:linear-gradient(180deg,transparent,var(--s-ivory));border-radius:14px;}
.s-receipt-foot{padding:1.2rem 1.8rem;background:var(--s-ivory);display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;border-top:1px dashed var(--s-border);}
.s-receipt-foot .s-btn{padding:.65rem 1.1rem;font-size:.85rem;}

/* ===== floating quick bar ===== */
.s-dquick{position:fixed;bottom:24px;right:24px;background:#fff;border-radius:18px;box-shadow:var(--s-shadow-lg);padding:.8rem;display:flex;gap:.4rem;z-index:55;border:1px solid var(--s-border);}
.s-dquick a,.s-dquick button{width:42px;height:42px;border-radius:12px;background:var(--s-ivory);color:var(--s-navy);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:.18s;}
.s-dquick a:hover,.s-dquick button:hover{background:var(--s-emerald);color:#fff;transform:translateY(-3px);}
@media(max-width:640px){.s-dquick{bottom:14px;right:14px;padding:.5rem;}.s-dquick a,.s-dquick button{width:38px;height:38px;}}

/* FAQ accordion (compact) */
.s-faq-item{background:#fff;border:1px solid var(--s-border);border-radius:14px;padding:.4rem 1.1rem;margin-bottom:.6rem;transition:.2s;}
.s-faq-item:hover{border-color:var(--s-emerald-soft);}
.s-faq-item summary{cursor:pointer;list-style:none;padding:.9rem 0;font-weight:700;color:var(--s-navy);display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.s-faq-item summary::-webkit-details-marker{display:none;}
.s-faq-item summary::after{content:"+";font-size:1.3rem;color:var(--s-emerald);font-weight:900;transition:.2s;}
.s-faq-item[open] summary::after{transform:rotate(45deg);}
.s-faq-item p{padding:0 0 1rem;color:var(--s-muted);font-size:.9rem;line-height:1.8;}

/* breadcrumbs (re-using s-crumbs if present, fallback) */
.s-bcrumbs{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:rgba(255,255,255,.78);flex-wrap:wrap;}
.s-bcrumbs a{color:rgba(255,255,255,.78);}
.s-bcrumbs a:hover{color:var(--s-gold-soft);}
.s-bcrumbs i{font-size:.6rem;opacity:.6;}

@media print{
  .s-header,.s-topbar,.s-footer,.s-to-top,.s-dquick,.s-modal-overlay,nav,header,footer{display:none !important;}
  body{background:#fff;}
  .s-receipt{box-shadow:none;border:1px solid #ccc;}
}

/* ============================================
   مسارات التبرع — تبويبات وألواح (donation paths)
   ============================================ */
.s-dtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;background:var(--s-ivory);padding:.35rem;border-radius:14px;border:1px solid var(--s-border);margin-bottom:1rem;}
.s-dtab{padding:.7rem .4rem;border-radius:10px;background:transparent;border:0;font-family:inherit;font-weight:800;font-size:.78rem;color:var(--s-muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.3rem;transition:.2s;line-height:1;}
.s-dtab i{font-size:1rem;}
.s-dtab:hover{color:var(--s-emerald-deep);}
.s-dtab.active{background:#fff;color:var(--s-emerald-deep);box-shadow:0 4px 12px rgba(11,37,69,.08);}
.s-dpanel{display:none;animation:dpop .3s ease;}
.s-dpanel.active{display:block;}
.s-dpanel-hint{font-size:.8rem;color:var(--s-muted);margin-bottom:.7rem;line-height:1.7;}
.s-field-block{margin-top:.8rem;}
.s-field-title{display:block;font-size:.78rem;font-weight:800;color:var(--s-navy);margin-bottom:.5rem;}

/* segmented control للتكرار */
.s-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;background:var(--s-ivory);padding:.3rem;border-radius:12px;border:1px solid var(--s-border);}
.s-seg-opt{padding:.55rem .3rem;border-radius:9px;background:transparent;border:0;font-family:inherit;font-weight:700;font-size:.78rem;color:var(--s-muted);cursor:pointer;transition:.18s;}
.s-seg-opt:hover{color:var(--s-emerald-deep);}
.s-seg-opt.active{background:#fff;color:var(--s-emerald-deep);box-shadow:0 2px 8px rgba(11,37,69,.08);}

/* ملخص التبرع الدوري */
.s-rd-summary{display:flex;gap:.6rem;align-items:flex-start;padding:.8rem 1rem;background:linear-gradient(135deg,rgba(47,167,118,.08),rgba(11,37,69,.04));border:1px dashed var(--s-emerald-soft);border-radius:12px;font-size:.82rem;color:var(--s-text);line-height:1.8;}
.s-rd-summary b{color:var(--s-emerald-deep);}

/* بطاقة معاينة الإهداء */
.s-gift-card{padding:.4rem;border-radius:18px;background:linear-gradient(135deg,var(--s-navy) 0%,var(--s-emerald-deep) 100%);box-shadow:0 12px 32px rgba(11,37,69,.18);}
.s-gift-card-inner{background:#fff;border-radius:14px;padding:1.2rem 1.1rem;position:relative;overflow:hidden;text-align:center;}
.s-gift-card-inner::before{content:"";position:absolute;top:-30px;left:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(182,135,58,.18),transparent 70%);}
.s-gift-card-inner::after{content:"";position:absolute;bottom:-30px;right:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(47,167,118,.16),transparent 70%);}
.s-gift-logo{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--s-navy),var(--s-emerald-deep));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:1.2rem;margin:0 auto .5rem;position:relative;z-index:1;}
.s-gift-eyebrow{font-size:.7rem;font-weight:800;color:var(--s-gold);letter-spacing:.12em;margin-bottom:.5rem;position:relative;z-index:1;}
.s-gift-line{font-size:.95rem;color:var(--s-navy);font-weight:700;margin-bottom:.5rem;position:relative;z-index:1;}
.s-gift-msg{font-size:.85rem;color:var(--s-text);line-height:1.7;padding:.6rem .8rem;background:var(--s-ivory);border-radius:10px;margin:.6rem 0;font-style:italic;position:relative;z-index:1;}
.s-gift-meta{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.7rem;position:relative;z-index:1;}
.s-gift-meta>div{background:var(--s-ivory);padding:.45rem .55rem;border-radius:9px;font-size:.72rem;}
.s-gift-meta>div:last-child{grid-column:span 2;}
.s-gift-meta span{display:block;color:var(--s-muted);font-size:.66rem;margin-bottom:.15rem;}
.s-gift-meta b{color:var(--s-navy);font-weight:800;}
.s-gift-foot{margin-top:.8rem;padding-top:.6rem;border-top:1px dashed var(--s-border);font-size:.68rem;color:var(--s-muted);position:relative;z-index:1;}

/* ملخص الدفع داخل المودال */
.s-pay-summary{background:linear-gradient(135deg,var(--s-ivory),#fff);border:1px solid var(--s-border);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1.1rem;}
.s-pay-summary .row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;font-size:.85rem;color:var(--s-text);}
.s-pay-summary .row span{color:var(--s-muted);}
.s-pay-summary .row b{color:var(--s-navy);font-weight:800;}
.s-pay-summary .row.total{margin-top:.4rem;padding-top:.7rem;border-top:1px dashed var(--s-border);font-size:1rem;}
.s-pay-summary .row.total b{color:var(--s-emerald-deep);font-size:1.25rem;font-weight:900;}

/* تجاوب الجوال */
@media (max-width: 640px){
  .s-dtab{font-size:.72rem;padding:.6rem .3rem;}
  .s-dtab i{font-size:.92rem;}
  .s-seg-opt{font-size:.72rem;}
  .s-gift-meta{grid-template-columns:1fr;}
  .s-gift-meta>div:last-child{grid-column:auto;}
}

/* === تحسينات مسارات التبرع v3 === */
.s-dtabs.cols-2{grid-template-columns:repeat(2,1fr);}
.s-pay-methods{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem;}
.s-method-btn{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;border:1.5px solid var(--s-border);background:#fff;border-radius:14px;cursor:pointer;text-align:right;width:100%;font-family:inherit;transition:.2s;position:relative;color:var(--s-navy);}
.s-method-btn:hover{border-color:var(--s-emerald);transform:translateY(-1px);box-shadow:0 8px 18px rgba(11,37,69,.08);}
.s-method-btn.primary{background:linear-gradient(135deg,var(--s-navy),var(--s-emerald-deep));color:#fff;border-color:transparent;}
.s-method-btn.primary:hover{box-shadow:0 10px 22px rgba(11,37,69,.22);}
.s-method-btn.primary .mt-sub{color:rgba(255,255,255,.78);}
.s-method-btn.primary .mt-ic{background:rgba(255,255,255,.16);color:#fff;}
.s-method-btn .mt-ic{width:44px;height:44px;border-radius:12px;background:var(--s-ivory);color:var(--s-emerald-deep);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.s-method-btn .mt-title{display:block;font-weight:800;font-size:.92rem;line-height:1.25;}
.s-method-btn .mt-sub{display:block;font-size:.72rem;color:var(--s-muted);margin-top:.22rem;line-height:1.3;}
.s-method-btn .mt-arrow{margin-right:auto;opacity:.6;font-size:.8rem;}
.s-method-btn .flex-1{flex:1;min-width:0;}
.s-brand-pills{display:flex;gap:.3rem;margin-top:.45rem;flex-wrap:wrap;}
.s-brand-pills span{font-size:.6rem;font-weight:800;padding:.18rem .45rem;border-radius:6px;background:#fff;color:var(--s-navy);border:1px solid var(--s-border);letter-spacing:.04em;}
.s-method-btn.primary .s-brand-pills span{background:rgba(255,255,255,.18);color:#fff;border-color:transparent;}

/* تحويل بنكي */
.s-transfer-card{background:linear-gradient(135deg,var(--s-navy),var(--s-emerald-deep));color:#fff;padding:1.1rem 1.2rem;border-radius:16px;margin-bottom:1rem;box-shadow:0 10px 24px rgba(11,37,69,.18);}
.s-transfer-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.65rem 0;border-bottom:1px dashed rgba(255,255,255,.18);}
.s-transfer-row:last-child{border-bottom:0;}
.s-transfer-row .k{font-size:.76rem;opacity:.8;}
.s-transfer-row .v{font-weight:800;font-size:.9rem;display:flex;align-items:center;gap:.5rem;}
.s-copy-btn{background:rgba(255,255,255,.16);color:#fff;border:0;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:.74rem;transition:.18s;display:inline-flex;align-items:center;justify-content:center;}
.s-copy-btn:hover{background:rgba(255,255,255,.32);}
.s-copy-btn.copied{background:var(--s-emerald);}
.s-upload{display:block;border:2px dashed var(--s-border);border-radius:14px;padding:1.1rem;text-align:center;cursor:pointer;transition:.18s;background:var(--s-ivory);}
.s-upload:hover{border-color:var(--s-emerald);background:#fff;}
.s-upload .ic{font-size:1.6rem;color:var(--s-emerald);margin-bottom:.35rem;}
.s-upload .ttl{font-weight:800;color:var(--s-navy);font-size:.88rem;}
.s-upload .sub{font-size:.72rem;color:var(--s-muted);margin-top:.2rem;}
.s-upload .fname{margin-top:.55rem;font-size:.78rem;color:var(--s-emerald-deep);font-weight:800;display:inline-flex;align-items:center;gap:.35rem;}

/* مودال الإهداء — المستلمون */
.s-recipients{display:flex;flex-direction:column;gap:.55rem;}
.s-recip{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;align-items:end;padding:.65rem;background:var(--s-ivory);border-radius:12px;border:1px solid var(--s-border);position:relative;}
.s-recip .s-field{margin-bottom:0;}
.s-recip .s-field label{font-size:.72rem;}
.s-recip-del{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--s-border);color:#b3261e;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:.18s;}
.s-recip-del:hover{background:#fff5f4;border-color:#b3261e;}
.s-recip-add{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border:1.5px dashed var(--s-emerald);color:var(--s-emerald-deep);background:rgba(47,167,118,.08);border-radius:10px;cursor:pointer;font-weight:800;font-size:.82rem;margin-top:.7rem;font-family:inherit;}
.s-recip-add:hover{background:rgba(47,167,118,.16);}
.s-recip-index{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--s-emerald);color:#fff;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15);}

@media(max-width:640px){
  .s-recip{grid-template-columns:1fr auto;}
  .s-recip .s-field:nth-child(2){grid-column:1;}
}

/* ============ STORE (المتجر) ============ */
.st-hero{ position:relative; background:linear-gradient(135deg,#061633 0%,#0b2545 45%,#0d7a4f 100%); color:#fff; overflow:hidden; }
.st-hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 20% 20%, rgba(217,176,102,.18), transparent 40%), radial-gradient(circle at 80% 80%, rgba(47,167,118,.18), transparent 45%); pointer-events:none;}
.st-hero-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px); border-radius:24px; padding:22px; box-shadow:0 30px 80px -30px rgba(0,0,0,.5);}
.st-impact-pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:99px; background:rgba(217,176,102,.18); color:#f3ead8; font-size:.85rem; border:1px solid rgba(217,176,102,.35);}

.st-cat{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 14px; background:#fff; border:1px solid var(--s-border,#e6ebf1); border-radius:18px; cursor:pointer; transition:.25s; text-align:center;}
.st-cat:hover,.st-cat.active{ background:#0b2545; color:#fff; border-color:#0b2545; transform:translateY(-3px); box-shadow:0 14px 32px -16px rgba(11,37,69,.45);}
.st-cat .ico{ width:46px;height:46px;border-radius:14px;background:#eef2f6;color:#0b2545;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.st-cat:hover .ico,.st-cat.active .ico{ background:rgba(255,255,255,.18); color:#fff;}
.st-cat .nm{ font-weight:700; font-size:.95rem;}
.st-cat .ct{ font-size:.78rem; opacity:.7;}

.st-card{ background:#fff; border:1px solid #e6ebf1; border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition:.25s; position:relative;}
.st-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(11,37,69,.35); border-color:#0d7a4f;}
.st-card .cover{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#0b2545;}
.st-card .cover img{ width:100%; height:100%; object-fit:cover; transition:.5s;}
.st-card:hover .cover img{ transform:scale(1.05);}
.st-card .badges{ position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:6px;}
.st-badge{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:5px 10px; border-radius:99px; background:#fff; color:#0b2545; box-shadow:0 4px 12px rgba(0,0,0,.1);}
.st-badge.type-physical{ background:#0b2545; color:#fff;}
.st-badge.type-digital{ background:#1d3a6b; color:#fff;}
.st-badge.type-service{ background:#0d7a4f; color:#fff;}
.st-badge.type-course{ background:#b6873a; color:#fff;}
.st-badge.type-impact{ background:linear-gradient(135deg,#075c3a,#b6873a); color:#fff;}
.st-badge.limited{ background:#fff3e6; color:#a25a16;}
.st-badge.new{ background:#e6f4ec; color:#075c3a;}
.st-card .body{ padding:18px; display:flex; flex-direction:column; gap:10px; flex:1;}
.st-card h3{ font-size:1.05rem; font-weight:800; color:#0b2545; line-height:1.45;}
.st-card .desc{ font-size:.85rem; color:#5b6b7d; line-height:1.7; min-height:42px;}
.st-card .meta{ display:flex; flex-wrap:wrap; gap:10px; font-size:.78rem; color:#5b6b7d; padding-top:4px; border-top:1px dashed #e6ebf1;}
.st-card .meta i{ color:#0d7a4f; margin-left:4px;}
.st-card .price-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:10px;}
.st-card .price{ font-size:1.2rem; font-weight:800; color:#0d7a4f;}
.st-card .price small{ font-weight:500; font-size:.75rem; color:#5b6b7d;}
.st-card .actions{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:0 18px 18px;}
.st-card .actions .s-btn{ padding:.65rem .9rem; font-size:.85rem;}

.st-card.impact{ border:1px solid #d9b066;}
.st-card.impact::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:20px; box-shadow:inset 0 0 0 2px rgba(217,176,102,.18);}
.st-impact-note{ background:linear-gradient(135deg,#f3ead8,#faf7f0); border:1px solid #d9b066; border-radius:12px; padding:10px 12px; font-size:.78rem; color:#0b2545;}

.st-feature{ background:linear-gradient(135deg,#0b2545,#1d3a6b); color:#fff; border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr; }
@media(min-width:768px){ .st-feature{ grid-template-columns:1.1fr 1fr;} }
.st-feature .cover{ aspect-ratio:4/3; background:#0b2545; position:relative; overflow:hidden;}
.st-feature .cover img{ width:100%; height:100%; object-fit:cover;}
.st-feature .body{ padding:28px; display:flex; flex-direction:column; gap:14px; justify-content:center;}

.st-filterbar{ background:#fff; border:1px solid #e6ebf1; border-radius:20px; padding:18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; align-items:end;}
.st-field label{ display:block; font-size:.78rem; font-weight:700; color:#5b6b7d; margin-bottom:6px;}
.st-field input,.st-field select{ width:100%; padding:.7rem .9rem; border:1px solid #e6ebf1; border-radius:12px; font-family:inherit; font-size:.9rem; background:#faf7f0;}
.st-field input:focus,.st-field select:focus{ outline:none; border-color:#0d7a4f; background:#fff;}

.st-step{ background:#fff; border:1px solid #e6ebf1; border-radius:18px; padding:22px; text-align:center; position:relative;}
.st-step .n{ width:44px;height:44px;margin:0 auto 12px;border-radius:14px;background:linear-gradient(135deg,#0b2545,#0d7a4f); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem;}
.st-step h4{ font-weight:800; color:#0b2545; margin-bottom:6px;}
.st-step p{ font-size:.85rem; color:#5b6b7d; line-height:1.7;}

.st-stat{ background:linear-gradient(135deg,#fff,#faf7f0); border:1px solid #e6ebf1; border-radius:18px; padding:22px; text-align:center;}
.st-stat .v{ font-size:2rem; font-weight:900; color:#0d7a4f;}
.st-stat .l{ font-size:.85rem; color:#5b6b7d; margin-top:6px;}

.st-tab{ padding:.6rem 1.1rem; border-radius:99px; background:#fff; border:1px solid #e6ebf1; color:#0b2545; font-weight:700; font-size:.85rem; cursor:pointer; transition:.2s;}
.st-tab.active{ background:#0b2545; color:#fff; border-color:#0b2545;}

/* product details */
.st-gallery-main{ aspect-ratio:4/3; background:#0b2545; border-radius:22px; overflow:hidden; border:1px solid #e6ebf1;}
.st-gallery-main img{ width:100%; height:100%; object-fit:cover;}
.st-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px;}
.st-thumbs button{ aspect-ratio:1; border-radius:12px; overflow:hidden; border:2px solid transparent; background:#eef2f6;}
.st-thumbs button.active{ border-color:#0d7a4f;}
.st-thumbs img{ width:100%; height:100%; object-fit:cover;}

.st-qty{ display:inline-flex; align-items:center; gap:0; border:1px solid #e6ebf1; border-radius:12px; overflow:hidden;}
.st-qty button{ width:40px; height:42px; background:#faf7f0; color:#0b2545; font-weight:800;}
.st-qty input{ width:54px; height:42px; text-align:center; border:none; font-weight:700;}

/* cart */
.st-cart-row{ display:grid; grid-template-columns:90px 1fr auto; gap:14px; padding:16px; background:#fff; border:1px solid #e6ebf1; border-radius:16px; align-items:center;}
.st-cart-row .ci{ width:90px; height:90px; border-radius:12px; overflow:hidden; background:#0b2545;}
.st-cart-row .ci img{ width:100%; height:100%; object-fit:cover;}
@media(max-width:640px){ .st-cart-row{ grid-template-columns:80px 1fr; } .st-cart-row .right{ grid-column:1/-1;} }

/* checkout */
.st-checkout-step{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:99px; background:#fff; border:1px solid #e6ebf1; font-size:.85rem; font-weight:700; color:#5b6b7d;}
.st-checkout-step.active{ background:#0b2545; color:#fff; border-color:#0b2545;}
.st-checkout-step .n{ width:24px;height:24px;border-radius:50%; background:#eef2f6; color:#0b2545; display:flex; align-items:center; justify-content:center; font-size:.75rem;}
.st-checkout-step.active .n{ background:#b6873a; color:#fff;}

.st-pay-opt{ display:flex; align-items:center; gap:12px; padding:14px; border:2px solid #e6ebf1; border-radius:14px; cursor:pointer; transition:.2s; background:#fff;}
.st-pay-opt:hover{ border-color:#0d7a4f;}
.st-pay-opt input{ accent-color:#0d7a4f;}
.st-pay-opt.active{ border-color:#0d7a4f; background:#f0faf5;}

/* success */
.st-success-mark{ width:120px; height:120px; margin:0 auto; border-radius:50%; background:linear-gradient(135deg,#0d7a4f,#2fa776); color:#fff; display:flex; align-items:center; justify-content:center; font-size:3.5rem; box-shadow:0 20px 50px -10px rgba(13,122,79,.45); animation:stPop .5s ease-out;}
@keyframes stPop{ 0%{transform:scale(0);} 60%{transform:scale(1.1);} 100%{transform:scale(1);} }


/* ============= خدمات + تتبع + تواصل ============= */

.srv-quick{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border:1px solid var(--s-border);border-radius:16px;background:#fff;transition:.25s;}
.srv-quick i{width:46px;height:46px;border-radius:12px;background:var(--s-mist);color:var(--s-emerald);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.srv-quick span{display:flex;flex-direction:column;}
.srv-quick strong{color:var(--s-navy);font-weight:800;font-size:.95rem;}
.srv-quick small{color:var(--s-muted);font-size:.78rem;margin-top:.15rem;}
.srv-quick:hover{border-color:var(--s-emerald);transform:translateY(-3px);box-shadow:0 14px 30px rgba(13,122,79,.12);}

.srv-filter{background:#fff;border:1px solid var(--s-border);border-radius:20px;padding:1.4rem;display:flex;flex-direction:column;gap:1rem;}
.srv-search{position:relative;}
.srv-search i{position:absolute;top:50%;right:1rem;transform:translateY(-50%);color:var(--s-muted);}
.srv-search input{width:100%;padding:.85rem 2.6rem .85rem 1rem;border:1.5px solid var(--s-border);border-radius:12px;font:inherit;background:var(--s-ivory);}
.srv-search input:focus{outline:none;border-color:var(--s-emerald);background:#fff;}
.srv-fgroup{display:flex;flex-direction:column;gap:.5rem;}
.srv-fgroup .lbl{font-size:.78rem;font-weight:700;color:var(--s-muted);}
.srv-fgroup .chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.srv-fgroup .chip{padding:.45rem .9rem;border:1.5px solid var(--s-border);border-radius:999px;background:#fff;font-size:.8rem;font-weight:600;color:var(--s-navy);cursor:pointer;transition:.2s;}
.srv-fgroup .chip:hover{border-color:var(--s-emerald);color:var(--s-emerald);}
.srv-fgroup .chip.active{background:var(--s-emerald);color:#fff;border-color:var(--s-emerald);}

.srv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;}
.srv-card{background:#fff;border:1px solid var(--s-border);border-radius:20px;padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;transition:.3s;position:relative;overflow:hidden;}
.srv-card::before{content:"";position:absolute;top:0;right:0;width:90px;height:90px;background:radial-gradient(circle,rgba(13,122,79,.08),transparent 70%);border-radius:0 0 0 100%;}
.srv-card.warm::before{background:radial-gradient(circle,rgba(182,135,58,.1),transparent 70%);}
.srv-card.urgent-card{border-color:#e6a03a;background:linear-gradient(180deg,#fff7e8,#fff);}
.srv-card .head{display:flex;align-items:center;justify-content:space-between;}
.srv-card .head i{width:48px;height:48px;border-radius:14px;background:var(--s-mist);color:var(--s-emerald);display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.srv-card.warm .head i{background:#fbf1de;color:var(--s-gold);}
.srv-card.urgent-card .head i{background:#fde6c8;color:#a45e10;}
.srv-card .badge{font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;background:var(--s-mist);color:var(--s-navy);}
.srv-card .badge.urgent{background:#fde6c8;color:#a45e10;}
.srv-card h3{font-size:1.1rem;font-weight:800;color:var(--s-navy);}
.srv-card p{font-size:.85rem;color:var(--s-muted);line-height:1.7;flex:1;}
.srv-card .meta{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:0;margin:0;font-size:.75rem;color:var(--s-muted);}
.srv-card .meta i{color:var(--s-emerald);margin-left:.3rem;}
.srv-card .meta i.urgent{color:#a45e10;}
.srv-card .acts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.4rem;}
.srv-card .acts .s-btn,.srv-card .acts .btn{padding:.65rem .6rem;font-size:.8rem;justify-content:center;min-width:0;white-space:nowrap;}
.srv-card:hover{transform:translateY(-4px);border-color:var(--s-emerald);box-shadow:0 18px 40px rgba(11,37,69,.1);}

.srv-info{background:var(--s-ivory);border:1px solid var(--s-border);border-radius:16px;padding:1.4rem;text-align:center;}
.srv-info i{width:54px;height:54px;border-radius:50%;background:#fff;color:var(--s-emerald);display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.8rem;box-shadow:0 6px 16px rgba(13,122,79,.15);}
.srv-info h4{font-weight:800;color:var(--s-navy);margin-bottom:.4rem;}
.srv-info p{font-size:.82rem;color:var(--s-muted);line-height:1.7;}

/* تفاصيل + نموذج الخدمة */
.srv-mini{display:flex;gap:.6rem;align-items:center;padding:.7rem;border:1px solid var(--s-border);border-radius:12px;background:var(--s-ivory);}
.srv-mini i{font-size:1.1rem;}
.srv-mini small{display:block;font-size:.7rem;color:var(--s-muted);}
.srv-mini strong{font-size:.85rem;color:var(--s-navy);}
.srv-acc{margin-bottom:1.2rem;}
.srv-acc h4{font-weight:800;color:var(--s-navy);margin-bottom:.6rem;font-size:.95rem;}
.srv-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem;}
.srv-list li{position:relative;padding:.6rem 2.2rem .6rem 1rem;background:var(--s-ivory);border-radius:10px;font-size:.85rem;color:var(--s-text);line-height:1.7;}
.srv-list li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--s-emerald);position:absolute;right:.8rem;top:.85rem;font-size:.78rem;}
.srv-list.ordered{counter-reset:s;}
.srv-list.ordered li{counter-increment:s;padding-right:2.4rem;}
.srv-list.ordered li::before{content:counter(s);background:var(--s-emerald);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;right:.55rem;font-size:.72rem;}
.srv-faq{background:var(--s-ivory);border:1px solid var(--s-border);border-radius:12px;padding:.85rem 1rem;margin-bottom:.5rem;}
.srv-faq summary{cursor:pointer;font-weight:700;color:var(--s-navy);font-size:.9rem;list-style:none;}
.srv-faq summary::-webkit-details-marker{display:none;}
.srv-faq summary::after{content:"+";float:left;color:var(--s-emerald);font-weight:800;}
.srv-faq[open] summary::after{content:"−";}
.srv-faq p{margin-top:.6rem;font-size:.85rem;color:var(--s-muted);line-height:1.8;}

.srv-steps{display:flex;gap:.5rem;padding:0;margin:0 0 1.4rem;list-style:none;overflow-x:auto;}
.srv-steps li{flex:1;min-width:110px;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;color:var(--s-muted);position:relative;padding-top:.4rem;}
.srv-steps li span{width:32px;height:32px;border-radius:50%;background:var(--s-mist);color:var(--s-muted);display:flex;align-items:center;justify-content:center;font-weight:800;}
.srv-steps li.active span{background:var(--s-emerald);color:#fff;}
.srv-steps li.done span{background:var(--s-emerald-deep);color:#fff;}
.srv-steps li.active,.srv-steps li.done{color:var(--s-navy);}

.srv-step.hidden{display:none;}
.srv-field{display:flex;flex-direction:column;gap:.35rem;}
.srv-field label{font-size:.78rem;font-weight:700;color:var(--s-navy);}
.srv-field input,.srv-field select,.srv-field textarea{padding:.7rem .85rem;border:1.5px solid var(--s-border);border-radius:10px;font:inherit;background:#fff;color:var(--s-text);width:100%;}
.srv-field input:focus,.srv-field select:focus,.srv-field textarea:focus{outline:none;border-color:var(--s-emerald);box-shadow:0 0 0 3px rgba(13,122,79,.12);}
.srv-field input:invalid:not(:placeholder-shown){border-color:#c34646;}
.srv-phone{display:flex;border:1.5px solid var(--s-border);border-radius:10px;overflow:hidden;background:#fff;}
.srv-phone span{padding:.7rem .85rem;background:var(--s-ivory);font-weight:800;color:var(--s-navy);border-left:1px solid var(--s-border);}
.srv-phone input{border:0!important;border-radius:0!important;}
.srv-radios{display:flex;flex-wrap:wrap;gap:.6rem;}
.srv-radios label{display:flex;gap:.4rem;align-items:center;padding:.55rem .9rem;border:1.5px solid var(--s-border);border-radius:999px;cursor:pointer;font-size:.82rem;background:#fff;}
.srv-radios input{accent-color:var(--s-emerald);}
.srv-upload{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.2rem;border:1.5px dashed var(--s-border);border-radius:14px;background:var(--s-ivory);text-align:center;cursor:not-allowed;}
.srv-upload i{font-size:1.6rem;color:var(--s-emerald);}
.srv-upload strong{font-size:.85rem;color:var(--s-navy);}
.srv-upload small{font-size:.7rem;color:var(--s-muted);}
.srv-upload input{display:none;}
.srv-check{display:flex;gap:.55rem;align-items:flex-start;padding:.65rem;border:1px solid var(--s-border);border-radius:10px;background:var(--s-ivory);cursor:pointer;font-size:.85rem;}
.srv-check input{accent-color:var(--s-emerald);margin-top:.2rem;}
.srv-file-disabled{cursor:not-allowed;background:var(--s-ivory)!important;}

.srv-success-ico{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--s-emerald),var(--s-emerald-soft));color:#fff;font-size:2.4rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;box-shadow:0 14px 32px rgba(13,122,79,.3);}
.srv-success-card{background:var(--s-ivory);border:1px dashed var(--s-emerald);border-radius:14px;padding:1rem 1.2rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;text-align:right;margin-top:1rem;}
.srv-success-card>div{padding:.4rem 0;}
.srv-success-card small{display:block;font-size:.72rem;color:var(--s-muted);}
.srv-success-card strong{display:block;font-size:.9rem;color:var(--s-navy);}

/* تتبع */
.trk-search-card{background:#fff;border:1px solid var(--s-border);border-radius:20px;padding:1.6rem;box-shadow:0 14px 36px rgba(11,37,69,.06);}
.trk-search-card .head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;}
.trk-search-card .head i{width:52px;height:52px;border-radius:14px;background:var(--s-mist);color:var(--s-emerald);display:flex;align-items:center;justify-content:center;font-size:1.3rem;}
.trk-search-card .head h3{font-weight:800;color:var(--s-navy);font-size:1.1rem;}
.trk-search-card .head p{font-size:.82rem;color:var(--s-muted);margin-top:.15rem;}

.trk-summary{background:#fff;border:1px solid var(--s-border);border-radius:20px;padding:1.6rem;margin-bottom:1.6rem;}
.trk-sum-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;align-items:start;}
.trk-sum-head .badge{display:inline-block;background:var(--s-mist);color:var(--s-emerald-deep);padding:.3rem .8rem;border-radius:999px;font-size:.72rem;font-weight:700;}
.trk-sum-head h3{font-size:1.3rem;font-weight:800;color:var(--s-navy);}
.trk-status{display:flex;align-items:center;gap:.7rem;background:linear-gradient(135deg,#0d7a4f,#075c3a);color:#fff;padding:.7rem 1.2rem;border-radius:14px;}
.trk-status small{font-size:.7rem;opacity:.85;display:block;}
.trk-status strong{font-size:.95rem;}
.trk-status .dot{width:10px;height:10px;border-radius:50%;background:#fff;animation:trkPulse 1.4s infinite;}
@keyframes trkPulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.trk-info{background:var(--s-ivory);border:1px solid var(--s-border);border-radius:10px;padding:.7rem .85rem;}
.trk-info small{display:block;font-size:.7rem;color:var(--s-muted);}
.trk-info strong{font-size:.88rem;color:var(--s-navy);}

.trk-timeline{background:#fff;border:1px solid var(--s-border);border-radius:20px;padding:1.6rem;margin-bottom:1.6rem;}
.trk-timeline ol{list-style:none;padding:0;margin:0;position:relative;}
.trk-timeline ol::before{content:"";position:absolute;right:18px;top:0;bottom:0;width:2px;background:var(--s-border);}
.trk-timeline li{display:flex;gap:1rem;padding:.7rem 0;position:relative;align-items:center;}
.trk-timeline li .ic{width:38px;height:38px;border-radius:50%;background:var(--s-mist);color:var(--s-muted);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex-shrink:0;z-index:1;border:3px solid #fff;}
.trk-timeline li.done .ic{background:var(--s-emerald);color:#fff;}
.trk-timeline li.current .ic{background:var(--s-gold);color:#fff;box-shadow:0 0 0 4px rgba(182,135,58,.2);}
.trk-timeline li strong{display:block;color:var(--s-navy);font-size:.92rem;}
.trk-timeline li small{font-size:.72rem;color:var(--s-muted);}
.trk-timeline li.done strong{color:var(--s-emerald-deep);}

.trk-section{background:#fff;border:1px solid var(--s-border);border-radius:20px;padding:1.6rem;}
.trk-section h3{font-weight:800;color:var(--s-navy);font-size:1.05rem;}
.trk-mini{background:var(--s-ivory);border-radius:10px;padding:.6rem .8rem;}
.trk-mini small{display:block;font-size:.7rem;color:var(--s-muted);}
.trk-mini strong{font-size:.85rem;color:var(--s-navy);}
.trk-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;background:var(--s-mist);color:var(--s-emerald-deep);border-radius:999px;font-weight:700;}
.trk-chip.missing{background:#fde6c8;color:#a45e10;}

.trk-alert{background:linear-gradient(160deg,#fff7e8,#fff);border:1px solid #f0d49a;border-radius:20px;padding:1.4rem;}
.trk-alert h3{font-weight:800;color:#7a5210;font-size:1rem;}
.trk-alert i{color:#a45e10;}

.trk-help{background:linear-gradient(135deg,var(--s-navy),var(--s-emerald-deep));color:#fff;border-radius:24px;padding:2.2rem;text-align:center;}
.trk-help h3{font-size:1.5rem;font-weight:800;margin-bottom:.5rem;}
.trk-help p{color:rgba(255,255,255,.85);}

/* تواصل */
.ct-card{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.4rem;text-align:center;transition:.3s;}
.ct-card .ic{width:56px;height:56px;border-radius:16px;background:var(--s-mist);color:var(--s-emerald);display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:.8rem;}
.ct-card h4{font-weight:800;color:var(--s-navy);margin-bottom:.3rem;}
.ct-card p{font-size:.78rem;color:var(--s-muted);}
.ct-card strong{display:block;color:var(--s-navy);font-weight:800;margin-top:.3rem;font-size:.95rem;}
.ct-card:hover{transform:translateY(-4px);border-color:var(--s-emerald);box-shadow:0 18px 40px rgba(13,122,79,.12);}
.ct-card-link{display:inline-block;margin-top:.7rem;font-size:.8rem;font-weight:700;color:var(--s-emerald-deep);}
.ct-card-link:hover{color:var(--s-navy);}

/* النموذج الموحد */
.ct-form-wrap{background:#fff;border:1px solid var(--s-border);border-radius:22px;padding:1.6rem;display:flex;flex-direction:column;gap:1.4rem;box-shadow:0 10px 30px rgba(11,37,69,.05);}
.ct-group{display:flex;flex-direction:column;gap:.8rem;}
.ct-group-title{font-weight:800;color:var(--s-navy);font-size:1rem;padding-bottom:.5rem;border-bottom:1px dashed var(--s-border);}
.ct-confirm{gap:.5rem;}

.ct-map-mock{background:linear-gradient(135deg,#dde6f0,#eef2f6);border:1px solid var(--s-border);border-radius:20px;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1.5rem;text-align:center;}
.ct-map-mock i{font-size:3rem;color:var(--s-navy);opacity:.7;}
.ct-map-mock strong{display:block;color:var(--s-navy);font-weight:800;}
.ct-map-mock span{display:block;font-size:.82rem;color:var(--s-muted);margin-top:.2rem;}

.ct-branch{background:#fff;border:1px solid var(--s-border);border-radius:14px;padding:.9rem 1rem;display:flex;align-items:center;gap:.8rem;width:100%;text-align:right;font-family:inherit;cursor:pointer;transition:.2s;}
.ct-branch:hover{border-color:var(--s-emerald-soft);transform:translateX(-3px);}
.ct-branch.active{border-color:var(--s-emerald);box-shadow:0 6px 16px rgba(13,122,79,.12);}
.ct-branch i{width:42px;height:42px;border-radius:12px;background:var(--s-mist);color:var(--s-emerald);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ct-branch strong{display:block;color:var(--s-navy);font-weight:800;font-size:.92rem;}
.ct-branch small{font-size:.78rem;color:var(--s-muted);}
.ct-branch.ct-hours{background:linear-gradient(135deg,var(--s-emerald),var(--s-emerald-deep));color:#fff;border-color:transparent;cursor:default;}
.ct-branch.ct-hours:hover{transform:none;}
.ct-branch.ct-hours i{background:rgba(255,255,255,.18);color:#fff;}
.ct-branch.ct-hours strong{color:#fff;}
.ct-branch.ct-hours small{color:rgba(255,255,255,.85);}

.ct-quick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem .6rem;background:#fff;border:1px solid var(--s-border);border-radius:14px;color:var(--s-navy);font-weight:700;font-size:.82rem;transition:.2s;text-align:center;}
.ct-quick i{font-size:1.3rem;color:var(--s-emerald);}
.ct-quick:hover{border-color:var(--s-emerald);transform:translateY(-3px);background:var(--s-ivory);}

.ct-success-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.ct-success-grid > div{background:var(--s-ivory);border:1px solid var(--s-border);border-radius:12px;padding:.7rem .9rem;}
.ct-success-grid span{display:block;font-size:.72rem;color:var(--s-muted);margin-bottom:.2rem;}
.ct-success-grid strong{display:block;color:var(--s-navy);font-weight:800;font-size:.92rem;}

@media(max-width:640px){
  .srv-success-card{grid-template-columns:1fr;}
  .srv-card .acts{grid-template-columns:1fr;}
  .trk-sum-head{flex-direction:column;}
}

/* ===================== Beneficiaries Portal (bp-*) ===================== */
.bp-step{background:#fff;border:1px solid #e6ebf1;border-radius:18px;padding:26px 22px;text-align:center;position:relative;transition:all .25s}
.bp-step:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(11,37,69,.35)}
.bp-step .bp-step-n{position:absolute;top:-14px;right:50%;transform:translateX(50%);width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#0d7a4f,#2fa776);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 8px 18px -8px rgba(13,122,79,.6)}
.bp-step i{font-size:30px;color:#0d7a4f;margin:8px 0 12px}
.bp-step h3{font-weight:800;color:#0b2545;font-size:17px;margin-bottom:6px}
.bp-step p{color:#5b6b7d;font-size:13.5px;line-height:1.9}

.bp-notice{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,#fff8e7,#fff3d2);border:1px solid #f3d98a;border-radius:16px;padding:18px 20px}
.bp-notice.bp-notice-info{background:linear-gradient(135deg,#e8f4ff,#dbeefe);border-color:#a9cef0}
.bp-notice.bp-notice-warn{background:linear-gradient(135deg,#ffe9e3,#ffd8cc);border-color:#f0a892}
.bp-notice .ico{width:42px;height:42px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:#b6873a;flex:none;font-size:18px;box-shadow:0 4px 10px -4px rgba(0,0,0,.1)}
.bp-notice.bp-notice-info .ico{color:#1d3a6b}
.bp-notice.bp-notice-warn .ico{color:#b03a2e}
.bp-notice strong{display:block;color:#0b2545;font-weight:800;margin-bottom:3px}
.bp-notice p{color:#5b6b7d;font-size:14px;line-height:1.85;margin:0}

.bp-cat{background:#fff;border:1px solid #e6ebf1;border-radius:16px;padding:22px 20px;transition:all .25s}
.bp-cat:hover{border-color:#2fa776;transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(13,122,79,.4)}
.bp-cat i{font-size:28px;color:#0d7a4f;margin-bottom:10px}
.bp-cat h3{font-weight:800;color:#0b2545;font-size:16px;margin-bottom:5px}
.bp-cat p{color:#5b6b7d;font-size:13.5px;line-height:1.85}

.bp-help{background:linear-gradient(135deg,#0b2545,#1d3a6b);color:#fff;border-radius:22px;padding:32px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px;box-shadow:0 30px 60px -38px rgba(11,37,69,.55)}
@media(max-width:768px){.bp-help{grid-template-columns:1fr}}
.bp-help-ico{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#d9b066;font-size:22px;margin-bottom:14px}
.bp-help h3{font-weight:900;font-size:22px;margin-bottom:6px}
.bp-help p{color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.9}

/* Auth */
.bp-auth-wrap{background:radial-gradient(circle at top right,rgba(13,122,79,.07),transparent 60%),#faf7f0}
.bp-auth-card{background:#fff;border:1px solid #e6ebf1;border-radius:22px;padding:34px 28px;box-shadow:0 30px 70px -40px rgba(11,37,69,.25)}
.bp-auth-ico{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#0d7a4f,#2fa776);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;box-shadow:0 14px 28px -12px rgba(13,122,79,.55)}
.bp-info-line{background:#eef7f1;border:1px dashed #b8e0ca;color:#075c3a;border-radius:12px;padding:12px 14px;font-size:13.5px;text-align:center}
.bp-auth-links{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;font-size:13px}
@media(max-width:600px){.bp-auth-links{grid-template-columns:1fr}}
.bp-auth-links a{color:#5b6b7d;padding:10px;border-radius:10px;background:#faf7f0;font-weight:600;transition:all .2s}
.bp-auth-links a:hover{background:#eef7f1;color:#075c3a}

/* Forms shared */
.bp-form{display:flex;flex-direction:column;gap:14px}
.bp-field{display:flex;flex-direction:column;gap:6px}
.bp-field label{font-weight:700;color:#0b2545;font-size:14px}
.bp-field input,.bp-field select,.bp-field textarea{background:#faf7f0;border:1px solid #e6ebf1;border-radius:12px;padding:13px 14px;font-family:inherit;font-size:15px;color:#0f1d2e;transition:all .2s}
.bp-field input:focus,.bp-field select:focus,.bp-field textarea:focus{outline:none;border-color:#2fa776;background:#fff;box-shadow:0 0 0 4px rgba(47,167,118,.12)}
.bp-phone{display:flex;align-items:stretch;border:1px solid #e6ebf1;border-radius:12px;overflow:hidden;background:#faf7f0}
.bp-phone span{background:#0b2545;color:#fff;padding:0 14px;display:flex;align-items:center;font-weight:700;font-size:14px;direction:ltr}
.bp-phone input{border:none;background:transparent;flex:1;padding:13px 14px;font-size:15px}
.bp-otp-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;direction:ltr;max-width:280px;margin:8px auto}
.bp-otp-inputs input{text-align:center;font-size:22px;font-weight:800;padding:14px 0;border:1px solid #e6ebf1;border-radius:12px;background:#fff;color:#0b2545}
.bp-otp-inputs input:focus{border-color:#2fa776;outline:none;box-shadow:0 0 0 4px rgba(47,167,118,.12)}

/* Stepper */
.bp-steps{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.bp-step-pill{flex:none;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e6ebf1;border-radius:999px;padding:10px 16px;font-size:13px;font-weight:700;color:#5b6b7d;white-space:nowrap}
.bp-step-pill span{width:24px;height:24px;border-radius:50%;background:#eef2f6;color:#5b6b7d;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.bp-step-pill.active{background:linear-gradient(135deg,#0d7a4f,#2fa776);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(13,122,79,.55)}
.bp-step-pill.active span{background:rgba(255,255,255,.22);color:#fff}
.bp-step-pill.complete{background:#eef7f1;color:#075c3a;border-color:#b8e0ca}
.bp-step-pill.complete span{background:#0d7a4f;color:#fff}

.bp-card{background:#fff;border:1px solid #e6ebf1;border-radius:18px;padding:24px}
.bp-card-h{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eef2f6;padding-bottom:14px;margin-bottom:16px}
.bp-card-h h3{font-weight:800;color:#0b2545;font-size:17px;display:flex;align-items:center;gap:8px}
.bp-card-h h3 i{color:#0d7a4f}

.bp-rs-title{font-weight:800;color:#0b2545;font-size:18px;margin-bottom:6px}
.bp-rs-sub{color:#5b6b7d;font-size:14px;margin-bottom:16px}

.bp-chips{display:flex;flex-wrap:wrap;gap:8px}
.bp-chips label{cursor:pointer}
.bp-chips label input{display:none}
.bp-chips label span{display:inline-block;padding:10px 16px;border:1px solid #e6ebf1;background:#faf7f0;border-radius:999px;font-weight:600;font-size:13.5px;color:#0b2545;transition:all .2s}
.bp-chips label input:checked + span{background:linear-gradient(135deg,#0d7a4f,#2fa776);color:#fff;border-color:transparent}

.bp-radios{display:flex;flex-wrap:wrap;gap:14px;font-size:14px;color:#0b2545}
.bp-radios label{display:inline-flex;align-items:center;gap:6px}

.bp-upload{display:flex;align-items:center;gap:12px;background:#faf7f0;border:2px dashed #d8dde4;border-radius:14px;padding:14px 16px;cursor:pointer;transition:all .2s}
.bp-upload:hover{border-color:#2fa776;background:#fff}
.bp-upload input{display:none}
.bp-upload i{font-size:22px;color:#0d7a4f;width:42px;height:42px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center}
.bp-upload strong{display:block;color:#0b2545;font-weight:800;font-size:14.5px}
.bp-upload small{color:#5b6b7d;font-size:12.5px}

.bp-check{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:#0b2545;cursor:pointer;line-height:1.7}
.bp-check input{margin-top:4px;width:18px;height:18px;accent-color:#0d7a4f}

.bp-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;border-top:1px solid #eef2f6;padding-top:18px;margin-top:22px}

/* Dashboard */
.bp-dash-head{background:#fff;border:1px solid #e6ebf1;border-radius:20px;padding:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bp-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#0b2545,#1d3a6b);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;flex:none}
.bp-id{background:#eef2f6;color:#0b2545;padding:5px 11px;border-radius:999px;font-weight:700;font-size:12.5px}
.bp-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-weight:700;font-size:12.5px}
.bp-badge-ok{background:#eef7f1;color:#075c3a}
.bp-badge-warn{background:#fff4d6;color:#8a6212}
.bp-badge-need{background:#ffe9e3;color:#a33820}
.bp-badge-mute{background:#eef2f6;color:#5b6b7d}

.bp-complete{background:#fff;border:1px solid #e6ebf1;border-radius:16px;padding:18px 20px}
.bp-progress{height:10px;background:#eef2f6;border-radius:999px;overflow:hidden}
.bp-progress span{display:block;height:100%;background:linear-gradient(90deg,#0d7a4f,#2fa776);border-radius:999px}

.bp-tile{background:#fff;border:1px solid #e6ebf1;border-radius:16px;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:all .25s}
.bp-tile:hover{transform:translateY(-3px);border-color:#2fa776;box-shadow:0 18px 40px -28px rgba(13,122,79,.4)}
.bp-tile i{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#0d7a4f,#2fa776);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.bp-tile h3{font-weight:800;color:#0b2545;font-size:16px;margin-top:6px}
.bp-tile p{color:#5b6b7d;font-size:13.5px;line-height:1.8}

.bp-alerts{display:flex;flex-direction:column;gap:10px}
.bp-al{display:flex;gap:12px;padding:13px 14px;border-radius:12px;align-items:flex-start;font-size:14px;line-height:1.8}
.bp-al i{width:34px;height:34px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.bp-al strong{display:block;color:#0b2545;font-weight:800}
.bp-al small{color:#5b6b7d;font-size:13px}
.bp-al-warn{background:#fff4d6}.bp-al-warn i{color:#8a6212}
.bp-al-info{background:#e8f4ff}.bp-al-info i{color:#1d3a6b}
.bp-al-ok{background:#eef7f1}.bp-al-ok i{color:#0d7a4f}

.bp-suggest{display:flex;flex-direction:column;gap:8px}
.bp-suggest li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #eef2f6;border-radius:12px}
.bp-suggest li i{width:38px;height:38px;border-radius:10px;background:#eef7f1;color:#0d7a4f;display:flex;align-items:center;justify-content:center}
.bp-suggest li strong{display:block;color:#0b2545;font-weight:800;font-size:14.5px}
.bp-suggest li small{color:#5b6b7d;font-size:12.5px}
.bp-suggest li .lnk{margin-right:auto;color:#0d7a4f;font-weight:800;font-size:13px}

.bp-orders{display:flex;flex-direction:column;gap:10px}
.bp-order{display:grid;grid-template-columns:1.3fr 1.4fr 1fr 1fr auto;gap:12px;align-items:center;padding:14px 16px;border:1px solid #eef2f6;border-radius:14px;background:#faf7f0}
@media(max-width:768px){.bp-order{grid-template-columns:1fr 1fr;gap:8px}}
.bp-order small{display:block;color:#5b6b7d;font-size:11.5px}
.bp-order strong{color:#0b2545;font-weight:800;font-size:14px}
.bp-st{display:inline-block;padding:5px 11px;border-radius:999px;font-weight:700;font-size:12.5px}
.bp-st-ok{background:#eef7f1;color:#075c3a}
.bp-st-warn{background:#fff4d6;color:#8a6212}
.bp-st-need{background:#ffe9e3;color:#a33820}

/* Profile */
.bp-status-card{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;background:linear-gradient(135deg,#fff,#faf7f0)}
.bp-edit{background:#eef7f1;color:#075c3a;border:none;padding:7px 12px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s}
.bp-edit:hover{background:#0d7a4f;color:#fff}
.bp-dl{display:grid;grid-template-columns:1fr;gap:10px}
.bp-dl > div{display:flex;justify-content:space-between;border-bottom:1px dashed #eef2f6;padding:9px 0;font-size:14.5px}
.bp-dl dt{color:#5b6b7d;font-weight:600}
.bp-dl dd{color:#0b2545;font-weight:800;text-align:end}
.bp-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.bp-doc{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #eef2f6;border-radius:12px;background:#faf7f0}
.bp-doc i{width:38px;height:38px;border-radius:10px;background:#fff;color:#0d7a4f;display:flex;align-items:center;justify-content:center;flex:none}
.bp-doc strong{display:block;color:#0b2545;font-weight:800;font-size:14px}
.bp-doc small{color:#5b6b7d;font-size:12px}
.bp-doc .bp-badge{margin-right:auto}

/* Products */
.bp-filters{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:14px}
.bp-filters .bp-chips{flex-wrap:wrap}
.bp-filters .bp-chips button{padding:9px 16px;border:1px solid #e6ebf1;background:#faf7f0;border-radius:999px;font-weight:700;font-size:13.5px;color:#0b2545;cursor:pointer;transition:all .2s}
.bp-filters .bp-chips button:hover{border-color:#2fa776}
.bp-filters .bp-chips button.active{background:linear-gradient(135deg,#0d7a4f,#2fa776);color:#fff;border-color:transparent}

.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.bp-prod{background:#fff;border:1px solid #e6ebf1;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:all .25s}
.bp-prod:hover{transform:translateY(-4px);box-shadow:0 24px 50px -32px rgba(11,37,69,.3);border-color:#2fa776}
.bp-prod-img{background:linear-gradient(135deg,#eef7f1,#f3ead8);height:140px;display:flex;align-items:center;justify-content:center;font-size:54px;color:#0d7a4f}
.bp-prod-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.bp-prod-tags{display:flex;flex-wrap:wrap;gap:6px}
.bp-tag{padding:4px 10px;border-radius:999px;font-weight:700;font-size:11.5px}
.bp-tag-full{background:#eef7f1;color:#075c3a}
.bp-tag-partial{background:#fff4d6;color:#8a6212}
.bp-tag-urgent{background:#ffe9e3;color:#a33820}
.bp-tag-elig{background:#e8f4ff;color:#1d3a6b}
.bp-tag-need{background:#fff4d6;color:#8a6212}
.bp-prod h3{font-weight:800;color:#0b2545;font-size:17px}
.bp-prod p{color:#5b6b7d;font-size:13.5px;line-height:1.85;flex:1}
.bp-prod-meta{display:flex;gap:14px;font-size:12.5px;color:#5b6b7d;flex-wrap:wrap}
.bp-prod-meta i{color:#0d7a4f;margin-left:4px}
.bp-prod-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.bp-prod-act .s-btn{flex:1;justify-content:center;padding:11px 12px;font-size:13.5px}
.bp-price-line{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:#5b6b7d}
.bp-price-line span{padding:4px 10px;background:#faf7f0;border-radius:8px;font-weight:700;color:#0b2545}
.bp-price-line .g{background:#eef7f1;color:#075c3a}
.bp-price-line .b{background:#fff4d6;color:#8a6212}

/* Product details */
.bp-pd-img{height:220px;border-radius:14px;background:linear-gradient(135deg,#eef7f1,#f3ead8);display:flex;align-items:center;justify-content:center;font-size:88px;color:#0d7a4f;margin-bottom:14px}
.bp-pd-tags{display:flex;flex-wrap:wrap;gap:6px}
.bp-pd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:18px;padding:14px;background:#faf7f0;border:1px solid #eef2f6;border-radius:14px}
.bp-pd-grid > div{display:flex;flex-direction:column;gap:2px}
.bp-pd-grid strong{color:#0b2545;font-weight:800;font-size:13px}
.bp-pd-grid span{color:#5b6b7d;font-size:13.5px}
.bp-pd-h{font-weight:800;color:#0b2545;font-size:16px;margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.bp-pd-h i{color:#0d7a4f}
.bp-pd-ul{padding-right:18px;display:flex;flex-direction:column;gap:6px;color:#5b6b7d;font-size:14px;line-height:1.85}
.bp-pd-ul li{list-style:disc}

.bp-pd-side{position:sticky;top:90px}
.bp-pay-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed #eef2f6;font-size:14px;color:#5b6b7d}
.bp-pay-row strong{color:#0b2545;font-weight:800}
.bp-pay-row.g strong{color:#0d7a4f}
.bp-pay-row.b strong{color:#b6873a}
.bp-pay-total{display:flex;justify-content:space-between;align-items:center;padding:13px;background:linear-gradient(135deg,#0b2545,#1d3a6b);color:#fff;border-radius:12px;margin-top:8px;font-weight:800}
.bp-pay-total strong{color:#d9b066;font-size:18px}

.bp-flow{background:#faf7f0;border:1px solid #eef2f6;border-radius:14px;padding:14px}
.bp-flow-h{font-weight:800;color:#0b2545;margin-bottom:10px;font-size:14px}
.bp-flow ol{counter-reset:s;display:flex;flex-direction:column;gap:8px}
.bp-flow ol li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#0b2545;font-weight:600}
.bp-flow ol li i{width:30px;height:30px;border-radius:8px;background:#fff;color:#0d7a4f;display:flex;align-items:center;justify-content:center;font-size:12px}

/* Payment */
.bp-pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:600px){.bp-pay-methods{grid-template-columns:1fr}}
.bp-pay-methods label{display:flex;align-items:center;gap:8px;padding:13px;border:1.5px solid #e6ebf1;border-radius:12px;background:#faf7f0;cursor:pointer;font-weight:700;color:#0b2545;font-size:14px;transition:all .2s}
.bp-pay-methods label input{accent-color:#0d7a4f}
.bp-pay-methods label.active,.bp-pay-methods label:hover{border-color:#0d7a4f;background:#eef7f1}

/* Timeline */
.bp-timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-right:22px;border-right:2px dashed #e6ebf1}
.bp-timeline li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;position:relative}
.bp-timeline li > i{position:absolute;right:-34px;width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #e6ebf1;color:#5b6b7d;display:flex;align-items:center;justify-content:center;font-size:12px}
.bp-timeline li strong{display:block;color:#0b2545;font-weight:800;font-size:14.5px}
.bp-timeline li small{color:#5b6b7d;font-size:12.5px}
.bp-timeline li.done > i{background:#0d7a4f;border-color:#0d7a4f;color:#fff}
.bp-timeline li.current > i{background:#fff4d6;border-color:#8a6212;color:#8a6212;animation:bpPulse 1.6s infinite}
@keyframes bpPulse{0%,100%{box-shadow:0 0 0 0 rgba(138,98,18,.4)}50%{box-shadow:0 0 0 8px rgba(138,98,18,0)}}

/* =========================================================
   ============ توحيد الهيدر والفوتر (sx-*) ===============
   ========================================================= */
.sx-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--s-border);box-shadow:0 1px 0 rgba(11,37,69,.02);transition:box-shadow .25s, background .25s;}
.sx-header.scrolled{box-shadow:0 8px 24px -16px rgba(11,37,69,.18);}
.sx-topbar{background:#061633;color:#cfd6e2;font-size:.74rem;}
.sx-topbar .sx-tcont{max-width:1280px;margin:0 auto;padding:.55rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.sx-tlinks{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;}
.sx-tlinks a{color:#cfd6e2;display:inline-flex;align-items:center;gap:.35rem;transition:color .2s;}
.sx-tlinks a:hover{color:#d9b066;}
.sx-tlinks i{font-size:.72rem;opacity:.85;}
.sx-tright{display:flex;align-items:center;gap:1rem;}
.sx-lang{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.06);padding:.25rem .55rem;border-radius:999px;}
.sx-lang button{color:#cfd6e2;font-weight:600;font-size:.72rem;}
.sx-lang button.active{color:#fff;}
.sx-lang .sep{opacity:.4;}
.sx-lang-dd{position:relative;}
.sx-lang-trigger{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;padding:.3rem .7rem;border-radius:999px;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .2s;}
.sx-lang-trigger:hover{background:rgba(255,255,255,.14);}
.sx-lang-caret{font-size:.6rem;transition:transform .2s;opacity:.8;}
.sx-lang-dd.open .sx-lang-caret{transform:rotate(180deg);}
.sx-lang-menu{position:absolute;top:calc(100% + .4rem);left:0;min-width:140px;background:#fff;border-radius:.6rem;box-shadow:0 8px 24px rgba(0,0,0,.18);list-style:none;margin:0;padding:.3rem;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .18s;z-index:1000;}
.sx-lang-dd.open .sx-lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.sx-lang-menu li{margin:0;}
.sx-lang-menu button{display:block;width:100%;text-align:right;background:transparent;border:0;padding:.45rem .7rem;border-radius:.4rem;color:#263370;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s;}
.sx-lang-menu button:hover{background:#f1f4fb;}
.sx-lang-menu button.active{background:#263370;color:#fff;}
.sx-tcontact{display:flex;align-items:center;gap:1rem;}
.sx-tcontact a{display:inline-flex;align-items:center;gap:.35rem;}
@media(max-width:880px){
  .sx-tlinks .sx-thide{display:none;}
  .sx-tcontact .sx-thide{display:none;}
  .sx-topbar .sx-tcont{padding:.45rem .9rem;}
}

.sx-main{max-width:1280px;margin:0 auto;padding:.85rem 1.25rem;display:flex;align-items:center;gap:1rem;}
.sx-logo{display:flex;align-items:center;gap:.7rem;flex-shrink:0;}
.sx-logo .sx-mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#0b2545,#0d7a4f);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.3rem;box-shadow:0 8px 20px -10px rgba(13,122,79,.55);}
.sx-logo .sx-name{font-weight:900;color:var(--s-navy);font-size:1.05rem;line-height:1.15;}
.sx-logo .sx-tag{font-size:.68rem;color:var(--s-muted);font-weight:600;}
.sx-nav{display:none;align-items:center;gap:1.35rem;}
@media(min-width:1100px){.sx-nav{display:flex;}}
.sx-nav > a, .sx-nav > .sx-drop > button{font-size:.86rem;font-weight:700;color:var(--s-navy);position:relative;padding:.4rem 0;transition:color .2s;display:inline-flex;align-items:center;gap:.3rem;}
.sx-nav > a:hover, .sx-nav > .sx-drop > button:hover{color:var(--s-emerald-deep);}
.sx-nav > a.active, .sx-nav > .sx-drop > button.active{color:var(--s-emerald-deep);}
.sx-nav > a.active::after, .sx-nav > .sx-drop > button.active::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--s-emerald-deep);border-radius:2px;}
.sx-drop{position:relative;}
.sx-drop > button .fa-chevron-down{font-size:.6rem;opacity:.7;transition:transform .2s;}
.sx-drop.open > button .fa-chevron-down{transform:rotate(180deg);}
.sx-dmenu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:240px;background:#fff;border:1px solid var(--s-border);border-radius:14px;box-shadow:0 18px 40px -18px rgba(11,37,69,.25);padding:.55rem;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.18s;z-index:80;}
.sx-drop.open .sx-dmenu{opacity:1;pointer-events:auto;transform:translateY(0);}
.sx-dmenu a{display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;border-radius:9px;font-size:.82rem;color:var(--s-text);font-weight:600;transition:.15s;}
.sx-dmenu a:hover{background:var(--s-mist);color:var(--s-emerald-deep);}
.sx-dmenu a i{color:var(--s-emerald);font-size:.78rem;width:16px;text-align:center;}

.sx-actions{display:flex;align-items:center;gap:.5rem;margin-inline-start:.75rem;}
.sx-icon-btn{position:relative;width:42px;height:42px;border-radius:12px;background:var(--s-mist);color:var(--s-navy);display:inline-flex;align-items:center;justify-content:center;transition:.2s;}
.sx-icon-btn:hover{background:var(--s-emerald);color:#fff;}
.sx-icon-btn .sx-badge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#b6873a;color:#fff;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.sx-login-wrap{position:relative;}
.sx-login-btn{display:none;align-items:center;gap:.4rem;padding:.55rem .9rem;border-radius:11px;background:var(--s-navy);color:#fff;font-weight:700;font-size:.82rem;transition:.2s;}
.sx-login-btn:hover{background:var(--s-navy-deep);}
@media(min-width:768px){.sx-login-btn{display:inline-flex;}}
.sx-donate-btn{display:none;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:11px;background:linear-gradient(135deg,#0d7a4f,#075c3a);color:#fff;font-weight:800;font-size:.82rem;box-shadow:0 8px 18px -10px rgba(13,122,79,.6);transition:.2s;}
.sx-donate-btn:hover{transform:translateY(-1px);}
@media(min-width:640px){.sx-donate-btn{display:inline-flex;}}

.sx-login-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:260px;background:#fff;border:1px solid var(--s-border);border-radius:14px;box-shadow:0 18px 40px -18px rgba(11,37,69,.25);padding:.6rem;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.18s;z-index:80;}
.sx-login-wrap.open .sx-login-menu{opacity:1;pointer-events:auto;transform:translateY(0);}
.sx-login-menu .sx-lhead{padding:.45rem .65rem .65rem;font-size:.72rem;color:var(--s-muted);font-weight:700;border-bottom:1px solid var(--s-border);margin-bottom:.4rem;}
.sx-login-menu a{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:10px;font-size:.85rem;font-weight:700;color:var(--s-navy);transition:.15s;}
.sx-login-menu a i{width:30px;height:30px;border-radius:9px;background:var(--s-mist);color:var(--s-emerald-deep);display:flex;align-items:center;justify-content:center;font-size:.78rem;}
.sx-login-menu a:hover{background:var(--s-mist);}
.sx-login-menu .sx-lreg{margin-top:.3rem;border-top:1px dashed var(--s-border);padding-top:.45rem;}

.sx-burger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--s-mist);color:var(--s-navy);}
@media(min-width:1100px){.sx-burger{display:none;}}

/* قائمة الجوال */
.sx-mobile-overlay{position:fixed;inset:0;background:rgba(6,22,51,.6);backdrop-filter:blur(3px);z-index:90;opacity:0;pointer-events:none;transition:.25s;}
.sx-mobile-overlay.open{opacity:1;pointer-events:auto;}
.sx-mobile{position:fixed;top:0;inset-inline-end:0;height:100%;width:88%;max-width:360px;background:#fff;z-index:95;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;}
html[dir="rtl"] .sx-mobile{transform:translateX(-100%);}
.sx-mobile.open{transform:translateX(0)!important;}
.sx-mhead{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--s-border);background:var(--s-ivory);}
.sx-mbody{flex:1;overflow-y:auto;padding:1rem;}
.sx-mbody a, .sx-mbody button{display:flex;align-items:center;gap:.7rem;padding:.85rem .8rem;border-radius:11px;font-weight:700;color:var(--s-navy);font-size:.92rem;width:100%;text-align:start;transition:.15s;}
.sx-mbody a:hover, .sx-mbody button:hover{background:var(--s-mist);}
.sx-mbody a i, .sx-mbody button i{color:var(--s-emerald);width:22px;text-align:center;}
.sx-msec{font-size:.7rem;color:var(--s-muted);font-weight:800;padding:.9rem .8rem .35rem;letter-spacing:.04em;}
.sx-mcollapse{padding-inline-start:1rem;display:none;}
.sx-mcollapse.open{display:block;}

/* سلال جانبية */
.sx-drawer-overlay{position:fixed;inset:0;background:rgba(6,22,51,.55);z-index:100;opacity:0;pointer-events:none;transition:.25s;}
.sx-drawer-overlay.open{opacity:1;pointer-events:auto;}
.sx-drawer{position:fixed;top:0;inset-inline-end:0;height:100%;width:92%;max-width:400px;background:#fff;z-index:105;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;box-shadow:-20px 0 50px -20px rgba(11,37,69,.3);}
html[dir="rtl"] .sx-drawer{transform:translateX(-100%);}
.sx-drawer.open{transform:translateX(0)!important;}
.sx-dhead{padding:1.1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#0b2545,#0d7a4f);color:#fff;}
.sx-dhead h3{font-weight:900;font-size:1.05rem;}
.sx-dhead .sx-dclose{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;}
.sx-dbody{flex:1;overflow-y:auto;padding:1rem 1.2rem;}
.sx-dempty{text-align:center;padding:2.5rem 1rem;color:var(--s-muted);}
.sx-dempty i{font-size:2.2rem;color:var(--s-mist);margin-bottom:.8rem;display:block;}
.sx-dfoot{padding:1rem 1.2rem;border-top:1px solid var(--s-border);background:var(--s-ivory);display:flex;flex-direction:column;gap:.55rem;}
.sx-ditem{display:flex;gap:.7rem;padding:.7rem 0;border-bottom:1px dashed var(--s-border);font-size:.85rem;}
.sx-ditem:last-child{border-bottom:0;}

/* الفوتر الموحد */
.sx-footer{background:#061633;color:#cfd6e2;margin-top:auto;}
.sx-fmain{max-width:1280px;margin:0 auto;padding:3.5rem 1.5rem 2rem;display:grid;grid-template-columns:1fr;gap:2.2rem;}
@media(min-width:768px){.sx-fmain{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1100px){.sx-fmain{grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;}}
.sx-fbrand .sx-fname{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;}
.sx-fbrand .sx-fname .sx-mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#0d7a4f,#075c3a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.3rem;}
.sx-fbrand .sx-fname .nm{font-weight:900;color:#fff;font-size:1.05rem;}
.sx-fbrand .sx-fname .tg{font-size:.7rem;color:#8aa0bd;}
.sx-fbrand p{font-size:.82rem;line-height:1.95;color:#a5b3c8;margin-bottom:1rem;}
.sx-fsoc{display:flex;gap:.5rem;}
.sx-fsoc a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.06);color:#cfd6e2;display:flex;align-items:center;justify-content:center;transition:.2s;}
.sx-fsoc a:hover{background:#d9b066;color:#061633;}
.sx-fcol h4{color:#fff;font-weight:900;font-size:.92rem;margin-bottom:1.1rem;position:relative;padding-bottom:.55rem;}
.sx-fcol h4::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:34px;height:2px;background:#d9b066;border-radius:2px;}
.sx-fcol ul{display:flex;flex-direction:column;gap:.55rem;}
.sx-fcol a{font-size:.82rem;color:#a5b3c8;transition:.15s;display:inline-flex;align-items:center;gap:.4rem;}
.sx-fcol a:hover{color:#d9b066;padding-inline-start:4px;}
.sx-fcol a i{font-size:.6rem;opacity:.6;}
.sx-fcontact li{font-size:.8rem;color:#a5b3c8;display:flex;gap:.55rem;margin-bottom:.6rem;line-height:1.7;}
.sx-fcontact li i{color:#d9b066;margin-top:.25rem;width:14px;text-align:center;flex-shrink:0;}
.sx-fnews input{width:100%;padding:.7rem .85rem;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:.82rem;margin-top:.5rem;}
.sx-fnews input::placeholder{color:#7f93af;}
.sx-fnews button{margin-top:.55rem;width:100%;padding:.7rem;border-radius:10px;background:linear-gradient(135deg,#0d7a4f,#2fa776);color:#fff;font-weight:800;font-size:.82rem;}

.sx-license{max-width:1280px;margin:0 auto;padding:0 1.5rem 1.5rem;}
.sx-license-card{background:linear-gradient(135deg,rgba(13,122,79,.14),rgba(217,176,102,.08));border:1px solid rgba(217,176,102,.25);border-radius:16px;padding:1.1rem 1.3rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;}
.sx-license-card .sx-lic-left{display:flex;align-items:center;gap:.9rem;}
.sx-license-card .sx-lic-ic{width:50px;height:50px;border-radius:13px;background:#d9b066;color:#061633;display:flex;align-items:center;justify-content:center;font-size:1.3rem;}
.sx-license-card .sx-lic-meta{font-size:.74rem;color:#a5b3c8;display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.3rem;}
.sx-license-card .sx-lic-meta b{color:#fff;font-weight:800;}
.sx-license-card .sx-lic-title{color:#fff;font-weight:800;font-size:.92rem;}
.sx-license-card .sx-lic-btn{padding:.65rem 1.2rem;border-radius:11px;background:#fff;color:var(--s-navy);font-weight:800;font-size:.8rem;display:inline-flex;align-items:center;gap:.4rem;transition:.2s;}
.sx-license-card .sx-lic-btn:hover{background:#d9b066;color:#061633;}

.sx-fbottom{border-top:1px solid rgba(255,255,255,.08);}
.sx-fbottom .sx-fbcont{max-width:1280px;margin:0 auto;padding:1.1rem 1.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;font-size:.76rem;color:#8aa0bd;}
.sx-fbottom a.sx-by{color:#d9b066;font-weight:800;}
.sx-fbottom a.sx-by:hover{text-decoration:underline;}

/* نافذة شهادة الترخيص */
.sx-mod-overlay{position:fixed;inset:0;background:rgba(6,22,51,.7);backdrop-filter:blur(4px);z-index:120;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:.25s;}
.sx-mod-overlay.open{opacity:1;pointer-events:auto;}
.sx-mod{background:#fff;border-radius:20px;max-width:760px;width:100%;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;transform:translateY(20px);transition:.25s;}
.sx-mod-overlay.open .sx-mod{transform:translateY(0);}
.sx-mod-head{padding:1.1rem 1.3rem;background:linear-gradient(135deg,#0b2545,#0d7a4f);color:#fff;display:flex;align-items:center;justify-content:space-between;}
.sx-mod-head h3{font-weight:900;font-size:1.05rem;}
.sx-mod-body{padding:1.4rem;overflow-y:auto;}
.sx-cert{aspect-ratio:1/1.35;max-width:420px;margin:0 auto;background:linear-gradient(160deg,#faf7f0 0%,#f3ead8 100%);border:2px solid #d9b066;border-radius:14px;padding:1.4rem;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;}
.sx-cert::before,.sx-cert::after{content:"";position:absolute;width:60px;height:60px;border:3px solid #b6873a;}
.sx-cert::before{top:10px;inset-inline-start:10px;border-inline-end:0;border-bottom:0;}
.sx-cert::after{bottom:10px;inset-inline-end:10px;border-inline-start:0;border-top:0;}
.sx-cert .sx-cseal{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#0b2545,#0d7a4f);color:#d9b066;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:1rem;}
.sx-cert h4{color:#0b2545;font-weight:900;font-size:1.1rem;margin-bottom:.4rem;}
.sx-cert .sx-csub{color:#5b6b7d;font-size:.78rem;margin-bottom:1rem;}
.sx-cert .sx-cnum{background:#fff;border:1px dashed #b6873a;border-radius:10px;padding:.7rem 1rem;margin:.8rem 0;}
.sx-cert .sx-cnum b{color:#0b2545;font-size:1.05rem;letter-spacing:.04em;}
.sx-cert .sx-cstatus{background:#0d7a4f;color:#fff;padding:.3rem .9rem;border-radius:999px;font-size:.72rem;font-weight:800;margin-top:.5rem;}
.sx-mod-actions{padding:1rem 1.3rem;border-top:1px solid var(--s-border);background:var(--s-ivory);display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;}

/* Toast */
.sx-toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(-50%) translateY(20px);background:#0b2545;color:#fff;padding:.85rem 1.3rem;border-radius:12px;font-size:.85rem;font-weight:700;box-shadow:0 14px 30px -10px rgba(11,37,69,.5);z-index:200;opacity:0;pointer-events:none;transition:.3s;}
.sx-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* إخفاء الهيدر/الفوتر القديم بعد الاستبدال (احتياط) */
.s-header.sx-replaced, .s-footer.sx-replaced{display:none!important;}

/* ============================================
   تحسينات: أثرنا بالأرقام / الأخبار / الشركاء
   ============================================ */

/* --- Stat cards with icons --- */
.s-stat-card { display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1.5rem 1rem; }
.s-stat-ico {
  width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(217,176,102,.22), rgba(47,167,118,.18));
  border:1px solid rgba(255,255,255,.14);
  color:#f0d9a8; font-size:1.05rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  margin-bottom:.35rem;
}
.s-stat-num { direction:ltr; unicode-bidi:isolate; font-variant-numeric: tabular-nums; }
.s-stat-label { color:rgba(255,255,255,.78); font-size:.82rem; font-weight:600; }

/* --- News redesign --- */
.s-news-grid { align-items: stretch; }
.s-news-side { display:flex; flex-direction:column; }

/* Hero news card with image overlay */
.s-news-hero-v2 {
  position:relative; border-radius:24px; overflow:hidden;
  min-height: 460px; display:block;
  border:1px solid var(--s-border);
  background:#0b2545;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.s-news-hero-v2:hover { transform: translateY(-4px); box-shadow: var(--s-shadow-lg); }
.s-news-hero-img {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.s-news-hero-v2:hover .s-news-hero-img { transform: scale(1.06); }
.s-news-hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,37,69,0) 0%, rgba(11,37,69,.25) 45%, rgba(11,37,69,.92) 100%);
}
.s-news-hero-body {
  position:absolute; inset:auto 0 0 0; padding: clamp(1.4rem, 2.5vw, 2.2rem);
  color:#fff;
}
.s-news-hero-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.s-news-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--s-grad-gold); color:#3a2810;
  padding:.35rem .75rem; border-radius:999px;
  font-size:.72rem; font-weight:800;
}
.s-news-chip.light { background: rgba(255,255,255,.95); color: var(--s-navy); }
.s-news-hero-title {
  font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight:800;
  line-height:1.5; margin-bottom:.75rem; color:#fff;
}
.s-news-hero-desc {
  font-size:.92rem; line-height:1.8; color:rgba(255,255,255,.85);
  margin-bottom:1.1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.s-news-hero-meta {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1rem; border-top:1px solid rgba(255,255,255,.18);
  font-size:.82rem; color:rgba(255,255,255,.85);
}
.s-news-hero-cta { color:#f0d9a8; font-weight:800; display:inline-flex; align-items:center; gap:.4rem; }

/* Mini news cards */
.s-news-mini-v2 {
  flex:1; display:grid; grid-template-columns: 130px 1fr; gap:0;
  background:#fff; border:1px solid var(--s-border); border-radius:18px;
  overflow:hidden; transition: all .3s;
  min-height: 0;
}
.s-news-mini-v2:hover {
  transform: translateX(-4px); box-shadow: var(--s-shadow-md);
  border-color: var(--s-emerald-soft);
}
.s-news-mini-img {
  background-size:cover; background-position:center; position:relative;
}
.s-news-mini-img::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(11,37,69,.1), transparent 60%);
}
.s-news-mini-body {
  padding: 1rem 1.1rem; display:flex; flex-direction:column; gap:.45rem; justify-content:center;
}
.s-news-cat {
  align-self:flex-start;
  display:inline-block; font-size:.68rem; font-weight:800;
  color: var(--s-emerald-deep, #0d7a4f);
  background: rgba(47,167,118,.12); padding:.22rem .6rem; border-radius:999px;
}
.s-news-mini-v2 h4 {
  font-size:.92rem; font-weight:800; color: var(--s-navy); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.s-news-mini-meta { font-size:.72rem; color: var(--s-muted); display:flex; align-items:center; gap:.4rem; }

@media (max-width: 640px) {
  .s-news-hero-v2 { min-height: 380px; }
  .s-news-mini-v2 { grid-template-columns: 100px 1fr; }
}

/* --- Partners: tighter, denser marquee --- */
.s-partners-track { gap:1rem; animation-duration: 34s; }
.s-partner-item { width:178px; height:96px; padding:.65rem; border-radius:16px; background:#fff; }

/* --- Big CTA button variant --- */
.s-btn-lg { padding: 1rem 2rem; font-size: 1rem; border-radius: 14px; }

/* =============================================
   شريط سياسات الفوتر
   ============================================= */
.sx-fpolicy{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;font-size:.82rem;color:#a5b3c8;}
.sx-fpolicy a{color:#d8e0ec;font-weight:600;transition:color .2s;}
.sx-fpolicy a:hover{color:#fff;}
.sx-fpolicy span{opacity:.5;}

/* =============================================
   صفحة الوظائف وفرص التطوع
   ============================================= */
.cr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1.4rem;}
.cr-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:.9rem 1.1rem;color:#fff;backdrop-filter:blur(8px);}
.cr-stat strong{display:block;font-size:1.6rem;font-weight:900;color:#fff;line-height:1;}
.cr-stat span{font-size:.82rem;color:rgba(255,255,255,.85);margin-top:.3rem;display:block;}

.cr-toolbar{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--s-border);border-radius:16px;padding:1rem 1.2rem;margin-bottom:1.6rem;box-shadow:0 6px 20px rgba(11,37,69,.04);}
.cr-filters{display:flex;gap:.4rem;flex-wrap:wrap;}
.cr-filter{padding:.5rem .9rem;border-radius:999px;background:var(--s-mist);color:var(--s-navy);font-size:.82rem;font-weight:700;border:1px solid transparent;cursor:pointer;transition:.2s;}
.cr-filter:hover{background:var(--s-ivory);border-color:var(--s-border);}
.cr-filter.active{background:var(--s-emerald);color:#fff;}
.cr-search{position:relative;min-width:240px;flex:1;max-width:320px;}
.cr-search input{width:100%;padding:.65rem 2.2rem .65rem .85rem;border:1.5px solid var(--s-border);border-radius:10px;background:var(--s-ivory);font:inherit;}
.cr-search input:focus{outline:none;border-color:var(--s-emerald);background:#fff;}
.cr-search i{position:absolute;top:50%;right:.8rem;transform:translateY(-50%);color:var(--s-muted);}

.cr-section-title{display:flex;align-items:center;gap:.7rem;font-size:1.2rem;font-weight:800;color:var(--s-navy);margin:2rem 0 1rem;padding-bottom:.7rem;border-bottom:2px solid var(--s-border);}
.cr-section-title i{color:var(--s-emerald);}

.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;}
.cr-card{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.3rem;display:flex;flex-direction:column;gap:.8rem;transition:.25s;position:relative;overflow:hidden;}
.cr-card::before{content:"";position:absolute;top:0;right:0;width:4px;height:100%;background:var(--s-emerald);opacity:0;transition:.25s;}
.cr-card[data-type="vol"]::before{background:var(--s-gold);}
.cr-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,37,69,.1);border-color:transparent;}
.cr-card:hover::before{opacity:1;}
.cr-card.is-hidden{display:none;}
.cr-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;font-size:.72rem;font-weight:800;width:fit-content;}
.cr-badge.job{background:rgba(13,122,79,.12);color:var(--s-emerald-deep);}
.cr-badge.vol{background:rgba(182,135,58,.15);color:#8a6320;}
.cr-card h3{font-size:1.05rem;font-weight:800;color:var(--s-navy);line-height:1.4;}
.cr-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.78rem;color:var(--s-muted);}
.cr-meta span{display:inline-flex;align-items:center;gap:.3rem;}
.cr-meta i{color:var(--s-emerald);font-size:.78rem;}
.cr-card p{font-size:.85rem;color:var(--s-muted);line-height:1.7;flex:1;}
.cr-actions{display:flex;gap:.5rem;margin-top:.3rem;}
.cr-actions .s-btn{flex:1;justify-content:center;padding:.6rem .8rem;font-size:.82rem;border-radius:10px;}

.cr-empty{text-align:center;padding:3rem 1rem;color:var(--s-muted);background:var(--s-ivory);border:1px dashed var(--s-border);border-radius:16px;}
.cr-empty.is-hidden{display:none;}
.cr-empty i{font-size:2.2rem;color:var(--s-emerald-soft);margin-bottom:.6rem;display:block;}

/* لماذا تنضم إلينا */
.cr-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.4rem;}
.cr-why-card{background:#fff;border:1px solid var(--s-border);border-radius:16px;padding:1.4rem;text-align:center;transition:.25s;}
.cr-why-card:hover{transform:translateY(-4px);border-color:var(--s-emerald);box-shadow:0 14px 30px rgba(13,122,79,.1);}
.cr-why-card .ic{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--s-emerald),var(--s-emerald-deep));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:.7rem;}
.cr-why-card h4{font-weight:800;color:var(--s-navy);margin-bottom:.4rem;font-size:.98rem;}
.cr-why-card p{font-size:.82rem;color:var(--s-muted);line-height:1.7;}

/* نافذة التفاصيل */
.cr-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin-bottom:1.2rem;}
.cr-meta-item{background:var(--s-ivory);border:1px solid var(--s-border);border-radius:12px;padding:.7rem .9rem;}
.cr-meta-item span{display:block;font-size:.72rem;color:var(--s-muted);margin-bottom:.2rem;}
.cr-meta-item strong{display:block;color:var(--s-navy);font-weight:800;font-size:.88rem;}
.cr-sec{margin-bottom:1rem;}
.cr-sec h5{font-weight:800;color:var(--s-navy);margin-bottom:.5rem;font-size:.95rem;display:flex;align-items:center;gap:.4rem;}
.cr-sec h5::before{content:"";width:4px;height:14px;background:var(--s-emerald);border-radius:2px;}
.cr-sec p,.cr-sec li{font-size:.85rem;color:var(--s-text);line-height:1.85;}
.cr-sec ul{padding-right:1.2rem;list-style:disc;}

/* CTA دعوة ختامية */
.cr-cta{background:linear-gradient(135deg,var(--s-navy) 0%,var(--s-navy-deep) 100%);color:#fff;border-radius:24px;padding:2.4rem 1.6rem;text-align:center;margin-top:2rem;}
.cr-cta h2{font-size:1.7rem;font-weight:900;color:#fff;margin-bottom:.6rem;}
.cr-cta p{color:rgba(255,255,255,.85);margin-bottom:1.2rem;}
.cr-cta-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;}

/* =============================================
   صفحات قانونية: الشروط والخصوصية
   ============================================= */
.lg-layout{display:grid;grid-template-columns:260px 1fr;gap:2.2rem;align-items:start;}
.lg-toc{position:sticky;top:100px;background:#fff;border:1px solid var(--s-border);border-radius:16px;padding:1.1rem;box-shadow:0 6px 20px rgba(11,37,69,.04);max-height:calc(100vh - 130px);overflow-y:auto;}
.lg-toc h4{font-size:.78rem;font-weight:800;color:var(--s-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem;}
.lg-toc ol{list-style:none;padding:0;margin:0;counter-reset:lg;display:flex;flex-direction:column;gap:.15rem;}
.lg-toc ol li{counter-increment:lg;}
.lg-toc ol li a{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem .65rem;border-radius:8px;font-size:.83rem;color:var(--s-muted);border-right:2px solid transparent;transition:.2s;line-height:1.5;}
.lg-toc ol li a::before{content:counter(lg);font-size:.7rem;font-weight:800;color:var(--s-emerald-deep);background:rgba(13,122,79,.1);width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.lg-toc ol li a:hover{background:var(--s-ivory);color:var(--s-navy);}
.lg-toc ol li a.active{background:rgba(13,122,79,.08);color:var(--s-navy);font-weight:700;border-right-color:var(--s-emerald);}

.lg-mselect{display:none;width:100%;padding:.7rem .85rem;border:1.5px solid var(--s-border);border-radius:10px;background:#fff;font:inherit;color:var(--s-navy);margin-bottom:1rem;}

.lg-content{min-width:0;background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.8rem 2rem;box-shadow:0 6px 20px rgba(11,37,69,.04);}
.lg-meta{display:flex;gap:.7rem;align-items:center;font-size:.82rem;color:var(--s-muted);background:var(--s-ivory);border:1px solid var(--s-border);border-radius:10px;padding:.6rem .9rem;margin-bottom:1.4rem;width:fit-content;}
.lg-meta .dot{width:8px;height:8px;border-radius:50%;background:var(--s-emerald);box-shadow:0 0 0 4px rgba(13,122,79,.18);}
.lg-article{padding:1.2rem 0;border-bottom:1px solid var(--s-border);scroll-margin-top:100px;}
.lg-article:last-child{border-bottom:0;}
.lg-article:first-of-type{padding-top:0;}
.lg-article h2{font-size:1.2rem;font-weight:800;color:var(--s-navy);margin-bottom:.7rem;display:flex;align-items:center;gap:.6rem;}
.lg-article h2 .num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--s-emerald),var(--s-emerald-deep));color:#fff;font-size:.82rem;font-weight:800;flex-shrink:0;}
.lg-article p{font-size:.92rem;line-height:1.95;color:var(--s-text);margin-bottom:.7rem;}
.lg-article ul{list-style:disc;padding-right:1.4rem;margin:.4rem 0 .8rem;display:flex;flex-direction:column;gap:.35rem;}
.lg-article li{font-size:.9rem;line-height:1.85;color:var(--s-text);}
.lg-article li::marker{color:var(--s-emerald);}
.lg-article strong{color:var(--s-navy);font-weight:700;}

.lg-callout{background:rgba(13,122,79,.06);border:1px solid rgba(13,122,79,.18);border-inline-start:3px solid var(--s-emerald);border-radius:10px;padding:.85rem 1rem;margin:.7rem 0;font-size:.88rem;color:var(--s-navy);line-height:1.8;}

.lg-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin:1rem 0 1.4rem;}
.lg-tip{background:linear-gradient(135deg,rgba(13,122,79,.06),rgba(13,122,79,.02));border:1px solid var(--s-border);border-radius:12px;padding:.9rem 1rem;display:flex;gap:.6rem;align-items:flex-start;}
.lg-tip i{color:var(--s-emerald);font-size:1.05rem;margin-top:.15rem;}
.lg-tip span{font-size:.85rem;font-weight:700;color:var(--s-navy);line-height:1.6;}

@media (max-width:880px){
  .lg-layout{grid-template-columns:1fr;gap:1rem;}
  .lg-toc{display:none;}
  .lg-mselect{display:block;}
  .lg-content{padding:1.3rem 1.1rem;}
}

/* ============= بطاقة توثيق الترخيص — Sanad v2 ============= */
.sx-license{max-width:1280px;margin:0 auto;padding:0 1.5rem 1.5rem;}
.sx-license-card{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0b2545 0%,#0f2f5c 55%,#0b2545 100%);
  border:1px solid rgba(217,176,102,.35);
  border-radius:20px;padding:1.4rem 1.5rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;justify-content:space-between;
  box-shadow:0 18px 40px -22px rgba(6,22,51,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.sx-license-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 92% 8%,rgba(217,176,102,.18),transparent 45%),
             radial-gradient(circle at 5% 95%,rgba(13,122,79,.15),transparent 45%);
}
.sx-license-card > *{position:relative;z-index:1;}
.sx-license-card .sx-lic-left{display:flex;align-items:flex-start;gap:1rem;flex:1 1 420px;min-width:280px;}
.sx-license-card .sx-lic-mark{
  flex:0 0 auto;width:78px;height:78px;border-radius:16px;
  background:linear-gradient(160deg,#f7e9c6,#d9b066);
  display:flex;align-items:center;justify-content:center;padding:10px;
  box-shadow:0 8px 18px -10px rgba(217,176,102,.6), inset 0 0 0 1px rgba(255,255,255,.4);
}
.sx-license-card .sx-lic-mark img{width:100%;height:100%;object-fit:contain;display:block;}
.sx-license-card .sx-lic-info{flex:1;min-width:0;}
.sx-license-card .sx-lic-title{color:#fff;font-weight:900;font-size:1rem;line-height:1.55;}
.sx-license-card .sx-lic-desc{color:#c6d2e6;font-size:.8rem;line-height:1.75;margin:.45rem 0 .65rem;}
.sx-license-card .sx-lic-meta{font-size:.74rem;color:#a5b3c8;display:flex;flex-wrap:wrap;gap:.5rem .9rem;}
.sx-license-card .sx-lic-meta span{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.05);padding:.3rem .55rem;border-radius:8px;border:1px solid rgba(255,255,255,.06);}
.sx-license-card .sx-lic-meta i{color:#d9b066;font-size:.7rem;}
.sx-license-card .sx-lic-meta b{color:#fff;font-weight:800;}
.sx-license-card .sx-lic-actions{display:flex;flex-direction:column;gap:.55rem;flex:0 0 auto;min-width:230px;}
.sx-license-card .sx-lic-btn{
  padding:.7rem 1.1rem;border-radius:12px;font-weight:800;font-size:.82rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  transition:transform .2s, background .2s, color .2s, box-shadow .2s;cursor:pointer;border:1px solid transparent;
}
.sx-license-card .sx-lic-btn-primary{background:linear-gradient(135deg,#d9b066,#c89947);color:#0b2545;box-shadow:0 8px 18px -10px rgba(217,176,102,.55);}
.sx-license-card .sx-lic-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(217,176,102,.65);}
.sx-license-card .sx-lic-btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.25);}
.sx-license-card .sx-lic-btn-outline:hover{background:rgba(255,255,255,.08);border-color:#d9b066;color:#d9b066;}
@media (max-width:720px){
  .sx-license-card{padding:1.1rem;gap:1rem;}
  .sx-license-card .sx-lic-left{flex-basis:100%;}
  .sx-license-card .sx-lic-actions{width:100%;}
  .sx-license-card .sx-lic-mark{width:60px;height:60px;border-radius:13px;padding:7px;}
  .sx-license-card .sx-lic-title{font-size:.92rem;}
}

/* ===== نافذة الترخيص ===== */
.sx-cert-mod{max-width:960px;width:100%;max-height:92vh;display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;}
.sx-cert-head{background:linear-gradient(135deg,#0b2545 0%,#0d7a4f 100%);}
.sx-cert-head .sx-cert-head-l{display:flex;align-items:center;gap:.85rem;}
.sx-cert-head .sx-cert-logo{height:38px;width:auto;background:#fff;padding:5px 8px;border-radius:8px;}
.sx-cert-body{display:grid;grid-template-columns:280px 1fr;gap:1.2rem;padding:1.3rem;overflow:auto;}
.sx-cert-meta{display:flex;flex-direction:column;gap:.55rem;}
.sx-cmrow{background:#f6f8fb;border:1px solid #e6ecf3;border-radius:11px;padding:.65rem .8rem;display:flex;flex-direction:column;gap:.15rem;}
.sx-cmrow span{font-size:.7rem;color:#5b6b7d;font-weight:600;}
.sx-cmrow b{color:#0b2545;font-size:.85rem;font-weight:800;line-height:1.6;}
.sx-cmrow .sx-cm-ok{color:#0d7a4f;display:inline-flex;align-items:center;gap:.3rem;}
.sx-cert-frame{background:#f1f4f9;border:1px solid #e3e9f1;border-radius:14px;padding:.6rem;display:flex;align-items:center;justify-content:center;min-height:300px;max-height:70vh;overflow:auto;}
.sx-cert-frame img{max-width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 6px 18px -8px rgba(11,37,69,.25);}
@media (max-width:780px){
  .sx-cert-body{grid-template-columns:1fr;padding:1rem;}
  .sx-cert-frame{max-height:55vh;}
  .sx-cert-head .sx-cert-logo{height:30px;}
}

/* ============================================================
   SXQ — Floating Quick Bar + Donate/Gift/Join Modals (v1)
   ============================================================ */
/* === Floating Action Bar (vertical, always visible) === */
.sxq-fab{position:fixed;z-index:9990;right:14px;top:50%;transform:translateY(-50%);font-family:inherit}
.sxq-fab-list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:6px;background:#fffdf8;border:1px solid #e6ebf2;border-radius:18px;box-shadow:0 12px 28px rgba(11,37,69,.10),0 2px 6px rgba(11,37,69,.06)}
.sxq-fab-item{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:0;cursor:pointer;background:transparent;color:#0b2545;text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease}
.sxq-fab-item i{font-size:1rem;color:#1d3a6b;transition:color .2s ease}
.sxq-fab-item:hover{background:#0d7a4f;color:#fff;transform:translateX(2px)}
.sxq-fab-item:hover i{color:#fff}
.sxq-fab-item-gold i{color:#b8862b}
.sxq-fab-item-gold:hover{background:#b8862b}
.sxq-fab-item-gold:hover i{color:#fff}
.sxq-fab-label{position:absolute;right:calc(100% + 12px);left:auto;top:50%;transform:translateY(-50%) translateX(6px);background:#0b2545;color:#fff;font-size:.8rem;font-weight:700;padding:.45rem .75rem;border-radius:10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;box-shadow:0 8px 20px rgba(11,37,69,.22);direction:rtl}
.sxq-fab-label::after{content:"";position:absolute;right:-4px;left:auto;top:50%;transform:translateY(-50%) rotate(45deg);width:8px;height:8px;background:#0b2545;border-radius:1px}
.sxq-fab-item:hover .sxq-fab-label,.sxq-fab-item:focus-visible .sxq-fab-label{opacity:1;transform:translateY(-50%) translateX(0)}
.sxq-fab-mobile-toggle{display:none}

/* === Membership modal === */
.sxq-mem-note{display:flex;gap:.6rem;background:#f3f7ff;border:1px solid #d8e4f6;color:#1d3a6b;border-radius:12px;padding:.7rem .85rem;font-size:.8rem;line-height:1.85;margin-bottom:1rem}
.sxq-mem-note i{color:#0d7a4f;margin-top:.15rem}
.sxq-mem-section{font-weight:800;color:#0b2545;font-size:.88rem;margin:1.1rem 0 .55rem;padding-bottom:.4rem;border-bottom:1px dashed #e3e9f1}
.sxq-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.sxq-chip{position:relative;display:inline-flex;align-items:center}
.sxq-chip input{position:absolute;opacity:0;pointer-events:none}
.sxq-chip span{display:inline-block;padding:.4rem .8rem;border-radius:999px;background:#fff;border:1px solid #e3e9f1;color:#1d3a6b;font-size:.78rem;font-weight:700;cursor:pointer;transition:.15s}
.sxq-chip input:checked + span{background:#0d7a4f;border-color:#0d7a4f;color:#fff}
.sxq-chip:hover span{border-color:#0d7a4f;color:#0d7a4f}
.sxq-chip input:checked + span:hover{color:#fff}
.sxq-mem-acks{display:flex;flex-direction:column;gap:.45rem;background:#fafbfd;border:1px solid #eef1f7;border-radius:12px;padding:.7rem .9rem}


/* Modal shell */
.sxq-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
.sxq-modal.open{display:flex;animation:sxqFade .2s ease}
.sxq-modal::before{content:"";position:fixed;inset:0;background:rgba(7,18,39,.55);backdrop-filter:blur(4px)}
.sxq-dialog{position:relative;width:100%;max-width:560px;background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.3);overflow:hidden;margin:auto;animation:sxqUp .25s ease}
@keyframes sxqFade{from{opacity:0}to{opacity:1}}
@keyframes sxqUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.sxq-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:linear-gradient(135deg,#1d3a6b,#0d7a4f);color:#fff}
.sxq-head h3{margin:0;font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:.5rem}
.sxq-close{background:rgba(255,255,255,.18);border:0;color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.sxq-close:hover{background:rgba(255,255,255,.32)}
.sxq-body{padding:1.1rem 1.25rem 1.25rem}

/* Steps indicator */
.sxq-steps{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-bottom:1rem;font-size:.78rem;color:#7a8aa3;font-weight:700}
.sxq-step{display:flex;align-items:center;gap:.4rem;opacity:.55;transition:.2s}
.sxq-step .n{width:24px;height:24px;border-radius:50%;background:#e9eef6;color:#0b2545;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem}
.sxq-step.active{opacity:1;color:#0d7a4f}
.sxq-step.active .n{background:#0d7a4f;color:#fff}
.sxq-step.done .n{background:#1d3a6b;color:#fff}
.sxq-step-sep{width:18px;height:2px;background:#e1e7ef;border-radius:2px}

/* Panels — slide animation */
.sxq-panel{display:none;animation:sxqSlide .3s ease}
.sxq-panel.active{display:block}
@keyframes sxqSlide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}

/* Form bits */
.sxq-field{margin-bottom:.85rem}
.sxq-field label{display:block;font-size:.82rem;font-weight:700;color:#1d3a6b;margin-bottom:.35rem}
.sxq-input,.sxq-select,.sxq-textarea{width:100%;border:1px solid #dde5ef;background:#f8fafc;border-radius:12px;padding:.7rem .85rem;font:inherit;font-size:.9rem;color:#0b2545;outline:none;transition:.2s}
.sxq-input:focus,.sxq-select:focus,.sxq-textarea:focus{border-color:#0d7a4f;background:#fff;box-shadow:0 0 0 3px rgba(13,122,79,.12)}
.sxq-textarea{resize:vertical;min-height:78px}
.sxq-row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.sxq-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
@media (max-width:540px){.sxq-row2,.sxq-row3{grid-template-columns:1fr}}

/* Amount chips */
.sxq-amts{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-bottom:.55rem}
.sxq-amt{padding:.55rem .3rem;border:1px solid #dde5ef;background:#fff;border-radius:10px;font-weight:800;color:#0b2545;cursor:pointer;font-size:.85rem;transition:.18s}
.sxq-amt:hover{border-color:#0d7a4f;color:#0d7a4f}
.sxq-amt.active{background:#0d7a4f;color:#fff;border-color:#0d7a4f}

/* Checkbox row */
.sxq-check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#1d3a6b;font-weight:600;cursor:pointer;padding:.55rem .7rem;background:#f6f9fc;border-radius:10px;border:1px solid #e3e9f1}
.sxq-check input{accent-color:#0d7a4f}

/* Summary */
.sxq-sum{background:linear-gradient(135deg,#f5f9f6,#eef4f9);border:1px solid #dbe8df;border-radius:14px;padding:.85rem 1rem;margin:.9rem 0}
.sxq-sum-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;padding:.25rem 0;color:#1d3a6b}
.sxq-sum-row b{color:#0d7a4f;font-weight:800}
.sxq-sum-row.total{border-top:1px dashed #c8d6dc;margin-top:.35rem;padding-top:.55rem;font-size:.95rem}
.sxq-sum-row.total b{font-size:1.05rem}

/* Actions */
.sxq-actions{display:flex;gap:.55rem;margin-top:1rem}
.sxq-btn{flex:1;padding:.8rem 1rem;border-radius:12px;border:0;font-weight:800;font-size:.9rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;transition:.2s}
.sxq-btn-primary{background:linear-gradient(135deg,#1d3a6b,#0d7a4f);color:#fff;box-shadow:0 10px 22px rgba(13,122,79,.28)}
.sxq-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(13,122,79,.35)}
.sxq-btn-ghost{background:#f1f5f9;color:#1d3a6b}
.sxq-btn-ghost:hover{background:#e2e8f0}

/* Payment header */
.sxq-pay-head{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#0b2545,#1d3a6b);color:#fff;border-radius:14px;padding:.85rem 1rem;margin-bottom:1rem}
.sxq-pay-head .l{font-size:.78rem;color:#cdd9ea}
.sxq-pay-head .v{font-weight:800;font-size:.95rem;margin-top:.15rem}
.sxq-pay-head .amt{font-size:1.3rem;font-weight:900;color:#fff}
.sxq-pay-head .amt small{font-size:.7rem;font-weight:700;color:#cdd9ea}

/* Pay method tabs (single — card) */
.sxq-pay-meta{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:#7a8aa3;margin-bottom:.7rem}
.sxq-pay-meta .brands{display:flex;gap:.35rem;align-items:center}
.sxq-pay-meta .brand{background:#fff;border:1px solid #e3e9f1;border-radius:6px;padding:3px 8px;font-weight:800;font-size:.7rem;color:#1d3a6b;letter-spacing:.5px}

.sxq-secure{display:flex;align-items:center;gap:.4rem;justify-content:center;font-size:.75rem;color:#0d7a4f;font-weight:700;margin-top:.7rem}

/* Success */
.sxq-success{text-align:center;padding:.6rem 0}
.sxq-success-ic{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#e8f7ef,#d1ecd9);color:#0d7a4f;display:inline-flex;align-items:center;justify-content:center;font-size:1.9rem;margin-bottom:.6rem;animation:sxqPop .5s ease}
@keyframes sxqPop{0%{transform:scale(0)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.sxq-success h4{margin:.2rem 0 .35rem;color:#0b2545;font-size:1.15rem;font-weight:800}
.sxq-success p{color:#5b6b85;font-size:.85rem;margin:0 0 .8rem}
.sxq-success .sxq-sum{text-align:start}

/* Gift preview card */
.sxq-giftpv{background:linear-gradient(135deg,#fff7e6,#fef3d7);border:1px dashed #e6c98a;border-radius:14px;padding:1rem;margin:.8rem 0;text-align:center;color:#6b4d12}
.sxq-giftpv .lbl{font-size:.72rem;font-weight:800;letter-spacing:1px;color:#9a7a2b}
.sxq-giftpv .ttl{font-size:1.05rem;font-weight:800;color:#6b4d12;margin:.15rem 0 .35rem}
.sxq-giftpv .msg{font-size:.85rem;color:#7a5a18;font-style:italic;margin:.35rem 0}
.sxq-giftpv .pers{font-size:.78rem;color:#8a6a20;margin-top:.3rem}

/* Join — type chooser */
.sxq-types{display:grid;grid-template-columns:1fr;gap:.5rem;margin-bottom:.5rem}
.sxq-type{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid #e3e9f1;border-radius:12px;padding:.8rem .95rem;cursor:pointer;text-align:start;width:100%;transition:.2s}
.sxq-type:hover{border-color:#0d7a4f;background:#f5f9f6}
.sxq-type.active{border-color:#0d7a4f;background:#f0f8f4}
.sxq-type i{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#1d3a6b,#0d7a4f);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1rem}
.sxq-type b{display:block;color:#0b2545;font-size:.92rem}
.sxq-type span{display:block;font-size:.76rem;color:#6b7a90;margin-top:.15rem}

/* Opportunities list */
.sxq-opps{display:flex;flex-direction:column;gap:.5rem;max-height:280px;overflow-y:auto;padding-inline-end:.2rem}
.sxq-opp{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:#fff;border:1px solid #e3e9f1;border-radius:12px;padding:.65rem .8rem}
.sxq-opp-info b{display:block;font-size:.88rem;color:#0b2545;font-weight:800}
.sxq-opp-info .meta{font-size:.72rem;color:#6b7a90;margin-top:.2rem;display:flex;flex-wrap:wrap;gap:.45rem}
.sxq-opp-info .meta .badge{padding:2px 8px;border-radius:999px;background:#eef4f9;color:#1d3a6b;font-weight:700}
.sxq-opp-info .meta .badge.vol{background:#e7f3ec;color:#0d7a4f}
.sxq-opp-info .meta .badge.job{background:#fdf2dc;color:#8a6310}
.sxq-opp-pick{background:#0d7a4f;color:#fff;border:0;border-radius:10px;padding:.45rem .8rem;font-weight:800;font-size:.78rem;cursor:pointer}
.sxq-opp-pick:hover{background:#0b6743}
.sxq-careers-link{display:block;text-align:center;margin-top:.7rem;font-size:.8rem;color:#1d3a6b;font-weight:700;text-decoration:none}
.sxq-careers-link:hover{color:#0d7a4f}

/* Mobile: collapse fab to a single trigger that reveals the list */
@media (max-width:768px){
  .sxq-fab{right:12px;left:auto;top:auto;bottom:14px;transform:none}
  .sxq-fab-mobile-toggle{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(135deg,#1d3a6b,#0d7a4f);color:#fff;font-size:1.1rem;box-shadow:0 12px 26px rgba(13,122,79,.32)}
  .sxq-fab-list{position:absolute;right:0;left:auto;bottom:calc(100% + 10px);opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s ease}
  .sxq-fab.open .sxq-fab-list{opacity:1;pointer-events:auto;transform:translateY(0)}
  .sxq-fab-item{width:42px;height:42px}
  .sxq-fab-label{left:auto;right:calc(100% + 10px);top:50%}
  .sxq-fab-label::after{left:auto;right:-4px}
  .sxq-dialog{max-width:100%;border-radius:16px}
  .sxq-body{padding:1rem}
  .sxq-amts{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   SXQ — Unified Sanad form system v2
   ============================================================ */
.sxq-modal{align-items:center;padding:1rem;overflow:hidden;}
.sxq-modal::before{background:radial-gradient(circle at 30% 20%,rgba(15,30,68,.78),rgba(6,16,38,.92));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.sxq-dialog{max-width:520px;max-height:92vh;display:flex;flex-direction:column;border-radius:24px;box-shadow:0 40px 80px -20px rgba(8,20,50,.55),0 0 0 1px rgba(255,255,255,.05);overflow:hidden;animation:sxqUp .35s cubic-bezier(.2,.9,.3,1.2);}
.sxq-form-modal .sxq-dialog{max-width:600px;}
.sxq-membership-modal .sxq-dialog{max-width:min(760px,calc(100vw - 24px));}
.sxq-head{position:relative;flex-shrink:0;padding:1.15rem 1.4rem 1rem;background:linear-gradient(135deg,#0b2545 0%,#075c3a 100%);color:#fff;overflow:hidden;border-bottom:0;}
.sxq-head::before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%);top:-70px;inset-inline-end:-42px;pointer-events:none;}
.sxq-head h3{position:relative;z-index:1;color:#fff !important;font-size:1.02rem;line-height:1.25;gap:.75rem;}
.sxq-head h3 small{display:block;margin-top:.18rem;color:rgba(255,255,255,.82);font-size:.74rem;font-weight:500;}
.sxq-head-ic{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;}
.sxq-close{position:relative;z-index:2;background:#f2f5fa;color:#0b2545;width:38px;height:38px;}
.sxq-close:hover{background:#e5413a;color:#fff;transform:rotate(90deg);}
.sxq-body{padding:1.35rem 1.5rem 1.55rem;overflow-y:auto;background:#fff;}
.sxq-body::-webkit-scrollbar{width:8px;}
.sxq-body::-webkit-scrollbar-thumb{background:#d6dde8;border-radius:999px;border:2px solid #fff;}
.sxq-form-modal .sxq-body>.sxq-panel>p:first-child{margin:0 0 1rem!important;color:#5b6b7d!important;line-height:1.75!important;font-size:.86rem!important;}
.sxq-row2{gap:.85rem;}
.sxq-form-modal .sxq-row2{grid-template-columns:1fr;}
.sxq-field{margin-bottom:.95rem;}
.sxq-field label{color:#0b2545;font-weight:800;font-size:.78rem;margin-bottom:.42rem;}
.sxq-input,.sxq-select,.sxq-textarea{border:1.5px solid #e3e8f0;background:#f6f8fc;border-radius:14px;padding:.92rem 1rem;font-size:.92rem;color:#0f1d2e;}
.sxq-input:focus,.sxq-select:focus,.sxq-textarea:focus{border-color:#0d7a4f;background:#fff;box-shadow:0 0 0 4px rgba(13,122,79,.1);}
.sxq-textarea{min-height:96px;}
.sxq-types{gap:.75rem;}
.sxq-type{border:1.5px solid #e3e8f0;border-radius:16px;background:#f6f8fc;padding:1rem 1.1rem;gap:.85rem;}
.sxq-type:hover,.sxq-type.active{background:linear-gradient(135deg,rgba(13,122,79,.06),rgba(11,37,69,.04));border-color:#0d7a4f;box-shadow:0 0 0 4px rgba(13,122,79,.08);transform:translateY(-1px);}
.sxq-type i{width:46px;height:46px;border-radius:13px;background:#fff;color:#075c3a;border:1px solid #e3e8f0;}
.sxq-type:hover i,.sxq-type.active i{background:#0d7a4f;color:#fff;border-color:transparent;}
.sxq-type b{font-size:.94rem;color:#0b2545;}
.sxq-type span{font-size:.78rem;color:#5b6b7d;line-height:1.5;}
.sxq-careers-link{margin-top:.9rem;color:#075c3a;background:#f6f8fc;border:1px solid #e3e8f0;border-radius:12px;padding:.72rem .9rem;}
.sxq-careers-link:hover{background:#eef4f0;border-color:#cbded3;}
.sxq-mem-note{background:linear-gradient(135deg,#f8fafd,#eef5f0);border:1.5px solid #dfe8df;color:#0f1d2e;border-radius:14px;padding:.9rem 1rem;font-size:.82rem;}
.sxq-mem-note i{color:#0d7a4f;}
.sxq-mem-section{display:flex;align-items:center;gap:.55rem;margin:1.25rem 0 .75rem;padding:0;color:#0b2545;font-size:.9rem;border-bottom:0;}
.sxq-mem-section::before{content:"";width:9px;height:9px;border-radius:50%;background:#0d7a4f;box-shadow:0 0 0 4px rgba(13,122,79,.12);}
.sxq-chips{gap:.5rem;}
.sxq-chip span{border:1.5px solid #e3e8f0;background:#f6f8fc;color:#0b2545;padding:.48rem .85rem;}
.sxq-chip input:checked + span{background:#0d7a4f;border-color:#0d7a4f;color:#fff;box-shadow:0 8px 16px -12px rgba(13,122,79,.7);}
.sxq-check{align-items:flex-start;background:#f8fafd;border:1.5px solid #e3e8f0;border-radius:12px;color:#0f1d2e;line-height:1.7;padding:.75rem .85rem;}
.sxq-check input{margin-top:.2rem;width:17px;height:17px;flex:0 0 auto;accent-color:#0d7a4f;}
.sxq-mem-acks{background:#fff;border:0;padding:0;gap:.55rem;}
.sxq-actions{gap:.65rem;margin-top:1.15rem;}
.sxq-btn{border-radius:14px;padding:.95rem 1.15rem;font-size:.91rem;font-family:inherit;}
.sxq-btn-primary{background:linear-gradient(135deg,#0d7a4f,#075c3a);box-shadow:0 10px 22px -10px rgba(13,122,79,.55);color:#fff;}
.sxq-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(13,122,79,.65);}
.sxq-btn-ghost{background:#f2f5fa;color:#0b2545;}
.sxq-btn-ghost:hover{background:#e6ecf5;}
.sxq-success{padding:1rem 0 .5rem;}
.sxq-success-ic{width:86px;height:86px;background:linear-gradient(135deg,#e7faf1,#d1f3e1);font-size:2.35rem;}
.sxq-success h4{color:#0b2545;font-size:1.22rem;}
.sxq-success p{color:#5b6b7d;line-height:1.75;}
.sxq-sum{background:linear-gradient(180deg,#f8fafd,#fff);border:1.5px solid #e3e8f0;border-radius:14px;}
.sxq-sum-row{color:#5b6b7d;}
.sxq-sum-row b{color:#0b2545;}
@media (max-width:640px){
  .sxq-modal{padding:.65rem;align-items:flex-end;}
  .sxq-dialog,.sxq-form-modal .sxq-dialog,.sxq-membership-modal .sxq-dialog{max-width:100%;max-height:96vh;border-radius:20px 20px 16px 16px;}
  .sxq-body{padding:1.05rem 1.05rem 1.25rem;}
  .sxq-actions{flex-direction:column;}
}


/* === Compact services filter === */
.srv-filter-compact{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;background:#fff;border:1px solid var(--s-border);border-radius:14px;padding:.6rem;box-shadow:0 4px 14px rgba(11,37,69,.05)}
.srv-search-mini{position:relative;flex:1;min-width:200px}
.srv-search-mini i{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);color:var(--s-muted);font-size:.85rem}
.srv-search-mini input{width:100%;border:1px solid var(--s-border);border-radius:10px;padding:.55rem .85rem .55rem 2.2rem;font:inherit;font-size:.88rem;background:#fbfbf9;outline:none;transition:.2s}
.srv-search-mini input:focus{border-color:var(--s-emerald);background:#fff;box-shadow:0 0 0 3px rgba(13,122,79,.12)}
.srv-select{border:1px solid var(--s-border);border-radius:10px;padding:.55rem .85rem;background:#fbfbf9;font:inherit;font-size:.88rem;color:var(--s-navy);min-width:160px;cursor:pointer;outline:none;transition:.2s}
.srv-select:focus,.srv-select:hover{border-color:var(--s-emerald);background:#fff}
.srv-reset-mini{width:38px;height:38px;border-radius:10px;border:1px solid var(--s-border);background:#fbfbf9;color:var(--s-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.srv-reset-mini:hover{background:var(--s-emerald);color:#fff;border-color:var(--s-emerald)}


/* =============================================================
   ============ نظام التصميم الموحد (Unified Layer) ============
   كلاسات API الجديدة. تعمل بالتوازي مع الكلاسات القديمة.
   ============================================================= */

/* ---------- Buttons (btn / btn-*) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:var(--radius-sm);
  font-family:inherit;font-weight:700;font-size:.95rem;line-height:1;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:var(--transition);position:relative;
}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(13,122,79,.25)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn i{font-size:.95em}
.btn-primary{background:var(--color-secondary);color:#fff;box-shadow:0 10px 24px rgba(13,122,79,.25)}
.btn-primary:hover{background:var(--color-secondary-dark);transform:translateY(-2px);box-shadow:0 16px 32px rgba(13,122,79,.33);color:#fff}
.btn-secondary{background:var(--color-primary);color:#fff;box-shadow:0 8px 20px rgba(11,37,69,.22)}
.btn-secondary:hover{background:var(--color-primary-dark);transform:translateY(-2px);color:#fff}
.btn-outline{background:transparent;color:var(--color-primary);border-color:var(--color-border)}
.btn-outline:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-accent{background:var(--s-grad-gold);color:#3a2810;box-shadow:0 10px 24px rgba(182,135,58,.28)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(182,135,58,.38);color:#3a2810}
.btn-danger{background:var(--color-danger);color:#fff}
.btn-danger:hover{background:#9a3937;transform:translateY(-2px);color:#fff}
.btn-ghost{background:transparent;color:var(--color-primary)}
.btn-ghost:hover{background:var(--color-surface-soft)}
.btn-sm{padding:.55rem 1rem;font-size:.85rem;border-radius:8px}
.btn-lg{padding:1.05rem 1.9rem;font-size:1rem;border-radius:14px}
.btn-block{display:flex;width:100%}

/* ---------- Cards (sanad-card) ---------- */
.sanad-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:1.5rem;
  box-shadow:var(--shadow-soft);transition:var(--transition);
}
.sanad-card.is-hover:hover,.sanad-card[data-hover]:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-medium);border-color:rgba(13,122,79,.25)
}
.sanad-card-soft{background:var(--color-surface-soft);border-color:var(--color-border)}
.sanad-card-featured{border-color:var(--color-secondary);box-shadow:0 18px 40px rgba(13,122,79,.18)}
.sanad-card-dark{background:linear-gradient(160deg,var(--color-primary),var(--color-primary-dark));color:#fff;border-color:transparent}
.sanad-card-dark h1,.sanad-card-dark h2,.sanad-card-dark h3,.sanad-card-dark h4{color:#fff}
.sanad-card-meta{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--color-text-muted);margin-bottom:.6rem}
.sanad-card-title{font-size:1.1rem;font-weight:800;color:var(--color-primary);margin:0 0 .5rem}
.sanad-card-text{color:var(--color-text-muted);font-size:.92rem;line-height:1.85;margin:0}

/* ---------- Badges (sanad-badge) ---------- */
.sanad-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .65rem;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.01em;line-height:1.4;
  background:var(--color-surface-soft);color:var(--color-primary);
  border:1px solid var(--color-border);
}
.sanad-badge-primary{background:rgba(11,37,69,.08);color:var(--color-primary);border-color:rgba(11,37,69,.15)}
.sanad-badge-secondary{background:rgba(13,122,79,.10);color:var(--color-secondary-dark);border-color:rgba(13,122,79,.20)}
.sanad-badge-accent{background:var(--color-accent-soft);color:#7a5a18;border-color:rgba(201,162,77,.35)}
.sanad-badge-success{background:rgba(13,122,79,.10);color:var(--color-secondary-dark);border-color:rgba(13,122,79,.20)}
.sanad-badge-warning{background:#fdf2dc;color:#8a6310;border-color:#f0d99b}
.sanad-badge-danger{background:#fbeaea;color:#8a2c2a;border-color:#f0c4c3}
.sanad-badge-muted{background:#eef1f5;color:var(--color-text-muted);border-color:#dde3ea}

/* ---------- Forms (sanad-input / form-*) ---------- */
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.form-label{font-size:.85rem;font-weight:700;color:var(--color-primary)}
.form-label .req{color:var(--color-danger);margin-inline-start:.15rem}
.sanad-input,.form-control,.form-select,.form-textarea{
  width:100%;font-family:inherit;font-size:.92rem;color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:.75rem .95rem;line-height:1.5;
  outline:none;transition:var(--transition);
}
.sanad-input:hover,.form-control:hover,.form-select:hover,.form-textarea:hover{border-color:#cfd7e2}
.sanad-input:focus,.form-control:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--color-secondary);background:#fff;
  box-shadow:0 0 0 3px rgba(13,122,79,.12)
}
.form-textarea{resize:vertical;min-height:96px;line-height:1.7}
.form-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-text-muted) 50%),linear-gradient(135deg,var(--color-text-muted) 50%,transparent 50%);background-position:calc(0% + 14px) 50%, calc(0% + 19px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-start:2.4rem}
.form-hint{font-size:.76rem;color:var(--color-text-muted);margin-top:.15rem}
.form-error{font-size:.78rem;color:var(--color-danger);font-weight:600;display:flex;align-items:center;gap:.3rem;margin-top:.15rem}
.form-control.is-invalid,.sanad-input.is-invalid{border-color:var(--color-danger);background:#fdf6f6}
.form-check{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--color-text);cursor:pointer}
.form-check input{accent-color:var(--color-secondary);width:1.05rem;height:1.05rem}
.form-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.25rem}

/* ---------- Modals (sanad-modal) ---------- */
.sanad-modal-overlay{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;
  padding:24px 14px;
  background:rgba(7,18,39,.55);backdrop-filter:blur(4px);
  animation:sanadFade .2s ease;
}
.sanad-modal-overlay.is-open{display:flex}
.sanad-modal{
  position:relative;width:100%;max-width:560px;margin:auto;
  background:var(--color-surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-strong);overflow:hidden;
  animation:sanadUp .25s ease;
  display:flex;flex-direction:column;
  max-height:calc(100vh - 48px);
}
.sanad-modal-lg{max-width:720px}
.sanad-modal-sm{max-width:420px}
.sanad-modal-header{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1rem 1.25rem;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-secondary));
  color:#fff;
}
.sanad-modal-header h3,.sanad-modal-header .title{
  margin:0;color:#fff;font-size:1.05rem;font-weight:800;
  display:inline-flex;align-items:center;gap:.5rem;
}
.sanad-modal-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:1.25rem;color:var(--color-text);background:var(--color-surface);
  scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;
}
.sanad-modal-body::-webkit-scrollbar{width:8px}
.sanad-modal-body::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:8px}
.sanad-modal-footer{
  flex:0 0 auto;
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;
  padding:1rem 1.25rem;background:var(--color-surface-soft);
  border-top:1px solid var(--color-border);
}
.sanad-modal-close{
  background:rgba(255,255,255,.18);border:0;color:#fff;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.95rem;transition:var(--transition);
}
.sanad-modal-close:hover{background:rgba(255,255,255,.32);transform:rotate(90deg)}
@keyframes sanadFade{from{opacity:0}to{opacity:1}}
@keyframes sanadUp{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:540px){
  .sanad-modal{max-width:100%;border-radius:var(--radius-md)}
}

/* ---------- Sections / utilities ---------- */
.sanad-section{padding:clamp(3rem,7vw,5.5rem) 0}
.sanad-section-soft{background:var(--color-surface-soft)}
.sanad-section-dark{background:linear-gradient(160deg,var(--color-primary-dark),var(--color-primary));color:#fff}
.sanad-section-dark h1,.sanad-section-dark h2,.sanad-section-dark h3{color:#fff}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- Legacy modal aliases → unified sanad-modal look ---------- */
/* تبنّي مظهر sanad-modal للنوافذ القديمة (s-modal) دون تعديل HTML/JS */
.s-modal-overlay{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;
  padding:24px 14px;
  background:rgba(7,18,39,.55);backdrop-filter:blur(4px);
  animation:sanadFade .2s ease;
}
.s-modal-overlay.open,.s-modal-overlay.is-open{display:flex;animation:sanadFade .2s ease;}
.s-modal{
  position:relative;width:100%;max-width:560px;margin:auto;
  background:var(--color-surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-strong);overflow:hidden;
  animation:sanadUp .25s ease;
  display:flex;flex-direction:column;
  max-height:calc(100vh - 48px);
}
.s-modal.wide,.s-modal-lg{max-width:720px}
.s-modal-sm{max-width:420px}
.s-modal-head{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1rem 1.25rem;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-secondary));
  color:#fff;border-bottom:0;
}
.s-modal-head h3{
  margin:0;color:#fff;font-size:1.05rem;font-weight:800;
  display:inline-flex;align-items:center;gap:.5rem;
}
.s-modal-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:1.25rem;color:var(--color-text);background:var(--color-surface);
  scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;
}
.s-modal-body::-webkit-scrollbar{width:8px}
.s-modal-body::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:8px}
.s-modal-foot{
  flex:0 0 auto;
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;
  padding:1rem 1.25rem;background:var(--color-surface-soft);
  border-top:1px solid var(--color-border);
}
.s-modal-close{
  background:rgba(255,255,255,.18);border:0;color:#fff;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.95rem;transition:var(--transition);
}
.s-modal-close:hover{background:rgba(255,255,255,.32);transform:rotate(90deg)}
@media (max-width:540px){
  .s-modal{max-width:100%;border-radius:var(--radius-md)}
}


/* ============================================================
   Responsive Enhancements (Mobile / Tablet / Desktop)
   ============================================================ */

/* Use dynamic viewport height so mobile browser chrome doesn't
   clip the modal, and keep the body scrollable inside */
.sanad-modal,.s-modal{
  max-height:calc(100dvh - 48px);
}

/* Tablet */
@media (max-width: 1024px){
  .s-container{padding:0 1.25rem}
  .s-page-hero{padding:clamp(3rem,8vw,5rem) 0 clamp(2rem,5vw,3.5rem)}
  .s-page-hero h1{font-size:clamp(1.6rem,4.2vw,2.4rem)}
}

/* Mobile */
@media (max-width: 768px){
  .s-container{padding:0 1rem}
  .s-page-hero{padding:2.5rem 0 2rem}
  .s-page-hero h1{font-size:1.55rem;line-height:1.35}
  .s-page-hero .s-hero-lead{font-size:.95rem}
  .s-crumbs{font-size:.78rem;flex-wrap:wrap}

  /* Buttons stack & full width on mobile when in form-actions */
  .form-actions .btn,
  .form-actions{width:100%}
  .form-actions .btn{justify-content:center}

  /* Tables become horizontally scrollable wrappers */
  .table-wrap,.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:560px}

  /* Cards tighter padding */
  .sanad-card,.s-card,.bp-card{padding:1rem!important}

  /* Section padding */
  .sanad-section{padding:2.5rem 0}
}

/* Mobile modals: full-height friendly, tighter padding,
   ensure body scrolls smoothly */
@media (max-width: 640px){
  .sanad-modal-overlay,.s-modal-overlay{padding:12px 10px;align-items:flex-end}
  .sanad-modal,.s-modal{
    max-width:100%;
    max-height:calc(100dvh - 24px);
    border-radius:18px 18px 12px 12px;
  }
  .sanad-modal-header,.s-modal-head{padding:.85rem 1rem;position:sticky;top:0;z-index:2}
  .sanad-modal-header h3,.s-modal-head h3{font-size:.98rem}
  .sanad-modal-body,.s-modal-body{
    padding:1rem;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .sanad-modal-footer,.s-modal-foot{
    padding:.75rem 1rem;
    position:sticky;bottom:0;z-index:2;
  }
  .sanad-modal-footer .btn,.s-modal-foot .btn{flex:1 1 auto;justify-content:center}
}

/* Extra small screens */
@media (max-width: 380px){
  .s-page-hero h1{font-size:1.35rem}
  .btn{padding:.6rem .9rem;font-size:.88rem}
}

/* Prevent iOS background scroll when modal open */
body:has(.sanad-modal-overlay.is-open),
body:has(.s-modal-overlay.is-open),
body:has(.s-modal-overlay.open){
  overflow:hidden;
}


/* ============================================
   Page-specific styles (moved from inline)
   ============================================ */

/* ===== Article Details (.a-*) ===== */
.a-hero{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 60%,var(--color-secondary) 130%);color:#fff;position:relative;overflow:hidden;}
  .a-hero::before{content:"";position:absolute;inset:0;opacity:.06;background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 22px);}
  .a-crumb{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;color:rgba(255,255,255,.78);} .a-crumb a{color:#fff;} .a-crumb i{font-size:.62rem;opacity:.7;}
  .a-cover{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/8;background-size:cover;background-position:center;box-shadow:0 22px 50px rgba(11,37,69,.18);}
  .a-content{font-size:1.05rem;line-height:2.1;color:var(--s-text);}
  .a-content h2{font-size:1.5rem;font-weight:900;margin:2rem 0 .9rem;color:var(--s-navy);}
  .a-content h3{font-size:1.2rem;font-weight:800;margin:1.4rem 0 .7rem;color:var(--s-navy);}
  .a-content p{margin:.9rem 0;color:#1d2b40;}
  .a-content ul{margin:.9rem 0;padding-right:1.4rem;}
  .a-content ul li{margin:.45rem 0;position:relative;padding-right:.6rem;}
  .a-content ul li::before{content:"";position:absolute;right:-.85rem;top:.85rem;width:6px;height:6px;border-radius:50%;background:var(--color-secondary);}
  .a-quote{border-right:4px solid var(--color-secondary);background:linear-gradient(180deg,rgba(13,122,79,.06),rgba(13,122,79,0));padding:1.2rem 1.4rem;border-radius:14px;font-size:1.1rem;color:var(--s-navy);font-weight:600;margin:1.6rem 0;}
  .a-quote i{color:var(--color-accent);margin-left:.55rem;}
  .a-img{margin:1.5rem 0;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background-size:cover;background-position:center;box-shadow:0 14px 30px rgba(11,37,69,.10);}
  .a-side{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.3rem;}
  .a-side h4{font-weight:900;color:var(--s-navy);font-size:1rem;margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem;}
  .a-side h4 i{color:var(--color-secondary);}
  .a-share{display:flex;gap:.45rem;flex-wrap:wrap;}
  .a-share a{width:38px;height:38px;border-radius:11px;background:var(--s-mist);color:var(--s-navy);display:flex;align-items:center;justify-content:center;transition:.2s;}
  .a-share a:hover{background:var(--color-secondary);color:#fff;}
  .a-tag{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;background:var(--s-ivory);border:1px solid var(--s-border);border-radius:999px;font-size:.74rem;font-weight:700;color:var(--s-navy);margin:.2rem;}
  .a-rel{display:grid;grid-template-columns:1fr;gap:1rem;}
  @media(min-width:640px){.a-rel{grid-template-columns:repeat(3,1fr);}}
  .a-rel-card{background:#fff;border:1px solid var(--s-border);border-radius:18px;overflow:hidden;transition:.25s;}
  .a-rel-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(11,37,69,.10);}
  .a-rel-img{aspect-ratio:16/10;background-size:cover;background-position:center;}
  .a-rel-body{padding:1rem;}
  .a-rel-body h4{font-size:.95rem;font-weight:800;color:var(--s-navy);line-height:1.55;margin-bottom:.5rem;}
  .a-rel-body span{font-size:.72rem;color:var(--s-muted);}

/* ===== Events list (.e-*) ===== */
.e-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#061633 0%,#0b2545 45%,#0d7a4f 130%);color:#fff;}
  .e-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 12% 18%,rgba(217,176,102,.18),transparent 42%),radial-gradient(circle at 86% 78%,rgba(47,167,118,.22),transparent 45%);}
  .e-hero::after{content:"";position:absolute;inset:0;opacity:.06;background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 22px);}
  .e-crumb{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;color:rgba(255,255,255,.78);} .e-crumb a{color:#fff;} .e-crumb i{font-size:.62rem;opacity:.7;}
  .e-hstats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1.8rem;}
  @media(min-width:768px){.e-hstats{grid-template-columns:repeat(4,1fr);}}
  .e-hstat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.95rem 1rem;backdrop-filter:blur(8px);}
  .e-hstat .n{font-size:1.45rem;font-weight:900;color:#fff;line-height:1;}
  .e-hstat .l{font-size:.74rem;color:rgba(255,255,255,.72);margin-top:.35rem;}
  .e-hstat i{color:#d9b066;margin-left:.3rem;}

  .e-tabs{display:flex;flex-wrap:wrap;gap:.45rem;}
  .e-tab{background:#fff;border:1.5px solid var(--s-border);color:var(--s-navy);font-weight:800;padding:.6rem 1rem;border-radius:999px;font-size:.82rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.4rem;transition:.18s;}
  .e-tab:hover{border-color:#0d7a4f;color:#0d7a4f;}
  .e-tab.active{background:linear-gradient(135deg,#0d7a4f,#075c3a);color:#fff;border-color:#0d7a4f;}
  .e-tab .ct{font-size:.7rem;background:rgba(11,37,69,.08);padding:.05rem .45rem;border-radius:999px;}
  .e-tab.active .ct{background:rgba(255,255,255,.2);color:#fff;}

  .e-filters{background:#fff;border:1px solid var(--s-border);border-radius:22px;padding:1.3rem;box-shadow:0 14px 30px rgba(11,37,69,.05);}
  .e-search{position:relative;}
  .e-search input{width:100%;padding:.9rem 3rem .9rem 1.1rem;border:1.5px solid var(--s-border);border-radius:14px;background:var(--s-ivory);font-family:inherit;font-size:.92rem;color:var(--s-navy);}
  .e-search input:focus{outline:none;border-color:#0d7a4f;background:#fff;box-shadow:0 0 0 4px rgba(13,122,79,.08);}
  .e-search i{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);color:#0d7a4f;}
  .e-fgrid{display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:1rem;}
  @media(min-width:640px){.e-fgrid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.e-fgrid{grid-template-columns:repeat(5,1fr);}}
  .e-fld label{display:block;font-size:.74rem;font-weight:800;color:var(--s-navy);margin-bottom:.35rem;}
  .e-fld select,.e-fld input{width:100%;padding:.65rem .8rem;border:1px solid var(--s-border);border-radius:11px;background:#fff;font-family:inherit;font-size:.82rem;color:var(--s-navy);}

  /* Featured */
  .e-feat{background:#fff;border:1px solid var(--s-border);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1fr;box-shadow:0 18px 38px rgba(11,37,69,.07);}
  @media(min-width:900px){.e-feat{grid-template-columns:1.15fr 1fr;}}
  .e-feat-img{position:relative;min-height:300px;background-size:cover;background-position:center;}
  .e-feat-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,37,69,.45));}
  .e-feat-badge{position:absolute;top:1rem;right:1rem;background:linear-gradient(135deg,#b6873a,#8a6326);color:#fff;font-size:.72rem;font-weight:800;padding:.45rem .85rem;border-radius:999px;z-index:2;display:inline-flex;align-items:center;gap:.4rem;}
  .e-feat-body{padding:2rem;display:flex;flex-direction:column;justify-content:center;}

  .e-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;}
  @media(min-width:640px){.e-grid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.e-grid{grid-template-columns:repeat(3,1fr);}}
  @media(min-width:1280px){.e-grid{grid-template-columns:repeat(4,1fr);}}
  .e-card{background:#fff;border:1px solid var(--s-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:.25s;}
  .e-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(11,37,69,.10);border-color:rgba(13,122,79,.3);}
  .e-thumb{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;}
  .e-badges{position:absolute;top:.8rem;right:.8rem;display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;}
  .e-bg{background:rgba(11,37,69,.85);color:#fff;font-size:.7rem;font-weight:800;padding:.3rem .65rem;border-radius:999px;display:inline-flex;align-items:center;gap:.35rem;backdrop-filter:blur(8px);}
  .e-bg.type-w{background:rgba(13,122,79,.92);}
  .e-bg.type-c{background:rgba(29,58,107,.92);}
  .e-bg.type-m{background:rgba(75,52,118,.92);}
  .e-bg.type-cm{background:rgba(176,32,32,.92);}
  .e-bg.type-f{background:rgba(182,135,58,.92);}
  .e-bg.mode-on{background:rgba(13,122,79,.92);}
  .e-bg.mode-off{background:rgba(29,58,107,.92);}
  .e-bg.mode-hy{background:rgba(182,135,58,.92);}
  .e-status{position:absolute;bottom:.8rem;right:.8rem;background:#fff;color:var(--s-navy);font-size:.7rem;font-weight:800;padding:.3rem .65rem;border-radius:999px;display:inline-flex;align-items:center;gap:.35rem;box-shadow:0 6px 16px rgba(0,0,0,.15);}
  .e-status.open{background:#e6f9f0;color:#075c3a;}
  .e-status.closed{background:#ffeceb;color:#b3261e;}
  .e-status.done{background:var(--s-mist);color:var(--s-muted);}
  .e-date{position:absolute;bottom:.8rem;left:.8rem;background:rgba(255,255,255,.95);border-radius:12px;padding:.35rem .55rem;text-align:center;color:var(--s-navy);box-shadow:0 6px 16px rgba(0,0,0,.15);}
  .e-date b{display:block;font-size:1.05rem;line-height:1;font-weight:900;}
  .e-date span{font-size:.65rem;color:var(--s-muted);}
  .e-body{padding:1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
  .e-card h3{font-size:1rem;font-weight:800;color:var(--s-navy);line-height:1.5;}
  .e-card p{font-size:.82rem;color:var(--s-muted);line-height:1.7;}
  .e-meta{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.74rem;color:var(--s-muted);}
  .e-meta i{margin-left:.25rem;color:#0d7a4f;}
  .e-foot{margin-top:auto;display:flex;gap:.5rem;padding-top:.7rem;border-top:1px dashed var(--s-border);}
  .e-foot .btn{flex:1;padding:.6rem .8rem;font-size:.8rem;}

  /* Calendar mini */
  .e-cal{background:#fff;border:1px solid var(--s-border);border-radius:20px;padding:1.3rem;}
  .e-cal h3{font-size:1rem;font-weight:900;color:var(--s-navy);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;}
  .e-cal h3 i{color:#b6873a;}
  .e-cal-item{display:flex;gap:.7rem;padding:.7rem 0;border-bottom:1px dashed var(--s-border);}
  .e-cal-item:last-child{border-bottom:0;}
  .e-cal-item .dt{width:54px;background:linear-gradient(135deg,#0b2545,#075c3a);color:#fff;border-radius:11px;padding:.5rem 0;text-align:center;flex-shrink:0;}
  .e-cal-item .dt b{display:block;font-size:1.05rem;line-height:1;font-weight:900;}
  .e-cal-item .dt span{font-size:.62rem;opacity:.85;}
  .e-cal-item h4{font-size:.85rem;color:var(--s-navy);font-weight:800;line-height:1.5;}
  .e-cal-item span.m{font-size:.7rem;color:var(--s-muted);}

/* ===== Event Details + Online (.d-*) — shared by event-details.html & event-details-online.html ===== */
.d-info{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.4rem;}
  .d-info h3{font-weight:900;color:var(--s-navy);font-size:1.05rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;}
  .d-info h3 i{color:var(--color-secondary);}
  .d-info ul{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
  .d-info li{padding:.7rem .8rem;background:var(--s-ivory);border-radius:11px;border:1px solid var(--s-border);}
  .d-info li b{display:block;color:var(--s-navy);font-size:.9rem;font-weight:800;margin-top:.2rem;}
  .d-info li span{font-size:.7rem;color:var(--s-muted);}
  .d-info li i{color:var(--color-secondary);margin-left:.3rem;}

  .d-section{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.5rem;}
  .d-section h2{font-size:1.2rem;font-weight:900;color:var(--s-navy);margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem;}
  .d-section h2 i{color:var(--color-accent);}
  .d-axis{display:grid;grid-template-columns:1fr;gap:.7rem;}
  @media(min-width:640px){.d-axis{grid-template-columns:1fr 1fr;}}
  .d-axis div{padding:.85rem 1rem;border:1px solid var(--s-border);background:var(--s-ivory);border-radius:12px;display:flex;align-items:flex-start;gap:.6rem;}
  .d-axis div i{color:var(--color-secondary);margin-top:.2rem;}
  .d-axis div b{display:block;color:var(--s-navy);font-weight:800;font-size:.92rem;}
  .d-axis div span{font-size:.78rem;color:var(--s-muted);}

  .d-aud{display:flex;flex-wrap:wrap;gap:.5rem;}
  .d-aud span{padding:.45rem .85rem;background:rgba(13,122,79,.08);color:var(--color-secondary-dark);border-radius:999px;font-size:.78rem;font-weight:700;display:inline-flex;align-items:center;gap:.35rem;}
  .d-aud span i{color:var(--color-secondary);}

  .d-sched{border:1px solid var(--s-border);border-radius:14px;overflow:hidden;}
  .d-sched div{display:grid;grid-template-columns:90px 1fr;gap:1rem;padding:.85rem 1rem;border-bottom:1px solid var(--s-border);align-items:center;}
  .d-sched div:last-child{border-bottom:0;}
  .d-sched b{color:var(--color-secondary);font-weight:800;font-size:.85rem;}
  .d-sched span{color:var(--s-text);font-size:.92rem;}

  /* registration sidebar */
  .d-reg{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.4rem;position:sticky;top:90px;}
  .d-reg h3{font-weight:900;color:var(--s-navy);font-size:1.05rem;margin-bottom:.5rem;}
  .d-reg .badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;background:#e6f9f0;color:var(--color-secondary-dark);border-radius:999px;font-size:.72rem;font-weight:800;margin-bottom:.7rem;}
  .d-mode-info{background:var(--s-ivory);border:1px dashed var(--s-border);border-radius:12px;padding:.85rem;font-size:.83rem;margin-top:.8rem;}
  .d-mode-info h5{font-weight:800;color:var(--s-navy);margin-bottom:.3rem;font-size:.85rem;display:flex;align-items:center;gap:.4rem;}
  .d-mode-info h5 i{color:var(--color-secondary);}
  .d-mode-info .note{margin-top:.5rem;padding:.5rem .7rem;background:#fff8e6;color:#8a6326;border:1px solid #f0d77a;border-radius:9px;font-size:.74rem;display:flex;align-items:flex-start;gap:.4rem;}
  .d-mode-info .note i{margin-top:.15rem;}

  .d-form{display:grid;gap:.7rem;margin-top:1rem;}
  .d-form label{font-size:.78rem;font-weight:800;color:var(--s-navy);}
  .d-form input,.d-form select,.d-form textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--s-border);border-radius:10px;background:#fff;font-family:inherit;font-size:.86rem;color:var(--s-navy);}
  .d-form input:focus,.d-form select:focus,.d-form textarea:focus{outline:none;border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(13,122,79,.1);}
  .d-form .row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
  .d-form .chk{display:flex;align-items:flex-start;gap:.5rem;font-size:.78rem;color:var(--s-text);}
  .d-form .chk input{width:auto;}

  /* faq */
  .d-faq details{background:#fff;border:1px solid var(--s-border);border-radius:12px;padding:.95rem 1.1rem;margin-bottom:.6rem;}
  .d-faq summary{font-weight:800;color:var(--s-navy);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;}
  .d-faq summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--color-secondary);transition:.2s;}
  .d-faq details[open] summary::after{transform:rotate(180deg);}
  .d-faq p{margin-top:.7rem;color:var(--s-muted);line-height:1.85;font-size:.9rem;}

  .d-rel{display:grid;grid-template-columns:1fr;gap:1rem;}
  @media(min-width:640px){.d-rel{grid-template-columns:repeat(3,1fr);}}
  .d-rel-card{background:#fff;border:1px solid var(--s-border);border-radius:16px;overflow:hidden;transition:.25s;}
  .d-rel-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(11,37,69,.08);}
  .d-rel-img{aspect-ratio:16/10;background-size:cover;background-position:center;}
  .d-rel-body{padding:.95rem;}
  .d-rel-body h4{font-weight:800;color:var(--s-navy);font-size:.92rem;line-height:1.5;}
  .d-rel-body span{font-size:.72rem;color:var(--s-muted);}

/* ===== Governance (.g-*) ===== */
/* ====== Governance page-specific styles ====== */
  .g-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 45%,var(--color-secondary) 130%);color:#fff;}
  .g-hero::before{content:"";position:absolute;inset:0;background-image:
    radial-gradient(circle at 12% 18%,rgba(217,176,102,.16),transparent 40%),
    radial-gradient(circle at 86% 78%,rgba(47,167,118,.22),transparent 45%);
    pointer-events:none;}
  .g-hero::after{content:"";position:absolute;inset:0;opacity:.06;background-image:
    repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 22px);}
  .g-doc-float{position:absolute;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:14px;backdrop-filter:blur(8px);padding:.9rem 1rem;font-size:.8rem;color:#fff;display:flex;align-items:center;gap:.55rem;box-shadow:0 12px 28px rgba(0,0,0,.18);}
  .g-doc-float i{color:var(--s-gold-soft);}
  .g-crumb{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;color:rgba(255,255,255,.75);}
  .g-crumb a{color:#fff;}
  .g-crumb i{font-size:.65rem;opacity:.7;}

  .g-hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:2rem;}
  @media(min-width:768px){.g-hero-stats{grid-template-columns:repeat(4,1fr);}}
  .g-hero-stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:1rem 1.1rem;backdrop-filter:blur(8px);}
  .g-hero-stat .n{font-size:1.6rem;font-weight:900;color:#fff;line-height:1;}
  .g-hero-stat .l{font-size:.78rem;color:rgba(255,255,255,.72);margin-top:.4rem;}
  .g-hero-stat i{color:var(--s-gold-soft);margin-left:.3rem;}

  /* لوحة المؤشرات */
  .g-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;}
  @media(min-width:640px){.g-kpi-grid{grid-template-columns:repeat(3,1fr);}}
  @media(min-width:1024px){.g-kpi-grid{grid-template-columns:repeat(6,1fr);}}
  .g-kpi{background:#fff;border:1px solid var(--s-border);border-radius:18px;padding:1.1rem;display:flex;align-items:center;gap:.85rem;transition:.22s;}
  .g-kpi:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(11,37,69,.08);border-color:rgba(13,122,79,.35);}
  .g-kpi .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;}
  .g-kpi.c1 .ic{background:rgba(13,122,79,.12);color:var(--color-secondary);}
  .g-kpi.c2 .ic{background:rgba(182,135,58,.15);color:var(--color-accent);}
  .g-kpi.c3 .ic{background:rgba(29,58,107,.12);color:var(--color-primary-soft);}
  .g-kpi.c4 .ic{background:rgba(47,167,118,.16);color:#2fa776;}
  .g-kpi.c5 .ic{background:rgba(217,176,102,.22);color:#8a6326;}
  .g-kpi.c6 .ic{background:rgba(11,37,69,.10);color:var(--color-primary);}
  .g-kpi .n{font-size:1.35rem;font-weight:900;color:var(--s-navy);line-height:1;}
  .g-kpi .l{font-size:.74rem;color:var(--s-muted);margin-top:.3rem;}

  /* لوحة الفلاتر */
  .g-filters{background:#fff;border:1px solid var(--s-border);border-radius:22px;padding:1.4rem;box-shadow:0 14px 30px rgba(11,37,69,.05);}
  .g-filter-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;}
  .g-filter-head h3{font-size:1.05rem;font-weight:900;color:var(--s-navy);display:flex;align-items:center;gap:.55rem;}
  .g-filter-head h3 i{color:var(--color-secondary);}
  .g-reset{background:transparent;border:1px solid var(--s-border);color:var(--s-navy);font-weight:700;padding:.55rem .95rem;border-radius:10px;font-size:.8rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.4rem;transition:.18s;}
  .g-reset:hover{border-color:#b3261e;color:#b3261e;background:#fff5f4;}

  .g-search{position:relative;}
  .g-search input{width:100%;padding:.95rem 3rem .95rem 1.1rem;border:1.5px solid var(--s-border);border-radius:14px;background:var(--s-ivory);font-family:inherit;font-size:.92rem;color:var(--s-navy);transition:.18s;}
  .g-search input:focus{outline:none;border-color:var(--color-secondary);background:#fff;box-shadow:0 0 0 4px rgba(13,122,79,.08);}
  .g-search i{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);color:var(--color-secondary);}

  .g-fgrid{display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:1rem;}
  @media(min-width:640px){.g-fgrid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.g-fgrid{grid-template-columns:repeat(4,1fr);}}
  .g-fld label{display:block;font-size:.74rem;font-weight:800;color:var(--s-navy);margin-bottom:.35rem;}
  .g-fld select,.g-fld input{width:100%;padding:.7rem .9rem;border:1px solid var(--s-border);border-radius:11px;background:#fff;font-family:inherit;font-size:.85rem;color:var(--s-navy);transition:.18s;}
  .g-fld select:focus,.g-fld input:focus{outline:none;border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(13,122,79,.1);}

  .g-active-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;}
  .g-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;background:rgba(13,122,79,.1);color:var(--color-secondary-dark);border-radius:999px;font-size:.72rem;font-weight:700;}
  .g-chip button{background:transparent;border:0;color:inherit;cursor:pointer;font-size:.7rem;padding:0;}

  /* شريط الفئات السريع */
  .g-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;}
  @media(min-width:640px){.g-cats{grid-template-columns:repeat(4,1fr);}}
  @media(min-width:1024px){.g-cats{grid-template-columns:repeat(7,1fr);}}
  .g-cat{background:#fff;border:1.5px solid var(--s-border);border-radius:14px;padding:.9rem .6rem;text-align:center;cursor:pointer;transition:.22s;display:flex;flex-direction:column;align-items:center;gap:.45rem;font-family:inherit;}
  .g-cat:hover{transform:translateY(-3px);border-color:var(--color-secondary);box-shadow:0 10px 24px rgba(13,122,79,.12);}
  .g-cat .ic{width:38px;height:38px;border-radius:11px;background:rgba(13,122,79,.1);color:var(--color-secondary);display:flex;align-items:center;justify-content:center;font-size:.95rem;}
  .g-cat .nm{font-size:.78rem;font-weight:800;color:var(--s-navy);}
  .g-cat .ct{font-size:.68rem;color:var(--s-muted);}
  .g-cat.active{background:linear-gradient(135deg,var(--color-secondary),var(--color-secondary-dark));border-color:var(--color-secondary);color:#fff;}
  .g-cat.active .nm,.g-cat.active .ct{color:#fff;}
  .g-cat.active .ic{background:rgba(255,255,255,.18);color:#fff;}

  /* تبديل العرض */
  .g-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.7rem;margin-bottom:1rem;}
  .g-result-meta{font-size:.83rem;color:var(--s-muted);}
  .g-result-meta b{color:var(--s-navy);}
  .g-view{display:inline-flex;border:1px solid var(--s-border);border-radius:11px;overflow:hidden;background:#fff;}
  .g-view button{padding:.55rem .9rem;background:#fff;border:0;cursor:pointer;font-family:inherit;font-size:.8rem;color:var(--s-muted);font-weight:700;display:inline-flex;align-items:center;gap:.35rem;}
  .g-view button.active{background:var(--s-navy);color:#fff;}

  /* بطاقة ملف PDF */
  .g-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
  @media(min-width:640px){.g-grid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.g-grid{grid-template-columns:repeat(3,1fr);}}
  .g-grid.list{grid-template-columns:1fr;}

  .g-file{background:#fff;border:1px solid var(--s-border);border-radius:18px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;position:relative;}
  .g-file:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(11,37,69,.10);border-color:rgba(13,122,79,.3);}
  .g-file-thumb{position:relative;background:linear-gradient(135deg,#f3ead8 0%,#eef2f6 100%);height:140px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--s-border);overflow:hidden;}
  .g-file-thumb::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,transparent 0 16px,rgba(11,37,69,.04) 16px 17px);}
  .g-file-thumb .pdf-ic{width:62px;height:74px;background:#fff;border:1.5px solid var(--s-border);border-radius:8px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.55rem;box-shadow:0 8px 18px rgba(11,37,69,.10);}
  .g-file-thumb .pdf-ic::before{content:"";position:absolute;top:0;left:0;width:18px;height:18px;background:linear-gradient(135deg,transparent 50%,var(--s-border) 50%);border-bottom-right-radius:4px;}
  .g-file-thumb .pdf-ic span{font-size:.7rem;font-weight:900;color:#b3261e;letter-spacing:.5px;}
  .g-file-thumb .yr{position:absolute;top:.7rem;left:.7rem;background:rgba(11,37,69,.92);color:#fff;font-size:.7rem;font-weight:800;padding:.25rem .55rem;border-radius:8px;}
  .g-file-thumb .st{position:absolute;top:.7rem;right:.7rem;font-size:.65rem;font-weight:800;padding:.25rem .55rem;border-radius:8px;background:#fff;color:var(--s-navy);border:1px solid var(--s-border);display:inline-flex;align-items:center;gap:.3rem;}
  .g-file-thumb .st.updated{color:var(--color-secondary-dark);border-color:rgba(13,122,79,.3);background:rgba(47,167,118,.12);}
  .g-file-thumb .st.approved{color:var(--color-primary-soft);border-color:rgba(29,58,107,.25);background:rgba(29,58,107,.08);}
  .g-file-thumb .st.archived{color:#8a6326;border-color:rgba(182,135,58,.3);background:rgba(217,176,102,.18);}
  .g-file-thumb .st i{font-size:.55rem;}

  .g-file-body{padding:1rem 1.1rem;display:flex;flex-direction:column;flex:1;}
  .g-cat-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:800;color:var(--color-secondary-dark);background:rgba(13,122,79,.1);padding:.25rem .55rem;border-radius:7px;align-self:flex-start;margin-bottom:.55rem;}
  .g-file-body h4{font-size:.95rem;font-weight:800;color:var(--s-navy);line-height:1.45;margin-bottom:.4rem;}
  .g-file-body p{font-size:.79rem;color:var(--s-muted);line-height:1.6;flex:1;margin-bottom:.7rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .g-meta-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.7rem;color:var(--s-muted);padding-top:.65rem;border-top:1px dashed var(--s-border);margin-bottom:.7rem;flex-wrap:wrap;}
  .g-meta-row span{display:inline-flex;align-items:center;gap:.25rem;}
  .g-meta-row i{color:var(--color-secondary);font-size:.7rem;}
  .g-file-acts{display:flex;gap:.45rem;}
  .g-file-acts .btn{flex:1;padding:.6rem .7rem;font-size:.78rem;justify-content:center;border-radius:10px;}

  /* عرض القائمة */
  .g-grid.list .g-file{flex-direction:row;align-items:stretch;}
  .g-grid.list .g-file-thumb{width:170px;height:auto;border-bottom:0;border-left:1px solid var(--s-border);flex-shrink:0;}
  .g-grid.list .g-file-body{flex-direction:row;align-items:center;gap:1.2rem;padding:1.1rem 1.4rem;flex-wrap:wrap;}
  .g-grid.list .g-file-body .l-main{flex:1;min-width:240px;}
  .g-grid.list .g-file-body p{margin-bottom:0;-webkit-line-clamp:1;}
  .g-grid.list .g-meta-row{border-top:0;padding-top:0;margin-bottom:0;}
  .g-grid.list .g-file-acts{width:auto;flex-shrink:0;}
  .g-grid.list .g-file-acts .btn{flex:0 0 auto;}
  @media(max-width:768px){.g-grid.list .g-file{flex-direction:column;}.g-grid.list .g-file-thumb{width:100%;height:120px;border-left:0;border-bottom:1px solid var(--s-border);}}

  .g-empty{padding:3.5rem 1rem;text-align:center;background:#fff;border:1.5px dashed var(--s-border);border-radius:18px;}
  .g-empty i{font-size:2.5rem;color:var(--s-muted);opacity:.5;margin-bottom:.8rem;}
  .g-empty h4{font-size:1.05rem;font-weight:800;color:var(--s-navy);margin-bottom:.4rem;}
  .g-empty p{font-size:.85rem;color:var(--s-muted);}

  /* ملفات مميزة */
  .g-featured{display:grid;grid-template-columns:1fr;gap:1rem;}
  @media(min-width:768px){.g-featured{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.g-featured{grid-template-columns:repeat(4,1fr);}}
  .g-feat{background:linear-gradient(160deg,#fff 0%,#faf7f0 100%);border:1px solid var(--s-border);border-radius:20px;padding:1.4rem 1.2rem;position:relative;overflow:hidden;transition:.25s;}
  .g-feat::before{content:"";position:absolute;top:-30px;left:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(13,122,79,.1),transparent 70%);}
  .g-feat:hover{transform:translateY(-5px);box-shadow:0 22px 40px rgba(11,37,69,.10);border-color:var(--color-secondary);}
  .g-feat .badge{display:inline-flex;align-items:center;gap:.35rem;background:rgba(182,135,58,.15);color:#8a6326;font-size:.7rem;font-weight:800;padding:.3rem .65rem;border-radius:8px;margin-bottom:.9rem;}
  .g-feat .pdf-big{width:54px;height:64px;background:#fff;border:1.5px solid var(--s-border);border-radius:8px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.45rem;margin-bottom:1rem;box-shadow:0 8px 16px rgba(11,37,69,.08);}
  .g-feat .pdf-big::before{content:"";position:absolute;top:0;left:0;width:16px;height:16px;background:linear-gradient(135deg,transparent 50%,var(--s-border) 50%);}
  .g-feat .pdf-big span{font-size:.65rem;font-weight:900;color:#b3261e;}
  .g-feat h4{font-size:1rem;font-weight:800;color:var(--s-navy);margin-bottom:.5rem;line-height:1.45;}
  .g-feat p{font-size:.78rem;color:var(--s-muted);margin-bottom:.9rem;line-height:1.6;}
  .g-feat a{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:800;color:var(--color-secondary);cursor:pointer;}
  .g-feat a:hover{color:var(--color-secondary-dark);}

  /* خطوات تحديث */
  .g-steps{display:grid;grid-template-columns:1fr;gap:1rem;}
  @media(min-width:640px){.g-steps{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.g-steps{grid-template-columns:repeat(5,1fr);}}
  .g-step{background:#fff;border:1px solid var(--s-border);border-radius:16px;padding:1.4rem 1.1rem;text-align:center;position:relative;transition:.22s;}
  .g-step:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(11,37,69,.08);}
  .g-step .num{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--color-secondary),var(--color-secondary-dark));color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;font-size:1rem;box-shadow:0 6px 14px rgba(13,122,79,.3);}
  .g-step h5{font-size:.92rem;font-weight:800;color:var(--s-navy);margin-bottom:.4rem;}
  .g-step p{font-size:.76rem;color:var(--s-muted);line-height:1.55;}

  /* CTA ختامية */
  .g-cta{background:linear-gradient(120deg,var(--color-primary),var(--color-secondary-dark));color:#fff;border-radius:24px;padding:2.5rem 2rem;text-align:center;position:relative;overflow:hidden;}
  .g-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(217,176,102,.18),transparent 50%);}
  .g-cta h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:900;margin-bottom:.6rem;position:relative;}
  .g-cta p{color:rgba(255,255,255,.82);max-width:640px;margin:0 auto 1.4rem;font-size:.95rem;position:relative;}
  .g-cta-acts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;position:relative;}

  /* نافذة التفاصيل */
  .g-modal{max-width:1000px;}
  .g-mod-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;}
  @media(min-width:900px){.g-mod-grid{grid-template-columns:1.5fr 1fr;}}
  .g-pdf-viewer{background:var(--color-primary-soft);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:420px;}
  .g-pdf-bar{background:var(--color-primary);color:#fff;padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;font-size:.78rem;}
  .g-pdf-bar .nm{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;}
  .g-pdf-bar .nm i{color:#b3261e;background:#fff;padding:.2rem .35rem;border-radius:4px;font-size:.7rem;}
  .g-pdf-tools{display:inline-flex;gap:.4rem;}
  .g-pdf-tools button{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;}
  .g-pdf-tools button:hover{background:rgba(255,255,255,.22);}
  .g-pdf-stage{flex:1;background:#f3ead8;background-image:
    linear-gradient(180deg,#fff 0%,#fff 96%,transparent 100%),
    repeating-linear-gradient(180deg,transparent 0 26px,rgba(11,37,69,.05) 26px 27px);
    padding:1.5rem 1.8rem;color:var(--color-primary);font-size:.78rem;line-height:1.9;overflow-y:auto;max-height:440px;}
  .g-pdf-stage h3{font-size:1.05rem;font-weight:900;color:var(--color-primary);margin-bottom:.6rem;border-bottom:2px solid var(--color-secondary);padding-bottom:.4rem;display:inline-block;}
  .g-pdf-stage .ln{height:8px;background:linear-gradient(90deg,rgba(11,37,69,.18) var(--w,80%),transparent var(--w,80%));border-radius:4px;margin:.55rem 0;}
  .g-pdf-foot{background:var(--color-primary);color:rgba(255,255,255,.7);padding:.5rem 1rem;font-size:.72rem;display:flex;justify-content:space-between;}

  .g-mod-info{display:flex;flex-direction:column;gap:.55rem;}
  .g-mod-info .row{display:flex;justify-content:space-between;gap:.6rem;padding:.55rem 0;border-bottom:1px dashed var(--s-border);font-size:.82rem;}
  .g-mod-info .row .k{color:var(--s-muted);}
  .g-mod-info .row .v{color:var(--s-navy);font-weight:800;text-align:left;}
  .g-mod-desc{background:var(--s-ivory);border-radius:12px;padding:.9rem 1rem;font-size:.82rem;color:var(--s-navy);line-height:1.7;border:1px solid var(--s-border);margin-top:.6rem;}
  .g-mod-acts{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:.8rem;}
  .g-mod-acts .btn{padding:.65rem;font-size:.8rem;justify-content:center;border-radius:11px;}

  /* مشاركة */
  .g-share{display:flex;flex-direction:column;gap:.5rem;}
  .g-share-link{display:flex;align-items:center;gap:.5rem;background:var(--s-ivory);border:1px solid var(--s-border);border-radius:11px;padding:.55rem .7rem;font-size:.78rem;color:var(--s-navy);}
  .g-share-link input{flex:1;background:transparent;border:0;outline:none;font-family:inherit;color:var(--s-navy);font-size:.78rem;}
  .g-share-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.4rem;}
  .g-share-opts button{padding:.7rem;border-radius:11px;border:1px solid var(--s-border);background:#fff;font-family:inherit;font-size:.78rem;font-weight:700;color:var(--s-navy);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.3rem;transition:.18s;}
  .g-share-opts button:hover{border-color:var(--color-secondary);color:var(--color-secondary-dark);background:rgba(13,122,79,.06);}
  .g-share-opts button i{font-size:1rem;}

  /* Toast */
  .g-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--color-primary);color:#fff;padding:.8rem 1.4rem;border-radius:14px;font-size:.85rem;font-weight:700;box-shadow:0 14px 30px rgba(0,0,0,.25);z-index:200;opacity:0;pointer-events:none;transition:.3s;display:inline-flex;align-items:center;gap:.55rem;}
  .g-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .g-toast i{color:#2fa776;}

  /* فلتر جوال */
  .g-mob-toggle{display:none;}
  @media(max-width:1023px){
    .g-mob-toggle{display:inline-flex;}
    .g-filter-collapse{display:none;}
    .g-filter-collapse.open{display:block;}
  }

/* ===== Media Center (.m-*) ===== */
/* ====== Media center page styles ====== */
  .m-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#061633 0%,#0b2545 45%,#0d7a4f 130%);color:#fff;}
  .m-hero::before{content:"";position:absolute;inset:0;background-image:
    radial-gradient(circle at 15% 20%,rgba(217,176,102,.18),transparent 42%),
    radial-gradient(circle at 85% 80%,rgba(47,167,118,.22),transparent 45%);}
  .m-hero::after{content:"";position:absolute;inset:0;opacity:.05;background-image:
    repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 22px);}
  .m-crumb{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;color:rgba(255,255,255,.78);}
  .m-crumb a{color:#fff;} .m-crumb i{font-size:.65rem;opacity:.7;}
  .m-float{position:absolute;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:14px;backdrop-filter:blur(8px);padding:.85rem 1rem;font-size:.78rem;color:#fff;display:flex;align-items:center;gap:.55rem;box-shadow:0 12px 28px rgba(0,0,0,.18);}
  .m-float i{color:#d9b066;}
  .m-hstats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1.8rem;}
  @media(min-width:768px){.m-hstats{grid-template-columns:repeat(4,1fr);}}
  .m-hstat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.95rem 1rem;backdrop-filter:blur(8px);}
  .m-hstat .n{font-size:1.45rem;font-weight:900;color:#fff;line-height:1;}
  .m-hstat .l{font-size:.74rem;color:rgba(255,255,255,.72);margin-top:.35rem;}
  .m-hstat i{color:#d9b066;margin-left:.3rem;}

  .m-types{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem;}
  @media(min-width:640px){.m-types{grid-template-columns:repeat(3,1fr);}}
  @media(min-width:1024px){.m-types{grid-template-columns:repeat(6,1fr);}}
  .m-type{background:#fff;border:1.5px solid var(--s-border);border-radius:14px;padding:.95rem .6rem;text-align:center;cursor:pointer;transition:.22s;display:flex;flex-direction:column;align-items:center;gap:.45rem;font-family:inherit;}
  .m-type:hover{transform:translateY(-3px);border-color:#0d7a4f;box-shadow:0 10px 24px rgba(13,122,79,.12);}
  .m-type .ic{width:40px;height:40px;border-radius:11px;background:rgba(13,122,79,.1);color:#0d7a4f;display:flex;align-items:center;justify-content:center;font-size:1rem;}
  .m-type .nm{font-size:.82rem;font-weight:800;color:var(--s-navy);}
  .m-type .ct{font-size:.68rem;color:var(--s-muted);}
  .m-type.active{background:linear-gradient(135deg,#0d7a4f,#075c3a);border-color:#0d7a4f;color:#fff;}
  .m-type.active .nm,.m-type.active .ct{color:#fff;} .m-type.active .ic{background:rgba(255,255,255,.18);color:#fff;}

  .m-filters{background:#fff;border:1px solid var(--s-border);border-radius:22px;padding:1.3rem;box-shadow:0 14px 30px rgba(11,37,69,.05);}
  .m-search{position:relative;}
  .m-search input{width:100%;padding:.9rem 3rem .9rem 1.1rem;border:1.5px solid var(--s-border);border-radius:14px;background:var(--s-ivory);font-family:inherit;font-size:.92rem;color:var(--s-navy);}
  .m-search input:focus{outline:none;border-color:#0d7a4f;background:#fff;box-shadow:0 0 0 4px rgba(13,122,79,.08);}
  .m-search i{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);color:#0d7a4f;}
  .m-fgrid{display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:1rem;}
  @media(min-width:640px){.m-fgrid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.m-fgrid{grid-template-columns:repeat(4,1fr);}}
  .m-fld label{display:block;font-size:.74rem;font-weight:800;color:var(--s-navy);margin-bottom:.35rem;}
  .m-fld select{width:100%;padding:.7rem .9rem;border:1px solid var(--s-border);border-radius:11px;background:#fff;font-family:inherit;font-size:.85rem;color:var(--s-navy);}
  .m-reset{background:transparent;border:1px solid var(--s-border);color:var(--s-navy);font-weight:700;padding:.55rem .95rem;border-radius:10px;font-size:.8rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.4rem;}
  .m-reset:hover{border-color:#b3261e;color:#b3261e;background:#fff5f4;}

  /* Featured */
  .m-feat{background:#fff;border:1px solid var(--s-border);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1fr;box-shadow:0 18px 38px rgba(11,37,69,.07);}
  @media(min-width:900px){.m-feat{grid-template-columns:1.15fr 1fr;}}
  .m-feat-img{position:relative;min-height:300px;background-size:cover;background-position:center;}
  .m-feat-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(11,37,69,.55));}
  .m-feat-badge{position:absolute;top:1rem;right:1rem;background:linear-gradient(135deg,#b6873a,#8a6326);color:#fff;font-size:.72rem;font-weight:800;padding:.45rem .85rem;border-radius:999px;z-index:2;display:inline-flex;align-items:center;gap:.4rem;}
  .m-feat-body{padding:2rem;display:flex;flex-direction:column;justify-content:center;}

  /* Grid + cards */
  .m-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;}
  @media(min-width:640px){.m-grid{grid-template-columns:repeat(2,1fr);}}
  @media(min-width:1024px){.m-grid{grid-template-columns:repeat(3,1fr);}}
  @media(min-width:1280px){.m-grid{grid-template-columns:repeat(4,1fr);}}
  .m-card{background:#fff;border:1px solid var(--s-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:.25s;}
  .m-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(11,37,69,.10);border-color:rgba(13,122,79,.3);}
  .m-thumb{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;}
  .m-type-badge{position:absolute;top:.8rem;right:.8rem;background:rgba(11,37,69,.85);color:#fff;font-size:.7rem;font-weight:800;padding:.35rem .7rem;border-radius:999px;display:inline-flex;align-items:center;gap:.35rem;backdrop-filter:blur(8px);}
  .m-type-badge.news{background:rgba(13,122,79,.92);}
  .m-type-badge.article{background:rgba(29,58,107,.92);}
  .m-type-badge.gallery{background:rgba(182,135,58,.92);}
  .m-type-badge.video{background:rgba(176,32,32,.92);}
  .m-type-badge.file{background:rgba(75,52,118,.92);}
  .m-body{padding:1.2rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
  .m-meta{display:flex;flex-wrap:wrap;gap:.7rem;font-size:.74rem;color:var(--s-muted);}
  .m-meta i{margin-left:.25rem;color:#0d7a4f;}
  .m-card h3{font-size:1.02rem;font-weight:800;color:var(--s-navy);line-height:1.5;}
  .m-card p{font-size:.85rem;color:var(--s-muted);line-height:1.7;}
  .m-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:.7rem;border-top:1px dashed var(--s-border);}
  .m-link{font-size:.82rem;font-weight:800;color:#0d7a4f;display:inline-flex;align-items:center;gap:.35rem;}
  .m-link:hover{color:#075c3a;}

  /* Gallery thumbs strip */
  .m-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;padding:.5rem .6rem 0;}
  .m-thumbs span{aspect-ratio:1/1;background-size:cover;background-position:center;border-radius:8px;border:1px solid var(--s-border);}

  /* Video play */
  .m-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
  .m-play span{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.92);color:#b02020;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 12px 28px rgba(0,0,0,.3);transition:.22s;}
  .m-card:hover .m-play span{transform:scale(1.1);}
  .m-dur{position:absolute;bottom:.7rem;left:.7rem;background:rgba(0,0,0,.75);color:#fff;font-size:.72rem;font-weight:700;padding:.25rem .55rem;border-radius:8px;}

  /* PDF card visuals */
  .m-pdf-cover{aspect-ratio:16/10;background:linear-gradient(135deg,#1d3a6b,#0b2545);display:flex;align-items:center;justify-content:center;color:#fff;position:relative;}
  .m-pdf-cover i{font-size:3.2rem;color:#d9b066;}
  .m-pdf-cover::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 1px,transparent 1px 14px);}
  .m-pdf-stats{display:flex;justify-content:space-around;background:var(--s-ivory);border-radius:12px;padding:.55rem;margin-top:.5rem;font-size:.72rem;}
  .m-pdf-stats div{text-align:center;}
  .m-pdf-stats b{display:block;color:var(--s-navy);font-weight:900;font-size:.95rem;}
  .m-pdf-stats span{color:var(--s-muted);}

  /* Sidebar most viewed */
  .m-most{background:#fff;border:1px solid var(--s-border);border-radius:20px;padding:1.4rem;}
  .m-most h3{font-size:1rem;font-weight:900;color:var(--s-navy);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;}
  .m-most h3 i{color:#b6873a;}
  .m-most-item{display:flex;gap:.7rem;padding:.7rem 0;border-bottom:1px dashed var(--s-border);}
  .m-most-item:last-child{border-bottom:0;}
  .m-most-item .rk{width:30px;height:30px;border-radius:9px;background:rgba(13,122,79,.1);color:#0d7a4f;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;flex-shrink:0;}
  .m-most-item h4{font-size:.85rem;color:var(--s-navy);font-weight:800;line-height:1.5;}
  .m-most-item span{font-size:.7rem;color:var(--s-muted);}

  /* Modals */
  .m-modal{position:fixed;inset:0;background:rgba(6,22,51,.78);z-index:120;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(6px);}
  .m-modal.open{display:flex;}
  .m-mdlg{background:#fff;border-radius:22px;max-width:980px;width:100%;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.4);}
  .m-mhead{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;border-bottom:1px solid var(--s-border);}
  .m-mhead h3{font-weight:900;color:var(--s-navy);font-size:1.05rem;display:flex;align-items:center;gap:.5rem;}
  .m-close{width:38px;height:38px;border-radius:50%;background:var(--s-mist);border:0;color:var(--s-navy);cursor:pointer;font-size:1rem;}
  .m-close:hover{background:#b3261e;color:#fff;}
  .m-mbody{padding:1.4rem;overflow-y:auto;}
  .m-mfoot{padding:1rem 1.4rem;border-top:1px solid var(--s-border);display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}

  /* Gallery modal */
  .m-gview{position:relative;background:#0b2545;border-radius:14px;aspect-ratio:16/9;background-size:contain;background-repeat:no-repeat;background-position:center;}
  .m-garrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);border:0;color:var(--s-navy);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;}
  .m-garrow.prev{right:.8rem;} .m-garrow.next{left:.8rem;}
  .m-gthumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin-top:.9rem;}
  @media(max-width:640px){.m-gthumbs{grid-template-columns:repeat(4,1fr);}}
  .m-gthumbs span{aspect-ratio:1/1;background-size:cover;background-position:center;border-radius:8px;cursor:pointer;border:2px solid transparent;}
  .m-gthumbs span.active{border-color:#0d7a4f;}

  /* Video modal */
  .m-vid{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;}
  .m-vid iframe{width:100%;height:100%;border:0;}

  /* PDF modal */
  .m-pdfview{aspect-ratio:4/3;background:linear-gradient(135deg,#1d3a6b,#0b2545);border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex-direction:column;gap:1rem;}
  .m-pdfview i{font-size:4rem;color:#d9b066;}
  .m-pdfview span{font-size:.85rem;opacity:.85;}

  /* Toast */
  .m-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--s-navy);color:#fff;padding:.85rem 1.3rem;border-radius:14px;font-size:.85rem;font-weight:700;z-index:200;opacity:0;transition:.25s;pointer-events:none;box-shadow:0 14px 30px rgba(0,0,0,.3);}
  .m-toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

/* ===== Global scroll behavior (was inline in privacy/terms) ===== */
html{scroll-behavior:smooth;}

/* ============================================================
   نافذة المصادقة الموحّدة — Sanad Auth Modal
   ============================================================ */
.sa-auth{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.sa-auth.open{opacity:1;pointer-events:auto;}
.sa-auth-overlay{position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(15,30,68,.78),rgba(6,16,38,.92));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.sa-auth-dialog{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:hidden;background:#fff;border-radius:24px;box-shadow:0 40px 80px -20px rgba(8,20,50,.55),0 0 0 1px rgba(255,255,255,.05);display:flex;flex-direction:column;transform:translateY(20px) scale(.96);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);}
.sa-auth.open .sa-auth-dialog{transform:translateY(0) scale(1);}
.sa-auth-x{position:absolute;inset-inline-end:.85rem;top:.85rem;width:38px;height:38px;border-radius:50%;background:#f2f5fa;color:var(--s-navy,#0b2545);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;z-index:5;transition:.2s;}
.sa-auth-x:hover{background:#e5413a;color:#fff;transform:rotate(90deg);}
.sa-auth-brand{display:flex;align-items:center;gap:.85rem;padding:1.2rem 1.4rem .9rem;background:linear-gradient(135deg,var(--s-navy,#0b2545) 0%,var(--s-emerald-deep,#075c3a) 100%);color:#fff;}
.sa-auth-brand::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);top:-60px;inset-inline-end:-40px;pointer-events:none;}
.sa-auth-mark{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.4rem;border:1px solid rgba(255,255,255,.2);}
.sa-auth-name{font-weight:800;font-size:1.05rem;line-height:1.2;}
.sa-auth-tag{font-size:.78rem;opacity:.85;margin-top:.15rem;}
.sa-auth-steps{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.4rem;background:linear-gradient(180deg,#f8fafd,#fff);border-bottom:1px solid var(--s-border,#e6ebf1);}
.sa-auth-steps .dot{width:12px;height:12px;border-radius:50%;background:#dfe4ee;transition:.3s;position:relative;}
.sa-auth-steps .dot.active{background:var(--s-emerald,#0d7a4f);box-shadow:0 0 0 4px rgba(13,122,79,.15);}
.sa-auth-steps .ln{width:38px;height:2px;background:#dfe4ee;border-radius:2px;}
.sa-auth-body{padding:1.4rem 1.5rem 1.6rem;overflow-y:auto;}
.sa-view{animation:saFade .35s ease;}
@keyframes saFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.sa-h{font-size:1.25rem;font-weight:800;color:var(--s-navy,#0b2545);margin:0 0 .35rem;}
.sa-sub{font-size:.86rem;color:var(--s-muted,#5b6b7d);line-height:1.7;margin:0 0 1.15rem;}
.sa-field{display:block;margin-bottom:.95rem;}
.sa-lbl{display:block;font-size:.78rem;font-weight:700;color:var(--s-navy,#0b2545);margin-bottom:.4rem;}
.sa-input-wrap{position:relative;display:flex;align-items:center;background:#f6f8fc;border:1.5px solid #e3e8f0;border-radius:14px;transition:.18s;overflow:hidden;}
.sa-input-wrap:focus-within{background:#fff;border-color:var(--s-emerald,#0d7a4f);box-shadow:0 0 0 4px rgba(13,122,79,.1);}
.sa-input-wrap.err{border-color:#dc2626;background:#fef2f2;box-shadow:0 0 0 4px rgba(220,38,38,.08);}
.sa-input-ic{padding:0 .9rem;color:var(--s-muted,#5b6b7d);font-size:.95rem;}
.sa-input-wrap input{flex:1;border:0;background:transparent;padding:.95rem .25rem .95rem 0;font:inherit;font-size:.92rem;color:var(--s-text,#0f1d2e);outline:none;}
.sa-phone .sa-phone-cc{padding:0 .85rem;color:var(--s-navy,#0b2545);font-weight:700;font-size:.85rem;background:rgba(13,122,79,.08);align-self:stretch;display:flex;align-items:center;border-inline-end:1.5px solid #e3e8f0;direction:ltr;}
.sa-hint{display:block;margin-top:.4rem;font-size:.72rem;color:var(--s-muted,#5b6b7d);line-height:1.5;}
.sa-hint.err{color:#dc2626;font-weight:600;}
.sa-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
@media (max-width:520px){.sa-grid-2{grid-template-columns:1fr;}}
.sa-links{display:flex;justify-content:flex-end;margin:-.4rem 0 .9rem;}
.sa-links a,.sa-link{color:var(--s-emerald-deep,#075c3a);font-size:.78rem;font-weight:700;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .35rem;border-radius:8px;transition:.15s;}
.sa-links a:hover,.sa-link:hover{background:rgba(13,122,79,.08);}
.sa-link.is-disabled{opacity:.5;cursor:not-allowed;}
.sa-link-inline{padding:0;text-decoration:underline;}
.sa-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border:0;cursor:pointer;padding:.95rem 1.2rem;border-radius:14px;font-weight:800;font-size:.92rem;transition:.2s;font-family:inherit;width:100%;}
.sa-btn-primary{background:linear-gradient(135deg,var(--s-emerald,#0d7a4f),var(--s-emerald-deep,#075c3a));color:#fff;box-shadow:0 10px 22px -10px rgba(13,122,79,.55);}
.sa-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(13,122,79,.65);}
.sa-btn-ghost{background:#f2f5fa;color:var(--s-navy,#0b2545);}
.sa-btn-ghost:hover{background:#e6ecf5;}
.sa-row{display:flex;gap:.6rem;margin-top:.5rem;}
.sa-row .sa-btn{flex:1;}
.sa-row .sa-btn-ghost{max-width:38%;}
.sa-divider{display:flex;align-items:center;gap:.7rem;margin:1.2rem 0;color:var(--s-muted,#5b6b7d);font-size:.72rem;}
.sa-divider::before,.sa-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#dfe4ee,transparent);}
.sa-foot{text-align:center;font-size:.85rem;color:var(--s-muted,#5b6b7d);margin-top:1rem;}
.sa-foot a{color:var(--s-emerald-deep,#075c3a);font-weight:800;margin-inline-start:.25rem;}
.sa-foot a:hover{text-decoration:underline;}
/* تبديل بين تسجيل الدخول وإنشاء حساب — زر بلون مختلف */
.sa-switch{display:flex;flex-direction:column;align-items:center;gap:.55rem;margin-top:1rem;padding:.95rem .9rem;background:linear-gradient(180deg,#f8faf7,#f1f5ee);border:1px dashed #d6e0d0;border-radius:14px;}
.sa-switch>span{font-size:.82rem;color:var(--s-muted,#5b6b7d);font-weight:600;}
.sa-btn-switch{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;width:100%;padding:.75rem 1rem;border-radius:12px;font-weight:800;font-size:.88rem;background:#fff;color:var(--s-navy,#0b2545);border:1.5px solid var(--s-navy,#0b2545);transition:.2s;cursor:pointer;font-family:inherit;}
.sa-btn-switch:hover{background:var(--s-navy,#0b2545);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(11,37,69,.4);}
.sa-btn-switch--accent{background:linear-gradient(135deg,#b6873a,#d9b066);color:#fff;border-color:transparent;}
.sa-btn-switch--accent:hover{background:linear-gradient(135deg,#a07530,#c9a056);color:#fff;box-shadow:0 10px 22px -10px rgba(182,135,58,.55);}
/* اختيار طريقة التحقق */
.sa-methods{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.2rem;}
.sa-method{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;background:#f6f8fc;border:1.5px solid #e3e8f0;border-radius:16px;cursor:pointer;text-align:start;transition:.2s;font-family:inherit;width:100%;position:relative;}
.sa-method:hover{background:#eef3fa;border-color:#c9d4e8;}
.sa-method.active{background:linear-gradient(135deg,rgba(13,122,79,.06),rgba(11,37,69,.04));border-color:var(--s-emerald,#0d7a4f);box-shadow:0 0 0 4px rgba(13,122,79,.08);}
.sa-method .ic{width:46px;height:46px;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--s-emerald-deep,#075c3a);font-size:1.1rem;border:1px solid #e3e8f0;}
.sa-method.active .ic{background:var(--s-emerald,#0d7a4f);color:#fff;border-color:transparent;}
.sa-method .tx{flex:1;display:flex;flex-direction:column;}
.sa-method .tx strong{color:var(--s-navy,#0b2545);font-size:.92rem;}
.sa-method .tx span{font-size:.78rem;color:var(--s-muted,#5b6b7d);margin-top:.15rem;direction:ltr;text-align:start;}
.sa-method .tick{color:var(--s-emerald,#0d7a4f);font-size:1.2rem;opacity:0;transform:scale(.6);transition:.2s;}
.sa-method.active .tick{opacity:1;transform:scale(1);}
/* OTP */
.sa-otp{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin:1.2rem 0;}
.sa-otp input{aspect-ratio:1;width:100%;text-align:center;font-size:1.35rem;font-weight:800;color:var(--s-navy,#0b2545);background:#f6f8fc;border:1.5px solid #e3e8f0;border-radius:12px;outline:none;transition:.18s;}
.sa-otp input:focus{background:#fff;border-color:var(--s-emerald,#0d7a4f);box-shadow:0 0 0 4px rgba(13,122,79,.12);transform:translateY(-2px);}
.sa-otp input.err{border-color:#dc2626;animation:saShake .35s;}
@keyframes saShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
.sa-otp-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem;}
/* الموافقة */
.sa-check{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .8rem;background:#f8fafd;border:1.5px solid #e3e8f0;border-radius:12px;cursor:pointer;font-size:.82rem;color:var(--s-text,#0f1d2e);line-height:1.7;margin:.4rem 0 1rem;transition:.18s;}
.sa-check.err{border-color:#dc2626;background:#fef2f2;animation:saShake .35s;}
.sa-check input[type="checkbox"]{margin-top:.25rem;accent-color:var(--s-emerald,#0d7a4f);width:18px;height:18px;flex-shrink:0;}
/* الشروط */
.sa-view-terms .sa-terms-box{max-height:42vh;overflow-y:auto;background:#f8fafd;border:1px solid #e3e8f0;border-radius:14px;padding:1rem 1.1rem;font-size:.83rem;line-height:1.85;color:var(--s-text,#0f1d2e);margin-bottom:1rem;}
.sa-terms-box h4{font-size:.92rem;font-weight:800;color:var(--s-navy,#0b2545);margin:.9rem 0 .35rem;}
.sa-terms-box h4:first-child{margin-top:0;}
.sa-terms-box p{margin:0 0 .35rem;color:var(--s-muted,#5b6b7d);}
.sa-terms-box::-webkit-scrollbar{width:6px;}
.sa-terms-box::-webkit-scrollbar-thumb{background:#cdd6e3;border-radius:3px;}
/* نجاح */
.sa-view-success{text-align:center;padding:1rem 0 .5rem;}
.sa-success-anim{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#e7faf1,#d1f3e1);display:flex;align-items:center;justify-content:center;margin:.4rem auto 1.1rem;color:var(--s-emerald,#0d7a4f);font-size:2.6rem;animation:saPop .5s cubic-bezier(.2,.9,.3,1.4);}
@keyframes saPop{from{transform:scale(.3);opacity:0;}to{transform:scale(1);opacity:1;}}
.sa-view-success .sa-h{margin-top:.5rem;}
/* جوال */
@media (max-width:520px){
  .sa-auth-dialog{max-height:98vh;border-radius:18px;}
  .sa-auth-body{padding:1.1rem 1.1rem 1.3rem;}
  .sa-otp input{font-size:1.1rem;}
}
/* ===== Loaders / Spinners (Unified Layer) ===== */
/* Global top progress bar — shown/hidden by the existing block()/unblock() calls
   already wired to every $.ajax request via $(document).ajaxStart/ajaxStop. */
#preloader{display:none;position:fixed;top:0;inset-inline:0;height:3px;z-index:99999;background:rgba(11,37,69,.08);overflow:hidden;}
#preloader::after{content:"";position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,var(--color-secondary),var(--color-primary));animation:sanadPreload 1s ease-in-out infinite;}
@keyframes sanadPreload{0%{left:-30%;}100%{left:100%;}}

/* Small inline/button spinner */
.sanad-spinner{display:inline-block;width:1.35rem;height:1.35rem;vertical-align:middle;border:3px solid rgba(11,37,69,.15);border-top-color:var(--color-primary);border-radius:50%;animation:sanadSpin .7s linear infinite;}
.sanad-spinner.sm{width:.95rem;height:.95rem;border-width:2px;}
.sanad-spinner.lg{width:2.5rem;height:2.5rem;border-width:4px;}
.sanad-spinner.on-dark{border-color:rgba(255,255,255,.3);border-top-color:#fff;}
@keyframes sanadSpin{to{transform:rotate(360deg);}}

/* Overlay for forms/cards mid-submit — wrap the form in position:relative and
   toggle a `.is-loading` class to show this dimmed overlay + spinner on top. */
.sanad-loading-overlay{position:absolute;inset:0;background:rgba(255,255,255,.78);display:flex;align-items:center;justify-content:center;z-index:5;border-radius:inherit;}

/* Legacy radial-dot loader (used as default content inside tw-modal / generic-modal
   panels while their AJAX content is loading) — re-hosted here on brand tokens since
   the old /webyan-ui/css/style.css bundle that used to style it is no longer loaded. */
.loading-circles{width:100px;aspect-ratio:1;position:relative;--duration:1s;--num-dot:10;}
.loading-circles::before{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;border-radius:50%;background-color:var(--color-surface-soft);}
.loading-circles>*{position:absolute;top:50px;left:50px;transform:rotate(calc(360deg / var(--num-dot) * var(--index)));}
.loading-circles>*::before{position:absolute;content:"";top:18px;left:1px;width:10px;height:10px;transform:scale(0);border-radius:50%;background-color:var(--color-secondary);animation:scaleTo1 var(--duration) ease-in-out calc(var(--duration) / var(--num-dot) * var(--index)) infinite reverse;}
@keyframes scaleTo1{0%{transform:scale(0);}to{transform:scale(1);}}