/* =============================================
   قالب إسكان — مشتق من قالب سند
   مخصص لجمعيات التنمية والإسكان
   هوية دافئة مؤسسية: بني عمراني / زيتوني / ذهبي ترابي
   الكلاسات ومتغيرات الـ tokens مطابقة لقالب سند —
   تم تغيير القيم فقط لتناسب الهوية الجديدة.
   ============================================= */

/* ========== Design Tokens (Single Source of Truth) ========== */
:root {
    /* === نظام ألوان إسكان v3 — Modern Teal & Amber === */
    --s-navy: #0B5750; /* Primary — Deep Teal */
    --s-navy-deep: #042F2C; /* Ink Teal */
    --s-navy-soft: #155E58;
    --s-emerald: #0F766E; /* Secondary — Fresh Teal */
    --s-emerald-soft: #2DA89E;
    --s-emerald-deep: #064E47;
    --s-gold: #F59E5B; /* Accent — Warm Amber */
    --s-gold-soft: #FFC07A;
    --s-coral: #F76C5E; /* Highlight pop */
    --s-sand: #F1E9DA;
    --s-ivory: #F7F5F0; /* Warm off-white */
    --s-paper: #ffffff;
    --s-mist: #EEF6F4; /* Teal mist */
    --s-text: #0F1F1D;
    --s-muted: #5F6E6B;
    --s-border: #E2E8E5;
    --s-shadow-xs: 0 1px 2px rgba(11,87,80,.06);
    --s-shadow-sm: 0 4px 14px rgba(11,87,80,.08);
    --s-shadow-md: 0 14px 36px rgba(11,87,80,.12);
    --s-shadow-lg: 0 28px 70px rgba(11,87,80,.18);
    --s-grad-hero: radial-gradient(120% 90% at 88% 4%, rgba(245,158,91,.45) 0%, transparent 55%), radial-gradient(110% 100% at 0% 100%, rgba(45,168,158,.55) 0%, transparent 55%), linear-gradient(160deg, #042F2C 0%, #0B5750 55%, #0F766E 100%);
    --s-grad-gold: linear-gradient(135deg, #FFC07A 0%, #F59E5B 100%);
    --s-grad-emerald: linear-gradient(135deg, #2DA89E 0%, #064E47 100%);
    --s-grad-coral: linear-gradient(135deg, #F76C5E 0%, #F59E5B 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: #DCEFEC;
    --color-accent: var(--s-gold);
    --color-accent-soft: #FFE9CF;
    --color-bg: var(--s-ivory);
    --color-surface: #ffffff;
    --color-surface-soft: #F1F7F5;
    --color-border: var(--s-border);
    --color-text: var(--s-text);
    --color-text-muted: var(--s-muted);
    --color-success: var(--s-emerald);
    --color-warning: #E0A23A;
    --color-danger: #E5564B;
    --shadow-soft: 0 12px 30px rgba(11,87,80,.10);
    --shadow-medium: 0 18px 45px rgba(11,87,80,.16);
    --shadow-strong: 0 28px 70px rgba(11,87,80,.22);
    --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: "IBM Plex Sans Arabic", "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;
    margin-inline-start: auto;
}

@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;
    }
}

/* ==========================================================
   ISKAN v3 — Modern Header (Floating Capsule) + Cinematic Hero
   ========================================================== */

/* Topbar minimal accent strip */
.s-topbar {
    background: linear-gradient(90deg, var(--s-navy-deep) 0%, var(--s-emerald-deep) 100%);
    color: rgba(255,255,255,.85);
    font-size: .78rem;
    letter-spacing: .01em;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    .s-topbar a:hover {
        color: var(--s-gold-soft);
    }

/* Modern header — flat, airy, with hairline + sliding gradient bar on scroll */
.s-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border-bottom: 1px solid rgba(11,87,80,.06);
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .s-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--s-emerald) 30%, var(--s-gold) 70%, transparent 100%);
        opacity: 0;
        transition: opacity .4s ease;
    }

    .s-header.scrolled {
        background: rgba(255,255,255,.92);
        box-shadow: 0 6px 24px rgba(11,87,80,.07);
    }

        .s-header.scrolled::after {
            opacity: 1;
        }

    /* Navigation pills */
    .s-header nav {
        background: rgba(241,247,245,.55);
        border: 1px solid rgba(11,87,80,.07);
        border-radius: 999px;
        padding: .35rem 1rem;
        backdrop-filter: blur(8px);
    }

.s-nav-link {
    position: relative;
    padding: .55rem .9rem;
    font-weight: 600;
    font-size: .92rem;
    color: var(--s-text);
    border-radius: 999px;
    transition: color .25s, background .25s;
}

    .s-nav-link::after {
        display: none;
    }

    .s-nav-link:hover {
        color: var(--s-emerald-deep);
        background: rgba(15,118,110,.08);
    }

    .s-nav-link.active {
        color: #fff;
        background: var(--s-emerald);
    }

/* Refined logo mark */
.s-logo-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--s-emerald) 0%, var(--s-navy-deep) 100%);
    color: #fff;
    box-shadow: 0 10px 26px rgba(11,87,80,.30), inset 0 0 0 1px rgba(255,255,255,.18);
    position: relative;
    overflow: hidden;
}

    .s-logo-mark::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 25% 25%, rgba(255,192,122,.45), transparent 55%), radial-gradient(circle at 80% 80%, rgba(45,168,158,.40), transparent 55%);
    }

    .s-logo-mark::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 11px;
        border: 1.5px solid rgba(255,255,255,.22);
    }

/* ===== Cinematic Hero ===== */
.s-hero {
    min-height: 100vh;
    padding: 0;
}

.s-hero-veil {
    background: linear-gradient(135deg, rgba(4,47,44,.86) 0%, rgba(11,87,80,.74) 55%, rgba(15,118,110,.62) 100%), radial-gradient(120% 90% at 88% 4%, rgba(245,158,91,.30) 0%, transparent 55%), radial-gradient(110% 100% at 0% 100%, rgba(45,168,158,.42) 0%, transparent 55%);
}

.s-hero-slide {
    transform: scale(1.08);
    animation: sHeroZoomCine 16s ease-in-out infinite alternate;
}

@keyframes sHeroZoomCine {
    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.14);
    }
}

.s-hero-stage {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7rem 0 6rem;
    min-height: 100vh;
}

/* Side rail with slide counter */
.s-hero-rail {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 5;
    color: rgba(255,255,255,.85);
}

@media (min-width: 1024px) {
    .s-hero-rail {
        display: flex;
    }
}

.s-hero-rail .num {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    font-feature-settings: "tnum";
}

.s-hero-rail .bar {
    width: 2px;
    height: 120px;
    background: rgba(255,255,255,.18);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

    .s-hero-rail .bar i {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 0;
        background: linear-gradient(180deg, var(--s-gold-soft), var(--s-emerald-soft));
        animation: sHeroRail 6s linear infinite;
    }

@keyframes sHeroRail {
    from {
        height: 0;
    }

    to {
        height: 100%;
    }
}

.s-hero-rail .label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .72rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    opacity: .7;
}

/* Text slides */
.s-hero-content {
    position: relative;
    max-width: 820px;
}

.s-hero-slide-text {
    display: none;
}

    .s-hero-slide-text.is-active {
        display: block;
    }

        .s-hero-slide-text.is-active .s-hero-eyebrow {
            animation: sHeroIn .8s .05s both;
        }

        .s-hero-slide-text.is-active .s-hero-title {
            animation: sHeroIn .9s .15s both;
        }

        .s-hero-slide-text.is-active .s-hero-lead {
            animation: sHeroIn .9s .35s both;
        }

        .s-hero-slide-text.is-active .s-hero-actions {
            animation: sHeroIn .9s .5s both;
        }

@keyframes sHeroIn {
    from {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

.s-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,.20);
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}

    .s-hero-eyebrow i {
        color: var(--s-gold-soft);
    }

.s-hero-title {
    font-size: clamp(2.4rem, 5.8vw, 4.6rem);
    line-height: 1.1;
    font-weight: 900;
    color: #fff;
    margin: 0 0 1.25rem;
    letter-spacing: -.015em;
}

    .s-hero-title .accent {
        background: linear-gradient(95deg, var(--s-gold-soft) 0%, #fff 50%, var(--s-emerald-soft) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: 200% 100%;
        animation: sHeroShine 8s linear infinite;
    }

@keyframes sHeroShine {
    from {
        background-position: 0% 0;
    }

    to {
        background-position: 200% 0;
    }
}

.s-hero-lead {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    color: rgba(255,255,255,.85);
    line-height: 1.9;
    max-width: 640px;
    margin: 0 0 2rem;
}

.s-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

    .s-hero-actions .btn {
        padding: 1rem 1.6rem;
        font-weight: 700;
        border-radius: 14px;
    }

    .s-hero-actions .btn-primary {
        background: var(--s-grad-coral);
        color: #fff;
        border: none;
        box-shadow: 0 14px 32px rgba(247,108,94,.40);
    }

        .s-hero-actions .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 40px rgba(247,108,94,.5);
        }

    .s-hero-actions .btn-ghost-light {
        background: rgba(255,255,255,.08);
        color: #fff;
        border: 1px solid rgba(255,255,255,.30);
        backdrop-filter: blur(10px);
    }

        .s-hero-actions .btn-ghost-light:hover {
            background: rgba(255,255,255,.16);
        }

/* Dots navigation */
.s-hero-nav {
    position: absolute;
    bottom: 7rem;
    right: 0;
    display: flex;
    gap: .6rem;
    z-index: 5;
}

.s-hero-dot {
    width: 26px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,.25);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: all .35s ease;
}

    .s-hero-dot:hover {
        background: rgba(255,255,255,.45);
    }

    .s-hero-dot.is-active {
        background: var(--s-gold-soft);
        width: 60px;
    }

/* Bottom stats strip — glassmorphism rail */
.s-hero-stats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    background: linear-gradient(180deg, transparent, rgba(4,47,44,.45));
    border-top: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(8px);
}

    .s-hero-stats .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        padding: 1.25rem 0;
    }

@media (min-width: 768px) {
    .s-hero-stats .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.s-hero-stat {
    padding: .6rem 1rem;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.08);
}

    .s-hero-stat:last-child {
        border-right: 0;
    }

    .s-hero-stat .n {
        font-size: clamp(1.5rem, 2.6vw, 2.1rem);
        font-weight: 900;
        color: #fff;
        line-height: 1;
        font-feature-settings: "tnum";
    }

    .s-hero-stat .l {
        font-size: .78rem;
        color: rgba(255,255,255,.75);
        margin-top: .4rem;
    }

    .s-hero-stat .n .unit {
        color: var(--s-gold-soft);
        font-size: .7em;
        margin-inline-start: .2rem;
    }

/* Scroll indicator */
.s-hero-scroll {
    position: absolute;
    bottom: 8.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.6);
    font-size: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    z-index: 5;
    letter-spacing: .2em;
}

    .s-hero-scroll i {
        animation: sHeroBounce 2.2s ease-in-out infinite;
    }

@keyframes sHeroBounce {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

@media (max-width: 1023px) {
    .s-hero-stage {
        padding: 5.5rem 0 8rem;
    }

    .s-hero-nav {
        bottom: 9rem;
        right: 50%;
        transform: translateX(50%);
    }

    .s-hero-scroll {
        display: none;
    }
}

@media (max-width: 640px) {
    .s-hero-stats .s-hero-stat {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
        padding: .7rem;
    }

        .s-hero-stats .s-hero-stat:nth-child(2n) {
            border-right: 0;
        }
}

/* ==========================================================
   ISKAN v3 — Modern SX Header Override (Floating, Capsule Nav)
   ========================================================== */
.sx-topbar {
    background: linear-gradient(90deg, var(--s-navy-deep) 0%, var(--s-emerald-deep) 100%) !important;
    color: rgba(255,255,255,.85) !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.sx-tlinks a, .sx-tcontact a {
    color: rgba(255,255,255,.82) !important;
}

    .sx-tlinks a:hover, .sx-tcontact a:hover {
        color: var(--s-gold-soft) !important;
    }

.sx-header {
    background: rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border-bottom: 1px solid rgba(11,87,80,.06) !important;
    box-shadow: none !important;
    position: sticky;
    top: 0;
    z-index: 60;
}

    .sx-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--s-emerald) 30%, var(--s-gold) 70%, transparent);
        opacity: 0;
        transition: opacity .35s ease;
    }

    .sx-header.scrolled {
        background: rgba(255,255,255,.94) !important;
        box-shadow: 0 6px 24px rgba(11,87,80,.07) !important;
    }

        .sx-header.scrolled::after {
            opacity: 1;
        }

.sx-main {
    padding: .95rem 1.5rem !important;
    gap: 1.4rem !important;
}

.sx-logo .sx-mark {
    width: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, var(--s-emerald) 0%, var(--s-navy-deep) 100%) !important;
    box-shadow: 0 12px 28px rgba(11,87,80,.32), inset 0 0 0 1px rgba(255,255,255,.18) !important;
    position: relative;
    overflow: hidden;
}

    .sx-logo .sx-mark::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 25% 25%, rgba(255,192,122,.45), transparent 55%), radial-gradient(circle at 80% 80%, rgba(45,168,158,.40), transparent 55%);
    }

/* Capsule nav */
.sx-nav {
    background: rgba(241,247,245,.55);
    border: 1px solid rgba(11,87,80,.07);
    border-radius: 999px;
    padding: .4rem .85rem;
    gap: .25rem !important;
    backdrop-filter: blur(8px);
}

    .sx-nav > a, .sx-nav > .sx-drop > button {
        padding: .55rem .85rem !important;
        border-radius: 999px;
        font-size: .87rem !important;
        color: var(--s-text) !important;
        transition: background .25s, color .25s !important;
    }

        .sx-nav > a::after, .sx-nav > .sx-drop > button::after {
            display: none !important;
        }

        .sx-nav > a:hover, .sx-nav > .sx-drop > button:hover {
            background: rgba(15,118,110,.08);
            color: var(--s-emerald-deep) !important;
        }

        .sx-nav > a.active, .sx-nav > .sx-drop > button.active {
            background: var(--s-emerald) !important;
            color: #fff !important;
        }

/* Action buttons */
.sx-icon-btn {
    background: var(--s-mist) !important;
    color: var(--s-navy) !important;
    border-radius: 14px !important;
    transition: all .25s !important;
}

    .sx-icon-btn:hover {
        background: var(--s-emerald) !important;
        color: #fff !important;
        transform: translateY(-1px);
    }

    .sx-icon-btn .sx-badge {
        background: var(--s-coral) !important;
    }

.sx-login-btn {
    background: linear-gradient(135deg, var(--s-navy) 0%, var(--s-navy-deep) 100%) !important;
    border-radius: 999px !important;
    padding: .7rem 1.2rem !important;
    box-shadow: 0 10px 22px rgba(11,87,80,.25) !important;
}

    .sx-login-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(11,87,80,.32) !important;
    }

.sx-donate-btn {
    background: var(--s-grad-coral) !important;
    border-radius: 999px !important;
    padding: .7rem 1.25rem !important;
    box-shadow: 0 10px 22px rgba(247,108,94,.35) !important;
}

.sx-dmenu {
    border-radius: 18px !important;
}

    .sx-dmenu a:hover {
        background: var(--s-mist) !important;
        color: var(--s-emerald-deep) !important;
    }

    .sx-dmenu a i {
        color: var(--s-emerald) !important;
    }

/* Remove leftover navy orb color that referenced old palette */
.s-hero-orb.a {
    background: var(--s-emerald) !important;
}

.s-hero-orb.b {
    background: var(--s-gold) !important;
    opacity: .28;
}

/* ==========================================================
   ISKAN v4 — Header polish · Inner Hero signature · Floating
   bar refinement · Unified Footer palette
   (Non-structural: overrides only, no class/markup changes)
   ========================================================== */

/* ---------- 1) HEADER: no wrapping + breathing capsule ---------- */
.sx-main {
    padding: .85rem 1.5rem !important;
    gap: 1rem !important;
    max-width: 1320px;
}

.sx-logo {
    flex-shrink: 0;
}

    .sx-logo .sx-name {
        font-size: 1rem !important;
    }

    .sx-logo .sx-tag {
        font-size: .66rem !important;
        letter-spacing: .01em;
    }

/* Capsule nav: tighter, never wraps */
.sx-nav {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    padding: .35rem .55rem !important;
    gap: .15rem !important;
    background: rgba(238,246,244,.7);
    border: 1px solid rgba(11,87,80,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

    .sx-nav > a, .sx-nav > .sx-drop > button {
        font-size: .82rem !important;
        padding: .5rem .7rem !important;
        white-space: nowrap;
        letter-spacing: 0;
    }

        .sx-nav > .sx-drop > button .fa-chevron-down {
            font-size: .55rem;
            margin-inline-start: .15rem;
        }

/* Show full nav only when there is real space; below that → burger */
@media (max-width: 1279.98px) {
    .sx-nav {
        display: none !important;
    }

    .sx-burger {
        display: inline-flex !important;
    }
}

@media (min-width: 1280px) {
    .sx-burger {
        display: none !important;
    }
}

/* Action cluster: compact icons */
.sx-actions {
    gap: .4rem !important;
    margin-inline-start: .5rem !important;
}

.sx-icon-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
}

.sx-login-btn {
    padding: .6rem 1rem !important;
    font-size: .8rem !important;
    background: linear-gradient(135deg, var(--s-emerald) 0%, var(--s-navy-deep) 100%) !important;
    box-shadow: 0 8px 20px rgba(11,87,80,.22) !important;
}

/* Topbar: subtle, lower contrast */
.sx-topbar {
    font-size: .72rem !important;
    background: linear-gradient(90deg, var(--s-navy-deep) 0%, #0b3a36 60%, var(--s-emerald-deep) 100%) !important;
}

    .sx-topbar .sx-tcont {
        padding: .5rem 1.5rem !important;
    }

/* Hairline accent under header */
.sx-header::after {
    background: linear-gradient(90deg, transparent, var(--s-emerald) 25%, var(--s-gold) 55%, var(--s-coral) 75%, transparent) !important;
    height: 1.5px !important;
}

/* ---------- 2) INNER PAGE HERO: Iskan signature ---------- */
/* Replace navy slab with themed teal+amber + soft "rooftops" pattern */
.s-page-hero {
    background-color: var(--s-navy-deep) !important;
    padding: clamp(4.5rem, 8vw, 6.5rem) 0 clamp(4rem, 6vw, 5.5rem) !important;
}

    .s-page-hero .s-hero-bg {
        filter: saturate(.7) brightness(.55);
    }

    .s-page-hero::before {
        background: linear-gradient(120deg, rgba(4,47,44,.94) 0%, rgba(11,87,80,.86) 45%, rgba(15,118,110,.62) 100%) !important;
    }

    .s-page-hero::after {
        background: radial-gradient(60% 50% at 92% 8%, rgba(245,158,91,.32), transparent 60%), radial-gradient(50% 45% at 6% 100%, rgba(247,108,94,.18), transparent 65%),
        /* signature rooftop pattern */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='110' viewBox='0 0 220 110'><g fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.2'><path d='M0 100 L30 70 L60 100 L60 60 L100 60 L100 100 L130 70 L160 100 L160 65 L200 65 L200 100 L220 100'/><path d='M70 60 L70 45 L85 45 L85 60'/><path d='M170 65 L170 50 L185 50 L185 65'/></g></svg>") repeat-x bottom left/220px 110px !important;
        opacity: .95;
    }

    .s-page-hero h1 {
        font-weight: 800 !important;
    }

    .s-page-hero .s-hero-lead {
        color: rgba(255,255,255,.88) !important;
    }

.s-hero-meta i {
    color: var(--s-gold-soft) !important;
}

.s-crumbs {
    background: rgba(255,255,255,.09);
    border-color: rgba(245,158,91,.25);
}

    .s-crumbs .sep {
        color: var(--s-gold) !important;
    }

/* Floating glow accents on inner hero */
.s-page-hero::before {
    z-index: -1;
}

.s-page-hero {
    isolation: isolate;
}

/* Sub-nav adjustment to new palette */
.s-subnav {
    border-color: rgba(11,87,80,.10) !important;
}

    .s-subnav a:hover {
        background: var(--s-mist);
        color: var(--s-emerald-deep);
    }

/* ---------- 3) FLOATING QUICK BAR (sxq-fab) refinement ---------- */
.sxq-fab-list {
    background: rgba(255,255,255,.78) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(11,87,80,.10) !important;
    border-radius: 22px !important;
    padding: 7px !important;
    gap: 4px !important;
    box-shadow: 0 18px 40px rgba(11,87,80,.16), 0 2px 6px rgba(11,87,80,.06) !important;
    position: relative;
}

    .sxq-fab-list::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 22px;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(245,158,91,.18), transparent 40%, rgba(15,118,110,.14) 100%);
        opacity: .55;
    }

.sxq-fab-item {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    color: var(--s-navy-deep) !important;
    position: relative;
    z-index: 1;
}

    .sxq-fab-item i {
        color: var(--s-emerald-deep) !important;
        font-size: 1.02rem !important;
        transition: .25s;
    }

    .sxq-fab-item:hover {
        background: linear-gradient(135deg, var(--s-emerald) 0%, var(--s-navy-deep) 100%) !important;
        transform: translateX(-3px) scale(1.04) !important;
        box-shadow: 0 10px 22px rgba(11,87,80,.28);
    }

        .sxq-fab-item:hover i {
            color: #fff !important;
            transform: scale(1.1);
        }

.sxq-fab-item-gold i {
    color: var(--s-gold) !important;
}

.sxq-fab-item-gold:hover {
    background: linear-gradient(135deg, var(--s-gold) 0%, var(--s-coral) 100%) !important;
}

    .sxq-fab-item-gold:hover i {
        color: #fff !important;
    }

.sxq-fab-label {
    background: var(--s-navy-deep) !important;
    box-shadow: 0 10px 22px rgba(4,47,44,.35) !important;
    border: 1px solid rgba(245,158,91,.25);
}

    .sxq-fab-label::after {
        background: var(--s-navy-deep) !important;
    }

/* ---------- 4) FOOTER: unified Teal + Amber palette ---------- */
.sx-footer {
    background: radial-gradient(120% 80% at 100% 0%, rgba(15,118,110,.45), transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(245,158,91,.10), transparent 60%), linear-gradient(180deg, #042F2C 0%, #021F1D 100%) !important;
    color: #c7d6d3 !important;
    position: relative;
    overflow: hidden;
}

    .sx-footer::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--s-emerald-soft) 20%, var(--s-gold) 50%, var(--s-coral) 70%, transparent);
        opacity: .7;
    }

.sx-fbrand .sx-fname .sx-mark {
    background: linear-gradient(135deg, var(--s-emerald) 0%, var(--s-navy-deep) 100%) !important;
    box-shadow: 0 10px 22px rgba(15,118,110,.35), inset 0 0 0 1px rgba(255,192,122,.25) !important;
}

.sx-fbrand .sx-fname .nm {
    color: #fff !important;
}

.sx-fbrand .sx-fname .tg {
    color: var(--s-gold-soft) !important;
}

.sx-fbrand p {
    color: #a8bdb9 !important;
}

.sx-fsoc a {
    background: rgba(255,255,255,.06) !important;
    color: #cfe1de !important;
    border: 1px solid rgba(255,192,122,.10);
    transition: all .25s;
}

    .sx-fsoc a:hover {
        background: linear-gradient(135deg, var(--s-gold), var(--s-coral)) !important;
        color: #042F2C !important;
        transform: translateY(-2px);
        border-color: transparent;
    }

.sx-fcol h4 {
    color: #fff !important;
}

    .sx-fcol h4::after {
        background: linear-gradient(90deg, var(--s-gold), var(--s-coral)) !important;
        width: 38px !important;
        height: 3px !important;
    }

.sx-fcol a {
    color: #a8bdb9 !important;
}

    .sx-fcol a:hover {
        color: var(--s-gold-soft) !important;
    }

    .sx-fcol a i {
        color: var(--s-emerald-soft) !important;
    }

.sx-fcontact li {
    color: #a8bdb9 !important;
}

    .sx-fcontact li i {
        color: var(--s-gold) !important;
    }

.sx-fnews input {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(245,158,91,.18) !important;
    color: #fff !important;
}

    .sx-fnews input::placeholder {
        color: #7e958f !important;
    }

    .sx-fnews input:focus {
        border-color: var(--s-gold) !important;
        outline: none;
        box-shadow: 0 0 0 3px rgba(245,158,91,.18);
    }

.sx-fnews button {
    background: linear-gradient(135deg, var(--s-emerald) 0%, var(--s-navy-deep) 100%) !important;
    border-radius: 12px !important;
}

    .sx-fnews button:hover {
        filter: brightness(1.1);
    }

/* License card unified */
.sx-license-card {
    background: linear-gradient(135deg, rgba(15,118,110,.18), rgba(245,158,91,.10)) !important;
    border: 1px solid rgba(245,158,91,.28) !important;
    border-radius: 18px !important;
}

    .sx-license-card .sx-lic-title {
        color: #fff !important;
    }

    .sx-license-card .sx-lic-desc {
        color: #a8bdb9 !important;
    }

    .sx-license-card .sx-lic-meta {
        color: #a8bdb9 !important;
    }

        .sx-license-card .sx-lic-meta b {
            color: var(--s-gold-soft) !important;
        }

.sx-lic-btn-primary {
    background: linear-gradient(135deg, var(--s-gold), var(--s-coral)) !important;
    color: #fff !important;
    border: 0;
    box-shadow: 0 10px 22px rgba(247,108,94,.28);
}

.sx-lic-btn-outline {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.25) !important;
}

    .sx-lic-btn-outline:hover {
        background: rgba(255,255,255,.08) !important;
    }

.sx-fbottom {
    border-top-color: rgba(245,158,91,.14) !important;
}

    .sx-fbottom .sx-fbcont {
        color: #8aa19d !important;
    }

    .sx-fbottom a.sx-by {
        color: var(--s-gold-soft) !important;
    }


/* ============================================================
   ISKAN HOME V2 — Section Redesigns
   About / Services / Impact / Media / CTA
   ============================================================ */

/* ---------- About v2 ---------- */
.s-about-v2-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
    grid-template-columns: 1fr;
}

@media(min-width:1024px) {
    .s-about-v2-grid {
        grid-template-columns: 1.05fr 1.15fr;
        gap: 4rem;
    }
}

.s-about-visual {
    position: relative;
}

.s-about-visual-frame {
    position: relative;
    aspect-ratio: 4/4.6;
    border-radius: 28px;
    background: #0B5750;
    overflow: visible;
    box-shadow: 0 30px 80px -30px rgba(11,87,80,.45);
}

.s-about-visual-img {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background-size: cover;
    background-position: center;
    transform: rotate(-1.2deg);
    box-shadow: 0 20px 50px -20px rgba(11,87,80,.55);
}

.s-about-visual-frame::before {
    content: "";
    position: absolute;
    inset: -14px -14px auto auto;
    width: 60%;
    height: 60%;
    border-radius: 28px;
    border: 2px dashed rgba(15,118,110,.35);
    z-index: -1;
}

.s-about-visual-frame::after {
    content: "";
    position: absolute;
    left: -18px;
    bottom: -18px;
    width: 55%;
    height: 35%;
    border-radius: 24px;
    background: linear-gradient(135deg, #F59E5B, #F76C5E);
    opacity: .18;
    z-index: -1;
    filter: blur(2px);
}

.s-about-visual-tag {
    position: absolute;
    top: 18px;
    left: -22px;
    background: #fff;
    padding: .85rem 1.1rem;
    border-radius: 18px;
    box-shadow: 0 18px 40px -16px rgba(11,87,80,.35);
    display: flex;
    align-items: center;
    gap: .75rem;
    z-index: 3;
    border: 1px solid rgba(15,118,110,.12);
}

    .s-about-visual-tag i {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: linear-gradient(135deg, #0F766E, #0B5750);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 1rem;
    }

    .s-about-visual-tag div {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .s-about-visual-tag strong {
        color: #0B5750;
        font-size: .95rem;
        font-weight: 800;
    }

    .s-about-visual-tag span {
        color: #64748b;
        font-size: .78rem;
    }

.s-about-visual-badge {
    position: absolute;
    bottom: 18px;
    right: -22px;
    background: linear-gradient(135deg, #F59E5B, #F76C5E);
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    box-shadow: 0 20px 40px -14px rgba(245,158,91,.55);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    z-index: 3;
    min-width: 180px;
}

.s-about-badge-num {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
}

.s-about-badge-lbl {
    font-size: .78rem;
    opacity: .95;
}

.s-about-visual-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .45;
    z-index: -2;
}

.s-about-visual-orb--teal {
    width: 220px;
    height: 220px;
    background: #0F766E;
    top: -30px;
    right: -40px;
}

.s-about-visual-orb--gold {
    width: 180px;
    height: 180px;
    background: #F59E5B;
    bottom: -40px;
    left: -30px;
}

.s-about-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    margin: 1.5rem 0;
}

@media(min-width:640px) {
    .s-about-pillars {
        grid-template-columns: 1fr 1fr;
    }
}

.s-about-pillar {
    display: flex;
    gap: .85rem;
    padding: 1.1rem 1.15rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15,118,110,.10);
    box-shadow: 0 4px 18px -10px rgba(11,87,80,.12);
    transition: all .35s ease;
}

    .s-about-pillar:hover {
        transform: translateY(-4px);
        border-color: rgba(15,118,110,.28);
        box-shadow: 0 18px 36px -16px rgba(11,87,80,.25);
    }

.s-about-pillar-ico {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(245,158,91,.14));
    color: #0B5750;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}

.s-about-pillar h3 {
    font-size: 1rem;
    font-weight: 800;
    color: #0B5750;
    margin: 0 0 .25rem;
}

.s-about-pillar p {
    font-size: .82rem;
    color: #64748b;
    line-height: 1.65;
    margin: 0;
}

.s-about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.s-about-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #0B5750;
    font-weight: 700;
    font-size: .88rem;
    border-bottom: 2px dashed rgba(15,118,110,.4);
    padding-bottom: 2px;
    transition: all .25s ease;
}

    .s-about-link:hover {
        color: #F59E5B;
        border-color: #F59E5B;
    }

/* ---------- Services v2 ---------- */
.s-services-v2-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.s-services-v2-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media(min-width:768px) {
    .s-services-v2-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(min-width:1024px) {
    .s-services-v2-grid {
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: auto auto;
    }

    .s-svc-card--feature {
        grid-column: span 2;
        grid-row: span 2;
    }
}

.s-svc-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(15,118,110,.10);
    box-shadow: 0 6px 20px -12px rgba(11,87,80,.15);
    transition: all .4s cubic-bezier(.2,.7,.2,1);
    display: block;
    min-height: 240px;
}

    .s-svc-card:hover {
        transform: translateY(-6px);
        border-color: rgba(15,118,110,.3);
        box-shadow: 0 22px 50px -20px rgba(11,87,80,.28);
    }

.s-svc-card-inner {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.s-svc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.s-svc-card-ico {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(245,158,91,.18));
    color: #0B5750;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    transition: all .35s ease;
}

.s-svc-card:hover .s-svc-card-ico {
    background: linear-gradient(135deg, #0F766E, #0B5750);
    color: #fff;
}

.s-svc-card-num {
    font-family: 'Inter','Tajawal',sans-serif;
    font-weight: 800;
    color: rgba(11,87,80,.18);
    font-size: 1.25rem;
    letter-spacing: .05em;
}

.s-svc-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0B5750;
    margin: .25rem 0 .5rem;
}

.s-svc-card p {
    font-size: .85rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0 0 1rem;
    flex: 1;
}

.s-svc-card-cta-sm {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #0F766E;
    font-weight: 700;
    font-size: .85rem;
    margin-top: auto;
    transition: gap .25s ease;
}

.s-svc-card:hover .s-svc-card-cta-sm {
    gap: .7rem;
    color: #F59E5B;
}

/* Feature card */
.s-svc-card--feature {
    min-height: 420px;
    color: #fff;
}

.s-svc-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 1s ease;
}

.s-svc-card--feature:hover .s-svc-card-bg {
    transform: scale(1.12);
}

.s-svc-card-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,87,80,.55) 0%, rgba(11,87,80,.92) 70%, #0B5750 100%);
}

.s-svc-card--feature .s-svc-card-num {
    color: rgba(255,255,255,.35);
    font-size: 1.6rem;
}

.s-svc-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, #F59E5B, #F76C5E);
    color: #fff;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

.s-svc-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: .5rem;
}

.s-svc-card-ico--lg {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 1.6rem;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    margin-bottom: 1rem;
}

.s-svc-card--feature h3 {
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.3;
}

.s-svc-card--feature p {
    color: rgba(255,255,255,.85);
    font-size: .95rem;
}

.s-svc-feat {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

    .s-svc-feat li {
        color: rgba(255,255,255,.9);
        font-size: .85rem;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

        .s-svc-feat li i {
            color: #F59E5B;
        }

.s-svc-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #F59E5B;
    font-weight: 800;
    font-size: .95rem;
    transition: gap .25s ease;
}

.s-svc-card--feature:hover .s-svc-card-cta {
    gap: .85rem;
}

/* ---------- Impact v2 ---------- */
.s-impact-v2-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 3.5rem 2rem;
    box-shadow: 0 40px 80px -30px rgba(4,47,44,.45);
}

.s-impact-v2-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(70% 60% at 100% 0%, rgba(15,118,110,.55), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(245,158,91,.20), transparent 60%), linear-gradient(135deg, #042F2C 0%, #073F39 50%, #0B5750 100%);
}

.s-impact-v2-grid-pattern {
    position: absolute;
    inset: 0;
    opacity: .08;
    z-index: 0;
    background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
}

.s-impact-v2-head {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.s-impact-v2-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    padding: .55rem 1.05rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

    .s-impact-v2-pill i {
        color: #F59E5B;
    }

.s-impact-v2-tiles {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

@media(min-width:768px) {
    .s-impact-v2-tiles {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(min-width:1024px) {
    .s-impact-v2-tiles {
        grid-template-columns: repeat(4,1fr);
    }

    .s-impact-tile--lg {
        grid-column: span 2;
        grid-row: span 2;
    }
}

.s-impact-tile {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    padding: 1.4rem 1.25rem;
    backdrop-filter: blur(12px) saturate(140%);
    transition: all .35s ease;
}

    .s-impact-tile:hover {
        background: rgba(255,255,255,.10);
        transform: translateY(-3px);
        border-color: rgba(245,158,91,.4);
    }

.s-impact-tile-ico {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(245,158,91,.25), rgba(247,108,94,.15));
    color: #F59E5B;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    margin-bottom: .9rem;
}

.s-impact-tile-num {
    font-family: 'Inter','Tajawal',sans-serif;
    font-size: 2.1rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: .4rem;
}

.s-impact-tile-lbl {
    color: rgba(255,255,255,.78);
    font-size: .86rem;
    font-weight: 600;
}

.s-impact-tile-trend {
    margin-top: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: #86efac;
    background: rgba(134,239,172,.10);
    padding: .3rem .65rem;
    border-radius: 999px;
}

.s-impact-tile--lg {
    padding: 2rem 1.75rem;
}

    .s-impact-tile--lg .s-impact-tile-ico {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
        border-radius: 18px;
    }

    .s-impact-tile--lg .s-impact-tile-num {
        font-size: 3.6rem;
    }

    .s-impact-tile--lg .s-impact-tile-lbl {
        font-size: 1rem;
    }

.s-impact-tile--gold {
    background: linear-gradient(135deg, rgba(245,158,91,.18), rgba(247,108,94,.08));
    border-color: rgba(245,158,91,.35);
}

    .s-impact-tile--gold .s-impact-tile-ico {
        background: rgba(255,255,255,.15);
        color: #fff;
    }

.s-impact-v2-foot {
    position: relative;
    z-index: 2;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(255,255,255,.18);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(255,255,255,.75);
    font-size: .85rem;
}

    .s-impact-v2-foot i {
        color: #F59E5B;
        margin-inline-end: .4rem;
    }

.s-impact-v2-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #F59E5B;
    font-weight: 700;
    transition: gap .25s ease;
}

    .s-impact-v2-link:hover {
        gap: .8rem;
        color: #fff;
    }

/* ---------- Media v2 ---------- */
.s-media-v2-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.s-media-v2-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
}

.s-media-v2-tabs {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: #fff;
    padding: .3rem;
    border-radius: 999px;
    border: 1px solid rgba(15,118,110,.12);
    box-shadow: 0 4px 14px -8px rgba(11,87,80,.18);
}

.s-media-tab {
    padding: .45rem 1rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    color: #64748b;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: all .25s ease;
}

    .s-media-tab:hover {
        color: #0B5750;
    }

    .s-media-tab.is-active {
        background: linear-gradient(135deg, #0F766E, #0B5750);
        color: #fff;
    }

.s-media-v2-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media(min-width:1024px) {
    .s-media-v2-grid {
        grid-template-columns: 1.4fr 1fr;
    }
}

.s-media-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 24px;
}

.s-media-card--feature {
    min-height: 520px;
    color: #fff;
    box-shadow: 0 20px 50px -20px rgba(11,87,80,.35);
}

.s-media-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 1s ease;
}

.s-media-card--feature:hover .s-media-card-img {
    transform: scale(1.10);
}

.s-media-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4,47,44,.05) 0%, rgba(4,47,44,.55) 55%, rgba(4,47,44,.94) 100%);
}

.s-media-card-body {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.75rem;
}

.s-media-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .85rem;
}

.s-media-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255,255,255,.18);
    color: #fff;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.22);
}

.s-media-chip--gold {
    background: linear-gradient(135deg,#F59E5B,#F76C5E);
    border-color: transparent;
}

.s-media-chip--ghost {
    background: rgba(15,118,110,.10);
    color: #0B5750;
    border: 1px solid rgba(15,118,110,.18);
    backdrop-filter: none;
}

.s-media-card-title {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.35;
    color: #fff;
    margin: 0 0 .65rem;
}

.s-media-card-desc {
    color: rgba(255,255,255,.85);
    font-size: .95rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.s-media-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    color: rgba(255,255,255,.75);
    font-size: .82rem;
}

    .s-media-card-meta i {
        color: #F59E5B;
        margin-inline-end: .35rem;
    }

.s-media-card-cta {
    margin-inline-start: auto;
    color: #F59E5B;
    font-weight: 800;
}

.s-media-v2-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.s-media-card--side {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    background: #fff;
    border: 1px solid rgba(15,118,110,.10);
    border-radius: 18px;
    padding: .85rem;
    position: relative;
    transition: all .35s ease;
}

    .s-media-card--side:hover {
        transform: translateX(-4px);
        border-color: rgba(15,118,110,.3);
        box-shadow: 0 16px 34px -18px rgba(11,87,80,.25);
    }

.s-media-card-thumb {
    flex-shrink: 0;
    width: 120px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

.s-media-card-side-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    justify-content: center;
}

    .s-media-card-side-body h4 {
        font-size: .98rem;
        font-weight: 800;
        color: #0B5750;
        line-height: 1.5;
        margin: 0;
    }

.s-media-card-side-meta {
    color: #64748b;
    font-size: .78rem;
}

    .s-media-card-side-meta i {
        color: #0F766E;
        margin-inline-end: .3rem;
    }

.s-media-card-arrow {
    align-self: center;
    color: #0F766E;
    opacity: .4;
    transition: all .3s ease;
}

.s-media-card--side:hover .s-media-card-arrow {
    opacity: 1;
    color: #F59E5B;
    transform: translateX(-4px);
}

/* ---------- CTA v2 ---------- */
.s-cta-v2-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: 3.5rem 2.5rem;
    box-shadow: 0 50px 100px -40px rgba(4,47,44,.55);
}

.s-cta-v2-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(80% 70% at 100% 0%, rgba(245,158,91,.30), transparent 60%), radial-gradient(80% 80% at 0% 100%, rgba(15,118,110,.50), transparent 60%), linear-gradient(135deg, #042F2C 0%, #0B5750 60%, #073F39 100%);
}

.s-cta-v2-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .08;
    background-image: radial-gradient(circle at 25% 25%, #fff 1px, transparent 1.5px), radial-gradient(circle at 75% 75%, #fff 1px, transparent 1.5px);
    background-size: 36px 36px;
}

.s-cta-v2-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
}

.s-cta-v2-orb--a {
    width: 300px;
    height: 300px;
    background: #F59E5B;
    opacity: .35;
    top: -60px;
    left: -60px;
}

.s-cta-v2-orb--b {
    width: 280px;
    height: 280px;
    background: #0F766E;
    opacity: .55;
    bottom: -80px;
    right: -40px;
}

.s-cta-v2-grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 2.5rem;
    align-items: center;
    grid-template-columns: 1fr;
}

@media(min-width:1024px) {
    .s-cta-v2-grid {
        grid-template-columns: 1.15fr 1fr;
        gap: 3rem;
    }
}

.s-cta-v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 1.75rem;
}

.s-cta-v2-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: rgba(255,255,255,.7);
    font-size: .82rem;
}

    .s-cta-v2-trust i {
        color: #F59E5B;
        margin-inline-end: .35rem;
    }

.s-cta-v2-cards {
    display: grid;
    gap: .85rem;
}

.s-cta-mini {
    display: block;
    padding: 1.15rem 1.25rem;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(12px) saturate(140%);
    color: #fff;
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}

    .s-cta-mini:hover {
        transform: translateX(-6px);
        background: rgba(255,255,255,.13);
        border-color: rgba(245,158,91,.45);
    }

.s-cta-mini-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245,158,91,.3), rgba(247,108,94,.18));
    color: #F59E5B;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    margin-bottom: .65rem;
}

.s-cta-mini h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .2rem;
}

.s-cta-mini p {
    font-size: .82rem;
    color: rgba(255,255,255,.7);
    margin: 0 0 .55rem;
}

.s-cta-mini-price {
    display: inline-block;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(245,158,91,.2);
    color: #F59E5B;
    font-size: .78rem;
    font-weight: 800;
}

.s-cta-mini--gold {
    background: linear-gradient(135deg, rgba(245,158,91,.25), rgba(247,108,94,.15));
    border-color: rgba(245,158,91,.4);
}

    .s-cta-mini--gold .s-cta-mini-ico {
        background: rgba(255,255,255,.18);
        color: #fff;
    }

    .s-cta-mini--gold .s-cta-mini-price {
        background: rgba(255,255,255,.15);
        color: #fff;
    }


/* ============================================================
   V3 SECTION OVERRIDES — About / Projects / Media
   ============================================================ */

/* ---------- About v3 ---------- */
.s-about-v3 {
    background: var(--s-cream, #F7F5F0);
    position: relative;
    overflow: hidden;
}

    .s-about-v3::before {
        content: "";
        position: absolute;
        inset: auto -10% -40% auto;
        width: 520px;
        height: 520px;
        background: radial-gradient(circle, rgba(15,118,110,.08), transparent 65%);
        pointer-events: none;
    }

.s-about-v3-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: center;
}

@media (max-width: 1023px) {
    .s-about-v3-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.s-about-v3-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
}

@media (max-width: 640px) {
    .s-about-v3-list {
        grid-template-columns: 1fr;
    }
}

.s-about-v3-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.s-about-v3-list strong {
    display: block;
    color: var(--s-deep, #0B5750);
    font-weight: 800;
    margin-bottom: 2px;
    font-size: 15px;
}

.s-about-v3-list p {
    color: #5b6b73;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
}

.s-about-v3-bul {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(245,158,91,.12));
    color: var(--s-teal, #0F766E);
    font-size: 14px;
    border: 1px solid rgba(15,118,110,.18);
}

.s-about-v3-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* visual collage */
.s-about-v3-visual {
    position: relative;
    height: 540px;
}

@media (max-width: 1023px) {
    .s-about-v3-visual {
        height: 460px;
    }
}

.s-about-v3-card {
    position: absolute;
    background-size: cover;
    background-position: center;
    border-radius: 22px;
    box-shadow: 0 30px 60px -25px rgba(11,87,80,.35);
}

.s-about-v3-card--main {
    inset: 0 0 60px 100px;
    border: 6px solid #fff;
}

.s-about-v3-card--sub {
    width: 180px;
    height: 180px;
    bottom: 0;
    right: 0;
    border: 6px solid #fff;
    transform: rotate(-3deg);
}

@media (max-width: 1023px) {
    .s-about-v3-card--main {
        inset: 0 0 50px 50px;
    }

    .s-about-v3-card--sub {
        width: 140px;
        height: 140px;
    }
}

.s-about-v3-since {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(11,87,80,.92);
    color: #fff;
    padding: 10px 16px;
    border-radius: 14px;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    border: 1px solid rgba(255,255,255,.18);
}

    .s-about-v3-since .num {
        font-weight: 900;
        font-size: 22px;
    }

    .s-about-v3-since .lbl {
        font-size: 11px;
        opacity: .85;
        margin-top: 4px;
    }

.s-about-v3-stat {
    position: absolute;
    bottom: 24px;
    left: -16px;
    z-index: 3;
    background: #fff;
    border-radius: 18px;
    padding: 14px 18px;
    box-shadow: 0 20px 45px -15px rgba(11,87,80,.35);
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(15,118,110,.12);
}

.s-about-v3-stat-ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #F59E5B, #F76C5E);
    color: #fff;
    font-size: 18px;
}

.s-about-v3-stat-num {
    font-weight: 900;
    font-size: 22px;
    color: var(--s-deep,#0B5750);
    line-height: 1;
}

.s-about-v3-stat-lbl {
    font-size: 12px;
    color: #5b6b73;
    margin-top: 4px;
}

.s-about-v3-dot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.s-about-v3-dot--a {
    width: 90px;
    height: 90px;
    top: -30px;
    left: -30px;
    background: radial-gradient(circle, rgba(245,158,91,.25), transparent 70%);
}

.s-about-v3-dot--b {
    width: 140px;
    height: 140px;
    bottom: -40px;
    right: -40px;
    background: radial-gradient(circle, rgba(15,118,110,.18), transparent 70%);
}

/* hide old v2 about */
.s-about-v2 {
    display: none !important;
}

/* ---------- Projects v2 ---------- */
.s-projects-v2 {
    background: #fff;
}

.s-proj-v2 {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(15,118,110,.10);
    box-shadow: 0 10px 30px -18px rgba(11,87,80,.18);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    display: flex;
    flex-direction: column;
}

    .s-proj-v2:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 50px -20px rgba(11,87,80,.30);
        border-color: rgba(15,118,110,.22);
    }

.s-proj-v2-media {
    position: relative;
    height: 220px;
    background-size: cover;
    background-position: center;
}

    .s-proj-v2-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(11,47,44,.10) 0%, rgba(11,47,44,.55) 100%);
    }

.s-proj-v2-tag, .s-proj-v2-status {
    position: absolute;
    top: 14px;
    z-index: 2;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.s-proj-v2-tag {
    right: 14px;
    background: rgba(255,255,255,.92);
    color: var(--s-deep,#0B5750);
    border: 1px solid rgba(15,118,110,.18);
}

    .s-proj-v2-tag i {
        color: var(--s-teal,#0F766E);
    }

.s-proj-v2-status {
    left: 14px;
    color: #fff;
    background: rgba(15,118,110,.85);
    border: 1px solid rgba(255,255,255,.25);
}

    .s-proj-v2-status.is-soon {
        background: rgba(245,158,91,.92);
    }

.s-proj-v2-progress {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    height: 6px;
    z-index: 2;
    background: rgba(255,255,255,.25);
    border-radius: 999px;
    overflow: hidden;
}

    .s-proj-v2-progress > span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #F59E5B, #FFD89B);
        border-radius: 999px;
    }

.s-proj-v2-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

    .s-proj-v2-body h3 {
        color: var(--s-deep,#0B5750);
        font-weight: 800;
        font-size: 18px;
    }

    .s-proj-v2-body p {
        color: #5b6b73;
        font-size: 14px;
        line-height: 1.8;
        margin: 0;
    }

.s-proj-v2-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #5b6b73;
    margin-top: 4px;
}

    .s-proj-v2-meta i {
        color: var(--s-teal,#0F766E);
        margin-left: 4px;
    }

    .s-proj-v2-meta .dot {
        opacity: .4;
    }

.s-proj-v2-pct {
    margin-inline-start: auto;
    font-weight: 800;
    color: var(--s-teal,#0F766E);
    background: rgba(15,118,110,.10);
    padding: 3px 10px;
    border-radius: 999px;
}

.s-proj-v2-cta {
    margin-top: 14px;
    align-self: flex-start;
    color: var(--s-teal,#0F766E);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px dashed rgba(15,118,110,.25);
    width: 100%;
    justify-content: space-between;
    transition: color .25s ease;
}

    .s-proj-v2-cta:hover {
        color: #F76C5E;
    }

    .s-proj-v2-cta i {
        transition: transform .25s ease;
    }

    .s-proj-v2-cta:hover i {
        transform: translateX(-4px);
    }

/* ---------- Media v3 — newsroom v4 ---------- */
.s-media-v3 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #F5FBF9 48%, #FFFFFF 100%);
}

    .s-media-v3::before {
        content: "";
        position: absolute;
        inset: 48px 0 auto 0;
        height: 360px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(15,118,110,.08) 1px, transparent 1px), linear-gradient(180deg, rgba(15,118,110,.08) 1px, transparent 1px);
        background-size: 56px 56px;
        opacity: .45;
        mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    }

    .s-media-v3 .s-container {
        position: relative;
        z-index: 1;
    }

.s-media-v3-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 34px;
}

.s-media-v3-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    color: #063F3B;
    background: #fff;
    border: 1px solid rgba(15,118,110,.18);
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 14px 32px -24px rgba(11,87,80,.42);
    transition: transform .25s ease, color .25s ease, border-color .25s ease;
}

    .s-media-v3-all:hover {
        transform: translateY(-2px);
        color: #F76C5E;
        border-color: rgba(247,108,94,.28);
    }

.s-media-v3-newsroom {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, .85fr);
    gap: 26px;
    align-items: stretch;
}

.s-media-v3-feature {
    display: grid;
    grid-template-columns: minmax(330px, .95fr) minmax(0, 1.05fr);
    min-height: 430px;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15,118,110,.14);
    box-shadow: 0 32px 70px -42px rgba(4,47,44,.50);
    transition: transform .35s ease, box-shadow .35s ease;
}

    .s-media-v3-feature:hover {
        transform: translateY(-4px);
        box-shadow: 0 42px 86px -44px rgba(4,47,44,.58);
    }

.s-media-v3-feature-img {
    position: relative;
    min-height: 100%;
    background-size: cover;
    background-position: center;
}

    .s-media-v3-feature-img::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(4,47,44,.18), rgba(4,47,44,.03));
    }

.s-media-v3-feature-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px;
    color: #10211F;
}

.s-media-v3-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.s-media-v3-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #EEF7F5;
    color: #064E47;
    border: 1px solid rgba(15,118,110,.14);
    font-size: 11px;
    font-weight: 900;
}

.s-media-v3-chip--gold {
    background: linear-gradient(135deg, #FFF2DF, #FFE4C4);
    color: #9A4F13;
    border-color: rgba(245,158,91,.30);
}

.s-media-v3-feature-body h3 {
    margin: 0 0 14px;
    color: #10211F;
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
}

.s-media-v3-feature-body p {
    margin: 0 0 24px;
    color: #50615E;
    font-size: 15.5px;
    line-height: 1.9;
    max-width: 560px;
}

.s-media-v3-feature-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(15,118,110,.12);
    color: #63736F;
    font-size: 12.5px;
}

    .s-media-v3-feature-foot i {
        margin-left: 5px;
        color: #0F766E;
    }

.s-media-v3-read {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #063F3B;
    color: #fff;
    font-weight: 900;
}

.s-media-v3-briefs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 28px;
    background: #063F3B;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 28px 62px -44px rgba(4,47,44,.70);
}

.s-media-v3-briefs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

    .s-media-v3-briefs-head span {
        color: rgba(255,255,255,.72);
        font-size: 12px;
        font-weight: 800;
    }

    .s-media-v3-briefs-head strong {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,.10);
        color: #FFC07A;
        font-size: 18px;
    }

.s-media-v3-brief {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 15px 4px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    transition: transform .25s ease;
}

    .s-media-v3-brief:last-child {
        border-bottom: 0;
    }

    .s-media-v3-brief:hover {
        transform: translateX(-4px);
    }

.s-media-v3-date {
    width: 58px;
    min-height: 66px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
}

    .s-media-v3-date b {
        color: #FFC07A;
        font-size: 22px;
        line-height: 1;
    }

    .s-media-v3-date small {
        color: rgba(255,255,255,.66);
        font-size: 11px;
        margin-top: 5px;
    }

.s-media-v3-kicker {
    color: #FFC07A;
    font-size: 11px;
    font-weight: 900;
}

.s-media-v3-brief h4 {
    margin: 3px 0 5px;
    color: #fff;
    font-size: 15.5px;
    font-weight: 900;
    line-height: 1.55;
}

.s-media-v3-brief p {
    margin: 0;
    color: rgba(255,255,255,.66);
    font-size: 12px;
    line-height: 1.7;
}

.s-media-v3-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.s-media-v3-item {
    display: grid;
    grid-template-columns: 150px 1fr;
    overflow: hidden;
    min-height: 156px;
    background: #fff;
    border: 1px solid rgba(15,118,110,.13);
    border-radius: 24px;
    box-shadow: 0 18px 44px -34px rgba(11,87,80,.38);
    transition: transform .28s ease, box-shadow .28s ease;
}

    .s-media-v3-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 26px 58px -34px rgba(11,87,80,.46);
    }

.s-media-v3-item-img {
    position: relative;
    min-height: 100%;
    background-size: cover;
    background-position: center;
}

    .s-media-v3-item-img::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 40%, rgba(4,47,44,.32));
    }

.s-media-v3-item-play {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: #0F766E;
    box-shadow: 0 14px 28px rgba(4,47,44,.22);
}

.s-media-v3-item-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
}

.s-media-v3-item-cat {
    align-self: flex-start;
    position: static;
    padding: 5px 10px;
    border-radius: 999px;
    background: #EEF7F5;
    color: #064E47;
    font-size: 10.5px;
    font-weight: 900;
}

.s-media-v3-item-cat--gold {
    background: #FFF0DD;
    color: #9A4F13;
}

.s-media-v3-item-body h4 {
    margin: 0;
    color: #10211F;
    font-size: 15.5px;
    font-weight: 900;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.s-media-v3-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #71817D;
    font-size: 11.5px;
}

    .s-media-v3-item-meta i {
        margin-left: 4px;
        color: #0F766E;
    }

.s-media-v2 {
    display: none !important;
}

@media (max-width: 1180px) {
    .s-media-v3-newsroom {
        grid-template-columns: 1fr;
    }

    .s-media-v3-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .s-media-v3-head {
        align-items: flex-start;
    }

    .s-media-v3-feature {
        grid-template-columns: 1fr;
    }

    .s-media-v3-feature-img {
        min-height: 260px;
    }

    .s-media-v3-feature-body {
        padding: 26px;
    }

    .s-media-v3-feature-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .s-media-v3-read {
        margin-inline-start: 0;
    }

    .s-media-v3-item {
        grid-template-columns: 120px 1fr;
        min-height: 140px;
    }
}

@media (max-width: 520px) {
    .s-media-v3-brief {
        grid-template-columns: 1fr;
    }

    .s-media-v3-item {
        grid-template-columns: 1fr;
    }

    .s-media-v3-item-img {
        min-height: 180px;
    }
}

/* ============ Brand logo (header/footer) ============ */
.s-brand-logo {
    height: 54px;
    width: auto;
    max-width: 280px;
    display: block;
    object-fit: contain;
}

.s-brand-logo--mobile {
    height: 46px;
}

.s-brand-logo--footer {
    height: 66px;
    max-width: 300px;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}

@media (max-width: 720px) {
    .s-brand-logo {
        height: 44px;
    }
}

/* ============ Media v3 — feature slider (full-bleed) ============ */
.s-media-v3-newsroom {
    align-items: stretch;
}

.s-media-v3-feature.s-media-v3-slider {
    display: block;
    grid-template-columns: none;
    padding: 0;
    min-height: 520px;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
}

.s-media-v3-slider {
    position: relative;
    height: 100%;
}

.s-media-v3-slides {
    position: relative;
    display: block;
    min-height: 520px;
    height: 100%;
}

.s-media-v3-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.04);
    transition: opacity .8s ease, transform 1.2s ease, visibility .8s;
    display: block;
    min-height: 520px;
}

    .s-media-v3-slide.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: scale(1);
        z-index: 1;
    }

.s-media-v3-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 38px 38px 76px;
    color: #fff;
    background: linear-gradient(180deg, rgba(4,47,44,0) 35%, rgba(4,47,44,.55) 65%, rgba(4,47,44,.92) 100%);
}

    .s-media-v3-slide-overlay .s-media-v3-chips {
        margin-bottom: 16px;
    }

    .s-media-v3-slide-overlay .s-media-v3-chip {
        background: rgba(255,255,255,.16);
        color: #fff;
        border-color: rgba(255,255,255,.28);
        backdrop-filter: blur(6px);
    }

    .s-media-v3-slide-overlay .s-media-v3-chip--gold {
        background: linear-gradient(135deg,#FFD89A,#FFC07A);
        color: #3a1f06;
        border-color: transparent;
    }

    .s-media-v3-slide-overlay h3 {
        margin: 0 0 12px;
        color: #fff;
        font-size: clamp(22px, 2.2vw, 32px);
        font-weight: 900;
        line-height: 1.4;
        text-shadow: 0 2px 18px rgba(0,0,0,.35);
        max-width: 640px;
    }

    .s-media-v3-slide-overlay p {
        margin: 0 0 22px;
        color: rgba(255,255,255,.88);
        font-size: 14.5px;
        line-height: 1.85;
        max-width: 560px;
        text-shadow: 0 1px 10px rgba(0,0,0,.35);
    }

    .s-media-v3-slide-overlay .s-media-v3-feature-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
        padding-top: 18px;
        border-top: 1px solid rgba(255,255,255,.18);
        color: rgba(255,255,255,.78);
        font-size: 12.5px;
    }

        .s-media-v3-slide-overlay .s-media-v3-feature-foot i {
            color: #FFC07A;
            margin-left: 5px;
        }

    .s-media-v3-slide-overlay .s-media-v3-read {
        margin-inline-start: auto;
        background: #fff;
        color: #063F3B;
        box-shadow: 0 12px 30px -10px rgba(0,0,0,.45);
    }

/* Dots — bottom centered inside slider */
.s-media-v3-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 5;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(4,47,44,.45);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.22);
}

    .s-media-v3-dots button {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        background: rgba(255,255,255,.45);
        transition: all .3s ease;
    }

        .s-media-v3-dots button:hover {
            background: rgba(255,255,255,.78);
        }

        .s-media-v3-dots button.is-active {
            width: 28px;
            border-radius: 6px;
            background: linear-gradient(90deg,#fff,#FFC07A);
        }

@media (max-width: 860px) {
    .s-media-v3-feature.s-media-v3-slider, .s-media-v3-slides, .s-media-v3-slide {
        min-height: 440px;
    }

    .s-media-v3-slide-overlay {
        padding: 24px 22px 70px;
    }
}

/* ============ Briefs — match slider height ============ */
.s-media-v3-briefs {
    height: 100%;
    min-height: 520px;
}

    .s-media-v3-briefs .s-media-v3-brief {
        flex: 1;
        align-items: center;
    }

.s-media-v3-brief {
    grid-template-columns: 80px 1fr !important;
}

.s-media-v3-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 18px;
    overflow: hidden;
    background: #0a4a45 center/cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px -14px rgba(0,0,0,.45);
}

    .s-media-v3-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(4,47,44,0) 40%, rgba(4,47,44,.55));
    }

.s-media-v3-thumb-tag {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #FFC07A;
    color: #3a1f06;
    font-style: normal;
    font-size: 11px;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

.s-media-v3-thumb-tag--play {
    background: #fff;
    color: #0F766E;
    border-radius: 50%;
}

.s-media-v3-brief-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: rgba(255,255,255,.62);
    font-size: 11.5px;
}

    .s-media-v3-brief-meta i {
        color: #FFC07A;
    }

@media (max-width: 520px) {
    .s-media-v3-brief {
        grid-template-columns: 64px 1fr !important;
    }

    .s-media-v3-thumb {
        width: 64px;
        height: 64px;
    }

    .s-media-v3-briefs {
        min-height: auto;
    }
}
.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;
    }