/*
Theme Name: Arab Gear Performance
Theme URI: https://thearabgear.com
Author: Arab Gear Team
Author URI: https://thearabgear.com
Description: High-impact athletic performance e-commerce theme for thearabgear.com, engineered from the Stitch design system.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: arabgear
*/

:root {
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-surface: #f9f9f9;
  --color-surface-pure: #ffffff;
  --color-surface-subtle: #f4f4f4;
  --color-border-hairline: #e5e5e5;
  --color-text-muted: #707070;
  --color-badge-sale: #e11d48;
  --color-support-whatsapp: #25d366;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--color-surface);
  color: #1a1c1c;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header Spacing Offset */
main {
  padding-top: 125px !important;
}
@media (max-width: 768px) {
  main {
    padding-top: 135px !important;
  }
}


/* Core Structural Color Utilities (Zero-latency fallback) */
.bg-primary { background-color: #000000 !important; }
.text-primary { color: #000000 !important; }
.text-on-primary { color: #ffffff !important; }
.bg-primary-container { background-color: #1b1b1b !important; }
.text-on-primary-container { color: #848484 !important; }
.bg-surface { background-color: #f9f9f9 !important; }
.bg-surface-pure { background-color: #ffffff !important; }
.bg-surface-subtle { background-color: #f4f4f4 !important; }
.bg-surface-container { background-color: #eeeeee !important; }
.bg-surface-container-high { background-color: #e8e8e8 !important; }
.bg-surface-container-highest { background-color: #e2e2e2 !important; }
.bg-surface-container-low { background-color: #f3f3f3 !important; }
.bg-surface-container-lowest { background-color: #ffffff !important; }
.text-badge-sale { color: #e11d48 !important; }
.bg-badge-sale { background-color: #e11d48 !important; }
.bg-support-whatsapp { background-color: #25d366 !important; }
.border-hairline { border-color: #e5e5e5 !important; }
.text-text-muted { color: #707070 !important; }

/* Font styling */
.font-headline-hero { font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; }
.font-headline-xl { font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; }
.font-headline-lg { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; }
.font-headline-md { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; }

/* Logo Sizing Constraints */
header img {
  max-height: 36px !important;
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  display: inline-block !important;
}

#mobile-drawer img {
  max-height: 28px !important;
  height: 28px !important;
  width: auto !important;
  object-fit: contain !important;
}
.font-headline-sm { font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; }
.font-label-lg { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; }
.font-label-md { font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; }
.font-label-sm { font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; }
.font-body-lg { font-family: 'Inter', sans-serif !important; }
.font-body-md { font-family: 'Inter', sans-serif !important; }
.font-body-sm { font-family: 'Inter', sans-serif !important; }

/* Material Symbols sizing */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: middle;
}

/* Quick Add Button transitions */
.arabgear-quick-add.loading {
  opacity: 0.7;
  pointer-events: none;
}
.arabgear-quick-add.added {
  background-color: #5dfd8a !important;
  color: #002109 !important;
}

/* Outline text utility */
.text-stroke-black {
  -webkit-text-stroke: 2px #000000;
}

/* Hide duplicate chat buttons from plugins to maintain clean Stitch UI */
#ht-ctc-chat,
.ht-ctc,
#tawkto-iframe-container {
  display: none !important;
}

/* Catalog Pagination Styles */
.arabgear-pagination ul.page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.arabgear-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 0.75rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  border: 1px solid var(--color-border-hairline) !important;
  background-color: var(--color-surface-pure) !important;
  color: #1a1c1c !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.arabgear-pagination .page-numbers:hover {
  border-color: #000000 !important;
  color: #000000 !important;
}
.arabgear-pagination .page-numbers.current {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
.arabgear-pagination .page-numbers.dots {
  border: none !important;
  background: transparent !important;
}

/* Payment Logo Rigid Sizing Rules (Guarantees zero overflow across all viewports) */
.payment-logo-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  max-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.payment-logo-badge img {
  height: 16px !important;
  max-height: 16px !important;
  width: auto !important;
  max-width: 48px !important;
  object-fit: contain !important;
  display: block !important;
}

.payment-logo-badge.badge-dark {
  background-color: #000000 !important;
  border-color: #262626 !important;
}
.payment-logo-badge.badge-dark img {
  filter: invert(1) !important;
}

.payment-logo-badge-sm {
  height: 22px !important;
  max-height: 22px !important;
  padding: 0 6px !important;
}
.payment-logo-badge-sm img {
  height: 13px !important;
  max-height: 13px !important;
  max-width: 38px !important;
}

.express-pay-btn img {
  height: 22px !important;
  max-height: 22px !important;
  width: auto !important;
  max-width: 80px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Option 2: 3:4 and 4:5 Product Cards Zero-Crop with Studio Grey Background */
.aspect-\[3\/4\], 
.aspect-\[4\/5\],
article a.aspect-\[3\/4\] {
  background-color: #e5e5e5 !important;
}

.aspect-\[3\/4\] img, 
.aspect-\[4\/5\] img,
article a.aspect-\[3\/4\] img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* Global suppression of reviews, ratings, and star elements everywhere */
.woocommerce-product-rating,
.star-rating,
.woocommerce-reviews,
#reviews,
#tab-reviews,
.review-count,
.rating-count {
  display: none !important;
}

/* ==========================================================================
   ARABIC & RTL SYSTEM SUPPORT (Saudi Arabia / KSA E-Commerce)
   ========================================================================== */
html[dir="rtl"],
html[lang="ar"],
body.rtl {
  direction: rtl;
  text-align: right;
  font-family: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html[dir="rtl"] .font-headline-hero,
html[dir="rtl"] .font-headline-xl,
html[dir="rtl"] .font-headline-lg,
html[dir="rtl"] .font-headline-md,
html[dir="rtl"] .font-headline-sm,
html[dir="rtl"] h1, 
html[dir="rtl"] h2, 
html[dir="rtl"] h3, 
html[dir="rtl"] h4 {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: normal !important;
}

/* Mega-Menu Dropdown alignment in RTL */
html[dir="rtl"] .group .absolute.top-full.left-0 {
  left: auto !important;
  right: 0 !important;
}

/* Mobile drawer in RTL */
html[dir="rtl"] #mobile-drawer-panel {
  left: auto !important;
  right: 0 !important;
  transform: translateX(100%);
}
html[dir="rtl"] #mobile-drawer:not(.pointer-events-none) #mobile-drawer-panel {
  transform: translateX(0);
}

/* WhatsApp sticky button in RTL: position on bottom-left so it does not block right-aligned content */
html[dir="rtl"] #global-whatsapp-widget,
html[dir="rtl"] #arabgear-global-whatsapp {
  right: auto !important;
  left: 24px !important;
}

/* Quick Add button and badges in RTL */
html[dir="rtl"] .absolute.top-2.left-2 {
  left: auto !important;
  right: 8px !important;
}

/* Mini-cart count badge in RTL */
html[dir="rtl"] #header-cart-count {
  right: auto !important;
  left: -4px !important;
}