/* =========================================
   KHABIR / AMAL - Unified Theme (Green/White)
   الهدف: توحيد الهوية البصرية وتحسين التجاوب
   بدون أي تعديل على قاعدة البيانات
   ========================================= */

:root{
  --primary-black:#0f172a;
  --dark-gray:#0f172a;
  --primary-gray:#64748b;
  --light-gray:#f0fdf4;
  --white:#ffffff;

  /* الهوية البصرية */
  --primary-green:#16a34a;
  --primary-green-700:#15803d;
  --primary-green-900:#064e3b;

  /* توافق مع متغيرات قديمة داخل الصفحات */
  --accent-orange:var(--primary-green-700);

  --shadow:0 10px 25px rgba(2, 6, 23, .08);
  --shadow-strong:0 18px 45px rgba(2, 6, 23, .12);
  --transition:all .25s ease;
  --radius:16px;
}

html, body{
  font-family:'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

body{
  color:var(--primary-black);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(22,163,74,.10), transparent 55%),
    radial-gradient(900px 500px at 10% 0%, rgba(34,197,94,.08), transparent 60%),
    var(--white);
}

/* تحسين النصوص والروابط */
a{ text-decoration:none; }

/* =========================================
   Base header style (خصوصاً لصفحة الخدمات)
   لا نستخدم !important حتى لا نكسر صفحات فيها CSS داخلي
   ========================================= */
.header{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(2,6,23,.06);
  position: sticky;
  top: 0;
  z-index: 1200;
}
.header .header-content{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 14px;
}
.header .nav-menu{
  display:flex;
  align-items:center;
  list-style:none;
  gap: 18px;
  margin: 0;
  padding: 0;
}
.header .nav-menu a{
  color: var(--primary-black);
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 12px;
  transition: var(--transition);
}
.header .nav-menu a:hover{
  background: rgba(22,163,74,.08);
  color: var(--primary-green-900);
}
.header .nav-menu a.active{
  background: rgba(22,163,74,.12);
  color: var(--primary-green-900);
}

/* =========================================
   Animations (ظهور/حركة)
   ========================================= */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.anim-pop{
  animation: popIn .55s ease both;
}
@keyframes popIn{
  0%{ transform: translateY(10px) scale(.98); opacity: 0; }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}

/* =========================================
   Buttons (توحيد أزرار المشروع)
   ========================================= */
.btn,
.contact-btn,
.search-btn,
.form-submit{
  border-radius:12px !important;
  transition: var(--transition) !important;
}

.btn-solid,
.btn-primary,
.contact-btn.primary,
.search-btn,
.form-submit{
  background-color: var(--primary-green) !important;
  border-color: var(--primary-green) !important;
  color: var(--white) !important;
}

.btn-solid:hover,
.btn-primary:hover,
.contact-btn.primary:hover,
.search-btn:hover,
.form-submit:hover{
  background-color: var(--primary-green-700) !important;
  border-color: var(--primary-green-700) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(22,163,74,.20);
}

.btn-outline{
  border-color: rgba(22,163,74,.55) !important;
  color: var(--primary-green-700) !important;
  background-color: rgba(22,163,74,.06) !important;
}
.btn-outline:hover{
  background-color: var(--primary-green) !important;
  color: var(--white) !important;
}

/* أزرار كانت برتقالي سابقًا */
.btn-accent,
.btn-secondary{
  background-color: var(--primary-green-700) !important;
  border-color: var(--primary-green-700) !important;
  color: var(--white) !important;
}
.btn-accent:hover,
.btn-secondary:hover{
  background-color: var(--primary-green-900) !important;
  border-color: var(--primary-green-900) !important;
}

/* زر مكالمات (مختلف عن واتساب) */
.btn-phone{
  background: rgba(15, 23, 42, .04) !important;
  border: 2px solid rgba(22,163,74,.40) !important;
  color: var(--primary-green-700) !important;
}
.btn-phone:hover{
  background: rgba(22,163,74,.08) !important;
  transform: translateY(-2px);
}

/* أزرار التواصل في كرت الخبراء (hom.php) */
.contact-btn.phone{
  background: rgba(15, 23, 42, .04) !important;
  color: var(--primary-green-700) !important;
  border: 2px solid rgba(22,163,74,.35) !important;
}
.contact-btn.phone:hover{
  background: rgba(22,163,74,.10) !important;
  color: var(--primary-green-900) !important;
  transform: translateY(-2px);
}

/* =========================================
   Header / Navigation (Responsive)
   يدعم كلا: .main-nav (index) و .nav-menu (hom/we)
   ========================================= */
.nav-toggle{
  display:none;
  border:0;
  background: rgba(22,163,74,.08);
  color: var(--primary-green-700);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.nav-toggle:hover{
  background: rgba(22,163,74,.14);
}

/* ملاحظة: نستخدم 992px بدل 768px حتى نغطي أجهزة موبايل/تابلت كبيرة */
@media (max-width: 992px){
  .nav-toggle{ display:flex; }

  /* تخطيط الهيدر (موبايل): كل العناصر في نفس السطر */
  header,
  .header{
    padding: 8px 0 !important;
  }
  header .header-content,
  .header .header-content{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    direction: rtl;
    gap: 10px !important;
    padding: 8px 0 !important;
  }
  /* نخلي الـ nav ما ياخذ مساحة (القائمة نفسها fixed) */
  header nav,
  .header nav{
    display: contents;
  }

  header .logo,
  .header .logo{
    order: 1;
    display:flex;
    align-items:center;
    gap: 8px;
  }
  header .logo i,
  .header .logo i{
    font-size: 1.6rem !important;
    margin: 0 !important;
  }
  header .logo h1,
  .header .logo h1{
    font-size: 1.35rem !important;
    line-height: 1;
    margin: 0 !important;
  }

  header .auth-buttons,
  .header .auth-buttons{
    order: 2;
    display:flex;
    justify-content: center;
    align-items:center;
    gap: 8px !important;
    margin: 0 !important;
    flex: 1 1 auto;
  }
  /* حالة تسجيل الدخول (Hi ...) */
  header .nonep,
  .header .nonep{
    order: 2;
    margin: 0 !important;
    flex: 1 1 auto;
    text-align: center;
    font-size: 1rem;
    white-space: nowrap;
  }

  header .nav-toggle,
  .header .nav-toggle{
    order: 3;
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  /* Drawer menu (جميل + أنيميشن) */
  header .main-nav ul,
  .header .nav-menu{
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(320px, 82vw);
    padding: 14px !important;
    margin: 0 !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    /* إزالة/تخفيف “الإطار الشفاف” اللي كان ظاهر */
    border-right: 0;
    box-shadow: 0 25px 60px rgba(2,6,23,.18);
    /* إخفاء كامل افتراضيًا (بدون ظهور جانبي) */
    transform: translateX(-120%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s ease, opacity .2s ease, visibility 0s linear .28s;
    z-index: 1300;
    overflow-y: auto;
  }
  header.nav-open .main-nav ul,
  .header.nav-open .nav-menu{
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .28s ease, opacity .2s ease;
  }

  header .main-nav ul li a,
  .header .nav-menu li a{
    display:flex;
    align-items:center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(22,163,74,.06);
    /* بدون إطار حول عناصر القائمة */
    border: 0;
    color: var(--primary-black);
  }
  header .main-nav ul li a:hover,
  .header .nav-menu li a:hover{
    background: rgba(22,163,74,.10);
    transform: translateX(2px);
  }

  /* أزرار الدخول/الجديد في الهيدر (موبايل) */
  header .auth-buttons .btn,
  .header .auth-buttons .btn{
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
    white-space: nowrap;
  }
}

/* Overlay عند فتح القائمة (موبايل) */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .55);
  backdrop-filter: blur(2px);
  /* خلي الهيدر فوق الـ overlay عشان زر القائمة/الأزرار ما “تتعطل” */
  z-index: 950;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.nav-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

/* قفل سكرول الصفحة عند فتح القائمة */
html.nav-locked,
html.nav-locked body{
  overflow: hidden !important;
}

/* رأس الـ Drawer داخل القائمة */
.drawer-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 6px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(2,6,23,.06);
}
.drawer-title{
  font-weight: 800;
  color: var(--primary-black);
}
.drawer-close{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.75);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: var(--transition);
}
.drawer-close:hover{
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.25);
}

/* =========================================
   Services page (Icons grid)
   ========================================= */
.services-hero{
  padding: 60px 0 25px;
}
.services-hero .hero-box{
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(255,255,255,.92));
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 28px 22px;
}
.services-hero h2{
  font-size: 2.1rem;
  margin-bottom: 8px;
  color: var(--dark-gray);
}
.services-hero p{
  color: var(--primary-gray);
  font-size: 1.05rem;
}

.services-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 18px 0 70px;
}

@media (max-width: 1100px){
  .services-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .services-grid{ grid-template-columns: 1fr; }
}

.service-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  display:flex;
  gap: 14px;
  align-items:center;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(22,163,74,.35);
}
.service-icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(22,163,74,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--primary-green-700);
  flex: 0 0 auto;
}
.service-icon i{
  font-size: 1.35rem;
}
.service-text h3{
  margin:0;
  font-size: 1.05rem;
  color: var(--dark-gray);
}
.service-text p{
  margin: 4px 0 0;
  font-size: .92rem;
  color: var(--primary-gray);
}

/* تحسين ألوان بعض الهيدرز داخل صفحات البروفايل/النتائج */
.profile-header,
.worker-header{
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-900) 100%) !important;
}

/* تحسين قسم البحث في صفحة الخبراء */
.search-section{
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-900) 100%) !important;
}

/* =========================================
   تحسينات صفحات التسجيل (lon/open) بدون كسر التصميم الحالي
   ========================================= */
.options-row input[type="radio"]:checked + .option-pill{
  background: linear-gradient(135deg, var(--primary-green), var(--primary-green-900)) !important;
  box-shadow: 0 10px 25px rgba(22,163,74,.35) !important;
}

.account-type-btn{
  background: rgba(255,255,255,.92) !important;
  border: 2px solid rgba(22,163,74,.18) !important;
}
.account-type-btn.active.worker,
.account-type-btn.worker{
  border-color: rgba(22,163,74,.30) !important;
}
.account-type-btn.worker .account-icon,
.account-type-btn.active.worker .account-icon{
  background-color: rgba(22,163,74,.10) !important;
  color: var(--primary-green-700) !important;
}
.account-type-btn.active.worker::before{
  background-color: var(--primary-green) !important;
}