/* =============================================================================
   MAIN — Main Layout Styles | أنماط التخطيط الرئيسية
   =============================================================================
   Sections:
     • LAYT  — Main content layout (.main-content, .section-header)
     • CRSL  — Carousel styles (arrows, dots, counter, viewport)
     • CARD  — Card styles (hover effects, accent colors, footer)
     • PROM  — Promo banner section
     • FOOT  — Footer layout (grid, brand, links, accordion, contact)
     • THSW  — Theme switcher button
     • BACK  — Back-to-top button
   =============================================================================
   Related: index.html (section structure), critical.css (base variables)
            overlays.css (content grids), responsive.css (mobile overrides)
   ============================================================================= */

/* =============================================================================
   LAYT — Main Content Layout | تخطيط المحتوى الرئيسي
   ============================================================================= */
.main-content{max-width:1280px;margin:0 auto;padding:5rem 2.5rem}
.section-header{text-align:center;margin-bottom:4rem}
.section-label{display:inline-block;background:var(--accent-gold-dim);border:1px solid rgba(245,200,66,0.12);color:var(--accent-gold);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:.3rem 1.1rem;border-radius:var(--radius-full);margin-bottom:1rem;backdrop-filter:blur(4px)}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:900;color:var(--text-primary);line-height:1.15}
.section-title span{color:var(--accent-gold)}
.section-desc{font-size:1rem;color:var(--text-secondary);max-width:560px;margin:.75rem auto 0;line-height:1.7}
.section-line{width:60px;height:3px;background:var(--gradient-primary);border-radius:2px;margin:.8rem auto 0}

/* =============================================================================
   CRSL — Carousel Styles | أنماط العارض الدوار
   Related: carousel.js (Carousel engine), index.html (#cards section)
   ============================================================================= */
.carousel-wrapper{position:relative}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:48px;height:48px;background:var(--bg-glass);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border:1px solid var(--border-color);border-radius:50%;color:var(--text-secondary);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,0,0,0.25);transition:all .25s;outline:none}
.carousel-arrow:hover{background:var(--gradient-primary);color:#0F172A;border-color:transparent;transform:translateY(-50%) scale(1.06);box-shadow:0 12px 40px rgba(245,200,66,0.15)}
.carousel-arrow:active{transform:translateY(-50%) scale(.96)}
.carousel-arrow.disabled{opacity:.2;pointer-events:none}
.arrow-prev{left:-24px}
.arrow-next{right:-24px}
.carousel-dots{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:2rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);cursor:pointer;transition:all .3s;border:none;outline:none;padding:0}
.dot.active{background:var(--accent-gold);width:28px;border-radius:4px;box-shadow:0 2px 12px rgba(245,200,66,0.20)}
.dot:hover:not(.active){background:rgba(245,200,66,0.35)}
.carousel-counter{position:absolute;top:-48px;right:0;font-size:.8rem;color:var(--text-muted);font-weight:500;font-family:'DM Sans',sans-serif}
.carousel-counter span{color:var(--accent-gold);font-weight:700}
.cards-viewport{overflow:hidden;border-radius:var(--radius);padding:0 2px}
.cards-grid{display:flex;gap:1.6rem;will-change:auto;padding:.5rem .2rem 1.2rem;align-items:stretch;flex-direction:row-reverse}

/* =============================================================================
   CARD — Card Styles | أنماط البطاقات
   Related: CRSL (carousel), carousel.js (CARDS_DATA)
   ============================================================================= */
.card{background:var(--bg-card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius);border:1px solid var(--border-color);padding:2.4rem 2rem;position:relative;overflow:hidden;cursor:pointer;transition:all .35s cubic-bezier(0.23,1,0.32,1);box-shadow:var(--shadow-card);display:flex;flex-direction:column;flex:0 0 calc((100% - 3.2rem) / 3);min-width:0;box-sizing:border-box}
.card::before{content:'';position:absolute;inset:0;background:var(--card-accent-light,rgba(245,200,66,0.02));opacity:0;transition:opacity .35s}
.card:hover::before{opacity:1}
.card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gradient-primary);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(0.23,1,0.32,1)}
.card:hover::after{transform:scaleX(1)}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:rgba(245,200,66,0.15);background:var(--bg-card-hover)}
.card-teachers{--card-accent-light:rgba(245,200,66,0.04)}
.card-courses{--card-accent-light:rgba(74,158,255,0.04)}
.card-packages{--card-accent-light:rgba(167,139,250,0.04)}
.card-supplies{--card-accent-light:rgba(61,213,176,0.04)}
.card-exams{--card-accent-light:rgba(255,107,138,0.04)}
.card-medical{--card-accent-light:rgba(74,158,255,0.04)}
.card-entertain{--card-accent-light:rgba(167,139,250,0.04)}
.card-icon-wrap{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1.5rem;transition:transform .35s;flex-shrink:0;position:relative}
.card:hover .card-icon-wrap{transform:scale(1.06) rotate(-4deg)}
.card-teachers .card-icon-wrap{background:rgba(245,200,66,0.12);color:var(--accent-gold)}
.card-courses .card-icon-wrap{background:rgba(74,158,255,0.12);color:var(--accent-blue)}
.card-packages .card-icon-wrap{background:rgba(167,139,250,0.12);color:var(--accent-purple)}
.card-supplies .card-icon-wrap{background:rgba(61,213,176,0.12);color:var(--accent-teal)}
.card-exams .card-icon-wrap{background:rgba(255,107,138,0.12);color:var(--accent-rose)}
.card-medical .card-icon-wrap{background:rgba(74,158,255,0.12);color:var(--accent-blue)}
.card-entertain .card-icon-wrap{background:rgba(167,139,250,0.12);color:var(--accent-purple)}
.card-tag{position:absolute;top:1.2rem;right:1.2rem;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .7rem;border-radius:var(--radius-full);background:var(--accent-gold-dim);color:var(--accent-gold);backdrop-filter:blur(4px)}
.card-title{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--text-primary);margin-bottom:.6rem;line-height:1.25}
.card-desc{font-size:.87rem;line-height:1.7;color:var(--text-secondary);flex:1}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--border-color)}
.card-meta{font-size:.75rem;color:var(--text-muted);display:flex;align-items:center;gap:.4rem}
.card-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--accent-gold);transition:gap .2s}
.card:hover .card-link{gap:.7rem}

/* =============================================================================
   PROM — Promotional Banner | بانر العروض الترويجية
   Related: index.html (#promo-section), content.js (applyPromo)
   ============================================================================= */
.promo-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius);padding:3.5rem 4rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;position:relative;overflow:hidden;margin:3rem 2.5rem;box-shadow:var(--shadow-card)}
.promo-section::before{content:'';position:absolute;right:-80px;top:-80px;width:320px;height:320px;background:radial-gradient(circle,rgba(245,200,66,0.06),transparent 65%);border-radius:50%}
.promo-section::after{content:'';position:absolute;left:-60px;bottom:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(74,158,255,0.04),transparent 65%);border-radius:50%}
.promo-text{position:relative;z-index:1}
.promo-label{color:var(--accent-gold);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem}
.promo-title{font-family:'Playfair Display',serif;font-size:2rem;font-weight:900;color:var(--text-primary);line-height:1.2;margin-bottom:.6rem}
.promo-desc{font-size:.9rem;color:var(--text-secondary);max-width:480px;line-height:1.7}
.promo-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:.6rem;background:var(--gradient-primary);color:#0F172A;font-weight:700;font-size:.9rem;padding:.9rem 2.2rem;border-radius:var(--radius-full);position:relative;z-index:1;box-shadow:0 8px 28px rgba(245,200,66,0.15);transition:all .25s;font-family:'DM Sans',sans-serif;white-space:nowrap}
.promo-btn:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(245,200,66,0.25)}

/* =============================================================================
   FOOT — Footer Section | تذييل الصفحة
   Related: index.html (footer structure), core.js (Footer.toggle)
   ============================================================================= */
footer{background:var(--footer-bg);color:var(--footer-text);margin-top:4rem;position:relative;overflow:hidden;transition:background .4s;border-top:1px solid var(--border-color)}
.footer-top{max-width:1280px;margin:0 auto;padding:3rem 2.5rem 2rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:.8rem}
.footer-brand .logo-wrap{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.footer-logo-icon{width:46px;height:46px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#0F172A;font-weight:900;box-shadow:0 0 20px rgba(245,200,66,0.10)}
.footer-brand-name{font-family:'Playfair Display',serif;color:#FFFFFF;font-size:1.2rem;font-weight:700;line-height:1.15}
.footer-brand-name span{color:var(--accent-gold);font-size:.6rem;font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:.05rem}
.footer-about{font-size:.85rem;line-height:1.8;color:var(--footer-text);margin-bottom:1.5rem;max-width:320px}
.social-links{display:flex;gap:.6rem;flex-wrap:wrap}
.social-btn{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:all .22s;border:1px solid var(--border-color);background:rgba(255,255,255,0.02);color:var(--footer-text)}
.social-btn:hover{transform:translateY(-3px);background:var(--accent-gold-dim);border-color:var(--accent-gold);color:var(--accent-gold)}
.footer-col h4{font-family:'Playfair Display',serif;color:#FFFFFF;font-size:1rem;font-weight:700;margin-bottom:1.2rem;position:relative;padding-bottom:.8rem}
.footer-col:not(.accordion) h4::after{content:'';position:absolute;bottom:0;left:0;width:28px;height:2px;background:var(--gradient-primary);border-radius:1px}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.35rem}
.footer-links a{color:var(--footer-text);font-size:.8rem;transition:color .2s,padding-left .2s;display:flex;align-items:center;gap:.5rem}
.footer-links a:hover{color:var(--accent-gold);padding-left:4px}
.footer-links a i{font-size:.6rem;color:var(--accent-gold);opacity:.5}
.footer-header-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;margin-bottom:.8rem}
.footer-header-wrapper h4{margin:0!important;padding:0!important;flex:0 1 auto;color:#FFFFFF;font-size:1rem;font-weight:700;font-family:'Playfair Display',serif}
.footer-header-wrapper h4::after{display:none!important}
.accordion-toggle-btn{width:34px;height:34px;border:1px solid var(--border-light);background:rgba(255,255,255,0.05);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:all .2s;flex-shrink:0}
.accordion-toggle-btn:hover{background:rgba(255,255,255,0.12);border-color:var(--accent-gold);color:var(--accent-gold)}
[data-theme="modern-light"] .accordion-toggle-btn{border:2px solid #333!important;background:#fff!important;color:#000!important}
[data-theme="modern-light"] .accordion-toggle-btn:hover{border-color:var(--accent-gold)!important;background:var(--accent-gold-dim)!important;color:var(--accent-gold)!important}
.footer-col.accordion .footer-accordion-body{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(0.23,1,0.32,1),opacity .3s;opacity:0}
.footer-col.accordion.open .footer-accordion-body{max-height:500px;opacity:1}
.contact-item{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:.9rem}
.contact-icon{width:34px;height:34px;flex-shrink:0;background:var(--accent-gold-dim);border:1px solid rgba(245,200,66,0.08);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent-gold);font-size:.8rem}
.contact-info p{font-size:.8rem;color:var(--footer-text);margin-bottom:.05rem}
.contact-info span{font-size:.8rem;color:var(--footer-text)}
.footer-bottom{border-top:1px solid var(--border-color);padding:1.4rem 2.5rem;max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content: center;gap:1rem;flex-wrap:wrap;align-items: center}
.copyright{font-size:.78rem;color:var(--footer-text);text-align:center;line-height:1.6}
.copyright span{color:var(--accent-gold)}
.footer-seo-links{display:flex;gap:.8rem;font-size:.7rem}
.footer-seo-links a{color:var(--footer-text);border:1px solid var(--border-color);padding:.2rem .6rem;border-radius:var(--radius-sm);transition:color .2s,border-color .2s}
.footer-seo-links a:hover{color:var(--accent-gold);border-color:var(--accent-gold)}

/* =============================================================================
   THSW — Theme Switcher | مبدل السمات
   Related: core.js (Theme.toggle), index.html (#themeToggleBtn)
   ============================================================================= */
.theme-switcher{position:fixed;left:1.8rem;bottom:2rem;z-index:9999;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.theme-toggle-btn{width:44px;height:44px;border-radius:50%;background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,0.20);transition:all .3s;color:var(--text-primary)}
.theme-toggle-btn:hover{transform:rotate(20deg) scale(1.06);border-color:var(--accent-gold)}

/* =============================================================================
   BACK — Back to Top | زر العودة للأعلى
   Related: core.js (Scroll.init), index.html (#backTop)
   ============================================================================= */
.back-top{position:fixed;bottom:2rem;right:1.8rem;z-index:999;width:44px;height:44px;background:var(--gradient-primary);border-radius:50%;border:none;cursor:pointer;color:#0F172A;font-size:1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(245,200,66,0.15);transition:all .3s;opacity:0;pointer-events:none;transform:translateY(12px)}
.back-top.show{opacity:1;pointer-events:all;transform:translateY(0)}
.back-top:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(245,200,66,0.25)}