/* ============================================================
   موقع أخصائية التغذية تهاني عبدالغني — نظام التصميم
   الألوان: أخضر #1DAF4C  |  أخضر داكن #2B4D34
   RTL — متجاوب موبايل أولاً
   ============================================================ */

:root{
  --green:#1DAF4C;
  --green-600:#179a42;
  --green-700:#137d36;
  --green-dark:#2B4D34;
  --green-ink:#1d3a28;
  --green-50:#eafaf0;
  --green-100:#d6f3e1;
  --mint:#f3fbf6;

  --ink:#1f2b24;
  --muted:#6a7c71;
  --line:#e4ede8;
  --bg:#ffffff;
  --surface:#f6faf7;

  --gold:#c9a24a;
  --danger:#c0392b;
  --warn:#e67e22;

  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 4px 14px rgba(43,77,52,.06);
  --shadow:0 14px 40px rgba(43,77,52,.10);
  --shadow-lg:0 24px 60px rgba(43,77,52,.16);
  --container:1180px;
  --font:'Tajawal',system-ui,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:.2s}
img{max-width:100%;display:block}
ul{list-style:none}
h1,h2,h3,h4{color:var(--green-dark);line-height:1.4;font-weight:800}
section{position:relative}

.container{max-width:var(--container);margin-inline:auto;padding-inline:20px}
.center{text-align:center}
.muted{color:var(--muted)}
.green{color:var(--green)}

/* ---------- أزرار ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  padding:13px 26px;border-radius:999px;font-weight:700;font-size:15px;
  cursor:pointer;border:2px solid transparent;font-family:inherit;transition:.25s;white-space:nowrap;
}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(29,175,76,.30)}
.btn-primary:hover{background:var(--green-700);transform:translateY(-2px);box-shadow:0 12px 28px rgba(29,175,76,.38)}
.btn-dark{background:var(--green-dark);color:#fff}
.btn-dark:hover{background:var(--green-ink);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--green-dark);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.32)}
.btn-wa:hover{background:#1eb858;transform:translateY(-2px)}
.btn-lg{padding:16px 34px;font-size:16px}
.btn-block{width:100%}
.btn-sm{padding:8px 16px;font-size:13px}

/* ---------- شارات وعناوين أقسام ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:var(--green-50);color:var(--green-700);
  padding:7px 16px;border-radius:999px;font-weight:700;font-size:13px;margin-bottom:16px;
}
.section{padding:84px 0}
.section-head{max-width:680px;margin:0 auto 52px;text-align:center}
.section-head h2{font-size:clamp(26px,4vw,40px);margin-bottom:14px}
.section-head p{color:var(--muted);font-size:17px}
.section.alt{background:var(--surface)}

/* ============================================================
   الهيدر
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--green-dark)}
.brand img{height:46px;width:46px;flex:none}
.brand .brand-name{display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.brand .brand-name strong{font-size:16px;font-weight:800;color:var(--green-dark)}
.brand .brand-name small{font-size:11px;color:var(--muted);font-weight:500;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.nav-links a{padding:9px 12px;border-radius:10px;font-weight:600;color:var(--green-ink);font-size:14.5px;white-space:nowrap;flex:none}
.nav-links a:hover{background:var(--green-50);color:var(--green-700)}
.nav-links a.active{color:var(--green);background:var(--green-50)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--green-dark);margin:5px 0;border-radius:2px;transition:.3s}

/* ============================================================
   الهيرو
   ============================================================ */
.hero{
  position:relative;padding:70px 0 90px;
  background:
    radial-gradient(1100px 480px at 85% -10%, var(--green-50), transparent 60%),
    radial-gradient(800px 400px at 0% 110%, #eef7f1, transparent 55%);
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.25;margin-bottom:20px}
.hero h1 .hl{color:var(--green);position:relative}
.hero p.lead{font-size:18px;color:#46564d;margin-bottom:30px;max-width:560px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero-stats{display:flex;gap:30px;flex-wrap:wrap}
.hero-stats .stat b{display:block;font-size:28px;color:var(--green-dark);font-weight:800}
.hero-stats .stat span{font-size:13.5px;color:var(--muted)}
.hero-visual{position:relative}
.hero-card{
  background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-lg);
  padding:30px;position:relative;z-index:2;
}
.hero-card .apple-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.05}
.hero-card .apple-bg img{width:80%}
.hero-badge{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:14px 18px;display:flex;align-items:center;gap:12px;z-index:3;font-weight:700;
}
.hero-badge .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--green-50);font-size:20px}
.hero-badge.b1{top:-22px;inset-inline-end:-14px}
.hero-badge.b2{bottom:-22px;inset-inline-start:-14px}
.hero-badge small{display:block;color:var(--muted);font-weight:500;font-size:12px}

/* شريط الشعارات/الثقة */
.trust{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--mint)}
.trust .row{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:center;align-items:center;color:var(--green-ink);font-weight:600}
.trust .row .it{display:flex;align-items:center;gap:9px;font-size:15px}

/* ============================================================
   بطاقات الخدمات
   ============================================================ */
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow-sm);transition:.28s;height:100%;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--green-100)}
.service-card .ic{
  width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--green-50),#fff);
  display:grid;place-items:center;font-size:28px;margin-bottom:18px;border:1px solid var(--green-100);
}
.service-card h3{font-size:19px;margin-bottom:10px}
.service-card p{color:var(--muted);font-size:15px;margin-bottom:14px}
.card-link{color:var(--green);font-weight:700;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.card-link:hover{gap:10px}

/* ============================================================
   الباقات
   ============================================================ */
.pkg{position:relative;display:flex;flex-direction:column}
.pkg.featured{border-color:var(--green);box-shadow:var(--shadow);transform:scale(1.02)}
.pkg .tag{position:absolute;top:-14px;inset-inline-start:50%;transform:translateX(50%);
  background:var(--green);color:#fff;padding:6px 18px;border-radius:999px;font-size:12.5px;font-weight:700}
.pkg h3{font-size:21px;margin-bottom:6px}
.pkg .price{font-size:26px;color:var(--green-dark);font-weight:800;margin:14px 0 4px}
.pkg .price small{font-size:14px;color:var(--muted);font-weight:500}
.pkg ul{margin:18px 0;display:flex;flex-direction:column;gap:11px}
.pkg ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#3c4b43}
.pkg ul li::before{content:"✓";color:var(--green);font-weight:800;flex:none}
.pkg .btn{margin-top:auto}

/* ============================================================
   من أنا
   ============================================================ */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.about-photo{background:linear-gradient(135deg,var(--green-50),var(--mint));border-radius:26px;padding:30px;border:1px solid var(--green-100);position:relative}
.about-photo .ph{aspect-ratio:4/5;border-radius:18px;background:#fff;display:grid;place-items:center;overflow:hidden}
.about-photo .ph img{width:70%;opacity:.85}
.about-credentials{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.cred{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.cred .ic{width:40px;height:40px;border-radius:11px;background:var(--green-50);display:grid;place-items:center;font-size:18px;flex:none}
.cred b{display:block;color:var(--green-dark)}
.cred span{font-size:13.5px;color:var(--muted)}

/* ============================================================
   النصائح
   ============================================================ */
.tip-card{display:flex;gap:16px;align-items:flex-start}
.tip-card .ic{font-size:30px;width:56px;height:56px;border-radius:14px;background:var(--green-50);display:grid;place-items:center;flex:none}
.tip-card h4{font-size:16px;margin-bottom:5px}
.tip-card p{font-size:14px;color:var(--muted)}

/* ============================================================
   المدونة
   ============================================================ */
.post-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.post-card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--green-100),var(--green-50));overflow:hidden;display:grid;place-items:center}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .thumb .ph{font-size:48px;opacity:.5}
.post-card .body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-card .cat{color:var(--green);font-weight:700;font-size:12.5px;margin-bottom:8px}
.post-card h3{font-size:18px;margin-bottom:10px;line-height:1.5}
.post-card p{color:var(--muted);font-size:14.5px;margin-bottom:14px;flex:1}
.post-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}

.article{max-width:780px;margin:0 auto}
.article .cover{border-radius:var(--radius);overflow:hidden;margin-bottom:28px;aspect-ratio:16/8;background:var(--green-50)}
.article h1{font-size:clamp(26px,4vw,38px);margin-bottom:14px}
.article-content{font-size:17px;color:#384740;line-height:2}
.article-content h3{margin:28px 0 12px;font-size:22px}
.article-content p{margin-bottom:16px}
.article-content ul{list-style:disc;padding-inline-start:24px;margin-bottom:16px}

/* فلاتر التصنيف */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.chip{padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:14px;color:var(--green-ink)}
.chip:hover,.chip.active{background:var(--green);color:#fff;border-color:var(--green)}

/* ============================================================
   الفيديو
   ============================================================ */
.video-card{padding:0;overflow:hidden}
.video-card .frame{aspect-ratio:16/9;background:#000}
.video-card .frame iframe{width:100%;height:100%;border:0}
.video-card .body{padding:18px}
.video-card h3{font-size:17px;margin-bottom:6px}
.video-card p{font-size:14px;color:var(--muted)}

/* ============================================================
   قصص النجاح
   ============================================================ */
.story-card{display:flex;flex-direction:column;gap:14px}
.story-imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.story-imgs figure{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:var(--green-50)}
.story-imgs figcaption{position:absolute;top:8px;inset-inline-start:8px;background:rgba(43,77,52,.85);color:#fff;font-size:11px;padding:3px 9px;border-radius:6px}
.story-card .result{display:inline-block;background:var(--green-50);color:var(--green-700);font-weight:700;padding:6px 14px;border-radius:999px;font-size:13px}

/* ============================================================
   الأسئلة الشائعة (Accordion)
   ============================================================ */
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.faq-q{width:100%;text-align:start;background:none;border:none;font-family:inherit;font-weight:700;
  font-size:16px;color:var(--green-dark);padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq-q .x{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green-50);color:var(--green);display:grid;place-items:center;font-weight:800;transition:.3s}
.faq-item.open .faq-q .x{transform:rotate(45deg);background:var(--green);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:.35s ease;color:var(--muted)}
.faq-a div{padding:0 20px 20px}
.faq-item.open .faq-a{max-height:400px}

/* ============================================================
   النماذج
   ============================================================ */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:32px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;margin-bottom:8px;color:var(--green-ink);font-size:14.5px}
.field .req{color:var(--danger)}
.input,.select,.textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;
  font-size:15px;background:#fff;color:var(--ink);transition:.2s;
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--green-50)}
.textarea{resize:vertical;min-height:110px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.field-error{color:var(--danger);font-size:13px;margin-top:6px;display:block}
.form-note{font-size:13px;color:var(--muted);margin-top:10px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3c4b43}
.check input{margin-top:5px}

/* ============================================================
   التنبيهات
   ============================================================ */
.alert{padding:14px 18px;border-radius:12px;margin-bottom:18px;font-weight:600;font-size:14.5px;display:flex;gap:10px;align-items:center}
.alert-success{background:var(--green-50);color:var(--green-700);border:1px solid var(--green-100)}
.alert-error{background:#fdecea;color:var(--danger);border:1px solid #f5c6c0}
.alert-info{background:#eef5fb;color:#2c6da3;border:1px solid #cfe3f3}

/* ============================================================
   حاسبة الزوار التفاعلية
   ============================================================ */
.calc-wrap{max-width:760px;margin:0 auto}
.calc-card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.calc-head{background:linear-gradient(135deg,var(--green-dark),var(--green-700));color:#fff;padding:28px 30px;text-align:center}
.calc-head h2{color:#fff;font-size:24px;margin-bottom:6px}
.calc-head p{opacity:.85;font-size:14.5px}
.calc-body{padding:30px}
.calc-result{margin-top:24px;border-radius:18px;padding:26px;text-align:center;display:none;background:var(--surface);border:1px solid var(--line)}
.calc-result.show{display:block;animation:pop .4s ease}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.gauge{position:relative;width:200px;height:110px;margin:0 auto 8px}
.bmi-number{font-size:48px;font-weight:800;color:var(--green-dark);line-height:1}
.bmi-cat{font-size:20px;font-weight:700;margin:8px 0}
.bmi-scale{display:flex;height:14px;border-radius:999px;overflow:hidden;margin:18px 0 6px}
.bmi-scale span{flex:1}
.bmi-msg{font-size:15px;color:var(--muted);margin-top:8px}
.calc-cta{margin-top:20px}

/* ============================================================
   التذييل
   ============================================================ */
.site-footer{background:var(--green-dark);color:#cfe0d5;padding:60px 0 24px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:40px}
.site-footer img.flogo{height:50px;margin-bottom:16px}
.site-footer h4{color:#fff;font-size:16px;margin-bottom:16px}
.site-footer p{font-size:14px;line-height:1.9;opacity:.85}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:14px;opacity:.85}
.footer-links a:hover{opacity:1;color:var(--green);padding-inline-start:5px}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:18px}
.social a:hover{background:var(--green);transform:translateY(-3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;text-align:center;font-size:13px;opacity:.7}

/* زر واتساب العائم */
.wa-float{position:fixed;bottom:24px;inset-inline-end:24px;width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;font-size:30px;z-index:90;
  box-shadow:0 10px 30px rgba(37,211,102,.45);animation:waPulse 2.2s infinite}
.wa-float:hover{transform:scale(1.08)}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--green),var(--green-700));border-radius:26px;padding:48px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band h2{color:#fff;font-size:clamp(24px,3.5vw,34px);margin-bottom:12px}
.cta-band p{opacity:.92;margin-bottom:24px;font-size:17px}
.cta-band .btn-ghost{background:#fff;border-color:#fff}

/* page hero */
.page-hero{background:radial-gradient(900px 360px at 80% -20%,var(--green-50),transparent 60%);padding:54px 0 36px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(26px,4vw,40px);margin-bottom:10px}
.breadcrumb{font-size:13.5px;color:var(--muted)}
.breadcrumb a:hover{color:var(--green)}

/* طرق الدفع */
.pay-box{background:var(--mint);border:1px solid var(--green-100);border-radius:16px;padding:22px}
.pay-box h3{font-size:18px;margin-bottom:6px;color:var(--green-dark)}
.pay-box .lead{color:var(--muted);font-size:14px;margin-bottom:14px}
.pay-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--green-100);font-size:15px;flex-wrap:wrap}
.pay-row:last-child{border-bottom:none}
.pay-row b{color:var(--green-dark)}
.pay-num{font-weight:800;color:var(--green-700);direction:ltr;unicode-bidi:embed}
.pay-note{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:14px;font-size:13.5px;color:#4a5a51;line-height:1.9}

/* pagination/empty */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .ic{font-size:54px;opacity:.4;margin-bottom:14px}

/* ============================================================
   متجاوب
   ============================================================ */
/* تخفيف ازدحام القائمة على الشاشات المتوسطة */
@media(max-width:1060px){
  .nav-links{gap:2px}
  .nav-links a{padding:9px 10px;font-size:14px}
  .brand .brand-name small{display:none}
}
@media(max-width:992px){
  .nav-links{
    position:fixed;inset:74px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;
    padding:14px 20px;gap:4px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-130%);transition:.32s;z-index:99;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:13px;font-size:15px}
  .brand .brand-name small{display:block}
  .nav-toggle{display:block}
  .nav .nav-cta .btn:not(.nav-toggle){display:none}
}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-visual{order:-1}
  .about-grid{grid-template-columns:1fr;gap:30px}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .hero-badge{position:static;inset:auto;display:inline-flex;margin:10px 0 0 10px}
  .hero-visual{display:flex;flex-direction:column;align-items:center}
}
@media(max-width:760px){
  .nav-links{
    position:fixed;inset:74px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;
    padding:14px 20px;gap:4px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-130%);transition:.32s;z-index:99;
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:13px}
  .nav-toggle{display:block}
  .nav .nav-cta .btn:not(.nav-toggle){display:none}
  .section{padding:60px 0}
  .grid-3,.grid-4,.grid-2,.row-2,.row-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-band{padding:34px 22px}
  .pkg.featured{transform:none}
}