/* ============================================================
   EAGLE EYE CCTV — RTL OVERRIDES
   Arabic / Right-to-Left Layout Support
   Version: 1.0 | 2026
   ============================================================ */

/* ============================================================
   1. BASE DIRECTION SETUP
   ============================================================ */

[dir='rtl'] {
  direction: rtl;
  text-align: right;
}

[dir='ltr'] {
  direction: ltr;
  text-align: left;
}

/* Arabic language defaults */
:root[lang='ar'],
html[lang='ar'] {
  font-family: 'Cairo', 'Tajawal', 'Segoe UI Arabic', Arial, sans-serif;
}

[dir='rtl'] body {
  font-family: var(--font-arabic);
  letter-spacing: 0; /* Arabic doesn't need letter-spacing */
}

/* ============================================================
   2. TYPOGRAPHY RTL OVERRIDES
   ============================================================ */

[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3,
[dir='rtl'] h4,
[dir='rtl'] h5,
[dir='rtl'] h6 {
  letter-spacing: 0;
}

[dir='rtl'] blockquote {
  border-inline-start: 4px solid var(--color-primary);
  border-inline-end: none;
  padding-inline-start: var(--space-4);
  padding-inline-end: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ============================================================
   3. FLEX DIRECTION OVERRIDES
   ============================================================ */

/* Row reversal for inline elements in RTL context */
[dir='rtl'] .flex-row-rtl-reverse {
  flex-direction: row-reverse;
}

/* Items that should NOT be reversed (numbers, prices, etc.) */
[dir='rtl'] .ltr-keep {
  direction: ltr;
  unicode-bidi: embed;
}

[dir='rtl'] .text-ltr {
  direction: ltr;
  text-align: left;
  unicode-bidi: embed;
}

/* Phone numbers, prices always LTR */
[dir='rtl'] .price,
[dir='rtl'] .phone-number,
[dir='rtl'] [data-ltr] {
  direction: ltr;
  display: inline-block;
}

/* ============================================================
   4. MARGIN/PADDING LOGICAL PROPERTY OVERRIDES
   ============================================================ */

/* These use logical properties (inline-start/inline-end) which
   automatically switch in RTL. The following overrides handle
   non-logical shorthand classes. */

/* When using non-logical .ml-* / .mr-* classes: */
[dir='rtl'] .mr-auto { margin-inline-end: 0; margin-inline-start: auto; }
[dir='rtl'] .ml-auto { margin-inline-start: 0; margin-inline-end: auto; }
[dir='rtl'] .mr-2    { margin-inline-end: 0; margin-inline-start: var(--space-2); }
[dir='rtl'] .mr-4    { margin-inline-end: 0; margin-inline-start: var(--space-4); }
[dir='rtl'] .mr-6    { margin-inline-end: 0; margin-inline-start: var(--space-6); }
[dir='rtl'] .ml-2    { margin-inline-start: 0; margin-inline-end: var(--space-2); }
[dir='rtl'] .ml-4    { margin-inline-start: 0; margin-inline-end: var(--space-4); }
[dir='rtl'] .ml-6    { margin-inline-start: 0; margin-inline-end: var(--space-6); }

/* ============================================================
   5. HEADER & TOP BAR
   ============================================================ */

/* Header top bar — contact info on left in LTR, right in RTL */
[dir='rtl'] .header-top {
  direction: rtl;
}

[dir='rtl'] .header-top__contact {
  flex-direction: row-reverse;
}

/* Logo alignment */
[dir='rtl'] .header__logo {
  margin-inline-end: auto;
  margin-inline-start: 0;
}

/* Header icons (cart, wishlist, account) */
[dir='rtl'] .header-icons {
  flex-direction: row;
}

/* Language switcher */
[dir='rtl'] .lang-switcher {
  flex-direction: row-reverse;
}

/* ============================================================
   6. NAVIGATION — DESKTOP
   ============================================================ */

[dir='rtl'] .nav-desktop {
  flex-direction: row-reverse;
}

[dir='rtl'] .nav-link {
  padding-inline-end: var(--space-4);
  padding-inline-start: var(--space-4);
}

/* Dropdown arrow in nav links */
[dir='rtl'] .nav-link .nav-arrow {
  margin-inline-start: var(--space-1);
  margin-inline-end: 0;
  transform: rotate(0deg);
}

/* Mega dropdown menu */
[dir='rtl'] .nav-dropdown {
  left: auto;
  right: 0;
  text-align: right;
}

[dir='rtl'] .nav-dropdown-col {
  text-align: right;
}

/* Sub-menu arrow indicator */
[dir='rtl'] .nav-has-sub::after {
  content: '‹';
  margin-inline-start: var(--space-2);
  margin-inline-end: 0;
}

/* ============================================================
   7. NAVIGATION — MOBILE DRAWER
   ============================================================ */

/* Mobile drawer slides from right in RTL */
[dir='rtl'] .nav-mobile-drawer {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

[dir='rtl'] .nav-mobile-drawer.is-open {
  transform: translateX(0);
}

/* Hamburger button side */
[dir='rtl'] .hamburger-btn {
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);
}

/* Mobile nav items */
[dir='rtl'] .nav-mobile-link {
  flex-direction: row-reverse;
  text-align: right;
}

/* Mobile accordion arrow */
[dir='rtl'] .nav-mobile-link .expand-icon {
  margin-inline-start: 0;
  margin-inline-end: auto;
  transform: rotate(180deg);
}

[dir='rtl'] .nav-mobile-link.is-open .expand-icon {
  transform: rotate(90deg);
}

/* ============================================================
   8. BREADCRUMB
   ============================================================ */

[dir='rtl'] .breadcrumb {
  flex-direction: row;
  direction: rtl;
}

[dir='rtl'] .breadcrumb-item + .breadcrumb-item::before {
  content: '‹';
  transform: none;
}

/* Breadcrumb separator arrow direction */
[dir='rtl'] .breadcrumb-separator {
  transform: rotate(180deg);
  display: inline-block;
}

/* ============================================================
   9. FORM ELEMENTS
   ============================================================ */

/* Input with icon on start */
[dir='rtl'] .input-group {
  flex-direction: row-reverse;
}

[dir='rtl'] .input-group .input-icon-start {
  right: auto;
  left: var(--space-3);
}

[dir='rtl'] .input-group .input-icon-end {
  left: auto;
  right: var(--space-3);
}

/* Padding adjustment for icon inside input */
[dir='rtl'] .form-control.has-icon-start {
  padding-right: var(--space-10);
  padding-left: var(--space-4);
}

[dir='rtl'] .form-control.has-icon-end {
  padding-left: var(--space-10);
  padding-right: var(--space-4);
}

/* Form validation messages */
[dir='rtl'] .form-feedback {
  text-align: right;
}

/* Form label */
[dir='rtl'] .form-label {
  text-align: right;
  display: block;
}

/* Checkbox & Radio */
[dir='rtl'] .checkbox-wrapper,
[dir='rtl'] .radio-wrapper {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

[dir='rtl'] .checkbox-wrapper input,
[dir='rtl'] .radio-wrapper input {
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);
}

/* Select dropdown arrow */
[dir='rtl'] .form-select {
  padding-right: var(--space-4);
  padding-left: var(--space-10);
  background-position: left var(--space-3) center;
}

/* Search bar */
[dir='rtl'] .search-bar .search-icon {
  right: auto;
  left: var(--space-4);
}

[dir='rtl'] .search-bar input {
  padding-right: var(--space-4);
  padding-left: var(--space-12);
}

[dir='rtl'] .search-bar .search-clear {
  left: auto;
  right: var(--space-4);
}

/* ============================================================
   10. DROPDOWNS & POPOVERS
   ============================================================ */

/* Dropdown aligned to end by default */
[dir='rtl'] .dropdown-menu {
  left: 0;
  right: auto;
  text-align: right;
}

[dir='rtl'] .dropdown-menu.align-end {
  left: auto;
  right: 0;
}

[dir='rtl'] .dropdown-item {
  text-align: right;
  flex-direction: row-reverse;
}

[dir='rtl'] .dropdown-item .item-icon {
  margin-inline-start: 0;
  margin-inline-end: var(--space-3);
}

/* ============================================================
   11. CARDS
   ============================================================ */

/* Product card wishlist button */
[dir='rtl'] .product-card__wishlist {
  top: var(--space-3);
  left: auto;
  right: var(--space-3);
}

/* Product card badge */
[dir='rtl'] .product-card__badge {
  left: auto;
  right: var(--space-3);
  top: var(--space-3);
}

/* Product card action overlay */
[dir='rtl'] .product-card__actions {
  right: 0;
  left: 0;
}

/* Card header with icon */
[dir='rtl'] .card-header {
  flex-direction: row-reverse;
  text-align: right;
}

/* Review card author */
[dir='rtl'] .review-card__author {
  flex-direction: row-reverse;
}

/* ============================================================
   12. CART SIDEBAR
   ============================================================ */

/* Cart slides from left in RTL */
[dir='rtl'] .cart-sidebar {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  border-right: none;
  border-left: 1px solid var(--color-gray-200);
}

[dir='rtl'] .cart-sidebar.is-open {
  transform: translateX(0);
}

/* Cart item layout */
[dir='rtl'] .cart-item {
  flex-direction: row-reverse;
  text-align: right;
}

[dir='rtl'] .cart-item__remove {
  top: 0;
  left: 0;
  right: auto;
}

/* Cart quantity controls */
[dir='rtl'] .qty-control {
  flex-direction: row-reverse;
}

/* ============================================================
   13. TOAST NOTIFICATIONS
   ============================================================ */

/* RTL: toasts slide from top-left */
[dir='rtl'] .toast-container {
  left: var(--space-4);
  right: auto;
}

[dir='rtl'] .toast {
  flex-direction: row-reverse;
  text-align: right;
}

[dir='rtl'] .toast__icon {
  margin-inline-end: 0;
  margin-inline-start: var(--space-3);
}

[dir='rtl'] .toast__close {
  right: auto;
  left: var(--space-2);
}

@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-120%); }
  to   { opacity: 1; transform: translateX(0); }
}

[dir='rtl'] .toast.is-entering {
  animation: slideInFromLeft 0.35s ease both;
}

/* ============================================================
   14. SLIDER / CAROUSEL
   ============================================================ */

/* Hero slider arrows */
[dir='rtl'] .slider-btn-prev {
  left: auto;
  right: var(--space-4);
}

[dir='rtl'] .slider-btn-next {
  right: auto;
  left: var(--space-4);
}

/* Slider arrow icons flipped */
[dir='rtl'] .slider-btn-prev .icon,
[dir='rtl'] .slider-btn-next .icon {
  transform: rotate(180deg);
}

/* Thumbnails carousel direction */
[dir='rtl'] .thumb-carousel {
  flex-direction: row-reverse;
}

/* Swiper RTL */
[dir='rtl'] .swiper {
  direction: rtl;
}

/* ============================================================
   15. FILTER SIDEBAR
   ============================================================ */

[dir='rtl'] .filter-sidebar {
  border-right: none;
  border-left: 1px solid var(--color-gray-200);
}

[dir='rtl'] .filter-toggle::after {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* Price range slider labels */
[dir='rtl'] .price-range-labels {
  flex-direction: row-reverse;
}

/* Filter check icon */
[dir='rtl'] .filter-option input[type='checkbox'] {
  margin-inline-end: 0;
  margin-inline-start: var(--space-2);
}

/* ============================================================
   16. BREADCRUMB
   ============================================================ */

[dir='rtl'] .breadcrumb-item::before {
  content: '‹' !important;
  margin-inline: var(--space-2);
  transform: none;
}

/* ============================================================
   17. PRODUCT DETAIL PAGE
   ============================================================ */

/* Product thumbnails */
[dir='rtl'] .product-gallery__thumbs {
  flex-direction: row-reverse;
}

/* Spec table */
[dir='rtl'] .spec-table th {
  text-align: right;
}

[dir='rtl'] .spec-table td {
  text-align: right;
}

/* Product tabs */
[dir='rtl'] .product-tabs__nav {
  flex-direction: row-reverse;
}

/* Quantity stepper */
[dir='rtl'] .qty-stepper {
  flex-direction: row-reverse;
}

/* ============================================================
   18. CHECKOUT
   ============================================================ */

/* Steps progress */
[dir='rtl'] .checkout-steps {
  direction: rtl;
  flex-direction: row-reverse;
}

[dir='rtl'] .checkout-step::before {
  right: auto;
  left: 0;
}

/* Delivery options */
[dir='rtl'] .delivery-option-card {
  flex-direction: row-reverse;
  text-align: right;
}

[dir='rtl'] .delivery-option-card input[type='radio'] {
  margin-inline-start: 0;
  margin-inline-end: var(--space-3);
}

/* ============================================================
   19. ACCOUNT SIDEBAR
   ============================================================ */

[dir='rtl'] .account-sidebar {
  border-right: none;
  border-left: 1px solid var(--color-gray-200);
}

[dir='rtl'] .account-nav-link {
  flex-direction: row-reverse;
  text-align: right;
}

[dir='rtl'] .account-nav-link .nav-icon {
  margin-inline-start: 0;
  margin-inline-end: var(--space-3);
}

/* Active indicator */
[dir='rtl'] .account-nav-link.is-active::before {
  left: auto;
  right: 0;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

/* Order timeline */
[dir='rtl'] .order-timeline {
  border-inline-start: none;
  border-inline-end: 2px solid var(--color-gray-200);
  padding-inline-start: 0;
  padding-inline-end: var(--space-6);
}

[dir='rtl'] .timeline-item::before {
  left: auto;
  right: calc(-1 * var(--space-6) - 6px);
}

/* ============================================================
   20. FOOTER
   ============================================================ */

[dir='rtl'] .footer-grid {
  direction: rtl;
}

[dir='rtl'] .footer-col {
  text-align: right;
}

[dir='rtl'] .footer-social {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

[dir='rtl'] .footer-link {
  flex-direction: row-reverse;
}

[dir='rtl'] .footer-link::before {
  transform: rotate(180deg);
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);
}

/* Newsletter form */
[dir='rtl'] .newsletter-form {
  flex-direction: row-reverse;
}

[dir='rtl'] .newsletter-form input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  text-align: right;
}

[dir='rtl'] .newsletter-form button {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Payment icons */
[dir='rtl'] .payment-icons {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* ============================================================
   21. WHATSAPP FAB
   ============================================================ */

/* FAB on the left in RTL, right in LTR */
[dir='rtl'] .whatsapp-fab {
  left: var(--space-6);
  right: auto;
}

[dir='rtl'] .whatsapp-fab__tooltip {
  left: auto;
  right: calc(100% + var(--space-3));
}

/* ============================================================
   22. STATS BAR & COUNTER
   ============================================================ */

[dir='rtl'] .stats-bar {
  flex-direction: row-reverse;
}

[dir='rtl'] .stat-item {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

[dir='rtl'] .stat-item:first-child {
  border-left: none;
}

/* ============================================================
   23. WHY EAGLE / FEATURES GRID
   ============================================================ */

[dir='rtl'] .feature-item {
  text-align: right;
}

[dir='rtl'] .feature-item__icon {
  margin-inline-end: 0;
  margin-inline-start: var(--space-4);
}

/* ============================================================
   24. BRANDS MARQUEE
   ============================================================ */

/* Reverse marquee direction in RTL */
[dir='rtl'] .brands-track {
  animation-direction: reverse;
}

/* ============================================================
   25. SCROLL CAMERA LABELS
   ============================================================ */

[dir='rtl'] .camera-label {
  flex-direction: row-reverse;
  text-align: right;
}

[dir='rtl'] .camera-label__line {
  margin-inline-start: 0;
  margin-inline-end: var(--space-3);
}

/* ============================================================
   26. COUNTDOWN TIMER
   ============================================================ */

[dir='rtl'] .countdown-timer {
  flex-direction: row-reverse;
}

/* ============================================================
   27. ADMIN PANEL RTL
   ============================================================ */

[dir='rtl'] .admin-layout {
  flex-direction: row-reverse;
}

[dir='rtl'] .admin-sidebar {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

[dir='rtl'] .admin-nav-item {
  text-align: right;
}

[dir='rtl'] .admin-nav-item .nav-icon {
  margin-inline-start: 0;
  margin-inline-end: var(--space-3);
}

[dir='rtl'] .admin-nav-item .nav-arrow {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

[dir='rtl'] .admin-sidebar.is-collapsed .admin-nav-item {
  justify-content: center;
}

[dir='rtl'] .admin-table th,
[dir='rtl'] .admin-table td {
  text-align: right;
}

[dir='rtl'] .admin-table th:last-child,
[dir='rtl'] .admin-table td:last-child {
  text-align: left;
}

[dir='rtl'] .admin-form .form-row {
  flex-direction: row-reverse;
}

[dir='rtl'] .stat-card {
  text-align: right;
}

[dir='rtl'] .stat-card__icon {
  margin-inline-start: 0;
  margin-inline-end: var(--space-4);
}

/* ============================================================
   28. UTILITY OVERRIDES FOR RTL
   ============================================================ */

/* Text alignment in RTL context */
[dir='rtl'] .text-start { text-align: right; }
[dir='rtl'] .text-end   { text-align: left; }

/* Float overrides */
[dir='rtl'] .float-start { float: right; }
[dir='rtl'] .float-end   { float: left; }

/* Border radius corner overrides */
[dir='rtl'] .rounded-start {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

[dir='rtl'] .rounded-end {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

/* Input group button positioning */
[dir='rtl'] .input-group > :first-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

[dir='rtl'] .input-group > :last-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* ============================================================
   29. LOGICAL PROPERTIES FALLBACK
   ============================================================ */

/* For browsers that don't support logical properties,
   use explicit physical properties in RTL */
@supports not (margin-inline-start: 0) {
  [dir='rtl'] * {
    --logical-start: right;
    --logical-end: left;
  }
  [dir='rtl'] .ms-2 { margin-right: var(--space-2); margin-left: 0; }
  [dir='rtl'] .me-2 { margin-left: var(--space-2); margin-right: 0; }
  [dir='rtl'] .ps-4 { padding-right: var(--space-4); padding-left: 0; }
  [dir='rtl'] .pe-4 { padding-left: var(--space-4); padding-right: 0; }
}

/* ============================================================
   30. RTL ICONS & DIRECTIONAL INDICATORS
   ============================================================ */

/* Flip icons that indicate direction */
[dir='rtl'] .icon-arrow-right,
[dir='rtl'] .icon-chevron-right,
[dir='rtl'] .icon-arrow-next {
  transform: rotate(180deg);
}

[dir='rtl'] .icon-arrow-left,
[dir='rtl'] .icon-chevron-left,
[dir='rtl'] .icon-arrow-prev {
  transform: rotate(180deg);
}

/* Icons that should NOT be flipped */
[dir='rtl'] .icon-no-flip,
[dir='rtl'] .icon-star,
[dir='rtl'] .icon-heart,
[dir='rtl'] .icon-cart,
[dir='rtl'] .icon-user,
[dir='rtl'] .icon-phone,
[dir='rtl'] .icon-email,
[dir='rtl'] .icon-whatsapp,
[dir='rtl'] .icon-camera {
  transform: none;
}

/* ============================================================
   END OF rtl.css
   ============================================================ */