/* =========================================
   ASQON FOR OUD - HEADER & FOOTER V1
   Luxury Green & Gold Theme
   ========================================= */

:root {
  --asqon-green: #203D32;
  --asqon-dark: #102920;
  --asqon-gold: #C9A36D;
  --asqon-cream: #F8F3E9;
  --asqon-white: #FFFFFF;
}

/* 1. Header - الهيدر */

.store-header {
  background: #fff !important;
  border-bottom: 1px solid rgba(201,163,109,.35);
  box-shadow: 0 5px 22px rgba(16,41,32,.08);
}

.store-header .main-nav-container {
  background: #fff !important;
}

/* 2. Store Logo - الشعار */

.store-header .navbar-brand img,
.store-header .logo img {
  max-height: 68px !important;
  width: auto !important;
  max-width: 150px;
  object-fit: contain;
  transition: transform .25s ease;
}

.store-header .navbar-brand:hover img,
.store-header .logo:hover img {
  transform: scale(1.035);
}

/* 3. Navigation - روابط الأقسام */

@media (min-width: 992px) {
  .store-header nav a {
    font-size: 14px;
    font-weight: 700;
    transition: color .2s ease;
  }

  .store-header nav a:hover,
  .store-header nav a.active,
  .store-header nav a[aria-current="page"],
  .store-header nav li.active > a {
    color: var(--asqon-green) !important;
  }
}

/* 4. Search - شريط البحث */

.store-header input[type="search"],
.store-header input[placeholder*="بحث"],
.store-header .s-search-input {
  background: var(--asqon-cream) !important;
  border: 1px solid rgba(201,163,109,.4) !important;
  border-radius: 30px !important;
  color: var(--asqon-dark) !important;
  min-height: 43px;
  transition: border-color .2s, box-shadow .2s;
}

.store-header input[type="search"]:focus,
.store-header input[placeholder*="بحث"]:focus,
.store-header .s-search-input:focus {
  outline: none;
  border-color: var(--asqon-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,163,109,.13);
}

/* 5. Header buttons - الأيقونات */

.store-header .header-btn,
.store-header .header-icon-button {
  border-radius: 50%;
  transition: background .2s, transform .2s;
}

.store-header .header-btn:hover,
.store-header .header-icon-button:hover {
  background: var(--asqon-cream);
  transform: translateY(-2px);
}

/* 6. Announcement Bar - الشريط العلوي */

.asqon-announcement {
  background: var(--asqon-green);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  border-bottom: 2px solid var(--asqon-gold);
}

/* 7. Footer - الفوتر الرئيسي */

footer.store-footer {
  background: linear-gradient(
    135deg,
    var(--asqon-green),
    var(--asqon-dark)
  ) !important;
  color: var(--asqon-cream) !important;
  border-top: 3px solid var(--asqon-gold);
}

footer.store-footer .store-footer__inner,
footer.store-footer .footer-top {
  background: transparent !important;
}

/* 8. Footer headings - عناوين الفوتر */

footer.store-footer h2,
footer.store-footer h3,
footer.store-footer h4 {
  color: var(--asqon-gold) !important;
  font-weight: 800;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* 9. Footer text and links */

footer.store-footer p,
footer.store-footer li,
footer.store-footer small {
  color: var(--asqon-cream);
  line-height: 1.9;
}

footer.store-footer a {
  color: var(--asqon-cream) !important;
  text-decoration: none;
  transition: color .2s;
}

footer.store-footer a:hover {
  color: var(--asqon-gold) !important;
}

footer.store-footer .footer-list li {
  margin-bottom: 9px;
}

/* 10. Footer bottom */

footer.store-footer .footer-bottom {
  background: rgba(0,0,0,.20) !important;
  border-top: 1px solid rgba(201,163,109,.3);
}

/* 11. Payment icons - الحفاظ على شعارات الدفع */

footer.store-footer .payment-methods img,
footer.store-footer .footer-bottom img {
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

/* 12. Keyboard Accessibility */

.store-header a:focus-visible,
footer.store-footer a:focus-visible {
  outline: 2px solid var(--asqon-gold);
  outline-offset: 3px;
}

/* 13. Mobile improvements */

@media (max-width: 767px) {

  .store-header .navbar-brand img,
  .store-header .logo img {
    max-height: 48px !important;
    max-width: 115px;
  }

  .asqon-announcement {
    font-size: 11px;
    padding: 7px 12px;
  }

  footer.store-footer h2,
  footer.store-footer h3,
  footer.store-footer h4 {
    font-size: 16px;
    margin-bottom: 12px;
  }

  footer.store-footer p,
  footer.store-footer a {
    font-size: 13px;
  }

  footer.store-footer .footer-list li {
    margin-bottom: 7px;
  }
}

/* Respect reduced motion preferences */

@media (prefers-reduced-motion: reduce) {
  .store-header *,
  footer.store-footer * {
    transition: none !important;
  }
}

/* تعديل موضع أيقونة واتساب على الجوال */

@media (max-width: 767px) {
  #asqon-whatsapp {
    position: fixed !important;
    right: 15px !important;
    bottom: 15px !important;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
  }
}