/* ==========================================================================
   RTL (Right-to-Left) Support for Arabic
   ========================================================================== */

/* Base RTL adjustments */
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Typography adjustments */
html[dir="rtl"] body {
  font-family: 'Segoe UI', 'Arial', 'Tahoma', sans-serif;
}

/* Flexbox reversals - structural elements */
html[dir="rtl"] .header__nav,
html[dir="rtl"] .header__actions,
html[dir="rtl"] .product-card__header,
html[dir="rtl"] .product-card__footer,
html[dir="rtl"] .product-card__features,
html[dir="rtl"] .pill,
html[dir="rtl"] .value-card__icon,
html[dir="rtl"] .cta__microcopy,
html[dir="rtl"] .cta__microcopy-item,
html[dir="rtl"] .footer__grid,
html[dir="rtl"] .footer__links,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .highlight-box__title,
html[dir="rtl"] .support-options__grid,
html[dir="rtl"] .faq-categories,
html[dir="rtl"] .faq-question,
html[dir="rtl"] .response-banner {
  flex-direction: row-reverse;
}

/* Keep certain elements LTR */
html[dir="rtl"] .header__logo,
html[dir="rtl"] .footer__logo {
  flex-direction: row;
}

/* Button icon positioning */
html[dir="rtl"] .btn svg {
  margin-right: 0;
  margin-left: 8px;
}

/* Product card link arrow */
html[dir="rtl"] .product-card__link svg {
  transform: rotate(180deg);
}

html[dir="rtl"] .product-card__link:hover {
  gap: var(--space-3);
}

/* List styling */
html[dir="rtl"] .legal-content ul,
html[dir="rtl"] .legal-content ol {
  padding-right: var(--space-6);
  padding-left: 0;
}

html[dir="rtl"] .legal-content li {
  padding-right: var(--space-4);
  padding-left: 0;
}

html[dir="rtl"] .legal-content ul li::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] .legal-content ol li {
  padding-right: var(--space-8);
  padding-left: 0;
}

html[dir="rtl"] .legal-content ol li::before {
  right: 0;
  left: auto;
}

/* Form elements */
html[dir="rtl"] .form-select {
  background-position: left 12px center;
  padding-left: 44px;
  padding-right: 16px;
}

html[dir="rtl"] .form-input,
html[dir="rtl"] .form-textarea {
  text-align: right;
}

/* Mobile menu */
html[dir="rtl"] .mobile-menu {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}

html[dir="rtl"] .mobile-menu.is-open {
  transform: translateX(0);
}

/* Header mobile RTL: Keep hamburger on the right side of screen (like LTR) */
@media (max-width: 767px) {
  html[dir="rtl"] .header__inner {
    flex-direction: row !important;
    direction: ltr !important;
  }
  
  html[dir="rtl"] .header__logo {
    order: 0 !important;
    direction: ltr !important;
  }
  
  html[dir="rtl"] .header__mobile-toggle {
    order: 99 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Footer grid on desktop */
@media (min-width: 768px) {
  html[dir="rtl"] .footer__grid {
    direction: rtl;
  }
}

/* FAQ accordion icon */
html[dir="rtl"] .faq-question svg {
  margin-right: 0;
  margin-left: auto;
}

/* Breadcrumb */
html[dir="rtl"] .breadcrumb__separator {
  transform: rotate(180deg);
}

/* Value cards grid */
html[dir="rtl"] .why__grid {
  direction: rtl;
}

/* Hero text alignment - mobile centered */
html[dir="rtl"] .hero__content,
html[dir="rtl"] .section-header,
html[dir="rtl"] .cta__content {
  text-align: center;
}

/* Product card text alignment */
html[dir="rtl"] .product-card__description {
  text-align: right;
}

/* Support page hero */
html[dir="rtl"] .support-hero__content {
  text-align: center;
}

/* Contact form labels */
html[dir="rtl"] .form-label {
  text-align: right;
}

/* File upload button */
html[dir="rtl"] .file-upload-input::file-selector-button {
  margin-right: 0;
  margin-left: 12px;
}

/* Maintain numeric/code direction */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .product-card__price strong {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Email inputs should remain LTR */
html[dir="rtl"] input[type="email"] {
  direction: ltr;
  text-align: left;
}

/* ==========================================================================
   PRODUCT LANDING PAGE - RTL FIXES
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Hero Section
   ----------------------------------------------------------------------------- */

/* Hero badge */
html[dir="rtl"] .hero__badge {
  flex-direction: row-reverse !important;
}

/* Hero actions */
html[dir="rtl"] .hero__actions {
  flex-direction: row-reverse !important;
}

/* Trust badges - keep icons on LEFT of text (same as LTR) */
/* But reverse the ORDER of badges in the container */
html[dir="rtl"] .hero__trust {
  flex-direction: row-reverse !important;
}

/* Rating */
html[dir="rtl"] .hero__rating {
  flex-direction: row-reverse !important;
}

/* Desktop hero split layout */
@media (min-width: 1024px) {
  html[dir="rtl"] .hero--split .hero__content {
    text-align: right !important;
  }
  
  html[dir="rtl"] .hero--split .hero__actions {
    justify-content: flex-end !important;
  }
  
  html[dir="rtl"] .hero--split .hero__trust {
    justify-content: flex-end !important;
  }
  
  html[dir="rtl"] .hero--split .hero__social-proof {
    text-align: right !important;
  }
  
  html[dir="rtl"] .hero--split .hero__rating {
    justify-content: flex-end !important;
  }
}

/* -----------------------------------------------------------------------------
   Showcase Sections
   ----------------------------------------------------------------------------- */

/* Desktop adjustments */
@media (min-width: 1024px) {
  /* Title: green bar to the right */
  html[dir="rtl"] .showcase-item__title {
    padding-left: 0 !important;
    padding-right: 24px !important;
  }
  
  html[dir="rtl"] .showcase-item__title::before {
    left: auto !important;
    right: 0 !important;
  }
  
  /* Text padding */
  html[dir="rtl"] .showcase-item__text {
    padding-left: 0 !important;
    padding-right: 24px !important;
    text-align: right !important;
  }
  
  /* List container - remove center alignment, align to end */
  html[dir="rtl"] .showcase-item__list {
    padding-left: 0 !important;
    padding-right: 24px !important;
    align-items: stretch !important;
  }
  
  /* Content alignment */
  html[dir="rtl"] .showcase-item__content {
    text-align: right !important;
  }
}

/* List items: Use position absolute for checkmark - ALL BREAKPOINTS */
html[dir="rtl"] .showcase-item__list li {
  display: block !important;
  position: relative !important;
  padding-right: 34px !important;
  padding-left: 0 !important;
  text-align: right !important;
}

html[dir="rtl"] .showcase-item__list li::before {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 2px !important;
  transform: none !important;
}

/* -----------------------------------------------------------------------------
   Problem/Solution Cards
   ----------------------------------------------------------------------------- */

/* Card header: icon + title - MUST reverse for RTL */
html[dir="rtl"] .card__header {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
}

html[dir="rtl"] .card--problem .card__header,
html[dir="rtl"] .card--solution .card__header {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
}

/* Ensure card title text aligns right */
html[dir="rtl"] .card__title {
  text-align: right !important;
}

/* Card list items */
html[dir="rtl"] .card__list li {
  padding-left: 0 !important;
  padding-right: 28px !important;
  text-align: right !important;
}

html[dir="rtl"] .card__list li::before {
  left: auto !important;
  right: 0 !important;
}

/* Card content alignment */
html[dir="rtl"] .card__intro,
html[dir="rtl"] .card__list {
  text-align: right !important;
}