/* ==========================================================================
   متقنون — طبقة اللون
   ------------------------------------------------------------------
   القاعدة الحاكمة: هذه الطبقة تعيد تعيين الألوان فقط.
   لا تغيّر المسافات (padding/margin/gap) ولا الاستدارة (border-radius)
   ولا أحجام الخط ولا عرض الحاويات. القالب الأصلي مسؤول عن الهندسة،
   وهذه الطبقة مسؤولة عن اللون فقط.
   ========================================================================== */

/* ==========================================================================
   1. الرموز اللونية
   ========================================================================== */
:root {
    --brand:        #0f2a5c;
    --brand-700:    #16356f;
    --brand-800:    #0b1f45;
    --brand-900:    #081834;
    --brand-wash:   #eef1f7;
    --brand-wash-2: #faf8f2;

    --gold:         #d4a62a;
    --gold-600:     #b8901f;
    --gold-wash:    #fbf5e6;
    --gold-line:    #eee2bd;

    --ink:          #16203a;
    --ink-2:        #4b5570;
    --ink-3:        #7c869c;
    --line:         #e5e9f1;

    --r-card:       16px;
    --r-sm:         12px;
    --r-pill:       999px;
}

[data-theme="dark"] {
    --brand-wash:   #14203c;
    --brand-wash-2: #111a30;
    --gold-wash:    #241f10;
    --gold-line:    #4a3f1a;
    --ink:          #eef1f7;
    --ink-2:        #b3bdd0;
    --ink-3:        #8590a8;
    --line:         #22304d;
}

/* ==========================================================================
   2. إلغاء النصوص المتدرجة (زخرفة بلا معنى)
   ========================================================================== */
.gradient-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--brand) !important;
}

.text-transparent.bg-clip-text,
.bg-clip-text.text-transparent {
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-clip: border-box !important;
    background-clip: border-box !important;
    color: var(--gold) !important;
}

/* ==========================================================================
   3. الأسطح الداكنة  →  كحلي
   ========================================================================== */
.bg-slate-900 { background-color: var(--brand-800) !important; }
.bg-slate-800 { background-color: #132c58 !important; }
.bg-gray-800  { background-color: #132c58 !important; }

.from-slate-900 {
    --tw-gradient-from: var(--brand-800) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(11,31,69,0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-slate-800 { --tw-gradient-to: var(--brand-700) var(--tw-gradient-to-position); }
.to-slate-900 { --tw-gradient-to: var(--brand-800) var(--tw-gradient-to-position); }

.border-slate-700 { border-color: rgba(255,255,255,.10) !important; }
.border-slate-600 { border-color: rgba(255,255,255,.16) !important; }

.text-slate-300 { color: #c3cde0 !important; }
.text-slate-400 { color: #9aa7c0 !important; }

/* ==========================================================================
   4. الخلفيات الفاتحة  →  washes موحّدة
   ========================================================================== */
.from-blue-50, .from-green-50, .from-emerald-50,
.from-slate-50, .from-gray-50, .from-blue-100,
.from-green-100, .from-gray-100 {
    --tw-gradient-from: var(--brand-wash) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(238,241,247,0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-50, .to-green-50, .to-blue-100, .to-green-100,
.to-slate-50, .to-gray-50, .to-slate-100 {
    --tw-gradient-to: var(--brand-wash-2) var(--tw-gradient-to-position);
}

/* شارات الأقسام */
.bg-blue-100, .bg-green-100, .bg-emerald-50, .bg-gray-100 {
    background-color: var(--brand-wash) !important;
}
.border-blue-100, .border-emerald-100, .border-green-100 {
    border-color: #dde3ee !important;
}
.border-blue-50 { border-color: #e7ebf3 !important; }

/* ==========================================================================
   5. النصوص الزرقاء/الخضراء  →  كحلي
   ========================================================================== */
.text-blue-700, .text-green-700, .text-emerald-700,
.text-blue-800, .text-green-800 {
    color: var(--brand) !important;
}
.text-blue-600, .text-green-600, .text-emerald-600,
.text-blue-500, .text-green-500 {
    color: var(--brand-700) !important;
}
.text-blue-900 { color: var(--brand) !important; }

.bg-blue-600 { background-color: var(--brand) !important; }

/* ==========================================================================
   6. التدرجات  →  عائلة كحلي واحدة
   ========================================================================== */
.from-blue-600, .from-blue-700, .from-blue-500, .from-blue-400,
.from-green-600, .from-green-500, .from-green-400,
.from-emerald-600, .from-emerald-500,
.from-cyan-600, .from-cyan-500 {
    --tw-gradient-from: var(--brand) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(15,42,92,0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-green-600, .to-blue-600, .to-emerald-600, .to-cyan-600,
.to-green-500, .to-blue-500, .to-emerald-500,
.to-green-400, .to-blue-400, .to-green-700, .to-green-800, .to-blue-700 {
    --tw-gradient-to: var(--brand-700) var(--tw-gradient-to-position);
}

.via-green-600, .via-emerald-600 {
    --tw-gradient-via: var(--brand-700) var(--tw-gradient-via-position);
}

/* الأيقونات الملوّنة في الإحصائيات — نقطة ذهبية واحدة */
.from-red-500 { --tw-gradient-from: var(--gold) var(--tw-gradient-from-position); }
.to-pink-600  { --tw-gradient-to: var(--gold-600) var(--tw-gradient-to-position); }

/* شارة "الأكثر طلباً" */
.bg-yellow-400 { background-color: var(--gold) !important; }

/* ==========================================================================
   7. الأيقونات داخل الأقسام الداكنة
   كحلي على كحلي = غير مرئي، لذلك نستخدم طبقة فاتحة شفافة بدل تدرّج
   ========================================================================== */
#programs .w-16.h-16.bg-gradient-to-br {
    background-image: none !important;
    background-color: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.16);
}
#features .w-14.h-14.bg-gradient-to-br {
    background-image: none !important;
    background-color: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.16);
}
/* البطاقة المميزة في قسم البرامج */
#programs .bg-gradient-to-br.from-green-600.to-blue-600 {
    background-image: linear-gradient(160deg, var(--brand-700), var(--brand-900)) !important;
}
/* زر البطاقة المميزة: يبقى فاتحاً حتى في الوضع الداكن */
#programs .bg-white.text-green-600 { color: var(--brand) !important; }

/* ==========================================================================
   8. الدوارات الزخرفية  →  تدرّج كحلي بدل أزرق/أخضر
   ========================================================================== */
.bg-blue-200, .bg-green-200, .bg-teal-500 {
    background-color: #dbe3f0 !important;
}
.bg-yellow-500 {
    background-color: #efe4c2 !important;
}
.bg-green-200\/30, .bg-blue-200\/30 {
    background-color: rgba(15,42,92,.07) !important;
}

/* ==========================================================================
   9. قسم الدعوة للعمل (CTA)
   ========================================================================== */
#cta > .absolute.inset-0.bg-gradient-to-r {
    --tw-gradient-stops: var(--brand-900), var(--brand) 45%, var(--brand-700);
}
#cta .text-black { color: #f4f6fa !important; }
#cta p { color: rgba(244,246,250,.82) !important; }

/* ==========================================================================
   10. بطاقات المزايا الزجاجية
   ========================================================================== */
#features .bg-white\/5.backdrop-blur-sm {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255,255,255,.08);
}

/* ==========================================================================
   11. حلقة التركيز — بدون المساس بالاستدارة
   ========================================================================== */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    box-shadow: none !important;
}

/* ==========================================================================
   12. قسم بيانات الدفع
   البنية: نص على اليمين (الإجراء) +-slip على اليسار (الرقم)
   سطح واحد لكل بطاقة — لا كارت داخل كارت.
   ========================================================================== */
#payment {
    background-color: var(--brand-wash-2);
}

.pay-layout {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}
@media (min-width: 1024px) {
    .pay-layout { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
}

/* --- العمود النصي: الإجراء أولاً --- */
.pay-intro { max-width: 46ch; }

.pay-kicker {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--gold-600);
    margin-bottom: .85rem;
}
.pay-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 800;
    color: var(--brand);
    line-height: 1.45;
    margin: 0 0 1rem;
    letter-spacing: -0.015em;
}
.pay-lead {
    font-size: 1.06rem;
    color: var(--ink-2);
    line-height: 1.9;
    margin: 0 0 1.75rem;
}

.pay-notes { list-style: none; margin: 0 0 2rem; padding: 0; }
.pay-notes li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .55rem 0;
    font-size: .96rem;
    line-height: 1.8;
    color: var(--ink-2);
}
.pay-notes i {
    color: var(--gold);
    font-size: .95rem;
    margin-top: .48rem;
    flex-shrink: 0;
}

.pay-wa {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.6rem;
    font-weight: 700;
    color: #f4f6fa;
    background-color: var(--brand);
    border-radius: var(--r-pill);
    text-decoration: none;
}
.pay-wa:hover { background-color: var(--brand-700); color: #f4f6fa; }

/* --- الـ slip: الرقم هو البطل --- */
.pay-slip {
    background-color: #fdfdfd;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.pay-slip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}
.pay-slip-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--gold-600);
}

.pay-copy {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--brand);
    background-color: transparent;
    border: 1px solid var(--gold-line);
    padding: .4rem .9rem;
    border-radius: var(--r-pill);
    cursor: pointer;
}
.pay-copy:hover { background-color: var(--gold-wash); border-color: var(--gold); }
.pay-copy.is-copied { background-color: var(--gold); border-color: var(--gold); color: #0b1f45; }

.pay-iban {
    display: block;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
    font-family: ui-monospace, "SFMono-Regular", "Courier New", monospace;
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--brand);
    letter-spacing: .015em;
    overflow-wrap: anywhere;
    padding-bottom: 1.4rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--line);
}

.pay-meta { margin: 0; }
.pay-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
}
.pay-meta-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pay-meta dt {
    font-size: .92rem;
    color: var(--ink-3);
    flex-shrink: 0;
}
.pay-meta dd {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    text-align: left;
    overflow-wrap: anywhere;
}
.pay-meta dd.is-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: ui-monospace, "SFMono-Regular", "Courier New", monospace;
    font-weight: 600;
    letter-spacing: .01em;
}

/* --- الوضع الداكن --- */
[data-theme="dark"] #payment { background-color: #0d1a30; }
[data-theme="dark"] .pay-title,
[data-theme="dark"] .pay-iban,
[data-theme="dark"] .pay-meta dd { color: #eef1f7; }
[data-theme="dark"] .pay-lead,
[data-theme="dark"] .pay-notes li,
[data-theme="dark"] .pay-meta dt { color: #b3bdd0; }
[data-theme="dark"] .pay-kicker,
[data-theme="dark"] .pay-slip-label { color: var(--gold); }
[data-theme="dark"] .pay-slip { background-color: #101d33; border-color: #22304d; }
[data-theme="dark"] .pay-iban,
[data-theme="dark"] .pay-meta-row { border-color: #22304d; }
[data-theme="dark"] .pay-copy { color: var(--gold); border-color: #4a3f1a; }
[data-theme="dark"] .pay-copy:hover { background-color: var(--gold-wash); }
[data-theme="dark"] .pay-copy.is-copied { background-color: var(--gold); color: #0b1f45; border-color: var(--gold); }
[data-theme="dark"] .pay-wa { background-color: var(--gold); color: #0b1f45; }
[data-theme="dark"] .pay-wa:hover { background-color: #e6c04a; color: #0b1f45; }

/* --- تجاوب --- */
@media (max-width: 768px) {
    .pay-title { font-size: 1.7rem; }
    .pay-lead { font-size: 1rem; }
    .pay-notes li { font-size: .92rem; }
    .pay-wa { width: 100%; justify-content: center; }
    .pay-slip { padding: 1.25rem; }
    .pay-meta-row { flex-direction: column; gap: .15rem; }
    .pay-meta dd { text-align: right; }
    .pay-meta dd.is-ltr { text-align: right; }
    .pay-copy { width: 100%; justify-content: center; }
    #programs .absolute.-top-4 {
        position: static;
        transform: none;
        display: inline-block;
        margin-bottom: 1rem;
    }
}
@media (max-width: 400px) {
    .pay-iban { font-size: .95rem; letter-spacing: 0; }
}

/* ==========================================================================
   15. ما حُلّ بدل الزخرفة المُزالة (بلا استبدال زخرفة بزخرفة)
   pay-accent : كان تدرّج نص زخرفي  ->  لون تمييز صلب
   pay-flat   : كان زجاج (glass)    ->  سطح مسطّح
   ========================================================================== */
.pay-accent { color: var(--gold); }

.pay-flat {
    background-color: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10);
}
#features .pay-flat:hover { background-color: rgba(255,255,255,.10) !important; }

/* ==========================================================================
   13. صفر حركة — قاطع عالمي
   يضمن غياب أي حركة في كل الصفحات (بما فيها auth/dashboard/tailwind).
   ========================================================================== */
*, *::before, *::after {
    animation: none !important;
}
html { scroll-behavior: auto !important; }