/* ===================== متغيرات ===================== */
:root {
  --headerPro-color: #d4af37;
  --headerPro-bg: rgba(255,255,255,0.2);
  --headerPro-bg-scrolled: rgba(255,255,255,0.95);
  --footerPro-color: #d4af37;
  --footerPro-font: 'Cairo', sans-serif;
}

body {
  margin: 0;
  font-family: var(--footerPro-font);
  padding-bottom: 60px;
  direction: rtl;
}


/* ===================== التذييل ===================== */
.footerPro-section {
  position: relative;
  background: linear-gradient(200deg, #0f0f0f, #0f0f0f);
  margin-top: 50px;
  color: #fff;
  text-align: center;
  padding: 40px 20px 30px 20px;
  overflow: hidden;
}

.footerPro-overlay {
  background: url('../imag/backgraond.jpg') repeat;
  opacity: 0.05;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.footerPro-block { margin-bottom: 30px; z-index: 2; }
.footerPro-title { color: var(--footerPro-color); font-size: 20px; margin-bottom: 15px; }
.footerPro-divider { border: 0; height: 2px; background: var(--footerPro-color); margin: 20px auto; width: 50%; }

.footerPro-logo img { 
  width: 75%;
  margin-top: -48px;
  ; }

.footerPro-social-links { display: flex; justify-content: center; gap: 15px; }
.footerPro-hover-icon {
  background: #d4af37;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #000;
  font-size: 20px;
  transition: 0.4s all;
}
.footerPro-hover-icon:hover { background: #ffff; color:#000; transform: translateY(-5px) rotate(-10deg); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

.footerPro-pages-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footerPro-pages-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background 0.4s, color 0.4s;
}
.footerPro-pages-links a:hover {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #000;
}

@media(max-width:768px){
  .footerPro-pages-links { flex-direction: column; align-items: center; }
  .footerPro-pages-links a { margin: 5px 0; }
}

.footerPro-contact p { margin: 5px 0; }
.footerPro-bottom-divider { border: 0; height: 2px; background: var(--footerPro-color); margin: 30px auto; width: 30%; }

/* حقوق النشر ثابتة */
.footerPro-copy-fixed {
  margin-top: 10px;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #111;
  color: #fff;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  z-index: 10;
}

/* زر العودة للأعلى */
.footerPro-scroll-top-btn {
  position: fixed;
  bottom: 50px;
  right: 25px;
  background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #000;
  border: none;
  padding: 14px 16px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: none;
  transition: 0.3s;
  box-shadow: 0 5px 12px rgba(0,0,0,0.4);
}
.footerPro-scroll-top-btn:hover {
  background: linear-gradient(135deg, #b8860b, #d4af37);
}


    :root {
      --main-color: #001f3f;   /* كحلي */
      --accent-color: #d4af37; /* ذهبي */
    }

    /* القسم */
    .men-section {
      background: #f5f5f5;
    }
    .men-section h2 {
      text-align: center;
      margin-bottom: 25px;
     
    }

    /* الحاوية الأفقية */
    .men-scroll {
      display: flex;
      overflow-x: auto;
      gap: 20px;
      padding: 10px;
      scroll-behavior: smooth;
    }
    .men-scroll::-webkit-scrollbar {
      height: 8px;
    }
    .men-scroll::-webkit-scrollbar-thumb {
      background: var(--accent-color);
      border-radius: 4px;
    }

    /* الكارت */
    .men-card {
      flex: 0 0 auto;
      width: 200px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: transform 0.3s, box-shadow 0.3s;
      text-align: center;
      border: 1px solid #eee;
    }
    .men-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      border-color: var(--accent-color);
    }

    .men-card a {
      text-decoration: none; 
      color: inherit;
    }

    .men-image img {
      width: 100%;
      border-radius: 10px 10px 0 0;
    }

    .men-name {
      padding: 10px;
      font-size: 14px;
      font-weight: bold;
      color: var(--main-color);
      transition: color 0.3s;
    }
    .men-card:hover .men-name {
      color: var(--accent-color);
    }

    /* زر العودة */
    .men-back {
      display: block;
      width: fit-content;
      margin: 20px auto 0;
      padding: 10px 20px;
      background: var(--main-color);
      color: var(--accent-color);
      border-radius: 6px;
      text-decoration: none;
      font-weight: bold;
      border: 2px solid var(--accent-color);
      transition: all 0.3s;
    }
    .men-back:hover {
      background: var(--accent-color);
      color: var(--main-color);
    }



 /* =====================
       CSS أساسي للزر "اطلبه الآن"
       الألوان:
         - كحلي (الخلفية الافتراضية): #001f54
         - ذهبي (نص + حدود): #FFD700
       عند المرور (:hover) يتم قلب الألوان كما طلبت
       ===================== */

    /* حاوية الزر — توضع مباشرة بعد قسم مكونات العطر */
    .order-btn-container {
      margin-top: 20px;
      text-align: center; /* يتمركز الزر في منتصف العمود */
      direction: rtl;
    }

    /* الزر نفسه — تصميمه وظيفي وسهل القراءة */
    .order-btn {
      display: inline-block;
      font-family: Cairo;
      padding: 12px 30px;
      font-size: 15px;
      font-weight: 800;
      text-decoration: none;
      background-color: #001f3f; /* كحلي */
      color: #d4af37; /* ذهبي */
      border: 2px solid #d4af37; /* حدود ذهبية */
      border-radius: 10px;
      transition: all 220ms ease-in-out;
      box-shadow: 0 8px 20px rgba(0,0,0,0.18);
      cursor: pointer;
      user-select: none;
      /* تحسين الوصول: عند التركيز يظهر ظل واضح */
      outline: none;
    }

    /* تأثير عند الانتقال بالفأرة أو التركيز: قلب الألوان */
    .order-btn:hover,
    .order-btn:focus {
      background-color: #d4af37; /* يصبح للخلفية ذهبي */
      color: #001f3f;            /* ويصبح النص كحلي */
      border-color: #001f3f;    /* وحدود كحلي */
      transform: translateY(-3px);
      box-shadow: 0 14px 32px rgba(0,0,0,0.22);
    }

    /* حالة الضغط (active) */
    .order-btn:active {
      transform: translateY(-1px) scale(.995);
      transition: transform 100ms;
    }

    /* للهواتف: حجم الخط أصغر قليلًا */
    @media (max-width: 420px) {
      .order-btn { font-size: 18px; padding: 10px 22px; }
    }

    /* توضيح بصري للـ aria-focus (عند التنقل بالكيبورد) */
    .order-btn:focus-visible {
      box-shadow: 0 0 0 6px rgba(255,215,0,0.12); /* هالة ذهبية خفيفة */
    }

    /* (اختياري) إذا أردت تغيير مكان الزر إلى اليسار أو اليمين قم بتعديل text-align في .order-btn-container */