/* =========================================================
   drsallyacademy.com — Main Stylesheet
   أكاديمية دكتور سالي للعلوم
   Palette: بترولي غامق + ذهبي
========================================================= */

:root{
  --bg-0:#0a1f16;        /* أغمق خلفية */
  --bg-1:#0e2a1e;        /* خلفية أساسية */
  --bg-2:#123626;        /* بطاقات/بانلز */
  --bg-3:#173f2d;        /* حدود/هوفر */
  --gold:#d9a94a;
  --gold-light:#f3cd7e;
  --gold-dark:#b4842f;
  --text-0:#f6f1e3;
  --text-1:#cddbcf;
  --text-muted:#8fa89a;
  --border:#20492f;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:8px;
  --shadow-gold:0 10px 30px -10px rgba(217,169,74,.35);
  --font-display:'Cairo', 'Tajawal', sans-serif;
  --font-body:'Tajawal', 'Cairo', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-1);
  color:var(--text-1);
  font-family:var(--font-body);
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:1240px;margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-0);font-weight:800;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;font-weight:700;font-size:15px;border:1px solid transparent;transition:.25s;}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#1c2b1f;box-shadow:var(--shadow-gold);}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05);}
.btn-outline{border-color:var(--gold);color:var(--gold-light);background:transparent;}
.btn-outline:hover{background:rgba(217,169,74,.1);}
.btn-gold-sm,.btn-outline-sm,.btn-ghost-sm{padding:8px 18px;border-radius:999px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;}
.btn-gold-sm{background:var(--gold);color:#1c2b1f;}
.btn-outline-sm{border:1px solid var(--border);color:var(--text-1);}
.btn-ghost-sm{color:var(--gold-light);}
.btn-gold-sm img,.btn-outline-sm img{width:14px;filter:invert(1);opacity:.8;}

/* ---------- Topbar ---------- */
.topbar{background:var(--bg-0);border-bottom:1px solid var(--border);font-size:13px;}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;}
.social-links{display:flex;gap:12px;}
.social-links img{width:16px;height:16px;opacity:.85;filter:invert(1);}
.topbar-auth{display:flex;gap:10px;}

/* ---------- Header / Nav ---------- */
.main-header{background:var(--bg-1);padding:14px 0;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;}
.header-inner{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-icon{width:46px;height:46px;}
.brand-text{font-family:var(--font-display);font-size:14px;color:var(--text-1);line-height:1.4;}
.brand-text strong{color:var(--gold-light);font-size:17px;display:block;}
.brand-text small{color:var(--text-muted);font-weight:400;font-size:11px;}
.main-nav{display:flex;gap:28px;font-weight:600;font-size:15px;}
.main-nav a{padding:6px 2px;border-bottom:2px solid transparent;color:var(--text-1);transition:.2s;}
.main-nav a:hover,.main-nav a.active{color:var(--gold-light);border-color:var(--gold);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;}
.nav-toggle span{width:24px;height:2px;background:var(--gold-light);}

/* ---------- Hero ---------- */
.hero{position:relative;padding:70px 0;overflow:hidden;}
.hero-bg-icon{position:absolute;opacity:.15;filter:invert(70%) sepia(50%) saturate(400%) hue-rotate(80deg);}
.hero-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center;}
.hero-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:linear-gradient(160deg,var(--bg-2),var(--bg-0));border:1px solid var(--border);}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-photo .ring{position:absolute;inset:-15%;border:2px dashed var(--gold);border-radius:50%;opacity:.35;animation:spin 40s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--gold-light);font-weight:700;letter-spacing:.5px;margin-bottom:14px;}
.eyebrow::before,.eyebrow::after{content:'';flex:0 0 30px;height:1px;background:var(--gold);}
.hero-title{font-size:clamp(30px,4.2vw,46px);line-height:1.25;margin-bottom:18px;}
.hero-title span{color:var(--gold-light);}
.hero-desc{color:var(--text-1);max-width:560px;margin-bottom:22px;font-size:16px;}
.hero-highlight{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--gold-dark);padding:10px 18px;border-radius:12px;color:var(--gold-light);font-weight:700;margin-bottom:16px;}
.hero-note{color:var(--text-muted);font-size:14px;margin-bottom:26px;max-width:520px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Stats ---------- */
.stats{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);margin-top:-10px;position:relative;z-index:2;}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{display:flex;align-items:center;gap:12px;justify-content:center;padding:26px 10px;border-left:1px solid var(--border);}
.stat:last-child{border-left:none;}
.stat img{width:30px;filter:invert(78%) sepia(45%) saturate(500%) hue-rotate(0deg);}
.stat-num{color:var(--gold-light);font-weight:800;font-size:22px;font-family:var(--font-display);}
.stat-label{color:var(--text-muted);font-size:13px;}

/* ---------- Section heading ---------- */
.section{padding:70px 0;}
.section-title{display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;font-size:26px;margin-bottom:36px;}
.section-title::before,.section-title::after{content:'';width:50px;height:1px;background:var(--gold-dark);}

/* ---------- Stage filter ---------- */
.filter-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:40px;}
.filter-tab{padding:10px 22px;border-radius:999px;border:1px solid var(--border);background:var(--bg-2);color:var(--text-1);font-weight:600;font-size:14px;transition:.2s;}
.filter-tab.active,.filter-tab:hover{background:var(--gold);color:#1c2b1f;border-color:var(--gold);}

/* ---------- Course cards ---------- */
.course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.course-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:.25s;}
.course-card:hover{transform:translateY(-6px);border-color:var(--gold-dark);}
.course-thumb{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#0f2f21,#173f2d);}
.course-thumb img{width:100%;height:100%;object-fit:cover;}
.badge{position:absolute;top:10px;right:10px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;}
.badge-live{background:var(--gold);color:#1c2b1f;}
.badge-soon{background:rgba(0,0,0,.55);color:var(--text-0);border:1px solid var(--gold-dark);}
.course-body{padding:16px;}
.course-stage{color:var(--gold-light);font-size:12px;font-weight:700;margin-bottom:4px;}
.course-title{font-size:16px;margin-bottom:6px;}
.course-desc{color:var(--text-muted);font-size:13px;margin-bottom:12px;min-height:38px;}
.course-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-muted);border-top:1px solid var(--border);padding-top:10px;}
.rating{color:var(--gold-light);font-weight:700;}
.carousel-nav{display:flex;justify-content:center;gap:16px;margin-top:24px;}
.carousel-nav button{width:38px;height:38px;border-radius:50%;background:var(--bg-2);border:1px solid var(--border);color:var(--gold-light);}

/* ---------- Features ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.feature{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 14px;text-align:center;}
.feature img{width:32px;margin:0 auto 12px;filter:invert(78%) sepia(45%) saturate(500%);}
.feature h4{font-size:14px;margin-bottom:6px;}
.feature p{font-size:12px;color:var(--text-muted);}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.testi-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;position:relative;}
.testi-quote{font-size:28px;color:var(--gold-dark);position:absolute;top:14px;left:20px;}
.testi-text{margin-bottom:16px;font-size:14px;}
.testi-person{display:flex;align-items:center;gap:10px;}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--bg-3);object-fit:cover;}
.testi-name{font-weight:700;color:var(--text-0);font-size:14px;}
.testi-stars{color:var(--gold-light);font-size:12px;}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--bg-0),var(--bg-2));border:1px solid var(--gold-dark);border-radius:var(--radius-lg);padding:40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.cta-band h3{font-size:22px;margin-bottom:6px;}
.cta-band p{color:var(--text-muted);font-size:14px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-0);border-top:1px solid var(--border);padding:50px 0 20px;margin-top:70px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;margin-bottom:30px;}
.footer-col h4{font-size:15px;color:var(--gold-light);margin-bottom:14px;}
.footer-col li{margin-bottom:8px;font-size:13px;color:var(--text-muted);}
.footer-col a:hover{color:var(--gold-light);}
.app-badges{display:flex;gap:10px;margin-top:10px;}
.app-badges img{height:38px;}
.footer-bottom{border-top:1px solid var(--border);padding-top:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--text-muted);}
.footer-social{display:flex;gap:12px;}
.footer-social img{width:16px;filter:invert(1);opacity:.8;}

/* ---------- Forms (login/register/contact) ---------- */
.form-wrap{max-width:480px;margin:60px auto;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;}
.form-wrap h1{font-size:24px;text-align:center;margin-bottom:6px;}
.form-wrap .sub{text-align:center;color:var(--text-muted);font-size:14px;margin-bottom:26px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:14px;margin-bottom:6px;color:var(--text-1);}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-1);color:var(--text-0);font-family:inherit;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);}
.form-alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:14px;}
.form-alert.error{background:rgba(220,80,80,.12);border:1px solid #a94444;color:#f3b6b6;}
.form-alert.success{background:rgba(80,180,120,.12);border:1px solid #3f8f5f;color:#b6f0c8;}
.form-footer{text-align:center;font-size:13px;color:var(--text-muted);margin-top:16px;}

/* ---------- Generic page hero ---------- */
.page-hero{padding:50px 0;text-align:center;}
.page-hero h1{font-size:32px;margin-bottom:10px;}
.page-hero p{color:var(--text-muted);max-width:600px;margin:0 auto;}

/* ---------- Library / Tests grids ---------- */
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.resource-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;display:flex;gap:14px;align-items:flex-start;}
.resource-card img{width:34px;filter:invert(78%) sepia(45%) saturate(500%);}
.resource-card h4{font-size:15px;margin-bottom:4px;}
.resource-card p{font-size:13px;color:var(--text-muted);}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-photo{max-width:340px;margin:0 auto;}
  .course-grid{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .resource-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .main-nav{position:absolute;top:100%;right:0;left:0;background:var(--bg-1);flex-direction:column;padding:16px 24px;border-bottom:1px solid var(--border);display:none;}
  .main-nav.open{display:flex;}
  .nav-toggle{display:flex;}
  .topbar-inner{flex-direction:column;gap:8px;}
  .course-grid{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .stats-inner{grid-template-columns:repeat(2,1fr);}
  .stat{border-left:none;border-bottom:1px solid var(--border);}
  .resource-grid{grid-template-columns:1fr;}
}

/* =========================================================
   الاشتراكات المدفوعة — بطاقات الخطط
========================================================= */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto;}
.plan-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:28px 22px;text-align:center;transition:.25s;}
.plan-card:hover{transform:translateY(-6px);border-color:var(--gold-dark);}
.plan-card h3{font-size:19px;margin-bottom:14px;}
.plan-price{font-family:var(--font-display);font-weight:800;font-size:38px;color:var(--gold-light);margin-bottom:4px;}
.plan-price span{font-size:15px;color:var(--text-muted);font-weight:600;}
.plan-duration{color:var(--text-muted);font-size:13px;margin-bottom:14px;}
.plan-desc{color:var(--text-1);font-size:13px;margin-bottom:20px;min-height:36px;}

/* =========================================================
   بروفايل الطالب — شبيه بفيسبوك
========================================================= */
.panel{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;margin-bottom:22px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.panel-head h2{font-size:18px;}
.empty-note{color:var(--text-muted);text-align:center;padding:16px 0;font-size:14px;}
.alert-box{border-radius:12px;padding:14px 18px;font-size:14px;margin-bottom:18px;}
.alert-box.alert-success{background:rgba(217,169,74,.12);border:1px solid var(--gold-dark);color:var(--gold-light);}
.alert-box.alert-error{background:rgba(200,70,70,.12);border:1px solid #a34848;color:#f0b4b4;}

.profile-cover-wrap{position:relative;}
.profile-cover{height:260px;background:linear-gradient(135deg,var(--bg-2),var(--bg-0)) center/cover no-repeat;position:relative;border-bottom:1px solid var(--border);}
.cover-edit-btn{position:absolute;bottom:14px;left:24px;background:rgba(10,20,15,.65);color:var(--text-0);border:1px solid var(--gold-dark);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;}
.profile-head{display:flex;align-items:flex-end;gap:20px;margin-top:-58px;padding-bottom:18px;}
.profile-avatar-wrap{position:relative;flex:0 0 auto;}
.profile-avatar{width:130px;height:130px;border-radius:50%;object-fit:cover;border:5px solid var(--bg-1);background:var(--bg-2);}
.avatar-edit-btn{position:absolute;bottom:6px;left:6px;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#1c2b1f;border:2px solid var(--bg-1);font-weight:800;}
.profile-info h1{font-size:22px;margin-bottom:4px;}
.profile-info p{color:var(--text-muted);font-size:13px;display:flex;align-items:center;gap:8px;}

.profile-grid{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start;}
.profile-side .panel{position:sticky;top:90px;}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.gallery-item{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--border);}
.gallery-item img{width:100%;height:100%;object-fit:cover;}
.gallery-del{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:1;border:none;}

.students-directory{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow-y:auto;}
.directory-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;transition:.2s;}
.directory-item:hover{background:var(--bg-3);}
.directory-item img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--bg-1);}
.directory-item strong{display:block;font-size:14px;}
.directory-item small{color:var(--text-muted);font-size:12px;}

.post-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;margin-bottom:18px;}
.post-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.post-header img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--bg-1);}
.post-header strong{font-size:14px;}
.post-time{color:var(--text-muted);font-size:12px;}
.post-del{margin-inline-start:auto;background:none;border:none;color:#e08787;font-size:12px;font-weight:700;}
.post-content{font-size:14px;color:var(--text-1);margin-bottom:10px;white-space:pre-wrap;}
.post-image{width:100%;border-radius:12px;margin-bottom:10px;max-height:420px;object-fit:cover;}
.post-actions{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:8px 0;margin-bottom:10px;}
.like-btn{background:none;border:none;color:var(--text-1);font-size:13px;font-weight:700;}
.like-btn.liked{color:var(--gold-light);}
.post-comments{display:flex;flex-direction:column;gap:8px;}
.comment{display:flex;gap:8px;align-items:flex-start;}
.comment img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--bg-1);}
.comment strong{font-size:12.5px;display:block;}
.comment p{font-size:13px;color:var(--text-1);}
.comment-form{display:flex;gap:8px;margin-top:4px;}
.comment-form input{flex:1;background:var(--bg-1);border:1px solid var(--border);border-radius:999px;padding:8px 14px;color:var(--text-0);font-size:13px;}
.comment-form button{background:var(--gold);color:#1c2b1f;border:none;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;}

@media (max-width:900px){
  .profile-grid{grid-template-columns:1fr;}
  .profile-side .panel{position:static;}
  .plans-grid{grid-template-columns:1fr;}
}

/* أزرار صغيرة إضافية (نفس تصميم لوحة الإدارة) — تُستخدم في صفحات الاشتراك والبروفايل */
.btn-sm{padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;}
.btn-sm-gold{background:var(--gold);color:#1c2b1f;}
.btn-sm-outline{border-color:var(--border);color:var(--text-1);background:transparent;}
.btn-sm-danger{background:rgba(224,108,108,.15);color:#e06c6c;border-color:rgba(224,108,108,.3);}
.btn-sm-danger:hover{background:rgba(224,108,108,.25);}