
/* rtl.css */
/**
 * KMHEER Gallery - RTL Arabic Typography & Alignment Engine v3.0
 * Smooth RTL Motion • Drawer Placement • Badges & Toast Alignment
 */

[dir="rtl"], html[lang="ar"] {
  font-family: var(--font-body);
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .km-header-actions {
  flex-direction: row;
}

/* Nav Link Typography & Alignment in RTL */
[dir="rtl"] .km-nav-menu {
  direction: rtl;
}

[dir="rtl"] .km-nav-link {
  font-family: var(--font-body);
  letter-spacing: 0;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

[dir="rtl"] .km-nav-link::after {
  left: auto;
  right: 50%;
  transition: width var(--transition-ui), right var(--transition-ui);
}

[dir="rtl"] .km-nav-link:hover::after,
[dir="rtl"] .km-nav-link.active::after {
  width: 100%;
  right: 0;
}

/* Arabic mobile navigation and cart always enter from the natural right edge. */
[dir="rtl"] .km-drawer {
  right: 0;
  left: auto;
  transform: translateX(105%);
  border-radius: 22px 0 0 22px;
  box-shadow: -22px 0 65px rgba(0, 0, 0, .2);
}

[dir="rtl"] .km-drawer-overlay.active .km-drawer {
  transform: translateX(0);
}

/* Toast Notification in RTL */
[dir="rtl"] .km-toast-container {
  right: auto;
  left: var(--space-4);
}

[dir="rtl"] .km-toast {
  animation-name: kmToastInRtl;
}

@keyframes kmToastInRtl {
  from { opacity: 0; transform: translateX(-24px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

[dir="rtl"] .km-toast.exit {
  animation-name: kmToastOutRtl;
}

@keyframes kmToastOutRtl {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-32px); }
}

[dir="rtl"] .km-toast.success {
  border-left: none;
  border-right: 3px solid var(--km-success);
}

[dir="rtl"] .km-toast.error {
  border-left: none;
  border-right: 3px solid var(--km-error);
}

[dir="rtl"] .km-toast.warning {
  border-left: none;
  border-right: 3px solid var(--km-warning);
}

/* Art Card Badges in RTL */
[dir="rtl"] .km-art-card-badges {
  left: auto;
  right: 12px;
}

[dir="rtl"] .km-art-card-fav {
  left: 12px;
  right: auto;
}

/* Section Header Alignment in RTL */
[dir="rtl"] .km-section-header.text-start {
  text-align: right;
}

/* Responsive Mobile Resets for Arabic */
@media (max-width: 768px) {
  [dir="rtl"] .km-toast-container {
    left: 12px;
    right: 12px;
  }

  [dir="rtl"] h1 {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    line-height: 1.3;
  }
  [dir="rtl"] h2 {
    font-size: clamp(1.4rem, 4vw, 2rem);
    line-height: 1.35;
  }
}
