/**
 * AinAsr - الأنماط الرئيسية
 * 
 * تصميم عصري بسيط مع دعم RTL
 * الألوان: أخضر/فيروزي
 */

/* ============================================
   المتغيرات
   ============================================ */
:root {
    /* المظهر الفاتح (افتراضي) */
    --lawn-khalfya: #f8fafb;
    --lawn-khalfya-thanawi: #ffffff;
    --lawn-khalfya-bitaqa: #ffffff;
    --lawn-khalfya-hover: #f0f7f4;
    
    --lawn-nas-asasi: #1a2e35;
    --lawn-nas-thanawi: #4a6572;
    --lawn-nas-baht: #7a9aa8;
    
    --lawn-asasi: #0d9488;
    --lawn-asasi-hover: #0f766e;
    --lawn-asasi-fath: rgba(13, 148, 136, 0.1);
    
    --lawn-najah: #10b981;
    --lawn-tahthir: #f59e0b;
    --lawn-khata: #ef4444;
    
    --lawn-hadd: #e2e8f0;
    --lawn-hadd-hover: #cbd5e1;
    
    /* الظلال */
    --thil-saghir: 0 1px 3px rgba(0, 0, 0, 0.08);
    --thil-mutawast: 0 4px 12px rgba(0, 0, 0, 0.1);
    --thil-kabir: 0 10px 30px rgba(0, 0, 0, 0.12);
    
    /* المسافات */
    --masafa-saghira: 0.5rem;
    --masafa-mutawasta: 1rem;
    --masafa-kabira: 1.5rem;
    --masafa-akbar: 2rem;
    --masafa-dakhma: 3rem;
    
    /* الخطوط */
    --khat-asasi: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hajm-saghir: 0.875rem;
    --hajm-asasi: 1rem;
    --hajm-kabir: 1.125rem;
    --hajm-akbar: 1.5rem;
    --hajm-dakhm: 2rem;
    --hajm-adkhm: 2.5rem;
    
    /* الحواف */
    --haffa-saghira: 0.375rem;
    --haffa-mutawasta: 0.5rem;
    --haffa-kabira: 0.75rem;
    --haffa-akbar: 1rem;
    
    /* الانتقالات */
    --intiqal-sari: 150ms ease;
    --intiqal-asasi: 200ms ease;
    --intiqal-bati: 300ms ease-out;
    
    /* الحاوية */
    --hawiya-ard: 1200px;
    --hawiya-hashya: 1.25rem;
}

/* المظهر الداكن */
[data-theme="dark"] {
    --lawn-khalfya: #0f1419;
    --lawn-khalfya-thanawi: #1a2027;
    --lawn-khalfya-bitaqa: #1e2630;
    --lawn-khalfya-hover: #252d38;
    
    --lawn-nas-asasi: #e8ecf0;
    --lawn-nas-thanawi: #a0b0bc;
    --lawn-nas-baht: #6a7a86;
    
    --lawn-asasi: #14b8a6;
    --lawn-asasi-hover: #2dd4bf;
    --lawn-asasi-fath: rgba(20, 184, 166, 0.15);
    
    --lawn-hadd: #2a3441;
    --lawn-hadd-hover: #3a4551;
    
    --thil-saghir: 0 1px 3px rgba(0, 0, 0, 0.3);
    --thil-mutawast: 0 4px 12px rgba(0, 0, 0, 0.4);
    --thil-kabir: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ============================================
   إعادة التعيين والأساسيات
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--khat-asasi);
    font-size: var(--hajm-asasi);
    line-height: 1.7;
    color: var(--lawn-nas-asasi);
    background-color: var(--lawn-khalfya);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    direction: rtl;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--lawn-asasi);
    text-decoration: none;
    transition: color var(--intiqal-sari);
}

a:hover {
    color: var(--lawn-asasi-hover);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

/* ============================================
   مكونات التخطيط
   ============================================ */
.hawiya {
    width: 100%;
    max-width: var(--hawiya-ard);
    margin: 0 auto;
    padding: 0 var(--hawiya-hashya);
}

.sahifa {
    flex: 1;
    padding: var(--masafa-akbar) 0;
}

/* ============================================
   رأس الصفحة
   ============================================ */
.raas-safha {
    background: var(--lawn-khalfya-thanawi);
    border-bottom: 1px solid var(--lawn-hadd);
    position: sticky;
    top: 0;
    z-index: 100;
}

.raas-safha__dakhil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: var(--masafa-mutawasta);
}

.raas-safha__shaar {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
    text-decoration: none;
}

.raas-safha__ism {
    font-size: var(--hajm-akbar);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.raas-safha__ism::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #06b6d4);
    transition: width 0.3s ease;
}

.raas-safha__shaar:hover .raas-safha__ism::after {
    width: 100%;
}

.raas-safha__tanqul {
    display: none;
    align-items: center;
    gap: var(--masafa-saghira);
}

@media (min-width: 768px) {
    .raas-safha__tanqul {
        display: flex;
    }
}

.raas-safha__afaal {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
}

/* زر القائمة */
.raas-safha__zr-qaima {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border-radius: var(--haffa-saghira);
    transition: background var(--intiqal-sari);
}

.raas-safha__zr-qaima:hover {
    background: var(--lawn-khalfya-hover);
}

.raas-safha__zr-qaima span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--lawn-nas-asasi);
    border-radius: 1px;
    transition: var(--intiqal-asasi);
}

@media (min-width: 768px) {
    .raas-safha__zr-qaima {
        display: none;
    }
}

/* زر تبديل المظهر */
.zr-mathar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--haffa-mutawasta);
    color: var(--lawn-nas-thanawi);
    transition: var(--intiqal-sari);
}

.zr-mathar:hover {
    background: var(--lawn-khalfya-hover);
    color: var(--lawn-nas-asasi);
}

.aiquna-shams { display: none; }
.aiquna-qamar { display: block; }

[data-theme="dark"] .aiquna-shams { display: block; }
[data-theme="dark"] .aiquna-qamar { display: none; }

/* القائمة المنسدلة */
.qaima-munsdla {
    position: relative;
}

.qaima-munsdla__zr {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
    padding: var(--masafa-saghira) var(--masafa-mutawasta);
    border-radius: var(--haffa-mutawasta);
    color: var(--lawn-nas-thanawi);
    font-size: var(--hajm-saghir);
    font-weight: 500;
    transition: var(--intiqal-sari);
}

.qaima-munsdla__zr:hover {
    background: var(--lawn-khalfya-hover);
    color: var(--lawn-nas-asasi);
}

.qaima-munsdla__aiquna {
    display: flex;
}

.qaima-munsdla__sahm {
    transition: transform var(--intiqal-sari);
}

.qaima-munsdla:hover .qaima-munsdla__sahm {
    transform: rotate(180deg);
}

.qaima-munsdla__loha {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--lawn-khalfya-thanawi);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-kabira);
    box-shadow: var(--thil-kabir);
    padding: var(--masafa-saghira);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--intiqal-asasi);
    z-index: 50;
}

.qaima-munsdla:hover .qaima-munsdla__loha {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.qaima-munsdla__unsur {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
    padding: var(--masafa-saghira) var(--masafa-mutawasta);
    border-radius: var(--haffa-saghira);
    color: var(--lawn-nas-thanawi);
    font-size: var(--hajm-saghir);
    transition: var(--intiqal-sari);
}

.qaima-munsdla__unsur:hover {
    background: var(--lawn-asasi-fath);
    color: var(--lawn-asasi);
}

.qaima-munsdla__unsur-aiquna {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.qaima-munsdla__fargha {
    display: block;
    padding: var(--masafa-mutawasta);
    color: var(--lawn-nas-baht);
    font-size: var(--hajm-saghir);
    text-align: center;
}

/* قائمة الجوال */
.qaima-jawwal {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background: var(--lawn-khalfya-thanawi);
    z-index: 200;
    transition: right var(--intiqal-bati);
    overflow-y: auto;
}

.qaima-jawwal.nashta {
    right: 0;
}

.qaima-jawwal__raas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--masafa-mutawasta) var(--masafa-kabira);
    border-bottom: 1px solid var(--lawn-hadd);
}

.qaima-jawwal__anwan {
    font-size: var(--hajm-kabir);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.qaima-jawwal__ighlaq {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--haffa-mutawasta);
    color: var(--lawn-nas-thanawi);
    transition: var(--intiqal-sari);
}

.qaima-jawwal__ighlaq:hover {
    background: var(--lawn-khalfya-hover);
}

.qaima-jawwal__tanqul {
    padding: var(--masafa-mutawasta);
}

.qaima-jawwal__majmooa {
    border-bottom: 1px solid var(--lawn-hadd);
}

.qaima-jawwal__raas-majmooa {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
    padding: var(--masafa-mutawasta);
    cursor: pointer;
    color: var(--lawn-nas-asasi);
    font-weight: 500;
    list-style: none;
}

.qaima-jawwal__raas-majmooa::-webkit-details-marker {
    display: none;
}

.qaima-jawwal__sahm {
    margin-right: auto;
    transition: transform var(--intiqal-sari);
}

.qaima-jawwal__majmooa[open] .qaima-jawwal__sahm {
    transform: rotate(180deg);
}

.qaima-jawwal__mohtawa {
    padding: 0 var(--masafa-mutawasta) var(--masafa-mutawasta);
}

.qaima-jawwal__rabat {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
    padding: var(--masafa-saghira) var(--masafa-mutawasta);
    border-radius: var(--haffa-saghira);
    color: var(--lawn-nas-thanawi);
    font-size: var(--hajm-saghir);
    transition: var(--intiqal-sari);
}

.qaima-jawwal__rabat:hover {
    background: var(--lawn-asasi-fath);
    color: var(--lawn-asasi);
}

.qaima-jawwal__rabat-aiquna {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.qaima-jawwal__fargha {
    display: block;
    padding: var(--masafa-saghira) var(--masafa-mutawasta);
    color: var(--lawn-nas-baht);
    font-size: var(--hajm-saghir);
}

.qaima-jawwal__khalfya {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: var(--intiqal-asasi);
}

.qaima-jawwal__khalfya.nashta {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   قسم البطل
   ============================================ */
.batal {
    text-align: center;
    padding: var(--masafa-dakhma) 0;
}

.batal__shara {
    display: inline-flex;
    align-items: center;
    gap: var(--masafa-saghira);
    background: var(--lawn-asasi-fath);
    padding: var(--masafa-saghira) var(--masafa-mutawasta);
    border-radius: var(--haffa-akbar);
    font-size: var(--hajm-saghir);
    color: var(--lawn-asasi);
    margin-bottom: var(--masafa-kabira);
}

.batal__adad {
    background: var(--lawn-asasi);
    color: white;
    padding: 2px 8px;
    border-radius: var(--haffa-saghira);
    font-weight: 600;
}

.batal__anwan {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-kabira);
}

.batal__wasf {
    font-size: var(--hajm-kabir);
    color: var(--lawn-nas-thanawi);
    max-width: 600px;
    margin: 0 auto var(--masafa-akbar);
    line-height: 1.8;
}

.batal__azrar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--masafa-mutawasta);
}

.batal__zr {
    display: inline-flex;
    align-items: center;
    gap: var(--masafa-saghira);
    padding: var(--masafa-mutawasta) var(--masafa-kabira);
    border-radius: var(--haffa-mutawasta);
    font-weight: 600;
    transition: var(--intiqal-asasi);
}

.batal__zr--asasi {
    background: var(--lawn-asasi);
    color: white;
}

.batal__zr--asasi:hover {
    background: var(--lawn-asasi-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--thil-mutawast);
}

/* ============================================
   قسم الإحصائيات
   ============================================ */
.ihsaat {
    padding: var(--masafa-akbar) 0;
}

.ihsaat__shabaka {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--masafa-mutawasta);
}

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

.ihsaat__unsur {
    background: var(--lawn-khalfya-bitaqa);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-kabira);
    padding: var(--masafa-kabira);
    text-align: center;
}

.ihsaat__raqm {
    font-size: var(--hajm-dakhm);
    font-weight: 700;
    color: var(--lawn-asasi);
}

.ihsaat__tasmya {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    margin-top: var(--masafa-saghira);
}

/* ============================================
   شريط الفلتر
   ============================================ */
.filtar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--masafa-saghira);
    padding: var(--masafa-akbar) 0;
    scroll-margin-top: 80px;
}

.filtar__zr {
    padding: var(--masafa-saghira) var(--masafa-mutawasta);
    border-radius: var(--haffa-akbar);
    font-size: var(--hajm-saghir);
    font-weight: 500;
    color: var(--lawn-nas-thanawi);
    background: var(--lawn-khalfya-bitaqa);
    border: 1px solid var(--lawn-hadd);
    transition: var(--intiqal-sari);
}

.filtar__zr:hover {
    border-color: var(--lawn-asasi);
    color: var(--lawn-asasi);
}

.filtar__zr--nashat {
    background: var(--lawn-asasi);
    color: white;
    border-color: var(--lawn-asasi);
}

/* ============================================
   شبكة الأدوات
   ============================================ */
.aadawat-shabaka {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--masafa-kabira);
    padding-bottom: var(--masafa-dakhma);
}

@media (min-width: 640px) {
    .aadawat-shabaka {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .aadawat-shabaka {
        grid-template-columns: repeat(3, 1fr);
    }
}

.aadawat-fargha {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--masafa-dakhma);
    color: var(--lawn-nas-baht);
}

.aadawat-fargha svg {
    margin: 0 auto var(--masafa-mutawasta);
    opacity: 0.5;
}

.aadawat-fargha h3 {
    font-size: var(--hajm-kabir);
    margin-bottom: var(--masafa-saghira);
    color: var(--lawn-nas-thanawi);
}

/* بطاقة الأداة */
.bitaqa {
    display: flex;
    flex-direction: column;
    background: var(--lawn-khalfya-bitaqa);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-kabira);
    padding: var(--masafa-kabira);
    transition: var(--intiqal-asasi);
    text-decoration: none;
}

.bitaqa:hover {
    border-color: var(--lawn-asasi);
    box-shadow: var(--thil-mutawast);
    transform: translateY(-4px);
}

.bitaqa__aiquna {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--lawn-asasi-fath);
    border-radius: var(--haffa-kabira);
    color: var(--lawn-asasi);
    margin-bottom: var(--masafa-mutawasta);
}

.bitaqa__anwan {
    font-size: var(--hajm-kabir);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-saghira);
}

.bitaqa__wasf {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    line-height: 1.6;
    flex: 1;
}

.bitaqa__istekhdam {
    display: inline-flex;
    align-items: center;
    gap: var(--masafa-saghira);
    margin-top: var(--masafa-mutawasta);
    font-size: var(--hajm-saghir);
    font-weight: 500;
    color: var(--lawn-asasi);
}

/* ============================================
   قسم المميزات
   ============================================ */
.miyzat {
    padding: var(--masafa-dakhma) 0;
    background: var(--lawn-khalfya-thanawi);
    margin: 0 calc(-1 * var(--hawiya-hashya));
    padding-left: var(--hawiya-hashya);
    padding-right: var(--hawiya-hashya);
}

.miyzat__anwan {
    text-align: center;
    font-size: var(--hajm-dakhm);
    font-weight: 700;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-akbar);
}

.miyzat__shabaka {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--masafa-kabira);
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .miyzat__shabaka {
        grid-template-columns: repeat(2, 1fr);
    }
}

.miyzat__unsur {
    text-align: center;
    padding: var(--masafa-kabira);
}

.miyzat__aiquna {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--lawn-asasi-fath);
    border-radius: 50%;
    color: var(--lawn-asasi);
    margin: 0 auto var(--masafa-mutawasta);
}

.miyzat__ism {
    font-size: var(--hajm-kabir);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-saghira);
}

.miyzat__wasf {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    line-height: 1.7;
}

/* ============================================
   قسم الأسئلة الشائعة
   ============================================ */
.asila {
    padding: var(--masafa-dakhma) 0;
}

.asila__anwan {
    text-align: center;
    font-size: var(--hajm-dakhm);
    font-weight: 700;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-akbar);
}

.asila__shabaka {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--masafa-kabira);
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .asila__shabaka {
        grid-template-columns: repeat(2, 1fr);
    }
}

.asila__unsur {
    background: var(--lawn-khalfya-bitaqa);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-kabira);
    padding: var(--masafa-kabira);
}

.asila__soal {
    font-size: var(--hajm-asasi);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-saghira);
}

.asila__jawab {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    line-height: 1.7;
}

/* ============================================
   قسم الدعوة للإجراء
   ============================================ */
.dawa {
    text-align: center;
    padding: var(--masafa-dakhma) var(--masafa-kabira);
    background: var(--lawn-asasi-fath);
    border-radius: var(--haffa-akbar);
    margin-bottom: var(--masafa-akbar);
}

.dawa__anwan {
    font-size: var(--hajm-akbar);
    font-weight: 700;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-saghira);
}

.dawa__wasf {
    color: var(--lawn-nas-thanawi);
    margin-bottom: var(--masafa-kabira);
}

.dawa__zr {
    display: inline-flex;
    align-items: center;
    gap: var(--masafa-saghira);
    padding: var(--masafa-mutawasta) var(--masafa-kabira);
    background: var(--lawn-asasi);
    color: white;
    border-radius: var(--haffa-mutawasta);
    font-weight: 600;
    transition: var(--intiqal-asasi);
}

.dawa__zr:hover {
    background: var(--lawn-asasi-hover);
    color: white;
    transform: translateY(-2px);
}

/* ============================================
   التذييل
   ============================================ */
.tazyl {
    background: var(--lawn-khalfya-thanawi);
    border-top: 1px solid var(--lawn-hadd);
    padding: var(--masafa-dakhma) 0 var(--masafa-akbar);
}

.tazyl__shabaka {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--masafa-akbar);
    margin-bottom: var(--masafa-akbar);
}

@media (min-width: 640px) {
    .tazyl__shabaka {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tazyl__shabaka {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.tazyl__alama {
    max-width: 300px;
}

.tazyl__shaar {
    display: inline-block;
    font-size: var(--hajm-akbar);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform 0.3s ease;
}

.tazyl__shaar:hover {
    transform: scale(1.05);
}

.tazyl__shiaar {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    margin-top: var(--masafa-saghira);
}

.tazyl__wasf {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-baht);
    margin-top: var(--masafa-saghira);
    line-height: 1.7;
}

.tazyl__rawabet h4 {
    font-size: var(--hajm-saghir);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-mutawasta);
}

.tazyl__qaima li {
    margin-bottom: var(--masafa-saghira);
}

.tazyl__qaima a {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    transition: color var(--intiqal-sari);
}

.tazyl__qaima a:hover {
    color: var(--lawn-asasi);
}

.tazyl__asfal {
    border-top: 1px solid var(--lawn-hadd);
    padding-top: var(--masafa-kabira);
    text-align: center;
}

.tazyl__hoquq {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
}

.tazyl__mulahza {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-baht);
    margin-top: var(--masafa-saghira);
}

/* ============================================
   صفحة 404
   ============================================ */
.khata-404 {
    text-align: center;
    padding: var(--masafa-dakhma) 0;
}

.khata-404__ramz {
    font-size: 6rem;
    font-weight: 700;
    color: var(--lawn-asasi);
    opacity: 0.3;
}

.khata-404__anwan {
    font-size: var(--hajm-dakhm);
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-mutawasta);
}

.khata-404__nas {
    color: var(--lawn-nas-thanawi);
    margin-bottom: var(--masafa-kabira);
}

.khata-404__rabat {
    display: inline-flex;
    align-items: center;
    gap: var(--masafa-saghira);
    padding: var(--masafa-mutawasta) var(--masafa-kabira);
    background: var(--lawn-asasi);
    color: white;
    border-radius: var(--haffa-mutawasta);
    font-weight: 600;
    transition: var(--intiqal-asasi);
}

.khata-404__rabat:hover {
    background: var(--lawn-asasi-hover);
    color: white;
}

/* ============================================
   صفحة الأداة
   ============================================ */
.adaa {
    padding: var(--masafa-akbar) 0;
}

.adaa__raas {
    margin-bottom: var(--masafa-akbar);
}

.adaa__anwan {
    font-size: var(--hajm-dakhm);
    font-weight: 700;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-saghira);
}

.adaa__wasf {
    font-size: var(--hajm-kabir);
    color: var(--lawn-nas-thanawi);
}

.adaa__mohtawa {
    background: var(--lawn-khalfya-bitaqa);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-kabira);
    padding: var(--masafa-kabira);
}

/* منطقة الإفلات */
.mantaqat-iflat {
    border: 2px dashed var(--lawn-hadd);
    border-radius: var(--haffa-kabira);
    padding: var(--masafa-dakhma);
    text-align: center;
    transition: var(--intiqal-asasi);
    cursor: pointer;
}

.mantaqat-iflat:hover,
.mantaqat-iflat.nashat {
    border-color: var(--lawn-asasi);
    background: var(--lawn-asasi-fath);
}

.mantaqat-iflat__aiquna {
    color: var(--lawn-asasi);
    margin-bottom: var(--masafa-mutawasta);
}

.mantaqat-iflat__nas {
    font-size: var(--hajm-kabir);
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-saghira);
}

.mantaqat-iflat__talmeeh {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-baht);
}

/* زر أساسي */
.zr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--masafa-saghira);
    padding: var(--masafa-mutawasta) var(--masafa-kabira);
    border-radius: var(--haffa-mutawasta);
    font-weight: 600;
    transition: var(--intiqal-asasi);
    cursor: pointer;
}

.zr--asasi {
    background: var(--lawn-asasi);
    color: white;
}

.zr--asasi:hover {
    background: var(--lawn-asasi-hover);
}

.zr--thanawi {
    background: var(--lawn-khalfya-bitaqa);
    color: var(--lawn-nas-asasi);
    border: 1px solid var(--lawn-hadd);
}

.zr--thanawi:hover {
    border-color: var(--lawn-asasi);
    color: var(--lawn-asasi);
}

.zr:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* إدخال الملف */
.idkhal-malf {
    display: none;
}

/* معاينة الصورة */
.moayana {
    margin-top: var(--masafa-kabira);
}

.moayana__sora {
    max-width: 100%;
    max-height: 400px;
    margin: 0 auto;
    border-radius: var(--haffa-mutawasta);
    box-shadow: var(--thil-mutawast);
}

/* أزرار الإجراءات */
.afaal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--masafa-mutawasta);
    margin-top: var(--masafa-kabira);
    justify-content: center;
}

/* التحميل */
.tahmiil {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--masafa-akbar);
}

.tahmiil__dawara {
    width: 40px;
    height: 40px;
    border: 3px solid var(--lawn-hadd);
    border-top-color: var(--lawn-asasi);
    border-radius: 50%;
    animation: dawaran 1s linear infinite;
}

@keyframes dawaran {
    to { transform: rotate(360deg); }
}

/* ============================================
   قسم الدليل والأسئلة الشائعة
   ============================================ */
.qism-dalil {
    background: var(--lawn-khalfya-bitaqa);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-kabira);
    margin-top: var(--masafa-akbar);
    overflow: hidden;
}

.qism-dalil__raas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--masafa-kabira);
    background: var(--lawn-khalfya-thanawi);
    cursor: pointer;
    transition: background var(--intiqal-sari);
    user-select: none;
}

.qism-dalil__raas:hover {
    background: var(--lawn-khalfya-hover);
}

.qism-dalil__raas h2 {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
    font-size: var(--hajm-kabir);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin: 0;
}

.qism-dalil__sahm {
    color: var(--lawn-nas-thanawi);
    transition: transform var(--intiqal-asasi);
}

.qism-dalil.maftooh .qism-dalil__sahm {
    transform: rotate(180deg);
}

.qism-dalil__mohtawa {
    display: none;
    padding: var(--masafa-kabira);
}

.qism-dalil.maftooh .qism-dalil__mohtawa {
    display: block;
}

.qism-dalil__mohtawa h3 {
    font-size: var(--hajm-asasi);
    font-weight: 600;
    color: var(--lawn-asasi);
    margin: var(--masafa-kabira) 0 var(--masafa-saghira) 0;
}

.qism-dalil__mohtawa h3:first-child {
    margin-top: 0;
}

.qism-dalil__mohtawa p {
    color: var(--lawn-nas-thanawi);
    line-height: 1.8;
    margin-bottom: var(--masafa-mutawasta);
}

.qism-dalil__mohtawa ul {
    list-style: disc;
    padding-right: var(--masafa-kabira);
    color: var(--lawn-nas-thanawi);
    line-height: 1.8;
    margin-bottom: var(--masafa-mutawasta);
}

.qism-dalil__mohtawa li {
    margin-bottom: var(--masafa-saghira);
}

/* شبكة الخطوات */
.khatwat-shabaka {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--masafa-mutawasta);
    margin: var(--masafa-kabira) 0;
}

@media (min-width: 640px) {
    .khatwat-shabaka {
        grid-template-columns: repeat(3, 1fr);
    }
}

.khatwa {
    background: var(--lawn-khalfya-hover);
    padding: var(--masafa-kabira);
    border-radius: var(--haffa-mutawasta);
    text-align: center;
}

.khatwa__raqm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--lawn-asasi);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    margin: 0 auto var(--masafa-saghira);
}

.khatwa__anwan {
    font-size: var(--hajm-saghir);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-saghira);
}

.khatwa__wasf {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    line-height: 1.6;
}

/* قائمة الأسئلة */
.asila-qaima {
    margin-top: var(--masafa-kabira);
}

.soal-unsur {
    border-bottom: 1px solid var(--lawn-hadd);
}

.soal-unsur:last-child {
    border-bottom: none;
}

.soal-raas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--masafa-mutawasta) 0;
    cursor: pointer;
    gap: var(--masafa-mutawasta);
}

.soal-raas h4 {
    font-size: var(--hajm-saghir);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin: 0;
    flex: 1;
}

.soal-aiquna {
    color: var(--lawn-asasi);
    transition: transform var(--intiqal-asasi);
    flex-shrink: 0;
}

.soal-unsur.maftooh .soal-aiquna {
    transform: rotate(45deg);
}

.soal-jawab {
    display: none;
    padding-bottom: var(--masafa-mutawasta);
}

.soal-unsur.maftooh .soal-jawab {
    display: block;
}

.soal-jawab p {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    line-height: 1.7;
    margin: 0;
}

/* ============================================
   خيارات الأداة
   ============================================ */
.khiyarat {
    display: flex;
    flex-wrap: wrap;
    gap: var(--masafa-mutawasta);
    margin: var(--masafa-kabira) 0;
    align-items: center;
    justify-content: center;
}

.khiyar {
    display: flex;
    flex-direction: column;
    gap: var(--masafa-saghira);
}

.khiyar__tasmya {
    font-size: var(--hajm-saghir);
    font-weight: 500;
    color: var(--lawn-nas-thanawi);
}

.khiyar__qima {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
}

.khiyar input[type="range"] {
    width: 150px;
    accent-color: var(--lawn-asasi);
}

.khiyar__nas {
    font-size: var(--hajm-saghir);
    font-weight: 600;
    color: var(--lawn-asasi);
    min-width: 45px;
}

/* معلومات الملف */
.malf-maaloomat {
    display: flex;
    flex-wrap: wrap;
    gap: var(--masafa-mutawasta);
    justify-content: center;
    margin-top: var(--masafa-mutawasta);
    padding: var(--masafa-mutawasta);
    background: var(--lawn-khalfya-hover);
    border-radius: var(--haffa-mutawasta);
}

.malf-maaloomat__unsur {
    text-align: center;
}

.malf-maaloomat__tasmya {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-baht);
}

.malf-maaloomat__qima {
    font-size: var(--hajm-saghir);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
}

/* نتيجة المقارنة */
.muqarana {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--masafa-mutawasta);
    margin-top: var(--masafa-kabira);
}

@media (max-width: 640px) {
    .muqarana {
        grid-template-columns: 1fr;
    }
}

.muqarana__unsur {
    text-align: center;
    padding: var(--masafa-mutawasta);
    background: var(--lawn-khalfya-hover);
    border-radius: var(--haffa-mutawasta);
}

.muqarana__tasmya {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    margin-bottom: var(--masafa-saghira);
}

.muqarana__qima {
    font-size: var(--hajm-kabir);
    font-weight: 700;
}

.muqarana__qima--asl {
    color: var(--lawn-nas-baht);
}

.muqarana__qima--jadid {
    color: var(--lawn-asasi);
}

.muqarana__tawfir {
    font-size: var(--hajm-saghir);
    color: var(--lawn-najah);
    font-weight: 600;
    margin-top: var(--masafa-saghira);
}

/* خيارات الألوان */
.khiyar__qima--alwan {
    flex-wrap: wrap;
    gap: var(--masafa-mutawasta);
}

.lawn-khiyar {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
    cursor: pointer;
}

.lawn-khiyar input[type="radio"] {
    display: none;
}

.lawn-khiyar__markiz {
    width: 24px;
    height: 24px;
    border-radius: var(--haffa-saghira);
    border: 2px solid transparent;
    transition: var(--intiqal-sari);
}

.lawn-khiyar input[type="radio"]:checked + .lawn-khiyar__markiz,
.lawn-khiyar:has(input[type="radio"]:checked) .lawn-khiyar__markiz {
    border-color: var(--lawn-asasi);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.lawn-khiyar__nas {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
}

.lawn-khiyar input[type="radio"]:checked ~ .lawn-khiyar__nas {
    color: var(--lawn-nas-asasi);
    font-weight: 500;
}

.lawn-khiyar__custom {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--haffa-saghira);
    cursor: pointer;
    padding: 0;
}

/* المعاينة */
.moayana {
    margin: var(--masafa-kabira) 0;
    text-align: center;
}

.moayana__sora {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--haffa-mutawasta);
    box-shadow: var(--dhill-mutawasta);
}

/* ============================================
   أقسام المحتوى الغني
   ============================================ */

/* قسم الدليل والأسئلة المحسّن */
.dalil-ghani {
    margin-top: var(--masafa-akbar);
}

.dalil-ghani__qism {
    background: var(--lawn-khalfya-bitaqa);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-kabira);
    margin-bottom: var(--masafa-kabira);
    overflow: hidden;
}

.dalil-ghani__raas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--masafa-kabira) var(--masafa-akbar);
    background: linear-gradient(135deg, var(--lawn-khalfya-thanawi) 0%, var(--lawn-khalfya-hover) 100%);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: var(--intiqal-asasi);
}

.dalil-ghani__raas:hover {
    background: var(--lawn-asasi-fath);
}

.dalil-ghani__qism.maftooh .dalil-ghani__raas {
    border-bottom-color: var(--lawn-hadd);
}

.dalil-ghani__anwan {
    display: flex;
    align-items: center;
    gap: var(--masafa-mutawasta);
    margin: 0;
}

.dalil-ghani__aiquna {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--lawn-asasi);
    border-radius: var(--haffa-mutawasta);
    color: white;
    flex-shrink: 0;
}

.dalil-ghani__anwan-nas {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dalil-ghani__anwan-nas h2 {
    font-size: var(--hajm-kabir);
    font-weight: 700;
    color: var(--lawn-nas-asasi);
    margin: 0;
}

.dalil-ghani__anwan-nas span {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
}

.dalil-ghani__sahm {
    color: var(--lawn-nas-thanawi);
    transition: transform var(--intiqal-asasi);
}

.dalil-ghani__qism.maftooh .dalil-ghani__sahm {
    transform: rotate(180deg);
}

.dalil-ghani__mohtawa {
    display: none;
    padding: var(--masafa-akbar);
}

.dalil-ghani__qism.maftooh .dalil-ghani__mohtawa {
    display: block;
}

/* مقدمة القسم */
.moqadima {
    background: linear-gradient(135deg, var(--lawn-asasi-fath) 0%, transparent 100%);
    border-right: 4px solid var(--lawn-asasi);
    padding: var(--masafa-kabira) var(--masafa-akbar);
    border-radius: 0 var(--haffa-mutawasta) var(--haffa-mutawasta) 0;
    margin-bottom: var(--masafa-akbar);
}

.moqadima p {
    font-size: var(--hajm-kabir);
    line-height: 1.9;
    color: var(--lawn-nas-asasi);
    margin: 0;
}

.moqadima p strong {
    color: var(--lawn-asasi);
}

/* فقرات المحتوى */
.faqra {
    margin-bottom: var(--masafa-akbar);
}

.faqra__anwan {
    display: flex;
    align-items: center;
    gap: var(--masafa-mutawasta);
    font-size: var(--hajm-kabir);
    font-weight: 700;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-mutawasta);
    padding-bottom: var(--masafa-saghira);
    border-bottom: 2px solid var(--lawn-asasi-fath);
}

.faqra__anwan svg {
    color: var(--lawn-asasi);
    flex-shrink: 0;
}

.faqra p {
    font-size: var(--hajm-asasi);
    line-height: 2;
    color: var(--lawn-nas-thanawi);
    margin-bottom: var(--masafa-mutawasta);
}

.faqra p:last-child {
    margin-bottom: 0;
}

/* قوائم غنية */
.qaima-ghaniya {
    list-style: none;
    padding: 0;
    margin: var(--masafa-mutawasta) 0;
}

.qaima-ghaniya li {
    position: relative;
    padding: var(--masafa-mutawasta) var(--masafa-mutawasta) var(--masafa-mutawasta) var(--masafa-akbar);
    margin-bottom: var(--masafa-saghira);
    background: var(--lawn-khalfya-hover);
    border-radius: var(--haffa-mutawasta);
    line-height: 1.8;
    color: var(--lawn-nas-thanawi);
}

.qaima-ghaniya li::before {
    content: '';
    position: absolute;
    right: var(--masafa-mutawasta);
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--lawn-asasi);
    border-radius: 50%;
}

.qaima-ghaniya li strong {
    color: var(--lawn-nas-asasi);
    font-weight: 600;
}

/* شبكة الخطوات المحسنة */
.khutuwat {
    display: grid;
    gap: var(--masafa-mutawasta);
    margin: var(--masafa-kabira) 0;
}

@media (min-width: 768px) {
    .khutuwat {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.khatwa-ghaniya {
    position: relative;
    background: var(--lawn-khalfya-thanawi);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-kabira);
    padding: var(--masafa-kabira);
    text-align: center;
    transition: var(--intiqal-asasi);
}

.khatwa-ghaniya:hover {
    border-color: var(--lawn-asasi);
    box-shadow: var(--thil-mutawast);
    transform: translateY(-2px);
}

.khatwa-ghaniya__raqm {
    position: absolute;
    top: -15px;
    right: var(--masafa-mutawasta);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--lawn-asasi);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--hajm-saghir);
}

.khatwa-ghaniya__aiquna {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--lawn-asasi-fath);
    color: var(--lawn-asasi);
    border-radius: 50%;
    margin: 0 auto var(--masafa-mutawasta);
}

.khatwa-ghaniya__anwan {
    font-size: var(--hajm-asasi);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin-bottom: var(--masafa-saghira);
}

.khatwa-ghaniya__wasf {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    line-height: 1.7;
}

/* بطاقات النصائح */
.nasaih {
    display: grid;
    gap: var(--masafa-mutawasta);
    margin: var(--masafa-kabira) 0;
}

@media (min-width: 640px) {
    .nasaih {
        grid-template-columns: repeat(2, 1fr);
    }
}

.nasiha {
    display: flex;
    gap: var(--masafa-mutawasta);
    padding: var(--masafa-kabira);
    background: var(--lawn-khalfya-thanawi);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-mutawasta);
    transition: var(--intiqal-sari);
}

.nasiha:hover {
    border-color: var(--lawn-asasi);
}

.nasiha__aiquna {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--lawn-asasi-fath);
    color: var(--lawn-asasi);
    border-radius: var(--haffa-mutawasta);
    flex-shrink: 0;
}

.nasiha__mohtawa h4 {
    font-size: var(--hajm-saghir);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin: 0 0 var(--masafa-saghira) 0;
}

.nasiha__mohtawa p {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    line-height: 1.7;
    margin: 0;
}

/* بطاقة المعلومة */
.malooma {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%);
    border: 1px solid #99f6e4;
    border-radius: var(--haffa-mutawasta);
    padding: var(--masafa-kabira);
    margin: var(--masafa-kabira) 0;
}

[data-theme="dark"] .malooma {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(56, 189, 248, 0.1) 100%);
    border-color: rgba(20, 184, 166, 0.3);
}

.malooma__raas {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
    font-weight: 600;
    color: var(--lawn-asasi);
    margin-bottom: var(--masafa-saghira);
}

.malooma p {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    line-height: 1.8;
    margin: 0;
}

/* بطاقة التحذير */
.tahthir {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: var(--haffa-mutawasta);
    padding: var(--masafa-kabira);
    margin: var(--masafa-kabira) 0;
}

[data-theme="dark"] .tahthir {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

.tahthir__raas {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
    font-weight: 600;
    color: #d97706;
    margin-bottom: var(--masafa-saghira);
}

.tahthir p {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    line-height: 1.8;
    margin: 0;
}

/* جدول المقارنة */
.muqarana-jadwal {
    width: 100%;
    border-collapse: collapse;
    margin: var(--masafa-kabira) 0;
    font-size: var(--hajm-saghir);
}

.muqarana-jadwal th,
.muqarana-jadwal td {
    padding: var(--masafa-mutawasta);
    text-align: right;
    border-bottom: 1px solid var(--lawn-hadd);
}

.muqarana-jadwal th {
    background: var(--lawn-khalfya-hover);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
}

.muqarana-jadwal td {
    color: var(--lawn-nas-thanawi);
}

.muqarana-jadwal tr:hover td {
    background: var(--lawn-asasi-fath);
}

/* أقسام الأسئلة المحسنة */
.asila-ghaniya {
    margin-top: 0;
}

.soal-ghani {
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-mutawasta);
    margin-bottom: var(--masafa-mutawasta);
    overflow: hidden;
    transition: var(--intiqal-sari);
}

.soal-ghani:hover {
    border-color: var(--lawn-asasi);
}

.soal-ghani:last-child {
    margin-bottom: 0;
}

.soal-ghani__raas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--masafa-kabira);
    background: var(--lawn-khalfya-thanawi);
    cursor: pointer;
    gap: var(--masafa-mutawasta);
    transition: var(--intiqal-sari);
}

.soal-ghani__raas:hover {
    background: var(--lawn-khalfya-hover);
}

.soal-ghani.maftooh .soal-ghani__raas {
    background: var(--lawn-asasi-fath);
}

.soal-ghani__raas h4 {
    display: flex;
    align-items: center;
    gap: var(--masafa-saghira);
    font-size: var(--hajm-asasi);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin: 0;
    flex: 1;
}

.soal-ghani__raas h4 svg {
    color: var(--lawn-asasi);
    flex-shrink: 0;
}

.soal-ghani__aiquna {
    color: var(--lawn-asasi);
    transition: transform var(--intiqal-asasi);
    flex-shrink: 0;
}

.soal-ghani.maftooh .soal-ghani__aiquna {
    transform: rotate(180deg);
}

.soal-ghani__jawab {
    display: none;
    padding: var(--masafa-kabira);
    background: var(--lawn-khalfya-bitaqa);
    border-top: 1px solid var(--lawn-hadd);
}

.soal-ghani.maftooh .soal-ghani__jawab {
    display: block;
}

.soal-ghani__jawab p {
    font-size: var(--hajm-asasi);
    color: var(--lawn-nas-thanawi);
    line-height: 2;
    margin: 0 0 var(--masafa-mutawasta) 0;
}

.soal-ghani__jawab p:last-child {
    margin-bottom: 0;
}

.soal-ghani__jawab ul {
    list-style: disc;
    padding-right: var(--masafa-kabira);
    color: var(--lawn-nas-thanawi);
    line-height: 1.8;
    margin: var(--masafa-mutawasta) 0;
}

.soal-ghani__jawab li {
    margin-bottom: var(--masafa-saghira);
}

.soal-ghani__jawab strong {
    color: var(--lawn-nas-asasi);
}

/* إحصائيات سريعة */
.ihsaat-saria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--masafa-mutawasta);
    margin: var(--masafa-kabira) 0;
}

@media (min-width: 640px) {
    .ihsaat-saria {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ihsaa-saria {
    text-align: center;
    padding: var(--masafa-kabira);
    background: var(--lawn-khalfya-thanawi);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-mutawasta);
}

.ihsaa-saria__raqm {
    font-size: var(--hajm-akbar);
    font-weight: 700;
    color: var(--lawn-asasi);
    margin-bottom: var(--masafa-saghira);
}

.ihsaa-saria__wasf {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
}

/* استخدامات شائعة */
.istikhdamat {
    display: grid;
    gap: var(--masafa-mutawasta);
    margin: var(--masafa-kabira) 0;
}

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

.istikhdam {
    padding: var(--masafa-kabira);
    background: var(--lawn-khalfya-thanawi);
    border: 1px solid var(--lawn-hadd);
    border-radius: var(--haffa-mutawasta);
    text-align: center;
    transition: var(--intiqal-sari);
}

.istikhdam:hover {
    border-color: var(--lawn-asasi);
    transform: translateY(-2px);
}

.istikhdam__aiquna {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--lawn-asasi-fath);
    color: var(--lawn-asasi);
    border-radius: 50%;
    margin: 0 auto var(--masafa-mutawasta);
}

.istikhdam h4 {
    font-size: var(--hajm-asasi);
    font-weight: 600;
    color: var(--lawn-nas-asasi);
    margin: 0 0 var(--masafa-saghira) 0;
}

.istikhdam p {
    font-size: var(--hajm-saghir);
    color: var(--lawn-nas-thanawi);
    line-height: 1.7;
    margin: 0;
}

/* فاصل زخرفي */
.fasel {
    display: flex;
    align-items: center;
    gap: var(--masafa-mutawasta);
    margin: var(--masafa-akbar) 0;
    color: var(--lawn-nas-baht);
}

.fasel::before,
.fasel::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--lawn-hadd);
}

.fasel svg {
    color: var(--lawn-asasi);
}