body,
body * {
  font-family: 'Noto Kufi Arabic', sans-serif !important;
}

body {
  background-color: #f0f4f8;
}

/* ── الهيدر العائم — بدون ضباب، لون صريح ── */
.glass-header {
  background: #1A383F !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28) !important;
  /* توسيط الهيدر — 80% عرض مرتكز */
  left: 10% !important;
  right: 10% !important;
}

@media (max-width: 768px) {
  .glass-header {
    left: 4% !important;
    right: 4% !important;
  }
}

/* ── هيرو بخلفية صورة بتدرج مودرن واحترافي ── */
.hero-bg-image {
  background-image:
    linear-gradient(to left, rgba(11, 49, 66, 0.85) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%),
    url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ── كاردات العمالة – نظيفة بلا ضباب ── */
.glass-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  /* أبيض صريح – لا ضباب */
  border: 1px solid rgba(26, 56, 63, 0.15);
  /* حدود رمادية واضحة */
  border-radius: 28px;
  color: #0f172a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s ease;
}

.glass-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(11, 49, 66, 0.14);
  border-color: #dbba65;
  /* برتقالي قوي عند الهوفر */
}

/* شريط اللمعان الزجاجي يمر من أعلى-يسار لأسفل-يمين */
.glass-card::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -80%;
  width: 55%;
  height: 220%;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  z-index: 1;
  pointer-events: none;
}

.glass-card:hover::before {
  animation: shine 0.7s ease forwards;
}

@keyframes shine {
  0% {
    left: -80%;
  }

  100% {
    left: 160%;
  }
}

/* ── أزرار ذهبية متدرجة زجاجية (Modern Glassmorphism) ── */
.bg-orange {
  background: linear-gradient(135deg, rgba(210, 175, 116, 0.95) 0%, rgba(184, 143, 67, 0.95) 100%) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow:
    0 8px 24px rgba(184, 143, 67, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.bg-orange:hover {
  background: linear-gradient(135deg, rgba(230, 196, 137, 1) 0%, rgba(204, 161, 81, 1) 100%) !important;
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(184, 143, 67, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
}

/* ── أزرار زجاجية متدرجة باللون البترولي الداكن (Modern Glassmorphism) ── */
.bg-green {
  background: linear-gradient(135deg, rgba(45, 79, 87, 0.95) 0%, rgba(26, 56, 63, 0.95) 100%) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    0 8px 24px rgba(26, 56, 63, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.1) !important;
  color: #fff !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.bg-green:hover {
  background: linear-gradient(135deg, rgba(58, 97, 107, 1) 0%, rgba(35, 71, 80, 1) 100%) !important;
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(26, 56, 63, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

/* ── زر الواتساب الرئيسي — تيل غامق مع لمسة خضراء (Modern Glassmorphism) ── */
.bg-primary-green {
  background: linear-gradient(135deg, rgba(42, 92, 63, 0.95) 0%, rgba(15, 40, 32, 0.95) 100%) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(210, 175, 116, 0.4) !important;
  box-shadow:
    0 8px 24px rgba(15, 40, 32, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.15) !important;
  color: #fff !important;
}

/* ── أزرار أيقونات واتساب الجانبية — ذهبية وأكبر (Modern Glassmorphism) ── */
.wa-sub-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(232, 192, 96, 0.9) 0%, rgba(196, 149, 40, 0.95) 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 6px 20px rgba(138, 96, 16, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.15);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.wa-sub-icon:hover {
  box-shadow:
    0 10px 28px rgba(138, 96, 16, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.wa-sub-icon svg {
  width: 26px;
  height: 26px;
}

/* ── login و input ── */
.login-mesh {
  background:
    radial-gradient(circle at 75% 20%, rgba(210, 175, 116, 0.1), transparent 22%),
    radial-gradient(circle at 20% 35%, rgba(45, 79, 87, 0.1), transparent 22%),
    #ffffff;
}

.input-field {
  transition: all 0.3s ease;
}

.input-field:focus-within {
  transform: translateY(-2px);
}

/* ── Custom Color Classes (Replaced Tailwind) ── */
.color-dark {
  color: #1A383F !important;
}

.bg-dark {
  background-color: #1A383F !important;
}

.color-gold {
  color: #D2AF74 !important;
}

.bg-gold {
  background-color: #D2AF74 !important;
}

.color-cyan {
  color: #19c0b1 !important;
}

.bg-cyan {
  background-color: #19c0b1 !important;
}

.color-slate {
  color: #64748B !important;
}

.bg-soft {
  background-color: #F4F9F8 !important;
}

.border-dark-border {
  border-color: #2D4F57 !important;
}

.bg-orange {
  background-color: #D2AF74 !important;
}

/* Fallback */
.color-orange {
  color: #D2AF74 !important;
}

.bg-green {
  background-color: #2e6012 !important;
}

/* Fallback */
.color-green {
  color: #2e6012 !important;
}

.hover-color-gold:hover {
  color: #D2AF74 !important;
}

.hover-bg-gold:hover {
  background-color: #D2AF74 !important;
}

.hover-color-orange:hover {
  color: #D2AF74 !important;
}

.group:hover .group-hover-color-cyan {
  color: #19c0b1 !important;
}

.group:hover .group-hover-bg-white {
  background-color: #ffffff !important;
}

.group:hover .group-hover-color-primary-green {
  color: #82c341 !important;
}

.bg-primary-green {
  background-color: #82c341 !important;
}

.color-primary-green {
  color: #82c341 !important;
}

.bg-light-cyan {
  background-color: #eef8f8 !important;
}

.border-primary-green {
  border-color: #82c341 !important;
}