/*
Theme Name: Woodmart Child - Al Athar Al Baqi (الأثر الباقي)
Theme URI: https://demo-cs.4hoste.com
Description: ثيم متجر الأثر الباقي الوقفي التجاري الفاخر - مبني على قالب Woodmart
Author: Antigravity AI & Architecture Team
Author URI: https://demo-cs.4hoste.com
Template: woodmart
Version: 1.0.0
Text Domain: al-athar-child
*/

/* ========================================================
   0. استدعاء الخطوط الرسمية المعتمدة (Official Typography)
======================================================== */
@font-face {
  font-family: 'Expo Arabic';
  src: url('assets/fonts/ExpoArabic-Book.woff2') format('woff2'), url('assets/fonts/ExpoArabic-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Expo Arabic';
  src: url('assets/fonts/ExpoArabic-Medium.woff2') format('woff2'), url('assets/fonts/ExpoArabic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Expo Arabic';
  src: url('assets/fonts/ExpoArabic-SemiBold.woff2') format('woff2'), url('assets/fonts/ExpoArabic-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Expo Arabic';
  src: url('assets/fonts/ExpoArabic-Bold.woff2') format('woff2'), url('assets/fonts/ExpoArabic-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('assets/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2'), url('assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('assets/fonts/IBMPlexSansArabic-Medium.woff2') format('woff2'), url('assets/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('assets/fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2'), url('assets/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('assets/fonts/IBMPlexSansArabic-Bold.woff2') format('woff2'), url('assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========================================================
   1. متغيرات الهوية ونظام التصميم المعتمد (Approved Brand Design System)
======================================================== */
:root {
  /* باليت التركواز السيادي والمعتمد */
  --athar-teal-primary: #14626A;
  --athar-teal-dark: #0E484E;
  --athar-teal-light: #29767C;
  --athar-teal-cyan: #418B90;
  --athar-teal-soft: #5AA0A4;
  --athar-teal-mint: #74B6B8;
  --athar-emerald-primary: #14626A; /* backward compatibility */
  --athar-emerald-dark: #0E484E;
  --athar-emerald-light: #29767C;
  --athar-emerald-muted: #418B90;

  /* باليت الذهب الملكي المعتمد */
  --athar-gold-deep: #C59402;
  --athar-gold-accent: #D5A624;
  --athar-gold-radiant: #E5B94A;
  --athar-gold-warm: #EBCA6D;
  --athar-gold-pale: #F3DC91;
  --athar-gold-subtle: #FAF5EB;
  --athar-gold-border: #EBCA6D;
  --athar-gold-hover: #C59402;
  --athar-gold-bright: #E5B94A;

  /* درجات السليت والرماديات المتوازنة */
  --athar-dark-primary: #282828;
  --athar-dark-slate: #454545;
  --athar-dark-mid: #626262;
  --athar-dark-muted: #808080;
  --athar-dark-light: #9D9D9D;
  --athar-text-headline: #282828;
  --athar-text-body: #454545;
  --athar-text-muted: #808080;

  /* ألوان السطوح والخلفيات الفاخرة */
  --athar-bg-pearl: #FAF8F5;
  --athar-bg-surface: #FFFFFF;
  --athar-bg-card: #FFFFFF;
  --athar-border-subtle: #E8ECEB;

  /* متغيرات Woodmart الأساسية المتوافقة */
  --wd-primary-color: #14626A;
  --wd-alternative-color: #D5A624;
  --wd-link-color: #14626A;
  --wd-link-color-hover: #D5A624;
  --btn-accented-bgcolor: #D5A624;
  --btn-accented-bgcolor-hover: #C59402;
  --btn-accented-color: #FFFFFF;
  --btn-default-bgcolor: #14626A;
  --btn-default-bgcolor-hover: #29767C;
  --btn-default-color: #FFFFFF;

  /* الخطوط المؤسسية الرسمية */
  --athar-font-ar: 'Expo Arabic', sans-serif;
  --athar-font-en: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Site-wide Banner / Hero Clearance Variables */
  --athar-header-clearance: 36px;
  --athar-header-clearance-mobile: 24px;
}

body {
  font-family: var(--athar-font-ar);
  background-color: var(--athar-bg-pearl);
  color: var(--athar-text-body);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}

body:dir(ltr), html[lang="en"] body {
  font-family: var(--athar-font-en);
  direction: ltr;
  text-align: left;
}

/* Ensure all English headings, text, and components use approved English typography */
html[lang="en"] body,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, 
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang="en"] p, html[lang="en"] span, html[lang="en"] a,
html[lang="en"] li, html[lang="en"] input, html[lang="en"] button,
html[lang="en"] select, html[lang="en"] textarea,
html[lang="en"] .title, html[lang="en"] .product-title,
html[lang="en"] .entry-title, html[lang="en"] .woodmart-entry-title,
html[lang="en"] .wd-entities-title, html[lang="en"] .nav-link-text,
html[lang="en"] .athar-page-container, html[lang="en"] .athar-strategic-heading,
html[lang="en"] .athar-strategic-desc, html[lang="en"] .athar-gov-item-label,
html[lang="en"] .athar-gov-item-sub, html[lang="en"] .athar-license-card {
  font-family: var(--athar-font-en) !important;
}

/* ========================================================
   2. هوية وشعار متجر الأثر الباقي (Approved Official Brand Logo)
======================================================== */
.whb-column .site-logo,
.site-logo,
.whb-250rtwdwz5p8e5b7tpw0,
.whb-g5z57bkgtznbk6v9pll5,
.athar-logo-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: 68px !important;
  min-height: 44px !important;
  padding-inline: 10px !important;
}

.site-logo a.wd-logo,
.site-logo a.athar-brand-logo,
.site-logo a.wd-main-logo {
  display: inline-flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-decoration: none !important;
  padding: 2px 0 !important;
  max-height: 56px !important;
}

/* Strictly remove/hide any second duplicate logo, emblem, or sticky duplicate */
.site-logo a:nth-of-type(n+2),
.site-logo .wd-sticky-logo,
.site-logo .athar-brand-sticky-logo,
.site-logo .athar-sticky-logo-img,
.site-logo img:nth-of-type(n+2),
.site-logo .logo-emblem,
.site-logo .emblem,
.site-logo .athar-emblem-badge {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.site-logo .athar-main-logo-image,
.athar-brand-logo .athar-main-logo-image,
.site-logo img,
.wd-logo img,
.footer-brand-logo-img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 50px !important;
  max-height: 50px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

/* Sticky & Cloned Header Single Logo Styling */
:is(.whb-sticked, .whb-clone) .site-logo img,
:is(.whb-sticked, .whb-clone) .site-logo .athar-main-logo-image {
  height: 42px !important;
  max-height: 42px !important;
  max-width: 185px !important;
}

.athar-brand-logo:hover .athar-main-logo-image {
  transform: scale(1.02);
  opacity: 0.95;
}

@media (max-width: 1024px) {
  .whb-column_mobile3 .site-logo,
  .whb-mobile-center .site-logo,
  .site-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  .site-logo .athar-main-logo-image,
  .athar-brand-logo .athar-main-logo-image,
  .site-logo img,
  .wd-logo img {
    height: 40px !important;
    max-height: 40px !important;
    max-width: 175px !important;
  }
}

/* ========================================================
   3. شريط الإعلان والتراخيص العلوية (Header Notice Bar)
======================================================== */
.athar-topbar-wrapper {
  background-color: var(--athar-emerald-dark);
  border-bottom: 1px solid rgba(213, 166, 36, 0.3);
  font-size: 13px;
  color: #E2E8F0;
}
.athar-topbar-notice {
  font-size: 12px;
  color: #E2E8F0;
  display: inline-block;
}
.athar-topbar-notice a {
  color: var(--athar-gold-accent);
  text-decoration: underline;
  margin-inline-start: 8px;
}
.athar-topbar-notice .license-badge {
  color: var(--athar-gold-accent);
  font-weight: 700;
}
.athar-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(213, 166, 36, 0.15);
  color: var(--athar-gold-accent) !important;
  border: 1px solid var(--athar-gold-accent);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.25s ease;
  line-height: 1;
}
.athar-lang-switcher:hover {
  background: var(--athar-gold-accent);
  color: var(--athar-emerald-dark) !important;
  transform: translateY(-1px);
}

/* ========================================================
   4. شارات نوع التسعير (Price Type Badges)
======================================================== */
.price-type-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
  border: 1px solid transparent;
}
.badge-fixed-price {
  background-color: #E6F4EA;
  color: #137333;
  border-color: #CEEAD6;
}
.badge-starting-price {
  background-color: #FEF7E0;
  color: #B06000;
  border-color: #FEEFC3;
}
.badge-min-order {
  background-color: #E8F0FE;
  color: #1A73E8;
  border-color: #D2E3FC;
}
.badge-prepaid-package {
  background-color: #F3E8FF;
  color: #6B21A8;
  border-color: #E9D5FF;
}

/* ========================================================
   5. تنسيق بطاقات المنتجات المعتمدة (Waqf Product Cards 1:1 Complete)
======================================================== */
.products .product-grid-item,
.products .wd-product,
.wd-products .wd-product,
.woocommerce ul.products li.product,
.product-grid-item,
.wd-product {
  background: #FFFFFF !important;
  border: 1px solid var(--athar-border-subtle, #E2E8F0) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(20, 98, 106, 0.04) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
  position: relative !important;
}
.products .product-grid-item:hover,
.products .wd-product:hover,
.wd-products .wd-product:hover,
.woocommerce ul.products li.product:hover,
.product-grid-item:hover,
.wd-product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(20, 98, 106, 0.12) !important;
  border-color: var(--athar-gold-border, #D5A624) !important;
}

/* ========================================================
   6. مسار التنفيذ والتوثيق (Fulfillment Journey Steps)
======================================================== */
.athar-journey-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 35px 0;
}
.journey-step-card {
  background: #FFFFFF;
  border: 1px solid var(--athar-border-subtle);
  border-radius: 14px;
  padding: 26px 20px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}
.journey-step-card:hover {
  border-color: var(--athar-gold-accent);
  box-shadow: 0 10px 24px rgba(213, 166, 36, 0.12);
  transform: translateY(-3px);
}
.journey-step-num {
  width: 40px;
  height: 40px;
  line-height: 38px;
  background: var(--athar-gold-subtle);
  color: var(--athar-emerald-primary);
  border: 2px solid var(--athar-gold-border);
  font-weight: 800;
  border-radius: 50%;
  margin: 0 auto 16px auto;
  font-size: 16px;
}
.journey-step-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--athar-emerald-dark);
  margin-bottom: 8px;
}
.journey-step-desc {
  font-size: 13px;
  color: var(--athar-text-muted);
  line-height: 1.6;
}

@media (max-width: 991px) {
  .athar-journey-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .athar-journey-steps {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   7. صناديق الحوكمة والتوثيق النظامي (Trust & Legal Placeholders)
======================================================== */
.trust-placeholder-box {
  border: 2px dashed var(--athar-gold-border);
  background-color: var(--athar-gold-subtle);
  border-radius: 12px;
  padding: 24px 28px;
  text-align: center;
  color: var(--athar-emerald-dark);
  margin: 25px 0;
}
.trust-placeholder-box h4 {
  color: var(--athar-emerald-primary);
  font-weight: 800;
  margin-bottom: 8px;
  font-size: 18px;
}
.trust-placeholder-box p {
  font-size: 14px;
  color: var(--athar-text-body);
  margin: 0;
  line-height: 1.6;
}

/* ========================================================
   8. الأزرار وعناصر التفاعل الوقفية
======================================================== */
.btn-athar-primary {
  background-color: var(--athar-gold-accent) !important;
  color: var(--athar-emerald-dark) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 12px 30px !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease !important;
}
.btn-athar-primary:hover {
  background-color: var(--athar-gold-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(213, 166, 36, 0.3);
}

.btn-athar-outline {
  background-color: transparent !important;
  color: var(--athar-emerald-primary) !important;
  border: 2px solid var(--athar-emerald-primary) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 10px 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease !important;
}
.btn-athar-outline:hover {
  background-color: var(--athar-emerald-primary) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* تنسيق أزرار الشراء وسلة ووكومرس بالهوية المعتمدة */
.single_add_to_cart_button.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order,
.wd-add-btn-replace .add_to_cart_button,
.wd-product .add-to-cart-loop {
  background-color: var(--athar-teal-primary) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-family: var(--athar-font-ar) !important;
  font-weight: 700 !important;
  border: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(20, 98, 106, 0.2) !important;
}

.single_add_to_cart_button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover,
.wd-add-btn-replace .add_to_cart_button:hover,
.wd-product .add-to-cart-loop:hover {
  background-color: var(--athar-teal-light) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(20, 98, 106, 0.3) !important;
}

/* ألسنة تبويب المنتج ومسار الشراء */
.woocommerce-tabs .wd-nav-tabs > li > a {
  font-family: var(--athar-font-ar) !important;
  font-weight: 700 !important;
  color: var(--athar-dark-slate) !important;
}
.woocommerce-tabs .wd-nav-tabs > li.active > a {
  color: var(--athar-teal-primary) !important;
  border-bottom: 2px solid var(--athar-gold-accent) !important;
}

/* إخطارات السلة للحد الأدنى */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
  border-radius: 8px !important;
  font-weight: 500 !important;
}
.woocommerce-error {
  border-top-color: #D93025 !important;
}
.woocommerce-message {
  border-top-color: var(--athar-emerald-primary) !important;
}

/* ========================================================
   9. صندوق معلومات الباقات المسبقة (Prepaid Packages Notice Box)
======================================================== */
.athar-prepaid-info-box {
  background: #FDFCF9;
  border: 1px solid var(--athar-gold-border);
  border-right: 4px solid var(--athar-gold-accent);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0;
}
html[lang="en"] .athar-prepaid-info-box {
  border-right: 1px solid var(--athar-gold-border);
  border-left: 4px solid var(--athar-gold-accent);
}
.athar-prepaid-info-box .info-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--athar-emerald-primary);
  margin-bottom: 8px;
}
.athar-prepaid-info-box .info-body ul {
  margin: 0;
  padding-inline-start: 18px;
  list-style-type: disc;
}
.athar-prepaid-info-box .info-body li {
  font-size: 13px;
  color: var(--athar-text-body);
  line-height: 1.6;
  margin-bottom: 4px;
}

/* ========================================================
   10. صور وبطاقات المنتجات بنسبة 1:1 كاملة دون قص وبدون نصوص سفلية
======================================================== */
.product-grid-item .product-wrapper,
.wd-product .product-wrapper {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.product-grid-item .product-element-top,
.wd-product .product-element-top {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.product-grid-item .product-element-top a.product-image-link,
.wd-product .product-element-top a.product-image-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Entire card clickability overlay */
.product-grid-item .product-element-top a.product-image-link::after,
.wd-product .product-element-top a.product-image-link::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

.product-grid-item .product-element-top img,
.wd-product .product-element-top img,
.product-grid-item a.product-image-link img,
.wd-product a.product-image-link img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  transform: none !important;
  transition: opacity 0.3s ease !important;
}

.wd-product:hover .product-element-top img,
.product-grid-item:hover .product-element-top img {
  transform: none !important;
}

/* Hide hover flip image so official card image stays persistent */
.product-grid-item .hover-img,
.wd-product .hover-img {
  display: none !important;
}

/* Hide hover popout background and overlay artifacts */
.product-grid-item .content-product-imagin,
.wd-product .content-product-imagin,
.product-grid-item .fade-in-block,
.wd-product .fade-in-block,
.product-grid-item .wrapp-swatches,
.wd-product .wrapp-swatches {
  display: none !important;
}

/* Hide text, category, price, and actions beneath image in card grids */
/* Retains DOM content for SEO and screen readers without taking visual space */
.product-grid-item .product-element-bottom,
.wd-product .product-element-bottom,
.woocommerce ul.products li.product .product-element-bottom {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Single Product Page - Guarantee Title, Price, Form remain fully visible */
.single-product .summary,
.single-product .entry-summary,
.single-product .product_title,
.single-product .summary .price,
.single-product form.cart {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.single-product .woocommerce-product-gallery img {
  object-fit: contain !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

/* ========================================================
   11. تذييل الموقع الوقفي المعتمد (Official Waqf Footer)
======================================================== */
.athar-main-footer {
  background-color: var(--athar-emerald-dark);
  border-top: 3px solid var(--athar-gold-accent);
  color: #E2E8F0;
  font-size: 14px;
  margin-top: 60px;
}
.athar-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 35px;
}
@media (max-width: 991px) {
  .athar-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .athar-footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-brand-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.footer-logo-title {
  font-family: var(--athar-font-ar);
  font-size: 24px;
  font-weight: 800;
  color: #FAF8F5;
  line-height: 1.2;
}
.footer-logo-sub {
  font-family: var(--athar-font-en);
  font-size: 10px;
  font-weight: 700;
  color: var(--athar-gold-accent);
  letter-spacing: 2px;
  margin-top: 3px;
}
.footer-brand-desc {
  color: #94A3B8;
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 18px;
}
.footer-gov-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(213, 166, 36, 0.12);
  border: 1px solid rgba(213, 166, 36, 0.3);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: #FAF8F5;
}
.footer-gov-badge .dashicons {
  color: var(--athar-gold-accent);
  font-size: 18px;
  width: 18px;
  height: 18px;
}
.footer-col-title {
  color: #FAF8F5;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.footer-col-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 2px;
  background: var(--athar-gold-accent);
}
html[lang="en"] .footer-col-title::after {
  right: auto;
  left: 0;
}
.footer-links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-links-list li {
  margin-bottom: 10px;
}
.footer-links-list a {
  color: #CBD5E1 !important;
  font-size: 13.5px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  display: inline-block;
}
.footer-links-list a:hover {
  color: var(--athar-gold-accent) !important;
  transform: translateX(-4px);
}
html[lang="en"] .footer-links-list a:hover {
  transform: translateX(4px);
}
.footer-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.footer-contact-item .dashicons {
  color: var(--athar-gold-accent);
  font-size: 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}
.footer-contact-item .contact-lbl {
  font-size: 11px;
  color: #94A3B8;
}
.footer-contact-item .contact-val {
  font-size: 13px;
  font-weight: 700;
  color: #FAF8F5;
  margin-top: 2px;
}
.athar-bottom-bar {
  background-color: #041510;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12px;
  color: #94A3B8;
}
.badge-pay {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FAF8F5;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.payment-methods-badges {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.athar-pay-card {
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 4px 8px;
  height: 34px;
  min-width: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}
.athar-pay-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(213, 166, 36, 0.4);
  border-color: #D5A624;
}
.athar-pay-card img {
  max-height: 22px;
  width: auto;
  max-width: 48px;
  display: block;
  object-fit: contain;
}

/* ========================================================
   12. رمز الريال السعودي الرسمي المعتمد (Official SAMA Riyal Symbol)
======================================================== */
.athar-sar-symbol {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 4px;
  line-height: 1;
  vertical-align: -0.05em;
}
.sar-symbol-svg {
  width: 0.85em;
  height: 0.85em;
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
}
.amount .sar-symbol-svg {
  width: 0.82em;
  height: 0.82em;
}

/* ========================================================
   13. تحسينات قائمة الموبايل ودرج التنقل (Mobile Navigation Drawer)
======================================================== */
.mobile-nav {
  background-color: #0E484E !important;
  color: #FAF8F5 !important;
}
.mobile-nav .wd-heading {
  border-bottom: 1px solid rgba(213, 166, 36, 0.2);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-nav .close-side-widget a {
  color: var(--athar-gold-accent) !important;
  font-weight: 700;
  font-size: 14px;
}
.mobile-nav .wd-search-form {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav .searchform input[type="text"] {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(213, 166, 36, 0.3) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
}
.mobile-nav .searchform input[type="text"]::placeholder {
  color: #94A3B8 !important;
}
.mobile-nav .searchform .searchsubmit {
  background-color: var(--athar-gold-accent) !important;
  color: #0E484E !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
.mobile-nav .wd-nav-mobile > li > a {
  color: #FAF8F5 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 20px !important;
}
.mobile-nav .wd-nav-mobile > li > a:hover {
  color: var(--athar-gold-accent) !important;
  background: rgba(213, 166, 36, 0.08) !important;
}
.athar-mob-footer-actions {
  padding: 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
}
.athar-mob-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #25D366;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 14px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none !important;
  margin-bottom: 12px;
}
.athar-mob-legal-info {
  font-size: 11px;
  color: #94A3B8;
  line-height: 1.6;
  text-align: center;
}

/* ========================================================
   14. تنسيق الهيدر المدمج وشريط التنقل الرئيسي (Compact Header & 11-Item RTL Main Navigation)
======================================================== */
:root {
  --wd-top-bar-h: 0px !important;
  --wd-header-general-h: 68px !important;
  --wd-header-bottom-h: 42px !important;
}

/* إخفاء شريط الهيدر بيلدر القديم ذو اللون الأخضر غير المتوافق */
.whb-top-bar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* الشريط العلوي المعتمد النحيف ذو المظهر الرسمي الفاخر */
.athar-topbar-wrapper {
  background-color: #0E484E !important;
  border-bottom: 1px solid rgba(213, 166, 36, 0.25) !important;
  padding: 5px 0 !important;
  position: relative;
  z-index: 1000;
  line-height: 1.4 !important;
}

.athar-topbar-notice {
  font-size: 11.5px !important;
  color: #CBD5E1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.athar-topbar-notice strong {
  color: #FAF8F5 !important;
  font-weight: 700 !important;
}

.athar-topbar-notice .placeholder-label {
  color: #D5A624 !important;
  font-weight: 600 !important;
  opacity: 0.95;
}

.athar-topbar-sep {
  color: #D5A624 !important;
  opacity: 0.6 !important;
  font-size: 10px !important;
}

/* ضبط ارتفاع الهيدر وإلغاء الفراغات العمودية الزائدة */
.whb-header {
  border-bottom: 1px solid #EBE6DF !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
  background: #FFFFFF !important;
}

.whb-general-header {
  min-height: 64px !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.whb-header-bottom {
  min-height: 42px !important;
  background: #FFFFFF !important;
  padding: 0 !important;
}

/* ضبط المسافة بين الهيدر ومحتوى الصفحات لضمان عدم تداخل التبويبات مع المحتوى */
.main-page-wrapper {
  padding-top: var(--athar-header-clearance) !important;
  overflow: visible !important;
}

/* مسافات علوية مريحة لصفحات النماذج والمحتوى (تتبع الطلب، إعادة الطلب، الخ) لمنع أي تداخل نهائياً */
.page-id-27 .site-content,
.page-id-65 .site-content,
.page-id-114 .site-content,
.page-id-233 .site-content,
.page-template-default .site-content,
.woocommerce-order-tracking,
.athar-page-content,
.athar-page-container {
  padding-top: 24px !important;
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .main-page-wrapper {
    padding-top: var(--athar-header-clearance-mobile) !important;
  }
  .page-id-27 .site-content,
  .page-id-65 .site-content,
  .page-id-114 .site-content,
  .page-id-233 .site-content,
  .page-template-default .site-content,
  .woocommerce-order-tracking,
  .athar-page-content,
  .athar-page-container {
    padding-top: 16px !important;
  }
}

/* تنسيقات نموذج إعادة الطلب السريع */
#athar-reorder-form input:focus {
  border-color: #14626A !important;
  box-shadow: 0 0 0 3px rgba(20, 98, 106, 0.15) !important;
  background: #FFFFFF !important;
}

#athar-reorder-submit:hover {
  background: #0D4E54 !important;
  box-shadow: 0 4px 12px rgba(20, 98, 106, 0.25) !important;
}

#athar-reorder-submit:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.home .main-page-wrapper {
  padding-top: var(--athar-header-clearance) !important;
}
@media (max-width: 768px) {
  .home .main-page-wrapper {
    padding-top: var(--athar-header-clearance-mobile) !important;
  }
}

.home .entry-content > .elementor:first-child {
  margin-top: 0 !important;
}

/* =============================================================================
   ATHAR AL BAQI - MAIN HOMEPAGE HERO (MAKKAH GRAND MOSQUE ARCHITECTURE)
   ============================================================================= */
.athar-hero-section {
  position: relative !important;
  overflow: hidden !important;
  color: #FFFFFF !important;
  padding: 90px 20px !important;
  border-radius: 20px !important;
  margin-bottom: 40px !important;
  margin-top: 0 !important;
  text-align: center !important;
  isolation: isolate !important;
  background-color: #0E484E !important;
  background-image: none !important;
}

/* Layer 1: Subtle Blurred Makkah Image Background */
.athar-hero-section::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  background-image: url('https://demo-cs.4hoste.com/wp-content/uploads/athar-branding/athar-home-hero-makkah-v3.webp') !important;
  background-size: cover !important;
  background-position: 50% 55% !important;
  background-repeat: no-repeat !important;
  filter: blur(2.5px) !important;
  transform: scale(1.03) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Layer 2: Brand-compatible Dark Teal Transparent Overlay (~42% opacity) */
.athar-hero-section::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(7, 35, 27, 0.40) 0%, rgba(14, 72, 78, 0.45) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Layer 3: Razor Sharp Content (H1, badge, paragraph, buttons) */
.athar-hero-section > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Tablet & Intermediate Responsive Adjustments */
@media (max-width: 1024px) {
  .athar-hero-section::before {
    background-position: 50% 58% !important;
  }
}

/* Mobile Responsive Architecture (< 768px) */
@media (max-width: 768px) {
  .athar-hero-section {
    padding: 30px 14px !important;
    margin-bottom: 24px !important;
    border-radius: 16px !important;
  }
  .athar-hero-section::before {
    background-image: url('https://demo-cs.4hoste.com/wp-content/uploads/athar-branding/athar-home-hero-makkah-mobile-v3.webp') !important;
    background-position: 50% 68% !important;
    filter: blur(2px) !important;
  }
  .athar-hero-section::after {
    background: linear-gradient(180deg, rgba(7, 35, 27, 0.44) 0%, rgba(14, 72, 78, 0.50) 100%) !important;
  }
  .athar-hero-section span[style*="border"] {
    font-size: 11.5px !important;
    padding: 4px 14px !important;
    margin-bottom: 12px !important;
  }
  .athar-hero-section h1 {
    font-size: 22px !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
  }
  .athar-hero-section p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }
  .athar-hero-section .button,
  .athar-hero-section a.button,
  .athar-hero-section a[class*="btn-athar"] {
    padding: 10px 20px !important;
    font-size: 13.5px !important;
  }
}
@media (max-width: 359px) {
  .athar-hero-section {
    padding: 24px 10px !important;
  }
  .athar-hero-section h1 {
    font-size: 19px !important;
  }
  .athar-hero-section p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .athar-hero-section .button,
  .athar-hero-section a.button,
  .athar-hero-section a[class*="btn-athar"] {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* تنسيق الـ 11 عنصر بالقائمة الرئيسية من اليمين لليسار */
.wd-header-main-nav {
  width: 100% !important;
}

.wd-header-main-nav .menu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.wd-header-main-nav .menu > li > a {
  font-family: var(--athar-font-ar) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #14626A !important;
  padding: 10px 9px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.wd-header-main-nav .menu > li:hover > a,
.wd-header-main-nav .menu > li.current-menu-item > a {
  color: #14626A !important;
  background: rgba(20, 98, 106, 0.06) !important;
  border-bottom: 2px solid #D5A624 !important;
}

/* تمييز بند 11 (إعادة الطلب) كزر إجراء سريع ومميز */
.wd-header-main-nav .menu > li a[href*="repeat-orders"],
.wd-header-main-nav .menu > li.menu-item-141 > a {
  background: linear-gradient(135deg, rgba(20, 98, 106, 0.08) 0%, rgba(213, 166, 36, 0.22) 100%) !important;
  color: #14626A !important;
  border: 1px solid rgba(213, 166, 36, 0.45) !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
}

.wd-header-main-nav .menu > li a[href*="repeat-orders"]:hover,
.wd-header-main-nav .menu > li.menu-item-141:hover > a {
  background: #14626A !important;
  color: #FAF8F5 !important;
  border-color: #14626A !important;
  box-shadow: 0 4px 12px rgba(20, 98, 106, 0.2) !important;
}

/* تنسيق القوائم المنسدلة (الأقسام، التراخيص، السياسات) */
.wd-dropdown {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(14, 72, 78, 0.12) !important;
  border: 1px solid #EBE6DF !important;
  border-top: 3px solid #D5A624 !important;
  padding: 8px 0 !important;
  min-width: 230px !important;
}

.wd-sub-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wd-sub-menu li a {
  display: block !important;
  padding: 9px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  font-family: var(--athar-font-ar) !important;
}

.wd-sub-menu li a:hover {
  color: #14626A !important;
  background: #FAF8F5 !important;
  padding-inline-start: 22px !important;
  font-weight: 700 !important;
}

/* تنسيق درج التنقل بالموبايل والأكورديون — متجر الأثر الباقي الوقفي */
.mobile-nav {
  max-width: 330px !important;
  width: 86% !important;
  background: #07231B !important;
}

.athar-mob-quick-bar a {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.athar-mob-quick-bar a:hover {
  background: rgba(213, 166, 36, 0.25) !important;
  border-color: #D5A624 !important;
}

.mobile-nav .wd-nav-mobile > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mobile-nav .wd-nav-mobile > li > a {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  padding: 11px 18px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #FAF8F5 !important;
}

.mobile-nav .wd-nav-opener {
  min-width: 46px !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #D5A624 !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.mobile-nav .wd-nav-opener.wd-active,
.mobile-nav li.opener-page > .wd-nav-opener {
  background-color: #14626A !important;
  color: #FAF8F5 !important;
}

.mobile-nav .wd-nav-mobile li:has(> .wd-nav-opener.wd-active) > .wd-sub-menu,
.mobile-nav .wd-nav-mobile li.opener-page > .wd-sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mobile-nav .wd-nav-mobile .menu-item-has-children {
  position: relative !important;
}

.mobile-nav .wd-nav-mobile .wd-sub-menu {
  background: rgba(0, 0, 0, 0.28) !important;
  margin: 4px 10px 8px !important;
  border-radius: 8px !important;
  padding: 4px 0 !important;
  border: 1px solid rgba(213, 166, 36, 0.15) !important;
}

.mobile-nav .wd-nav-mobile .wd-sub-menu li a {
  color: #CBD5E1 !important;
  font-size: 13.5px !important;
  padding: 10px 18px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  transition: all 0.2s ease !important;
}

.mobile-nav .wd-nav-mobile .wd-sub-menu li:last-child a {
  border-bottom: none !important;
}

.mobile-nav .wd-nav-mobile .wd-sub-menu li a:hover {
  color: #D5A624 !important;
  background: rgba(213, 166, 36, 0.08) !important;
  padding-inline-start: 22px !important;
}

/* ========================================================
   13. أنظمة التراخيص والوثائق والمودال (Licenses & Modal Viewer)
======================================================== */
/* نافذة معاينة ملفات PDF والوثائق (Doc Modal Viewer) */
.athar-doc-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.athar-doc-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(14, 72, 78, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.athar-doc-modal-dialog {
  position: relative;
  width: 96%;
  max-width: 1000px;
  height: 90vh;
  max-height: 880px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(213, 166, 36, 0.4);
  z-index: 2;
  animation: atharModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes atharModalPop {
  0% { transform: scale(0.94); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.athar-doc-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  background: #14626A;
  color: #FAF8F5;
  border-bottom: 2px solid #D5A624;
}

.athar-doc-modal-header h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: #FAF8F5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.athar-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.athar-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #FAF8F5 !important;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.athar-modal-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF !important;
}

.athar-modal-btn-gold {
  background: #D5A624 !important;
  color: #0E484E !important;
  border-color: #D5A624 !important;
}

.athar-modal-btn-gold:hover {
  background: #C59402 !important;
  color: #0E484E !important;
}

.athar-modal-close {
  background: transparent;
  border: none;
  color: #CBD5E1;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
}

.athar-modal-close:hover {
  color: #FFFFFF;
}

.athar-doc-modal-body {
  flex: 1;
  background: #E2E8F0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.athar-modal-open {
  overflow: hidden !important;
}

/* أزرار الإجراءات للوثائق (Preview & Download Buttons) */
.athar-btn-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #14626A;
  color: #FAF8F5 !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid #14626A;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-decoration: none !important;
}

.athar-btn-preview:hover {
  background: #29767C;
  border-color: #29767C;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(20, 98, 106, 0.25);
  transform: translateY(-1px);
}

.athar-btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #FAF8F5;
  color: #14626A !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-decoration: none !important;
}

.athar-btn-download:hover {
  background: #D5A624;
  border-color: #D5A624;
  color: #0E484E !important;
  box-shadow: 0 4px 12px rgba(213, 166, 36, 0.25);
  transform: translateY(-1px);
}

/* صندوق الترخيص بصفحة المنتج الفردي (Single Product License Box) */
.athar-product-license-box {
  margin: 18px 0 22px 0;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-right: 5px solid #14626A;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.athar-product-license-box .athar-lic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.athar-product-license-box .athar-lic-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 800;
  color: #14626A;
}

.athar-product-license-box .athar-lic-status {
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(20, 98, 106, 0.08);
  color: #14626A;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(20, 98, 106, 0.2);
}

.athar-product-license-box .athar-lic-details {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 12px;
}

.athar-product-license-box .athar-lic-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* أرشيف التراخيص والبطاقات */
.athar-license-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.athar-license-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
  border-color: #D5A624 !important;
}

/* ==========================================================================
   AL ATHAR AL BAQI - OFFICIAL CATEGORIES & ARCHIVES SYSTEM
   Identity: Primary Teal #14626A, Gold #D5A624, Dark #282828, White #FFF
   ========================================================================== */

/* Page Header & Container */
.athar-categories-page-hero {
  background: linear-gradient(135deg, #14626A 0%, #0c3e43 100%);
  color: #FAF8F5;
  padding: 50px 30px;
  border-radius: 20px;
  margin-bottom: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 98, 106, 0.2);
}

.athar-categories-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(213, 166, 36, 0.18), transparent 70%);
  pointer-events: none;
}

.athar-hero-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #D5A624;
  border: 1px solid rgba(213, 166, 36, 0.4);
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}

.athar-categories-page-hero h1 {
  color: #FFFFFF !important;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 12px;
}

.athar-categories-page-hero p {
  color: #E2E8F0 !important;
  font-size: 16px;
  max-width: 720px;
  margin: 0 auto 25px auto;
  line-height: 1.8;
}

.athar-hero-features {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.athar-hero-feat-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #FAF8F5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Category Grid & Cards Layout */
.athar-categories-archive .products.wd-products,
.products.wd-products.grid-columns-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin-bottom: 40px !important;
}

@media (max-width: 991px) {
  .athar-categories-archive .products.wd-products,
  .products.wd-products.grid-columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .athar-categories-archive .products.wd-products,
  .products.wd-products.grid-columns-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ========================================================
   11. كروت الأقسام بنسبة 1:1 كاملة دون قص وبدون نصوص سفلية
======================================================== */
.category-grid-item.wd-cat {
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}

.category-grid-item.wd-cat.categories-with-shadow .wrapp-category,
.category-grid-item.wd-cat.cat-design-default .wrapp-category,
.category-grid-item.wd-cat .wrapp-category,
.athar-cat-card {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  display: block !important;
}

.category-grid-item.wd-cat:hover .wrapp-category,
.athar-cat-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(20, 98, 106, 0.15) !important;
}

/* Category Image Box - Full 1:1 square container */
.athar-cat-thumb-box,
.athar-cat-thumb-box.category-image-wrapp,
.athar-cat-img-wrapper,
.athar-cat-img-link,
.category-image-wrapp a {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Category Main Image - 1:1 ratio, contain with zero cropping */
.athar-cat-main-img,
.athar-cat-thumb-box img,
.athar-cat-img-wrapper img,
.category-grid-item.wd-cat img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  transform: none !important;
  transition: opacity 0.3s ease !important;
}

.athar-cat-card:hover .athar-cat-main-img,
.category-grid-item.wd-cat:hover img {
  transform: none !important;
}

/* Hide badge & gradient overlay */
.athar-cat-badge,
.athar-cat-img-overlay {
  display: none !important;
}

/* Hide text, description, count pill and CTA button beneath image */
/* Retains DOM content for SEO and screen readers without taking visual space */
.athar-cat-details,
.wd-cat-content.hover-mask.athar-cat-details,
.category-grid-item.wd-cat .wd-cat-content {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Entire card clickability overlay */
.athar-full-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 15 !important;
  cursor: pointer !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Category Archive Page Header & Breadcrumbs */
.tax-product_cat .woocommerce-products-header {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 30px 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(20, 98, 106, 0.04);
}

.tax-product_cat .woocommerce-products-header__title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #14626A !important;
  margin-bottom: 8px !important;
}

.tax-product_cat .term-description {
  font-size: 15px !important;
  color: #626262 !important;
  line-height: 1.8 !important;
}

.wd-breadcrumbs {
  font-size: 13.5px !important;
  color: #808080 !important;
}

.wd-breadcrumbs a {
  color: #14626A !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.wd-breadcrumbs a:hover {
  color: #29767C !important;
}

.wd-breadcrumbs .wd-delimiter::before {
  color: #D5A624 !important;
}

.wd-breadcrumbs .wd-last {
  color: #282828 !important;
  font-weight: 700 !important;
}

/* -------------------------------------------------------------
 * Floating WhatsApp Button (Patron Support)
 * ------------------------------------------------------------- */
.athar-floating-whatsapp {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 99999;
}
html[dir="rtl"] .athar-floating-whatsapp {
  left: 25px;
  right: auto;
}
html[dir="ltr"] .athar-floating-whatsapp {
  right: 25px;
  left: auto;
}
.athar-wa-float-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  padding: 10px 18px !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.athar-wa-float-btn:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6) !important;
  background: #20BD5A !important;
  color: #FFFFFF !important;
}
.athar-wa-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 768px) {
  .athar-floating-whatsapp {
    bottom: 75px !important;
    left: 15px !important;
  }
  html[dir="ltr"] .athar-floating-whatsapp {
    right: 15px !important;
    left: auto !important;
  }
  .athar-wa-label {
    display: none !important;
  }
  .athar-wa-float-btn {
    padding: 12px !important;
    border-radius: 50% !important;
  }
}

/* Hide generic social share icons in Woodmart Top Bar */
.whb-top-bar .wd-social-icons,
.whb-top-bar .social-share {
  display: none !important;
}


/* ==========================================================================
   PHASE 3 DESIGN SYSTEM ENHANCEMENTS — AL ATHAR AL BAQI
   ========================================================================== */

/* 1. Header Gold Cart Badge */
.wd-header-cart .wd-cart-number,
.whb-5u866sftq6yga790jxf3 .wd-cart-number {
  background-color: #D5A624 !important;
  color: #282828 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  box-shadow: 0 2px 6px rgba(213, 166, 36, 0.4) !important;
}

/* 2. Saudi PDPL Privacy & Cookie Consent Banner */
.athar-pdpl-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99998;
  background: #14626A;
  color: #FFFFFF;
  padding: 14px 20px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  border-top: 2px solid #D5A624;
  font-size: 13.5px;
  line-height: 1.6;
  font-family: var(--athar-font-ar, 'Expo Arabic', sans-serif);
  transition: opacity 0.3s ease;
}
.athar-pdpl-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.athar-pdpl-text {
  flex: 1 1 600px;
  font-size: 13px;
}
.athar-pdpl-btn {
  background: #D5A624 !important;
  color: #282828 !important;
  font-weight: 700 !important;
  padding: 8px 22px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}
.athar-pdpl-btn:hover {
  background: #E5B94A !important;
  box-shadow: 0 2px 10px rgba(213, 166, 36, 0.4) !important;
}

/* 3. Category Archive Banner Typography & Active Styling */
.archive.woocommerce .page-title-default,
.tax-product_cat .page-title-default {
  padding: 35px 20px !important;
  border-radius: 0 0 16px 16px !important;
  margin-bottom: 30px !important;
  --nav-color: #14626A !important;
  --nav-color-hover: #D5A624 !important;
  --nav-color-active: #D5A624 !important;
  --title-color: #14626A !important;
}

/* Category banner main heading (Current active category title) */
.tax-product_cat .entry-title.title,
.tax-product_cat .wd-title-wrapp .entry-title,
.tax-product_cat .wd-page-title .entry-title {
  color: #14626A !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.7) !important;
}

/* Back button in banner */
.tax-product_cat .wd-back-btn a {
  color: #14626A !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}
.tax-product_cat .wd-back-btn a:hover {
  color: #D5A624 !important;
}

/* Mobile category dropdown toggle */
.tax-product_cat .wd-btn-show-cat a {
  color: #14626A !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}
.tax-product_cat .wd-btn-show-cat a:hover {
  color: #D5A624 !important;
}

/* Normal category titles in banner navigation -> Primary Teal #14626A */
.tax-product_cat .wd-nav-product-cat > li > a,
.tax-product_cat .wd-nav-product-cat > li > a .nav-link-text,
.tax-product_cat .wd-nav-product-cat > li > a span.nav-link-text {
  color: #14626A !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.25s ease !important;
}

/* Category product counts in banner navigation */
.tax-product_cat .wd-nav-product-cat .nav-link-count {
  color: #29767C !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
  transition: all 0.25s ease !important;
}

/* Hover effects for normal category titles -> Gold #D5A624 */
.tax-product_cat .wd-nav-product-cat > li:not(.wd-active):not(.current-cat) > a:hover,
.tax-product_cat .wd-nav-product-cat > li:not(.wd-active):not(.current-cat) > a:hover .nav-link-text {
  color: #D5A624 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 8px rgba(213, 166, 36, 0.3) !important;
}
.tax-product_cat .wd-nav-product-cat > li:not(.wd-active):not(.current-cat) > a:hover .nav-link-count {
  color: #D5A624 !important;
}
.tax-product_cat .wd-nav-product-cat.wd-style-underline > li:not(.wd-active):not(.current-cat) > a:hover:after,
.tax-product_cat .wd-nav-product-cat.wd-style-underline > li:not(.wd-active):not(.current-cat) > a:hover .nav-link-text:after {
  background-color: #D5A624 !important;
  border-color: #D5A624 !important;
  opacity: 1 !important;
}

/* Active / Selected category title highlighted in Gold #D5A624 */
.tax-product_cat .wd-nav-product-cat > li.wd-active > a,
.tax-product_cat .wd-nav-product-cat > li.current-cat > a,
.tax-product_cat .wd-nav-product-cat > li.wd-active > a .nav-link-text,
.tax-product_cat .wd-nav-product-cat > li.current-cat > a .nav-link-text {
  color: #D5A624 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 10px rgba(213, 166, 36, 0.4) !important;
}

.tax-product_cat .wd-nav-product-cat > li.wd-active .nav-link-count,
.tax-product_cat .wd-nav-product-cat > li.current-cat .nav-link-count {
  color: #D5A624 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* Active underline in gold */
.tax-product_cat .wd-nav-product-cat.wd-style-underline > li.wd-active > a:after,
.tax-product_cat .wd-nav-product-cat.wd-style-underline > li.current-cat > a:after,
.tax-product_cat .wd-nav-product-cat.wd-style-underline > li.wd-active > a .nav-link-text:after,
.tax-product_cat .wd-nav-product-cat.wd-style-underline > li.current-cat > a .nav-link-text:after {
  background-color: #D5A624 !important;
  border-color: #D5A624 !important;
  opacity: 1 !important;
  height: 3px !important;
}

/* Mobile accordion category items */
.tax-product_cat .wd-nav-product-cat.wd-mobile-accordion > li > a .nav-link-text {
  color: #14626A !important;
}
.tax-product_cat .wd-nav-product-cat.wd-mobile-accordion > li.wd-active > a .nav-link-text,
.tax-product_cat .wd-nav-product-cat.wd-mobile-accordion > li.current-cat > a .nav-link-text {
  color: #D5A624 !important;
  font-weight: 800 !important;
}


/* 4. Streamlined Waqf Checkout Form Controls & Experience */
/* Completely remove Compare & Wishlist buttons & icons */
.wd-wishlist-icon,
.wd-compare-icon,
.wd-compare-btn,
.wd-wishlist-btn,
.wd-header-wishlist,
.wd-header-compare,
.product-compare-button,
.woodmart-wishlist-btn,
.woodmart-compare-btn,
.wd-action-btn.wd-compare-icon,
.wd-action-btn.wd-wishlist-icon,
.whb-wishlist-icon,
.whb-compare-icon {
  display: none !important;
}

.woocommerce-checkout .woocommerce-billing-fields h3 {
  color: #14626A !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #E2ECEC !important;
  padding-bottom: 12px !important;
  margin-bottom: 22px !important;
}

.woocommerce-checkout #customer_details {
  background: #FFFFFF !important;
  border: 1px solid #D1E5E7 !important;
  border-radius: 14px !important;
  padding: 28px !important;
  margin-bottom: 25px !important;
  box-shadow: 0 4px 20px rgba(20, 98, 106, 0.05) !important;
}

.woocommerce-checkout h3 {
  color: #14626A !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 1.5px solid #E2ECEC !important;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea {
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 14.5px !important;
  transition: all 0.2s ease !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: #14626A !important;
  box-shadow: 0 0 0 3px rgba(20, 98, 106, 0.15) !important;
  outline: none !important;
}

#billing_country_field {
  display: none !important;
}

#athar_beneficiary_name_field input {
  border: 1.5px solid #D5A624 !important;
  background-color: #FAF8F5 !important;
}


#athar_beneficiary_name_field input:focus {
  border-color: #14626A !important;
  background-color: #FFFFFF !important;
}

.woocommerce-checkout #order_review_heading {
  color: #14626A !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin-top: 15px !important;
}

.woocommerce-checkout #order_review {
  background: #FAF8F5 !important;
  border: 1.5px solid #EBCA6D !important;
  border-radius: 14px !important;
  padding: 24px !important;
}

#place_order {
  background: linear-gradient(135deg, #14626A 0%, #29767C 100%) !important;
  color: #FAF8F5 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 16px 32px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(20, 98, 106, 0.25) !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  cursor: pointer !important;
}

#place_order:hover {
  background: linear-gradient(135deg, #D5A624 0%, #E5B94A 100%) !important;
  color: #282828 !important;
  box-shadow: 0 6px 20px rgba(213, 166, 36, 0.35) !important;
}

/* ==========================================================================
   PART 3: HOMEPAGE WHITESPACE REDUCTION & RESPONSIVE FLOW REFINEMENT
   ========================================================================== */
@media (max-width: 768px) {
  .athar-hero-section {
    padding: 45px 16px !important;
    margin-bottom: 24px !important;
    border-radius: 14px !important;
  }
  .athar-hero-section h1 {
    font-size: 26px !important;
    margin-bottom: 12px !important;
    line-height: 1.35 !important;
  }
  .athar-hero-section p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }
  .athar-trust-metrics-bar {
    padding: 16px 12px !important;
    margin-bottom: 25px !important;
  }
  .athar-categories-section {
    margin-bottom: 28px !important;
  }
  .athar-categories-section h2,
  .athar-featured-products-section h2,
  .athar-cert-preview-section h2,
  .athar-report-preview-section h2 {
    font-size: 22px !important;
    margin-top: 4px !important;
  }
  .athar-featured-products-section {
    margin-bottom: 28px !important;
  }
  .athar-cert-preview-section,
  .athar-report-preview-section {
    padding: 24px 16px !important;
    margin-bottom: 28px !important;
    border-radius: 14px !important;
  }
  .athar-journey-steps {
    gap: 12px !important;
  }
  .journey-step-card {
    padding: 18px 14px !important;
  }
}


/* =============================================================================
   ATHAR AL BAQI - PHASE 4 REFINED COMPONENTS (TRUST STRIP, STEPS, CATEGORY BANNER & PILLS)
   Strict Palette: Teal #14626A, Gold #D5A624, Dark #282828 / #454545 / #626262
   Font: Expo Arabic only. Zero Green #15803D.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TRUST STRIP (CREDENTIALS ROW) - EXACTLY 3 EQUAL CARDS
   ----------------------------------------------------------------------------- */
.athar-trust-strip-section {
  margin-bottom: 45px;
  width: 100%;
}
.athar-trust-grid > p,
.athar-trust-grid > p:empty,
.athar-trust-grid > br {
  display: none !important;
}
.athar-trust-grid > p,
.athar-trust-grid > p:empty,
.athar-trust-grid > br {
  display: none !important;
}
.athar-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  width: 100% !important;
}
@media (max-width: 768px) {
  .athar-trust-grid > p,
  .athar-trust-grid > p:empty,
  .athar-trust-grid > br {
    display: none !important;
  }
  .athar-trust-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
  }
}
.athar-trust-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: #FFFFFF;
  border: 1px solid #E2ECEC;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(20, 98, 106, 0.04);
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-height: 84px;
  box-sizing: border-box;
}
.athar-trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(20, 98, 106, 0.09);
  border-color: #5AA0A4;
}
.athar-trust-card:focus-visible {
  outline: 2px solid #14626A;
  outline-offset: 2px;
}
.athar-trust-icon-box {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: rgba(20, 98, 106, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14626A;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.athar-trust-card:hover .athar-trust-icon-box {
  background: rgba(20, 98, 106, 0.14);
}
.athar-trust-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: start;
  flex: 1;
}
.athar-trust-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #626262;
  line-height: 1.3;
}
.athar-trust-val {
  font-size: 15.5px;
  font-weight: 800;
  color: #14626A;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.athar-chip {
  display: inline-block;
  background: rgba(20, 98, 106, 0.08);
  color: #14626A;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(20, 98, 106, 0.15);
  letter-spacing: 0.5px;
}

/* -----------------------------------------------------------------------------
   2. JOURNEY STEPS (HORIZONTAL DESKTOP STEPPER, VERTICAL MOBILE TIMELINE)
   ----------------------------------------------------------------------------- */
.athar-journey-section {
  background: #FFFFFF;
  border: 1px solid #E2ECEC;
  border-radius: 16px;
  padding: 45px 30px;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .athar-journey-section {
    padding: 30px 18px;
    margin-bottom: 35px;
  }
}
.athar-stepper-container {
  position: relative;
  width: 100%;
}
.athar-stepper-track {
  position: absolute;
  top: 28px;
  inset-inline-start: calc(12.5% + 15px);
  inset-inline-end: calc(12.5% + 15px);
  height: 2px;
  background: #E2ECEC;
  z-index: 1;
}
.athar-stepper-progress {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 75%;
  height: 2px;
  background: linear-gradient(to inline-end, #14626A, #D5A624);
}
/* =============================================================================
   1. FOUR-STEP BUYER JOURNEY CARDS — EXACT EQUAL DIMENSIONS & BALANCED ALIGNMENT
   ============================================================================= */
.athar-stepper-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  align-items: stretch !important;
}

.athar-step-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

.athar-step-node {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 18px !important;
  position: relative !important;
  z-index: 2 !important;
  height: 56px !important;
  flex-shrink: 0 !important;
}

.athar-step-circle {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 50% !important;
  background: #14626A !important;
  border: 3px solid #D5A624 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(20, 98, 106, 0.18) !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

.athar-step-item:hover .athar-step-circle {
  transform: scale(1.06) !important;
}

.athar-step-card {
  background: #FAF8F5 !important;
  border: 1px solid #E2ECEC !important;
  border-radius: 14px !important;
  padding: 24px 18px !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(20, 98, 106, 0.03) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.athar-step-item:hover .athar-step-card {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 14px rgba(20, 98, 106, 0.08) !important;
}

.athar-step-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  border-radius: 50% !important;
  background: #F4F9F9 !important;
  border: 1px solid #E2ECEC !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 14px !important;
  color: #14626A !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.athar-step-icon svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.athar-step-item:hover .athar-step-icon {
  background: #EBF4F5 !important;
  border-color: #D5A624 !important;
  transform: scale(1.05) !important;
}

.athar-step-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #14626A !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.athar-step-desc,
.athar-step-card > p {
  font-size: 13px !important;
  color: #454545 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  width: 100% !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .athar-stepper-grid {
    gap: 12px !important;
  }
  .athar-step-card {
    padding: 20px 12px !important;
  }
  .athar-step-title {
    font-size: 15px !important;
  }
}

@media (max-width: 768px) {
  .athar-stepper-container {
    padding-inline-start: 24px !important;
  }
  .athar-stepper-track {
    top: 24px !important;
    bottom: 24px !important;
    inset-inline-start: 23px !important;
    inset-inline-end: auto !important;
    width: 2px !important;
    height: auto !important;
  }
  .athar-stepper-progress {
    width: 2px !important;
    height: 75% !important;
    background: linear-gradient(to bottom, #14626A, #D5A624) !important;
  }
  .athar-stepper-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .athar-step-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 16px !important;
    text-align: start !important;
    width: 100% !important;
    height: auto !important;
  }
  .athar-step-node {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
  }
  .athar-step-circle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 18px !important;
  }
  .athar-step-card {
    align-items: flex-start !important;
    text-align: start !important;
    padding: 18px 16px !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
  }
  .athar-step-icon {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 0 10px 0 !important;
  }
  .athar-step-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  .athar-step-title {
    text-align: start !important;
    justify-content: flex-start !important;
    min-height: unset !important;
    display: block !important;
    margin: 0 0 6px 0 !important;
  }
  .athar-step-desc,
  .athar-step-card > p {
    text-align: start !important;
  }
}

/* Step entrance animation with safe default opacity */
.athar-step-item {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .athar-step-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -----------------------------------------------------------------------------
   3. CATEGORY HERO BANNER & SUB-CATEGORY PILL ROW
   ----------------------------------------------------------------------------- */
.athar-cat-hero-banner {
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0E484E;
  margin-bottom: 0;
  padding: 40px 20px;
  box-sizing: border-box;
  text-align: center;
}
@media (max-width: 768px) {
  .athar-cat-hero-banner {
    min-height: 180px;
    padding: 28px 15px;
  }
}
.athar-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.athar-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.athar-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14, 72, 78, 0.85) 0%, rgba(20, 98, 106, 0.65) 100%);
  z-index: 2;
}
.athar-banner-container {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  color: #FFFFFF;
}
.athar-breadcrumb-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  font-size: 13.5px;
  color: #FAF8F5;
  flex-wrap: wrap;
}
.athar-breadcrumb-list a {
  color: #FAF8F5;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.athar-breadcrumb-list a:hover {
  opacity: 1;
  color: #D5A624;
  text-decoration: underline;
}
.athar-breadcrumb-list .sep {
  opacity: 0.6;
  font-size: 12px;
}
.athar-breadcrumb-list .current {
  color: #D5A624;
  font-weight: 700;
}
.athar-cat-title-heading {
  color: #FFFFFF !important;
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 10px 0;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
@media (max-width: 768px) {
  .athar-cat-title-heading {
    font-size: 24px;
  }
}
.athar-cat-desc-text {
  color: #FAF8F5;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 760px;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
  .athar-cat-desc-text {
    font-size: 13.5px;
  }
}

.athar-cat-pills-section {
  background: #FFFFFF;
  border-bottom: 1px solid #E2ECEC;
  padding: 16px 0;
  margin-bottom: 48px;
}
@media (max-width: 768px) {
  .athar-cat-pills-section {
    padding: 12px 0;
    margin-bottom: 32px;
  }
}
.athar-cat-pills-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 4px 8px;
}
.athar-cat-pills-list::-webkit-scrollbar {
  display: none;
}
@media (max-width: 991px) {
  .athar-cat-pills-list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 4px 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
}
.athar-cat-pill-item {
  flex-shrink: 0;
  scroll-snap-align: start;
}
.athar-cat-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
  background: #FFFFFF;
  color: #14626A;
  border: 1.5px solid #14626A;
}
.athar-cat-pill-link:hover {
  background: rgba(20, 98, 106, 0.08);
  color: #14626A;
}
.athar-cat-pill-link.is-active {
  background: #14626A !important;
  color: #FFFFFF !important;
  border-color: #14626A !important;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(20, 98, 106, 0.25);
}
.athar-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.9;
}
.athar-cat-pill-link.is-active .athar-pill-badge {
  color: #FAF8F5;
}

.athar-modal-iframe-el {
  width: 100%;
  height: 100%;
}

.tax-product_cat .main-page-wrapper > .term-description,
.tax-product_cat .wd-content-area > .term-description,
.tax-product_cat .shop-loop-head .wd-breadcrumbs,
.tax-product_cat .wd-page-title {
  display: none !important;
}

/* =============================================================================
   SECTION FIXES: THREE TABS NAVIGATION & GOVERNANCE COMPONENT
   ============================================================================= */

/* -----------------------------------------------------------------------------
   3. THREE TABS / NAVIGATION COMPONENT
   ----------------------------------------------------------------------------- */
.athar-three-tabs-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 15px auto 25px auto;
  box-sizing: border-box;
}

.athar-three-tabs-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 620px;
  padding: 4px;
  box-sizing: border-box;
}

.athar-tab-item {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  background: #FFFFFF;
  color: #14626A;
  border: 1.5px solid #E2ECEC;
  border-radius: 10px;
  font-family: 'Expo Arabic', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  transition: all 250ms ease;
  position: relative;
  cursor: pointer;
}

.athar-tab-item:hover {
  background: #F4F9F9;
  color: #14626A;
  border-color: #5AA0A4;
  transform: translateY(-1px);
}

.athar-tab-item.active,
.athar-tab-item.is-active {
  background: #14626A !important;
  color: #FFFFFF !important;
  border-color: #14626A !important;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 0 #D5A624, 0 4px 12px rgba(20, 98, 106, 0.18);
}

@media (max-width: 768px) {
  .athar-three-tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 10px;
  }
  .athar-three-tabs-nav::-webkit-scrollbar {
    display: none;
  }
  .athar-three-tabs-container {
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: auto;
    min-width: 100%;
  }
  .athar-tab-item {
    flex: 0 0 auto;
    min-width: 110px;
    height: 42px;
    padding: 0 16px;
    font-size: 13.5px;
  }
}

/* Header Main Navigation Tab Styling */
.wd-header-main-nav .menu > li.menu-item-115 > a,
.wd-header-main-nav .menu > li.menu-item-116 > a,
.wd-header-main-nav .menu > li.menu-item-183 > a,
.wd-header-main-nav .menu > li.menu-item-87 > a,
.wd-header-main-nav .menu > li.menu-item-88 > a,
.wd-header-main-nav .menu > li.menu-item-90 > a {
  background: #FFFFFF !important;
  color: #14626A !important;
  border: 1.5px solid #E2ECEC !important;
  border-radius: 10px !important;
  height: 40px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  transition: all 250ms ease !important;
  margin: 0 4px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.wd-header-main-nav .menu > li.menu-item-115:hover > a,
.wd-header-main-nav .menu > li.menu-item-116:hover > a,
.wd-header-main-nav .menu > li.menu-item-183:hover > a,
.wd-header-main-nav .menu > li.menu-item-87:hover > a,
.wd-header-main-nav .menu > li.menu-item-88:hover > a,
.wd-header-main-nav .menu > li.menu-item-90:hover > a {
  background: #F4F9F9 !important;
  color: #14626A !important;
  border-color: #5AA0A4 !important;
  transform: translateY(-1px) !important;
}

.wd-header-main-nav .menu > li.menu-item-115.current-menu-item > a,
.wd-header-main-nav .menu > li.menu-item-116.current-menu-item > a,
.wd-header-main-nav .menu > li.menu-item-116.current-page-ancestor > a,
.wd-header-main-nav .menu > li.menu-item-183.current-menu-item > a,
.wd-header-main-nav .menu > li.menu-item-183.current-page-ancestor > a,
.wd-header-main-nav .menu > li.menu-item-87.current-menu-item > a,
.wd-header-main-nav .menu > li.menu-item-88.current-menu-item > a,
.wd-header-main-nav .menu > li.menu-item-88.current-page-ancestor > a,
.wd-header-main-nav .menu > li.menu-item-90.current-menu-item > a,
.wd-header-main-nav .menu > li.menu-item-90.current-page-ancestor > a {
  background: #14626A !important;
  color: #FFFFFF !important;
  border-color: #14626A !important;
  font-weight: 800 !important;
  box-shadow: inset 0 -3px 0 0 #D5A624, 0 4px 12px rgba(20, 98, 106, 0.18) !important;
}

/* -----------------------------------------------------------------------------
   4. GOVERNANCE & OFFICIAL DOCUMENTS SECTION
   ----------------------------------------------------------------------------- */
.athar-gov-hero-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2ECEC !important;
  border-radius: 16px !important;
  padding: 45px 30px !important;
  margin-bottom: 35px !important;
  text-align: center !important;
  box-shadow: 0 4px 16px rgba(20, 98, 106, 0.04) !important;
}

.athar-gov-eyebrow {
  display: inline-block !important;
  background: rgba(213, 166, 36, 0.1) !important;
  border: 1.5px solid #D5A624 !important;
  color: #D5A624 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 6px 20px !important;
  border-radius: 30px !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.5px !important;
}

.athar-gov-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #14626A !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.35 !important;
}

.athar-gov-desc {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #454545 !important;
  line-height: 1.8 !important;
  max-width: 820px !important;
  margin: 0 auto 30px auto !important;
}

.athar-gov-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin-bottom: 25px !important;
}

@media (max-width: 991px) {
  .athar-gov-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 580px) {
  .athar-gov-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .athar-gov-title {
    font-size: 24px !important;
  }
  .athar-gov-desc {
    font-size: 14.5px !important;
  }
}

.athar-gov-item-card {
  background: #F4F9F9 !important;
  border: 1px solid #E2ECEC !important;
  border-radius: 12px !important;
  padding: 22px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.athar-gov-item-card:hover {
  transform: translateY(-2px) !important;
  border-color: #5AA0A4 !important;
  box-shadow: 0 4px 14px rgba(20, 98, 106, 0.08) !important;
}

.athar-gov-item-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(20, 98, 106, 0.08) !important;
  color: #14626A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.athar-gov-item-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #454545 !important;
  margin-bottom: 6px !important;
}

.athar-gov-item-num {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #14626A !important;
  margin-bottom: 4px !important;
  direction: ltr !important;
  display: inline-block !important;
}

.athar-gov-item-sub {
  font-size: 12px !important;
  color: #626262 !important;
  line-height: 1.4 !important;
}
/* ==========================================================================
   UI ENHANCEMENTS: STRATEGIC OBJECTIVES, TRUST ICONS & JOURNEY ICONS
   ========================================================================== */

/* 1. Strategic Objectives Page & Hero Card */
.athar-strategic-hero-card {
  background: #FFFFFF !important;
  border: 1px solid #E2ECEC !important;
  border-radius: 16px !important;
  padding: 48px 32px !important;
  margin-bottom: 35px !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.athar-strategic-badge {
  color: #C59402 !important;
  background: rgba(213, 166, 36, 0.08) !important;
  border: 1px solid rgba(213, 166, 36, 0.35) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 6px 18px !important;
  border-radius: 30px !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.2px !important;
}

.athar-strategic-heading {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #14626A !important;
  margin: 0 0 14px !important;
  line-height: 1.35 !important;
  font-family: "Expo Arabic", sans-serif !important;
}

.athar-strategic-desc {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #454545 !important;
  font-weight: 500 !important;
  max-width: 740px !important;
  margin: 0 auto !important;
  font-family: "Expo Arabic", sans-serif !important;
}

@media (max-width: 768px) {
  .athar-strategic-hero-card {
    padding: 32px 20px !important;
  }
  .athar-strategic-heading {
    font-size: 24px !important;
  }
  .athar-strategic-desc {
    font-size: 14.5px !important;
  }
}

/* 2. Official Information Cards (Trust Strip) Icon System */
.athar-trust-icon-box {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  background: #F4F9F9 !important;
  border: 1px solid #E2ECEC !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #14626A !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.athar-trust-icon-box svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.athar-trust-card:hover .athar-trust-icon-box {
  background: #EBF4F5 !important;
  border-color: #D5A624 !important;
  transform: scale(1.05) !important;
}

/* 3. Four Journey Cards Icon System */
.athar-step-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  background: #F4F9F9 !important;
  border: 1px solid #E2ECEC !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  color: #14626A !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.athar-step-icon svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.athar-step-item:hover .athar-step-icon {
  background: #EBF4F5 !important;
  border-color: #D5A624 !important;
  transform: scale(1.05) !important;
}

@media (max-width: 768px) {
  .athar-step-icon {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 0 0 12px !important;
  }
  .athar-step-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* -----------------------------------------------------------------------------
   English Shop Banner Navigation (Page 63 Mirroring Arabic Shop Master)
   ----------------------------------------------------------------------------- */
.page-id-63 .wd-page-title .wd-breadcrumbs {
  display: none !important;
}

.page-id-63 .wd-page-title .wd-title-wrapp {
  margin-bottom: 20px !important;
}

.page-id-63 .wd-page-title .entry-title.title {
  color: #FFFFFF !important;
  font-size: clamp(26px, 3.2vw, 34px) !important;
  font-weight: 800 !important;
  margin: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

.page-id-63 .wd-page-title .wd-btn-show-cat {
  display: none !important;
}

.page-id-63 .wd-nav-product-cat {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 28px !important;
}

.page-id-63 .wd-nav-product-cat > li {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.page-id-63 .wd-nav-product-cat > li > a {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  padding-bottom: 6px !important;
}

.page-id-63 .wd-nav-product-cat .nav-link-summary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.page-id-63 .wd-nav-product-cat .nav-link-text {
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
  transition: color 0.25s ease !important;
}

.page-id-63 .wd-nav-product-cat .nav-link-count {
  text-transform: none !important;
}

.page-id-63 .wd-nav-product-cat .nav-link-count {
  display: block !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transition: color 0.25s ease !important;
}

.page-id-63 .wd-nav-product-cat > li:hover .nav-link-text {
  color: #D5A624 !important;
}

.page-id-63 .wd-nav-product-cat > li:hover .nav-link-count {
  color: #EBCA6D !important;
}

.page-id-63 .wd-nav-product-cat > li > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0% !important;
  height: 2px !important;
  background-color: #D5A624 !important;
  transition: width 0.25s ease !important;
}

.page-id-63 .wd-nav-product-cat > li:hover > a::after,
.page-id-63 .wd-nav-product-cat > li.wd-active > a::after,
.page-id-63 .wd-nav-product-cat > li.current-cat > a::after {
  width: 100% !important;
}

/* =============================================================================
   ATHAR AL BAQI - FULFILLMENT TAB, MOBILE STICKY CTA & ACCESSIBILITY FOCUS RINGS
   ============================================================================= */

/* 1. آلية التنفيذ الميداني والتوثيق (Fulfillment Tab) */
.athar-fulfillment-tab-wrapper {
  padding: 8px 0;
}
.athar-fulfillment-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.athar-fulfillment-step-card {
  background: #FFFFFF;
  border: 1px solid #E8ECEB;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.athar-fulfillment-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(20, 98, 106, 0.08);
}
.athar-fulfillment-step-card .athar-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.athar-fulfillment-step-card .athar-step-num {
  font-size: 18px;
  font-weight: 900;
  color: var(--athar-teal-primary);
  opacity: 0.35;
}

/* 2. شريط المساهمة الثابت على الجوال (Mobile Sticky Contribution Bar) */
.athar-mobile-sticky-cta {
  display: none;
}
@media (max-width: 768px) {
  .athar-mobile-sticky-cta {
    position: fixed;
    bottom: 54px; /* positioned right above woodmart bottom toolbar */
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-top: 1px solid var(--athar-border-subtle);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 990;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(120%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .athar-mobile-sticky-cta.is-visible {
    transform: translateY(0);
  }
  .athar-mobile-sticky-cta .athar-sticky-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .athar-mobile-sticky-cta .athar-sticky-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--athar-dark-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .athar-mobile-sticky-cta .athar-sticky-price {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--athar-teal-primary);
  }
  .athar-mobile-sticky-cta .athar-sticky-btn {
    background: var(--athar-teal-primary) !important;
    color: #FFFFFF !important;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(20, 98, 106, 0.25);
  }
}

/* 3. إمكانية الوصول: حلقات التركيز القياسية (WCAG Focus Rings) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--athar-gold-accent) !important;
  outline-offset: 2px !important;
}

/* -----------------------------------------------------------------------------
 * Woodmart Page Title Global Safeguard (Prevents Background Logo Distortion)
 * ----------------------------------------------------------------------------- */
.wd-page-title-bg img,
.page-title .wd-page-title-bg img,
.title-shop .wd-page-title-bg img {
  display: none !important;
}

.wd-page-title,
.page-title-default {
  background: linear-gradient(135deg, #0E484E 0%, #14626A 100%) !important;
}

.wd-page-title .entry-title.title,
.page-title .entry-title.title {
  color: #FAF8F5 !important;
  font-weight: 800 !important;
}

.wd-page-title .wd-breadcrumbs,
.page-title .wd-breadcrumbs {
  color: #CBD5E1 !important;
}

.wd-page-title .wd-breadcrumbs a,
.page-title .wd-breadcrumbs a {
  color: #FAF8F5 !important;
}

.wd-page-title .wd-breadcrumbs .current-item,
.page-title .wd-breadcrumbs .current-item {
  color: #D5A624 !important;
}


/* -----------------------------------------------------------------------------
 * Bilingual Waqf Store (Shop) Internal Banner System (Arabic & English Parity)
 * Matches the internal banner system (Signature Floating Card)
 * ----------------------------------------------------------------------------- */
.woocommerce-shop .wd-page-title,
.post-type-archive-product .wd-page-title,
.page-id-63 .wd-page-title {
  max-width: 1100px !important;
  margin: 28px auto 25px auto !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #0E484E 0%, #14626A 100%) !important;
  box-shadow: 0 10px 30px rgba(14, 72, 78, 0.12) !important;
  padding: 38px 24px 32px 24px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: auto !important;
}

.woocommerce-shop .wd-page-title::before,
.post-type-archive-product .wd-page-title::before,
.page-id-63 .wd-page-title::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at top right, rgba(213, 166, 36, 0.18), transparent 70%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.woocommerce-shop .wd-page-title .container,
.post-type-archive-product .wd-page-title .container,
.page-id-63 .wd-page-title .container {
  max-width: 100% !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.woocommerce-shop .wd-page-title .wd-title-wrapp,
.post-type-archive-product .wd-page-title .wd-title-wrapp,
.page-id-63 .wd-page-title .wd-title-wrapp {
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block !important;
}

.woocommerce-shop .wd-page-title .entry-title.title,
.post-type-archive-product .wd-page-title .entry-title.title,
.page-id-63 .wd-page-title .entry-title.title {
  color: #FAF8F5 !important;
  font-size: clamp(26px, 3.2vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 4px 0 0 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  overflow: visible !important;
  display: block !important;
  letter-spacing: normal !important;
}

/* Hide Woodmart Mobile Category Dropdown button globally on shop banner */
.woocommerce-shop .wd-btn-show-cat,
.post-type-archive-product .wd-btn-show-cat,
.page-id-63 .wd-btn-show-cat {
  display: none !important;
}

/* Desktop Grid: 6 equal columns (Bilingual Responsive Architecture) */
.woocommerce-shop .wd-nav-product-cat,
.post-type-archive-product .wd-nav-product-cat,
.page-id-63 .wd-nav-product-cat {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-shop .wd-nav-product-cat .cat-item,
.post-type-archive-product .wd-nav-product-cat .cat-item,
.page-id-63 .wd-nav-product-cat .cat-item {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
}

.woocommerce-shop .wd-nav-product-cat .category-nav-link,
.post-type-archive-product .wd-nav-product-cat .category-nav-link,
.page-id-63 .wd-nav-product-cat .category-nav-link {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 68px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.woocommerce-shop .wd-nav-product-cat .category-nav-link::after,
.woocommerce-shop .wd-nav-product-cat .category-nav-link::before,
.post-type-archive-product .wd-nav-product-cat .category-nav-link::after,
.post-type-archive-product .wd-nav-product-cat .category-nav-link::before {
  display: none !important;
}

/* Universal Hover & Active Highlighting (Arabic & English Parity) */
.woocommerce-shop .wd-nav-product-cat .category-nav-link:hover,
.woocommerce-shop .wd-nav-product-cat .cat-item.current-cat .category-nav-link,
.woocommerce-shop .wd-nav-product-cat .cat-item.wd-active .category-nav-link,
.post-type-archive-product .wd-nav-product-cat .category-nav-link:hover,
.post-type-archive-product .wd-nav-product-cat .cat-item.current-cat .category-nav-link,
.post-type-archive-product .wd-nav-product-cat .cat-item.wd-active .category-nav-link,
.page-id-63 .wd-nav-product-cat .category-nav-link:hover,
.page-id-63 .wd-nav-product-cat .cat-item.current-cat .category-nav-link,
.page-id-63 .wd-nav-product-cat .cat-item.wd-active .category-nav-link {
  background: rgba(213, 166, 36, 0.16) !important;
  border-color: #D5A624 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}

.woocommerce-shop .wd-nav-product-cat .nav-link-summary,
.post-type-archive-product .wd-nav-product-cat .nav-link-summary,
.page-id-63 .wd-nav-product-cat .nav-link-summary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.woocommerce-shop .wd-nav-product-cat .nav-link-text,
.post-type-archive-product .wd-nav-product-cat .nav-link-text,
.page-id-63 .wd-nav-product-cat .nav-link-text {
  color: #FAF8F5 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
  transition: color 0.2s ease !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

.woocommerce-shop .wd-nav-product-cat .category-nav-link:hover .nav-link-text,
.woocommerce-shop .wd-nav-product-cat .cat-item.current-cat .category-nav-link .nav-link-text,
.woocommerce-shop .wd-nav-product-cat .cat-item.wd-active .category-nav-link .nav-link-text,
.post-type-archive-product .wd-nav-product-cat .category-nav-link:hover .nav-link-text,
.post-type-archive-product .wd-nav-product-cat .cat-item.current-cat .category-nav-link .nav-link-text,
.post-type-archive-product .wd-nav-product-cat .cat-item.wd-active .category-nav-link .nav-link-text,
.page-id-63 .wd-nav-product-cat .category-nav-link:hover .nav-link-text,
.page-id-63 .wd-nav-product-cat .cat-item.current-cat .category-nav-link .nav-link-text,
.page-id-63 .wd-nav-product-cat .cat-item.wd-active .category-nav-link .nav-link-text {
  color: #D5A624 !important;
}

.woocommerce-shop .wd-nav-product-cat .nav-link-count,
.post-type-archive-product .wd-nav-product-cat .nav-link-count,
.page-id-63 .wd-nav-product-cat .nav-link-count {
  color: #CBD5E1 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.85 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* Compact Laptop / Tablet Landscape (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .woocommerce-shop .wd-nav-product-cat,
  .post-type-archive-product .wd-nav-product-cat,
  .page-id-63 .wd-nav-product-cat {
    gap: 8px !important;
  }
  .woocommerce-shop .wd-nav-product-cat .category-nav-link,
  .post-type-archive-product .wd-nav-product-cat .category-nav-link,
  .page-id-63 .wd-nav-product-cat .category-nav-link {
    padding: 8px 5px !important;
    min-height: 64px !important;
  }
  .woocommerce-shop .wd-nav-product-cat .nav-link-text,
  .post-type-archive-product .wd-nav-product-cat .nav-link-text,
  .page-id-63 .wd-nav-product-cat .nav-link-text {
    font-size: 11.5px !important;
  }
}

/* Tablet Portrait (768px - 1023px): 3 columns x 2 rows */
@media (min-width: 768px) and (max-width: 1023px) {
  .woocommerce-shop .wd-page-title,
  .post-type-archive-product .wd-page-title,
  .page-id-63 .wd-page-title {
    margin: 20px 16px 20px 16px !important;
    padding: 30px 18px 26px 18px !important;
  }
  .woocommerce-shop .wd-nav-product-cat,
  .post-type-archive-product .wd-nav-product-cat,
  .page-id-63 .wd-nav-product-cat {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    max-width: 680px !important;
  }
  .woocommerce-shop .wd-nav-product-cat .category-nav-link,
  .post-type-archive-product .wd-nav-product-cat .category-nav-link,
  .page-id-63 .wd-nav-product-cat .category-nav-link {
    padding: 10px 12px !important;
    min-height: 64px !important;
  }
  .woocommerce-shop .wd-nav-product-cat .nav-link-text,
  .post-type-archive-product .wd-nav-product-cat .nav-link-text,
  .page-id-63 .wd-nav-product-cat .nav-link-text {
    font-size: 13px !important;
  }
}

/* Mobile (< 768px): 2 columns x 3 rows */
@media (max-width: 767px) {
  .woocommerce-shop .wd-page-title,
  .post-type-archive-product .wd-page-title,
  .page-id-63 .wd-page-title {
    margin: 15px 12px 18px 12px !important;
    padding: 24px 14px 20px 14px !important;
    border-radius: 14px !important;
  }
  .woocommerce-shop .wd-nav-product-cat,
  .post-type-archive-product .wd-nav-product-cat,
  .page-id-63 .wd-nav-product-cat {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .woocommerce-shop .wd-nav-product-cat .cat-item,
  .post-type-archive-product .wd-nav-product-cat .cat-item,
  .page-id-63 .wd-nav-product-cat .cat-item {
    width: 100% !important;
  }
  .woocommerce-shop .wd-nav-product-cat .category-nav-link,
  .post-type-archive-product .wd-nav-product-cat .category-nav-link,
  .page-id-63 .wd-nav-product-cat .category-nav-link {
    padding: 8px 6px !important;
    border-radius: 10px !important;
    min-height: 58px !important;
  }
  .woocommerce-shop .wd-nav-product-cat .nav-link-text,
  .post-type-archive-product .wd-nav-product-cat .nav-link-text,
  .page-id-63 .wd-nav-product-cat .nav-link-text {
    font-size: 12px !important;
  }
  .woocommerce-shop .wd-nav-product-cat .nav-link-count,
  .post-type-archive-product .wd-nav-product-cat .nav-link-count,
  .page-id-63 .wd-nav-product-cat .nav-link-count {
    font-size: 10.5px !important;
  }
}

/* Extra Small (< 360px) */
@media (max-width: 359px) {
  .woocommerce-shop .wd-page-title,
  .post-type-archive-product .wd-page-title,
  .page-id-63 .wd-page-title {
    margin: 10px 8px 15px 8px !important;
    padding: 20px 10px 16px 10px !important;
  }
  .woocommerce-shop .wd-nav-product-cat .category-nav-link,
  .post-type-archive-product .wd-nav-product-cat .category-nav-link,
  .page-id-63 .wd-nav-product-cat .category-nav-link {
    padding: 6px 4px !important;
    min-height: 52px !important;
  }
  .woocommerce-shop .wd-nav-product-cat .nav-link-text,
  .post-type-archive-product .wd-nav-product-cat .nav-link-text,
  .page-id-63 .wd-nav-product-cat .nav-link-text {
    font-size: 11px !important;
  }
}

/* =============================================================================
   AUTHENTICATION PAGES REFINEMENT (LOGIN / REGISTER / LOST PASSWORD)
   Institutional Brand Identity:
   - Primary Teal: #14626A
   - Deep Teal Hover: #0E484E
   - Signature Gold Accent: #D5A624
   - Soft Cream / Off-White Background: #FAF8F5
   - Dark Slate Text: #1E293B
   - Input Border: #E2ECEC
   - Subtle Shadow: 0 10px 30px -4px rgba(20, 98, 106, 0.08)
   ============================================================================= */

/* Page Background */
body.woocommerce-account {
  background-color: #FAF8F5 !important;
}

body.woocommerce-account .main-page-wrapper {
  background-color: transparent !important;
  padding-bottom: 70px !important;
}

/* Authentication Page Banner - Compact Signature Floating Card */
.woocommerce-account .wd-page-title {
  background: linear-gradient(135deg, #0E484E 0%, #14626A 100%) !important;
  max-width: 1100px !important;
  margin: 20px auto 35px auto !important;
  border-radius: 16px !important;
  padding: 36px 20px !important;
  min-height: auto !important;
  box-shadow: 0 8px 24px rgba(20, 98, 106, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.woocommerce-account .wd-page-title .entry-title.title {
  color: #FFFFFF !important;
  font-size: clamp(24px, 3.2vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Breadcrumbs in Account Banner */
.woocommerce-account .wd-page-title .wd-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #CBD5E1 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.woocommerce-account .wd-page-title .wd-breadcrumbs a {
  color: #FAF8F5 !important;
  text-decoration: none !important;
  opacity: 0.85 !important;
  transition: opacity 0.2s ease, color 0.2s ease !important;
}

.woocommerce-account .wd-page-title .wd-breadcrumbs a:hover {
  opacity: 1 !important;
  color: #D5A624 !important;
}

.woocommerce-account .wd-page-title .wd-breadcrumbs .wd-delimiter {
  color: #D5A624 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.woocommerce-account .wd-page-title .wd-breadcrumbs .wd-last {
  color: #D5A624 !important;
  font-weight: 700 !important;
}

/* WooCommerce Notices Container */
.woocommerce-account .woocommerce-notices-wrapper {
  max-width: 480px !important;
  margin: 0 auto 20px auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
  border-radius: 12px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  padding: 14px 18px !important;
  border: 1px solid !important;
  margin: 0 0 16px 0 !important;
  list-style: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.woocommerce-account .woocommerce-error {
  background-color: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #991B1B !important;
}

.woocommerce-account .woocommerce-message {
  background-color: #F0FDF4 !important;
  border-color: #BBF7D0 !important;
  color: #166534 !important;
}

.woocommerce-account .woocommerce-info {
  background-color: #F0FDFA !important;
  border-color: #99F6E4 !important;
  color: #115E59 !important;
}

/* Card Container */
.athar-auth-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.athar-auth-card {
  max-width: 480px !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
  border: 1px solid #E2ECEC !important;
  box-shadow: 0 10px 30px -4px rgba(20, 98, 106, 0.08), 0 4px 12px -2px rgba(20, 98, 106, 0.04) !important;
  padding: 34px 30px 30px 30px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Authentication Tabs */
.athar-auth-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  background: #F1F5F5 !important;
  padding: 5px !important;
  border-radius: 12px !important;
  margin-bottom: 26px !important;
  border: 1px solid #E2ECEC !important;
}

.athar-auth-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  border: none !important;
  background: transparent !important;
  color: #64748B !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  box-shadow: none !important;
}

.athar-auth-tab:hover {
  color: #14626A !important;
}

.athar-auth-tab.active {
  background: #FFFFFF !important;
  color: #14626A !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(20, 98, 106, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.athar-tab-icon {
  flex-shrink: 0 !important;
  transition: stroke 0.2s ease !important;
}

.athar-auth-tab.active .athar-tab-icon {
  stroke: #14626A !important;
}

.athar-auth-single-header {
  text-align: center !important;
  margin-bottom: 24px !important;
}

.athar-auth-title {
  color: #14626A !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

/* Content Panes */
.athar-auth-pane {
  display: none !important;
}

.athar-auth-pane.active {
  display: block !important;
  animation: atharAuthFadeIn 0.28s ease-out !important;
}

@keyframes atharAuthFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form Rows & Labels */
.athar-auth-card .woocommerce-form-row,
.athar-auth-card .form-row {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
  display: block !important;
}

.athar-auth-card label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  margin-bottom: 7px !important;
  line-height: 1.4 !important;
  text-align: start !important;
}

.athar-auth-card label .required {
  color: #DC2626 !important;
  font-weight: 700 !important;
  margin-inline-start: 3px !important;
  text-decoration: none !important;
}

/* Inputs */
.athar-auth-card input.input-text,
.athar-auth-card input[type="text"],
.athar-auth-card input[type="email"],
.athar-auth-card input[type="password"] {
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  border: 1.5px solid #E2ECEC !important;
  border-radius: 10px !important;
  background-color: #FAFDFD !important;
  padding: 0 16px !important;
  font-size: 14.5px !important;
  color: #1E293B !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.athar-auth-card input.input-text:focus,
.athar-auth-card input[type="text"]:focus,
.athar-auth-card input[type="email"]:focus,
.athar-auth-card input[type="password"]:focus {
  border-color: #14626A !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3.5px rgba(20, 98, 106, 0.12) !important;
  outline: none !important;
}

/* Password Input & Eye Toggle */
.athar-auth-card .password-input {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

/* RTL: padding on the left for eye button */
.rtl .athar-auth-card .password-input input.input-text {
  padding-left: 48px !important;
  padding-right: 16px !important;
}

.rtl .athar-auth-card .show-password-input {
  left: 10px !important;
  right: auto !important;
}

/* LTR: padding on the right for eye button */
body:not(.rtl) .athar-auth-card .password-input input.input-text {
  padding-right: 48px !important;
  padding-left: 16px !important;
}

body:not(.rtl) .athar-auth-card .show-password-input {
  right: 10px !important;
  left: auto !important;
}

.athar-auth-card .show-password-input {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #64748B !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  z-index: 2 !important;
  outline: none !important;
}

.athar-auth-card .show-password-input:hover {
  color: #14626A !important;
}

.athar-auth-card .show-password-input::after {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox=0 0 24 24 fill=none stroke=%2364748B stroke-width=2 stroke-linecap=round stroke-linejoin=round%3E%3Cpath d=M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z%3E%3C/path%3E%3Ccircle cx=12 cy=12 r=3%3E%3C/circle%3E%3C/svg%3E") !important;
}

.athar-auth-card .show-password-input.display-password::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox=0 0 24 24 fill=none stroke=%2314626A stroke-width=2 stroke-linecap=round stroke-linejoin=round%3E%3Cpath d=M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24%3E%3C/path%3E%3Cline x1=1 y1=1 x2=23 y2=23%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Form Meta Row (Remember Me + Lost Password) */
.athar-form-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 14px 0 22px 0 !important;
}

.athar-auth-card .woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  user-select: none !important;
}

.athar-auth-card .woocommerce-form-login__rememberme input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  accent-color: #14626A !important;
  cursor: pointer !important;
  margin: 0 !important;
  border-radius: 4px !important;
}

.athar-lost-password {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #14626A !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.athar-lost-password:hover {
  color: #D5A624 !important;
  text-decoration: underline !important;
}

/* Primary CTA Submit Button */
.athar-auth-card .form-row-btn {
  margin: 0 0 16px 0 !important;
}

.athar-auth-btn,
.athar-auth-card .woocommerce-form-login__submit,
.athar-auth-card .woocommerce-form-register__submit,
.woocommerce-ResetPassword button[type="submit"] {
  width: 100% !important;
  height: 48px !important;
  background: #14626A !important;
  color: #FFFFFF !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(20, 98, 106, 0.22) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.athar-auth-btn:hover,
.athar-auth-card .woocommerce-form-login__submit:hover,
.athar-auth-card .woocommerce-form-register__submit:hover,
.woocommerce-ResetPassword button[type="submit"]:hover {
  background: #0E484E !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(20, 98, 106, 0.3) !important;
  transform: translateY(-1px) !important;
}

.athar-auth-btn:active,
.athar-auth-card .woocommerce-form-login__submit:active,
.athar-auth-card .woocommerce-form-register__submit:active,
.woocommerce-ResetPassword button[type="submit"]:active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow: 0 2px 8px rgba(20, 98, 106, 0.2) !important;
}

/* Register Form Specifics */
.athar-auth-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  padding: 10px 14px !important;
  background: #F0FDFA !important;
  border: 1px solid #CCFBF1 !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #115E59 !important;
  margin: 10px 0 16px 0 !important;
}

.athar-privacy-policy-box {
  margin: 14px 0 20px 0 !important;
}

.athar-privacy-policy-box .woocommerce-privacy-policy-text {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: #64748B !important;
  margin: 0 !important;
}

.athar-privacy-policy-box a {
  color: #14626A !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.athar-privacy-policy-box a:hover {
  color: #D5A624 !important;
}

/* Bottom Switcher Prompt */
.athar-auth-footer-prompt {
  margin: 20px 0 0 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid #F1F5F9 !important;
  text-align: center !important;
  font-size: 13.5px !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.athar-switch-btn {
  color: #14626A !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  cursor: pointer !important;
}

.athar-switch-btn:hover {
  color: #D5A624 !important;
  text-decoration: underline !important;
}

/* Lost Password Page Card */
.woocommerce-ResetPassword {
  max-width: 480px !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  border-radius: 18px !important;
  border: 1px solid #E2ECEC !important;
  box-shadow: 0 10px 30px -4px rgba(20, 98, 106, 0.08) !important;
  padding: 34px 30px !important;
  box-sizing: border-box !important;
}

.woocommerce-ResetPassword > p:first-of-type {
  font-size: 14px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

/* Responsive Rules (320px - 768px) */
@media (max-width: 767px) {
  .woocommerce-account .wd-page-title {
    margin: 15px 12px 25px 12px !important;
    padding: 24px 14px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 520px) {
  .athar-auth-card,
  .woocommerce-ResetPassword {
    padding: 24px 18px !important;
    border-radius: 14px !important;
    margin: 0 10px !important;
  }
  .athar-auth-tabs {
    margin-bottom: 20px !important;
    gap: 4px !important;
    padding: 4px !important;
  }
  .athar-tab-icon {
    display: none !important;
  }
  .athar-auth-tab {
    font-size: 14px !important;
    white-space: nowrap !important;
    height: 42px !important;
    padding: 0 10px !important;
  }
}

@media (max-width: 360px) {
  .athar-auth-tab span {
    font-size: 12px !important;
  }
  .athar-form-meta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* Additional Privacy Policy & Mobile Spacing Polish */
.athar-auth-card .woocommerce-privacy-policy-text {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: #64748B !important;
  margin: 12px 0 18px 0 !important;
}

.athar-auth-card .woocommerce-privacy-policy-text a {
  color: #14626A !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.athar-auth-card .woocommerce-privacy-policy-text a:hover {
  color: #D5A624 !important;
}

@media (max-width: 768px) {
  .athar-auth-card {
    margin-bottom: 75px !important;
  }
}

/* Hide duplicate or misaligned breadcrumb on shop page banner */
.woocommerce-shop .wd-page-title .wd-breadcrumbs,
.page-id-63 .wd-page-title .wd-breadcrumbs,
.post-type-archive-product .wd-page-title .wd-breadcrumbs {
  display: none !important;
}


/* -----------------------------------------------------------------------------
 * SITE-WIDE BANNER VISIBILITY & CONSISTENCY UPGRADE
 * Standardizes all banners to the approved Signature Floating Card System
 * ----------------------------------------------------------------------------- */

/* 1. Cart & Checkout Signature Floating Card Banner */
.woocommerce-cart .wd-page-title,
.woocommerce-checkout .wd-page-title {
  max-width: 1100px !important;
  margin: 24px auto 30px auto !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #0E484E 0%, #14626A 100%) !important;
  box-shadow: 0 10px 30px rgba(14, 72, 78, 0.12) !important;
  padding: 34px 20px 28px 20px !important;
  text-align: center !important;
  position: relative !important;
  overflow: visible !important;
  min-height: auto !important;
}

.woocommerce-cart .wd-page-title .container,
.woocommerce-checkout .wd-page-title .container {
  max-width: 100% !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.athar-checkout-title-wrap {
  margin: 0 0 16px 0 !important;
  text-align: center !important;
}

.athar-cart-checkout-h1 {
  color: #FFFFFF !important;
  font-size: clamp(24px, 3.2vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  letter-spacing: -0.01em !important;
}

.woocommerce-cart .wd-checkout-steps,
.woocommerce-checkout .wd-checkout-steps {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px 24px !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.woocommerce-cart .wd-checkout-steps li,
.woocommerce-checkout .wd-checkout-steps li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #CBD5E1 !important;
}

.woocommerce-cart .wd-checkout-steps li a,
.woocommerce-checkout .wd-checkout-steps li a {
  color: #FAF8F5 !important;
  text-decoration: none !important;
  opacity: 0.9 !important;
  transition: all 0.2s ease !important;
}

.woocommerce-cart .wd-checkout-steps li a:hover,
.woocommerce-checkout .wd-checkout-steps li a:hover {
  color: #D5A624 !important;
  opacity: 1 !important;
}

.woocommerce-cart .wd-checkout-steps .step-active,
.woocommerce-checkout .wd-checkout-steps .step-active {
  color: #D5A624 !important;
  font-weight: 800 !important;
}

.woocommerce-cart .wd-checkout-steps .step-active span,
.woocommerce-checkout .wd-checkout-steps .step-active a {
  color: #D5A624 !important;
}

@media (max-width: 768px) {
  .woocommerce-cart .wd-page-title,
  .woocommerce-checkout .wd-page-title {
    margin: 15px 12px 22px 12px !important;
    padding: 22px 14px 18px 14px !important;
    border-radius: 12px !important;
  }
  .woocommerce-cart .wd-checkout-steps,
  .woocommerce-checkout .wd-checkout-steps {
    gap: 8px 14px !important;
    font-size: 13px !important;
  }
}

/* 2. Search Results Page Floating Card Banner */
.search-results .wd-page-title {
  max-width: 1100px !important;
  margin: 24px auto 30px auto !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #0E484E 0%, #14626A 100%) !important;
  box-shadow: 0 10px 30px rgba(14, 72, 78, 0.12) !important;
  padding: 34px 20px !important;
  text-align: center !important;
  position: relative !important;
  overflow: visible !important;
}

.search-results .wd-page-title .entry-title.title {
  color: #FFFFFF !important;
  font-size: clamp(24px, 3.2vw, 32px) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  margin-bottom: 10px !important;
}

.search-results .wd-page-title .wd-breadcrumbs {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  color: #CBD5E1 !important;
}

.search-results .wd-page-title .wd-breadcrumbs a {
  color: #FAF8F5 !important;
}

.search-results .wd-page-title .wd-breadcrumbs a:hover,
.search-results .wd-page-title .wd-breadcrumbs .current-item {
  color: #D5A624 !important;
}

@media (max-width: 768px) {
  .search-results .wd-page-title {
    margin: 15px 12px 22px 12px !important;
    padding: 22px 14px !important;
    border-radius: 12px !important;
  }
}

/* 3. Policy Pages Breadcrumbs and Anti-WPAutoP Safeguards */
.athar-policy-hero-card {
  box-sizing: border-box !important;
}

.athar-policy-breadcrumbs br {
  display: none !important;
}

.athar-policy-breadcrumbs a {
  color: #FAF8F5 !important;
  text-decoration: none !important;
  opacity: 0.9 !important;
  transition: all 0.2s ease !important;
}

.athar-policy-breadcrumbs a:hover {
  color: #D5A624 !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .athar-policy-hero-card {
    padding: 26px 16px !important;
    margin-bottom: 20px !important;
    border-radius: 12px !important;
  }
  .athar-page-container {
    padding: 15px 12px !important;
  }
}

/* 4. Category Archive Banner Safeguards */
.tax-product_cat .woocommerce-breadcrumb,
.tax-product_cat > .wd-breadcrumbs,
.tax-product_cat .main-page-wrapper > .woocommerce-breadcrumb {
  display: none !important;
}

.athar-cat-hero-banner {
  overflow: visible !important;
}

.athar-cat-title-heading {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

/* 5. Site-Wide Anti-Clipping & Sticky Header Clearance */
.main-page-wrapper {
  overflow: visible !important;
}

.wd-page-title,
.wd-title-wrapp,
.entry-header {
  overflow: visible !important;
}

.wd-page-title .entry-title.title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Ensure no negative margins pull banner titles under the header */
.wd-page-title,
.elementor-section:first-of-type {
  margin-top: 0 !important;
}

/* ==========================================================================
   Compact Trust Strip & Localization Enhancements (Production Patch)
   ========================================================================== */
.athar-product-trust-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  background: #FAF8F5 !important;
  border: 1px solid #EBE6DF !important;
  border-radius: 10px !important;
  margin: 14px 0 !important;
}

.athar-product-trust-strip .athar-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #14626A !important;
}

.athar-product-trust-strip .athar-trust-item .dashicons {
  font-size: 17px !important;
  width: 17px !important;
  height: 17px !important;
  color: #D5A624 !important;
}

.athar-product-trust-strip .athar-trust-sep {
  color: #CBD5E1 !important;
}

@media (max-width: 576px) {
  .athar-product-trust-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  .athar-product-trust-strip .athar-trust-sep {
    display: none !important;
  }
}

/* Ensure Filter button text and icon are well aligned */
.wd-show-sidebar-btn a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 700 !important;
  color: #14626A !important;
}


/* ========================================================
   TRACK ORDER PROFESSIONAL BRAND REFINEMENT
======================================================== */
.woocommerce-order-tracking {
  max-width: 820px !important;
  margin: 0 auto 50px auto !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2ECEC !important;
  border-radius: 18px !important;
  padding: 35px 30px !important;
  box-shadow: 0 4px 18px rgba(20, 98, 106, 0.04) !important;
}

.woocommerce-order-tracking > p:first-child {
  font-size: 15px !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  text-align: center !important;
  margin-bottom: 25px !important;
}

.woocommerce-order-tracking form.track_order {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.woocommerce-order-tracking form.track_order p.form-row {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-order-tracking form.track_order p.form-row label {
  display: block !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #14626A !important;
  margin-bottom: 8px !important;
}

.woocommerce-order-tracking form.track_order input.input-text {
  width: 100% !important;
  height: 48px !important;
  padding: 10px 16px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 8px !important;
  font-size: 14.5px !important;
  color: #1E293B !important;
  background: #FFFFFF !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce-order-tracking form.track_order input.input-text:focus {
  border-color: #14626A !important;
  box-shadow: 0 0 0 3px rgba(20, 98, 106, 0.12) !important;
  outline: none !important;
}

.woocommerce-order-tracking form.track_order button[type="submit"] {
  width: 100% !important;
  height: 50px !important;
  background: #14626A !important;
  color: #FAF8F5 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 8px !important;
}

.woocommerce-order-tracking form.track_order button[type="submit"]:hover {
  background: #0E484E !important;
  color: #D5A624 !important;
  box-shadow: 0 4px 12px rgba(20, 98, 106, 0.25) !important;
}

/* ========================================================
   Mobile & Responsive Header Width and Overflow Hardening
======================================================== */
@media (max-width: 1024px) {
  .whb-column.whb-mobile-center, 
  .whb-column_mobile3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    justify-content: center !important;
  }
  .site-logo.whb-g5z57bkgtznbk6v9pll5, 
  .whb-column .site-logo {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Accessible Skip Links - Zero horizontal layout stretch in RTL & LTR */
.wd-skip-links {
  position: absolute !important;
  top: -9999px !important;
  left: 0 !important;
  right: auto !important;
  inset-inline-start: 0 !important;
  transform: translateY(-200%) !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
.wd-skip-links:focus-within,
.wd-skip-links a:focus {
  top: 10px !important;
  transform: translateY(0) !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  z-index: 999999 !important;
}

/* Targeted Fix: Ensure off-canvas mobile drawer and overlay sit above topbar notice */
.mobile-nav,
.cart-widget-side {
  z-index: 999999 !important;
}
.wd-close-side {
  z-index: 999990 !important;
}


/* ==========================================================================
   Athar Al Baqi - Header Clearance & Admin Bar Production Rules
   ========================================================================== */
body.admin-bar .whb-header.whb-sticked,
body.admin-bar .whb-sticky-row.whb-sticked,
body.admin-bar :is(.whb-sticked, .whb-clone) {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .whb-header.whb-sticked,
  body.admin-bar .whb-sticky-row.whb-sticked,
  body.admin-bar :is(.whb-sticked, .whb-clone) {
    top: 46px !important;
  }
}

/* Ensure all H1 headings inside banners have full breathing room and zero clipping */
.wd-page-title .entry-title.title,
.athar-cat-hero-banner h1,
.athar-signature-card h1,
.athar-page-container h1,
.entry-content h1,
.elementor-heading-title {
  overflow: visible !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.35 !important;
}

/* Ensure breadcrumbs maintain clear visibility and stacking context */
.woocommerce-breadcrumb,
.wd-breadcrumbs,
.breadcrumbs {
  overflow: visible !important;
  position: relative !important;
  z-index: 5 !important;
}

/* ==========================================================================
   Task 3: Product Display - Clean Removal of Decorative Numbers & Badges
   ========================================================================== */
.price-type-badge,
.badge-min-order,
.badge-starting-price,
.badge-fixed-price,
.badge-prepaid-package,
.nav-link-count,
.wd-nav-product-cat .nav-link-count,
.has-product-count .nav-link-count {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Ensure clean spacing and vertical rhythm for product cards (1:1 layout) */
.product-grid-item .product-element-top {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   Task 2: Implementation Photos & Videos Styling
   ========================================================================== */
.athar-media-page-wrapper {
  box-sizing: border-box;
}

.athar-media-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.athar-media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(20, 98, 106, 0.12) !important;
}

.athar-media-card img:hover {
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .athar-media-grid {
    grid-template-columns: 1fr !important;
  }
  .athar-media-filters {
    gap: 8px !important;
  }
  .athar-filter-btn {
    font-size: 13px !important;
    padding: 8px 16px !important;
  }
}

/* =============================================================================
   2. REMOVE PRODUCT COUNT DISPLAY NUMBERS ("عرض: 9 / 12 / 18 / 24")
   Preserve sorting, view controls, and pagination without empty spacing
   ============================================================================= */
.wd-products-per-page,
.woodmart-products-per-page,
.wd-shop-tools .wd-products-per-page,
.shop-loop-head .woodmart-products-per-page,
.elementor-widget-wc-archive-products .wd-products-per-page,
.per-page-variation,
.per-page-title,
.per-page-border {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

  .athar-step-card {
    align-items: flex-start !important;
    text-align: start !important;
    padding: 18px 16px !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 190px !important;
    box-sizing: border-box !important;
  }
  html[lang="en"] .athar-step-card,
  html[lang="en-US"] .athar-step-card,
  body.pll-en .athar-step-card {
    min-height: 232px !important;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .athar-step-card {
    min-height: 166px !important;
  }
  html[lang="en"] .athar-step-card,
  html[lang="en-US"] .athar-step-card,
  body.pll-en .athar-step-card {
    min-height: 166px !important;
  }
}