/* ==========================================================================
   ag-accessibility.css – v5.2
   Enterprise-level a11y helpers for Glass UI
   ========================================================================== */

/* 0) قاعدة عامة: لا نلغي outline افتراضيًا */
:focus {
  outline-color: inherit;
}

/* ==========================================================================
   1) Focus-visible – قوي ومتّسق (WCAG 2.4.7 + 2.4.13)
   ========================================================================== */

/* عناصر تفاعلية أساسية */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.ag-btn:focus-visible,
.ag-product-action:focus-visible,
.ag-view-toggle:focus-visible {
  outline: 2px solid var(--ag-primary-strong, #2563eb);
  outline-offset: 3px;
  border-radius: 999px;
}

/* عناصر قائمة/هيدر وفوتر – غالبًا نصية */
.ag-main-menu a:focus-visible,
.ag-footer-link:focus-visible,
.ag-drawer-menu-list a:focus-visible {
  outline: 2px solid var(--ag-primary-strong, #2563eb);
  outline-offset: 2px;
}

/* عناصر أيقونية صغيرة تحتاج تمييز أكبر */
.ag-cart:focus-visible,
.ag-bottom-drawer-toggle:focus-visible,
.ag-footer-social-icon:focus-visible {
  outline: 3px solid var(--ag-primary-strong, #2563eb);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px rgba(248, 250, 252, 0.9);
}

/* خيار داخلي لفوكس خاص */
.ag-focus-ring:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: -2px;
}


/* ==========================================================================
   2) حركة وحساسية للموشن – prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  /* تقليل شدة الحركة، لا إعدامها بالكامل */
  * {
    animation-duration: 0.15s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
  }

  /* تعطيل الحركات الزخرفية/المستمرة فقط */
  .ag-hero-bg,
  .ag-pulse-glow::after,
  .ag-thankyou-card__icon--success,
  .ag-thankyou-card__icon--error {
    animation: none !important;
  }
}

/* ==========================================================================
   3) تباين محسّن + وضع High Contrast اختياري
   ========================================================================== */

/* وضع high contrast يمكن تفعيله من JS بإضافة الكلاس على body */
body.ag-high-contrast {
  --ag-text-white: #020617;
  --ag-text-muted: #111827;
}

/* روابط أوضح في high contrast */
body.ag-high-contrast a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* فروق أوضح داخل hero/footer في هذا الوضع */
body.ag-high-contrast .ag-hero-content,
body.ag-high-contrast .ag-footer-bg {
  background-color: #ffffff;
}

/* ==========================================================================
   4) حجم اللمس (Hit Area) – Mobile-friendly
   ========================================================================== */

.ag-btn,
.ag-cart,
.ag-bottom-drawer-toggle,
.ag-footer-social-icon,
.ag-product-action,
.ag-view-toggle {
  min-width: 40px;
  min-height: 40px;
}

/* تأكد أن العناصر المصفوفة أفقياً لا تلتصق ببعضها */
.ag-header-icons,
.ag-footer-social-links,
.ag-product-actions-top {
  gap: max(8px, 0.5rem);
}

/* ==========================================================================
   5) روابط هادئة لكنها واضحة داخل النصوص
   ========================================================================== */

.ag-main a:not(.ag-btn):not(.ag-footer-link) {
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* Hover: تعزيز التباين بدون حركة مزعجة */
.ag-main a:not(.ag-btn):hover,
.ag-main a:not(.ag-btn):focus-visible {
  color: var(--ag-primary-strong, #1d4ed8);
}

/* ==========================================================================
   6) حالات خطأ وتنبيه – تشخيص بصري واضح
   ========================================================================== */

/* حقول checkout/cart */
.ag-field--invalid .ag-input,
.ag-field--invalid input,
.ag-field--invalid select,
.ag-field--invalid textarea {
  border-color: var(--ag-danger, #ef4444) !important;
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.7),
    0 0 14px rgba(248, 113, 113, 0.6);
}

/* رسائل مساعده */
.ag-field-hint {
  font-size: 0.78rem;
  color: var(--ag-text-muted);
}

.ag-field-error {
  font-size: 0.8rem;
  color: #b91c1c;
}

/* ==========================================================================
   7) تحسين قرائية فوق الزجاج/الصور
   ========================================================================== */

/* إزالة text-shadow من الهيرو الزجاجي؛ الحفاظ على وضوح النص حسب توصيات القراءة فوق الزجاج.[web:853] */
.ag-category-overlay,
.ag-hero-content {
  text-shadow: none;
}

/* نص داخل overlay داكن على خلفية صورية */
.ag-category-overlay .ag-category-title,
.ag-category-overlay .ag-category-count {
  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.65);
}