/* =====================================================================
 * EduPath — تطبيق الهوية الرسمية (Brand Identity System v2.0 · 2026)
 *
 * هذا الملف لا يعرّف ألوانًا جديدة: يربط متغيرات الموقع القائمة بالرموز
 * الرسمية المعرّفة في brand-tokens.css (المنسوخ حرفيًا من حزمة الهوية).
 * أي تعديل لوني مستقبلي يجب أن يبدأ من brand-tokens.css لا من هنا.
 *
 * الألوان الأساسية:  Teal #0D7D74 · Ink #16303A · Deep #0C2229
 * الخطوط: Poppins/Inter (لاتيني) · Tajawal/IBM Plex Sans Arabic (عربي)
 * ===================================================================== */

:root {
    /* ---- ربط متغيرات الموقع القديمة بالرموز الرسمية ---- */
    --primary-color: var(--ep-brand);          /* #0d7d74 */
    --primary-dark:  var(--ep-brand-dark);     /* #0a5f58 */
    --primary-light: var(--ep-teal-100);
    --secondary-color: var(--ep-primary);

    --ink:    var(--ep-primary);               /* #16303a — نصوص ثقيلة */
    --ink-2:  var(--ep-teal-800);
    --dark-color:  var(--ep-text);
    --muted-color: var(--ep-text-muted);
    --light-color: var(--ep-neutral-25);

    --pearl:  var(--ep-bg);                    /* #eef2f3 — أرضية الصفحة */
    --card-w: var(--ep-surface);
    --surface: var(--ep-surface);
    --line-c: var(--ep-border);
    --border-color: var(--ep-border);

    /* الأسطح الداكنة: تدرّج من الحبر إلى العمق (هوية v2) */
    --ink-surface: linear-gradient(158deg, var(--ep-neutral-800) 0%, var(--ep-teal-800) 52%, var(--ep-dark) 100%);

    /* نص فوق الأسطح الداكنة */
    --tx-inv:  #ffffff;
    --tx-inv2: var(--ep-neutral-300);

    /* اللكنات: الهوية الجديدة تعتمد العنبر warm accent، ولا أحمر بحرينيًا */
    --amber:        var(--ep-warning);         /* #c2860f */
    --accent-red:   var(--ep-error);           /* #c0503f — للأفعال الحرجة فقط */
    --accent-red-2: var(--ep-error-text);

    /* حالات النظام */
    --success-color: var(--ep-success);
    --warning-color: var(--ep-warning);
    --danger-color:  var(--ep-error);
    --info-color:    var(--ep-info);

    /* الاستدارة والظلال من رموز الهوية */
    --radius-sm: var(--ep-radius-sm);
    --radius-md: var(--ep-radius-md);
    --radius-lg: var(--ep-radius-lg);
    --shadow-sm: var(--ep-shadow-sm);
    --shadow-md: var(--ep-shadow-md);
    --shadow-lg: var(--ep-shadow-lg);
}

/* ---------- الطباعة ---------- */
body {
    background: var(--ep-bg);
    color: var(--ep-text);
    font-family: var(--ep-font-body);
}
html[dir="rtl"] body { font-family: var(--ep-font-ar-body); }

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--ep-font-display);
    letter-spacing: -.01em;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .display-1, html[dir="rtl"] .display-2, html[dir="rtl"] .display-3,
html[dir="rtl"] .display-4, html[dir="rtl"] .display-5, html[dir="rtl"] .display-6 {
    font-family: var(--ep-font-ar-display);
    letter-spacing: 0;                 /* العربية لا تُضيَّق حروفها */
}

/* ---------- الشعار ---------- */
/* قاعدة الهوية: مساحة فراغ حول الشعار = عرض ساق العلامة (17.9% من ارتفاعها) */
.snb-brand img, .navbar-brand img, .sidebar-brand img, .portal-brand img {
    height: 38px; width: auto; padding-inline: .18em;
}
.site-footer .footer-logo img { height: 42px; width: auto; }

/* ---------- الأزرار ---------- */
.btn-primary, .snb-btn-fill {
    background: var(--ep-brand) !important;
    border-color: var(--ep-brand) !important;
    color: #fff !important;
    border-radius: var(--ep-radius-md);
    font-weight: 600;
    box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus,
.snb-btn-fill:hover, .snb-btn-fill:focus {
    background: var(--ep-brand-dark) !important;
    border-color: var(--ep-brand-dark) !important;
}
.btn-outline-primary, .snb-btn-ghost {
    color: var(--ep-brand-text) !important;
    border-color: var(--ep-border) !important;
    background: var(--ep-surface) !important;
    border-radius: var(--ep-radius-md);
    font-weight: 600;
}
.btn-outline-primary:hover, .snb-btn-ghost:hover {
    background: var(--ep-teal-50) !important;
    border-color: var(--ep-brand) !important;
    color: var(--ep-brand-dark) !important;
}
.btn-gradient {
    background: var(--ep-brand) !important;
    box-shadow: var(--ep-shadow-sm);
}
.btn-gradient:hover, .btn-gradient:focus { background: var(--ep-brand-dark) !important; }

/* حلقة التركيز الرسمية — مطلب الوصولية في دليل الهوية */
a:focus-visible, button:focus-visible,
.form-control:focus, .form-select:focus, input:focus-visible, select:focus-visible {
    outline: none;
    box-shadow: var(--ep-focus-ring) !important;
    border-color: var(--ep-brand) !important;
}

/* ---------- الروابط والنصوص ---------- */
a { color: var(--ep-brand-text); }
a:hover { color: var(--ep-brand-dark); }
.text-primary { color: var(--ep-brand-text) !important; }
.bg-primary { background: var(--ep-primary) !important; }
.badge.bg-primary { background: var(--ep-primary) !important; }

/* ---------- الترويسة ---------- */
body .site-navbar {
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid var(--ep-border) !important;
    backdrop-filter: blur(14px);
}
body .snb-link { color: var(--ep-text-muted) !important; font-weight: 600; }
body .snb-link:hover, body .snb-link.snb-active { color: var(--ep-text) !important; }
body .snb-link::after { background: var(--ep-brand) !important; }
body .snb-lang { border-color: var(--ep-border) !important; color: var(--ep-text) !important; background: var(--ep-surface) !important; }

/* ---------- الأسطح الداكنة ---------- */
.hero-pro, .page-header.bg-light, section.bg-primary,
.advanced-search-hero, .map-page-hero, .cta-pro, .site-footer, .footer {
    background: var(--ink-surface) !important;
}
.hero-pro h1, .page-header.bg-light h1, section.bg-primary h1,
.advanced-search-hero h1, .map-page-hero h1,
section.bg-primary h2, section.bg-primary h3 { color: #fff !important; }
section.bg-primary p, section.bg-primary .lead,
.page-header.bg-light .lead { color: var(--ep-neutral-300) !important; }

/* ---------- البطاقات ---------- */
.card, .school-card, .dash-card, .journey-card {
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-lg);
    box-shadow: var(--ep-shadow-xs);
}
.card:hover, .school-card:hover { box-shadow: var(--ep-shadow-md); }

/* ---------- حركة تحترم تفضيل المستخدم ---------- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =====================================================================
 * جولة التصميم 1 — قرارات Codex (DESIGN-COLLAB.md §4 و§5)
 * الاتجاه: «استشارة قرار عائلي هادئة» — نضج بالمساحة لا بالزخرفة.
 * ===================================================================== */

/* ---------- 1) توحيد الاستدارات على قيم الهوية الخمس ---------- */
/* أزرار وحقول: 6px */
.btn, .btn-lg, .btn-sm, .btn-pill,
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="number"], input[type="search"], textarea, select {
    border-radius: 6px !important;
}
/* بطاقات وصور: 10px */
.card, .school-card, .dash-card, .journey-card, .stage-card,
.education-stage-card, .listing-filter-card, .stat-tile,
.card img, .school-card img, .stage-cover, .feature-card, .step-card {
    border-radius: 10px !important;
}
/* لوحة وظيفية كبيرة: 16px */
.fees-calc-card, .attention-clear {
    border-radius: 16px !important;
}
/* طبقات كبيرة فقط: 24px */
.modal-content, .offcanvas {
    border-radius: 24px !important;
}
/* شارة قصيرة فقط: 999px */
.badge, .eyebrow, .trust-chip, .school-tag, .badge-featured, .stat-chip {
    border-radius: 999px !important;
}
/* الدائرة الكاملة: للصور الرمزية والأزرار الدائرية الحقيقية فقط */
.avatar, .reviewer-avatar, .sf-avatar, .tn-avatar, #backToTop, .btn-circle {
    border-radius: 50% !important;
}

/* ---------- 2) الظلال: للعائم فقط ---------- */
/* البطاقة الساكنة: حدّ رفيع مشتق من الحبر، بلا ظل */
.card, .school-card, .dash-card, .journey-card, .stage-card,
.education-stage-card, .feature-card, .step-card, .stat-tile,
.listing-filter-card, .fees-calc-card, .section-card, .info-box {
    box-shadow: none !important;
    border: 1px solid rgba(22, 48, 58, .10);
}
.card:hover, .school-card:hover, .education-stage-card:hover,
.stage-card:hover, .feature-card:hover {
    box-shadow: none !important;
    border-color: rgba(13, 125, 116, .35);
    transform: translateY(-2px);
}
/* العائم فعلاً يحتفظ بظلّه */
.dropdown-menu, .modal-content, .offcanvas,
.compare-sidebar, .snb-mega, .notif-panel, .tn-dropdown {
    box-shadow: var(--ep-shadow-lg) !important;
}

/* ---------- 3) العنوان الرئيسي: بلا وزن 800 ---------- */
.hero-pro-title, h1, .display-4, .display-5 {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 600;
    line-height: 1.08;
}
html[dir="rtl"] .hero-pro-title,
html[dir="rtl"] h1,
html[dir="rtl"] .display-4,
html[dir="rtl"] .display-5 {
    font-weight: 700;
    line-height: 1.16;
}

/* ---------- 4) إيقاع المسافات ---------- */
section { padding-block: 96px; }
@media (max-width: 992px) { section { padding-block: 64px; } }
@media (max-width: 576px)  { section { padding-block: 48px; } }
.card, .school-card, .fees-calc-card, .listing-filter-card { padding: 24px; }
@media (min-width: 992px) { .fees-calc-card { padding: 32px; } }

/* ---------- 5) إزالة الزخرفة العائمة ---------- */
.hero-blob, .hero-blob-1, .hero-blob-2,
.hero-shape, .hero-shape.s1, .hero-shape.s2 { display: none !important; }
.hero-pro::before, .page-header.bg-light::before,
.map-page-hero::before, .advanced-search-hero::before,
.e404-wrap::before { display: none !important; }
.hero-pro::after, .page-header.bg-light::after,
.map-page-hero::after, .advanced-search-hero::after,
.e404-wrap::after { display: none !important; }
/* الحركة: دخول هادئ فقط */
.school-logo-large, .login-header img { animation: none !important; }

/* ---------- 6) تباين إلزامي على الأسطح الداكنة ---------- */
/* لا يظهر Ink فوق Deep إطلاقاً */
.hero-pro, .hero-pro *,
.page-header.bg-light, .page-header.bg-light *,
section.bg-primary, section.bg-primary * {
    --dark-color: #ffffff;
}
/* ---------- 7) شريط الخدمات: البحث خارج البطل ---------- */
.service-bar {
    background: var(--ep-surface);
    border-bottom: 1px solid var(--ep-border);
    padding-block: 24px !important;
}
.service-search {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.service-search-label {
    font-weight: 600; color: var(--ep-text-muted);
    font-size: .95rem; margin: 0; white-space: nowrap;
}
.service-search-field { display: flex; gap: 8px; flex: 1; min-width: 280px; }
.service-search-field .form-control {
    border: 1px solid var(--ep-border); background: var(--ep-neutral-25);
}
.service-search-field .btn { white-space: nowrap; padding-inline: 24px; }
@media (max-width: 576px) {
    .service-search { gap: 12px; }
    .service-search-field { min-width: 100%; }
}

/* ---------- 8) شريط الأدلة: صف بفواصل رفيعة ---------- */
.evidence-bar { padding-block: 56px !important; }
.evidence-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--ep-border);
    border-radius: 10px;
    background: var(--ep-surface);
    overflow: hidden;
}
.evidence-item {
    padding: 28px 24px;
    border-inline-start: 1px solid var(--ep-border);
    display: flex; flex-direction: column; gap: 6px;
}
.evidence-item:first-child { border-inline-start: 0; }
.evidence-figure {
    font-family: var(--ep-font-display);
    font-size: 2rem; font-weight: 600; line-height: 1;
    color: var(--ep-text); font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .evidence-figure { font-family: var(--ep-font-ar-display); font-weight: 700; }
.evidence-label { color: var(--ep-text-muted); font-size: .92rem; line-height: 1.6; }
@media (max-width: 768px) {
    .evidence-row { grid-template-columns: 1fr; }
    .evidence-item { border-inline-start: 0; border-top: 1px solid var(--ep-border); }
    .evidence-item:first-child { border-top: 0; }
}

/* ---------- 9) الرابط الثانوي الهادئ في البطل ---------- */
.hero-secondary-link {
    align-self: center;
    color: var(--ep-neutral-300);
    font-weight: 600; font-size: .98rem;
    text-decoration: underline; text-underline-offset: 4px;
    padding-inline: 8px;
}
.hero-secondary-link:hover { color: #fff; }

/* ---------- 10) بطاقات المراحل بلا مربع أيقونة ---------- */
.education-stage-card { padding: 0 !important; overflow: hidden; }
.education-stage-card .stage-cover {
    /* Codex جولة 2، قرار ب: 16:9 بدل ارتفاع ثابت 120px الذي كان يقصّ ثلثي الصورة */
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
    margin: 0 !important;
}
.education-stage-card picture { display: block; }
.education-stage-card h4 {
    font-size: 1.15rem; margin: 20px 24px 6px;
}
.education-stage-card p { margin: 0 24px 24px; font-size: .93rem; line-height: 1.7; }

/* ---------- 11) البطل: توزيع 7/5 وهدوء الإجراءات ---------- */
.hero-pro { padding-block: 96px 88px; }
.hero-pro .eyebrow {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: var(--ep-teal-200) !important;
    font-weight: 600;
}
.hero-pro .trust-chip {
    background: transparent; border: 1px solid rgba(255,255,255,.16);
    color: var(--ep-neutral-300); padding: 6px 14px; font-weight: 500;
}
.hero-pro .btn-gradient, .hero-pro .btn-primary { padding: 14px 30px; font-size: 1.02rem; }

/* ============================================================
   جولة 1 — البند 7: مسار القرار المرقّم (بدل ثلاث بطاقات خطوات)
   ============================================================ */
.decision-path {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}
.decision-step {
    position: relative;
    padding-inline: 1.75rem;
    padding-block-start: 3.25rem;
}
.decision-step:first-child { padding-inline-start: 0; }
.decision-step:last-child  { padding-inline-end: 0; }

/* الرقم على خط المسار */
.decision-num {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 1.75rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ep-font-latin, inherit);
    font-size: .875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ep-teal, #0D7D74);
    background: var(--ep-bg, #EEF2F3);
    border: 1px solid rgba(13,125,116,.35);
    border-radius: 50%;
    z-index: 2;
}
.decision-step:first-child .decision-num { inset-inline-start: 0; }

/* الخط الواصل بين الأرقام */
.decision-step::before {
    content: '';
    position: absolute;
    inset-block-start: 20px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 1px;
    background: rgba(13,125,116,.28);
    z-index: 1;
}
.decision-step:first-child::before  { inset-inline-start: 20px; }
.decision-step:last-child::before   { inset-inline-end: calc(100% - 20px); }

.decision-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ep-ink, #16303A);
    margin-block: 0 .5rem;
}
.decision-desc {
    font-size: .9375rem;
    line-height: 1.7;
    color: rgba(22,48,58,.72);
    margin: 0;
}

@media (max-width: 767.98px) {
    .decision-path { grid-template-columns: 1fr; }
    .decision-step {
        padding-inline: 0 0;
        padding-inline-start: 3.5rem;
        padding-block-start: 0;
        padding-block-end: 1.75rem;
    }
    .decision-step .decision-num { inset-inline-start: 0; inset-block-start: 0; }
    /* الخط يصبح رأسيًا */
    .decision-step::before {
        inset-block-start: 40px;
        inset-block-end: 0;
        inset-inline-start: 20px;
        inset-inline-end: auto;
        width: 1px;
        height: auto;
    }
    .decision-step:last-child::before { display: none; }
}

/* تحييد قشرة بطاقات الخطوات القديمة إن بقي أي أثر */
.step-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.step-card:hover { transform: none !important; box-shadow: none !important; }

/* ============================================================
   جولة 1 — البند 8: توحيد الاستدارات الشاذة المتبقية
   ============================================================ */
.snb-link, .snb-drop-btn { border-radius: 6px !important; }
.cta-pro { border-radius: 16px !important; }
.fcl-icon { border-radius: 6px !important; }

/* ============================================================
   جولة 1 — تنقية الظلال: لا توهج ملوّن على الأزرار
   الظل مسموح للعائم فقط (قائمة منسدلة، نافذة، شريط جانبي، مُطلِق المحادثة)
   ============================================================ */
.btn,
.btn:hover,
.btn:focus,
.snb-btn-fill,
.snb-btn-fill:hover,
.fees-calc-btn,
.fees-calc-btn:hover,
.csb-dot {
    box-shadow: none !important;
}
/* الحركة: رفع خفيف بدل التكبير */
.btn:hover, .snb-btn-fill:hover, .fees-calc-btn:hover { transform: translateY(-1px); }

/* عناصر تحكم إضافية داخل النظام (6px)، ومربع الاختيار 4px مقصود */
.checkbox-item, .page-link, .filter-chip, .tag-pill, .list-group-item,
.journey-input, .journey-select, .journey-choice { border-radius: 6px !important; }
.form-check-input:not([type="radio"]) { border-radius: 4px !important; }
.form-check-input[type="radio"] { border-radius: 50% !important; }

/* ============================================================
   جولة 2 — صورة البطل (Codex قرار ب: 1000×800 نسبة 5:4)
   العمود كان شريطًا 557×170؛ أُعيد بناؤه ليستضيف صورة فعلية.
   ============================================================ */
.hero-visual-col {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-visual-col picture { display: block; width: 100%; }
.hero-visual {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: contain;
    /* الصورة شفافة — لا خلفية ولا حد ولا ظل */
    background: transparent;
    border: 0;
    box-shadow: none;
}
@media (max-width: 991.98px) {
    /* ترتيب الجوال: نص ← إجراء ← صورة (البند 11) */
    .hero-visual { max-width: 420px; margin-inline: auto; margin-block-start: 2rem; }
}

/* ============================================================
   جولة 3 — فتحة صورة CTA (Codex: 2138×560، معتمة داكنة)
   الصورة خلفية + طبقة تباين ثابتة فوقها، والنص فوق الاثنين.
   ============================================================ */
.cta-pro {
    background-image:
        linear-gradient(rgba(12, 34, 41, .62), rgba(12, 34, 41, .62)),
        url("../images/cta-pro.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* العنصر الزخرفي الدائري القديم لا يُعرض فوق الصورة */
.cta-pro::after { display: none !important; }
.cta-pro h2, .cta-pro p { color: #ffffff !important; }

/* ============================================================
   ترقيم الصفحات: 11+ صفحة في صف واحد كانت تفيض أفقيًا على الجوال
   (كل صفحات القوائم — رُصدت على kindergarten.php بعرض 366px)
   ============================================================ */
.pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .5rem;
}