/*
 * RTL (Right-to-Left) Stylesheet — loaded automatically by WordPress
 * when the active locale is Arabic (ar) or any other RTL language.
 * Overrides direction-sensitive rules from assets/css/*.css
 */

/* ============================================================
   Base direction & Typography (Cairo Font)
   ============================================================ */
html,
body,
h1, h2, h3, h4, h5, h6,
button,
input,
select,
textarea,
.nav-link,
.nav-dropdown-item,
.mobile-nav-link {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', 'Poppins', sans-serif !important;
}

/* ============================================================
   Typography utilities
   ============================================================ */
.text-left  { text-align: right; }
.text-right { text-align: left; }

/* ============================================================
   Global layout — flip flex rows
   ============================================================ */
.ctx-flex-row,
.flex-row {
  flex-direction: row-reverse;
}

/* ============================================================
   Header & Topbar
   ============================================================ */
.topbar-inner,
.site-header .container {
  direction: rtl;
}

/* Align buttons and icons vertically */
.button-primary,
.button-secondary,
.nav-toggle-btn,
.header-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Categories toggle button: icon sits to the right of the text in RTL,
   so swap the icon gap from margin-right to margin-left */
.nav-toggle-btn .nav-toggle-icon {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

/* Dropdown link chevron: override inline margin-left: 4px from Walker to margin-right */
.nav-link svg,
.nav-dropdown-wrapper svg,
.nav-chevron-icon {
  margin-left: 0 !important;
  margin-right: 6px !important;
}

/* Align navigation dropdown menus to the right reading edge */
.nav-dropdown-menu,
.nav-dropdown-menu.dropdown-left {
  left: auto !important;
  right: 0 !important;
}

/* ============================================================
   Navigation Drawers — Slide from Left in RTL (mirrors LTR right-slide)
   ============================================================ */

/* Categories drawer */
.categories-drawer {
  right: auto !important;
  left: -400px !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1) !important;
  transition: left 0.3s ease !important;
}
.categories-drawer.open {
  left: 0 !important;
  right: auto !important;
}
.drawer-content {
  text-align: right !important;
}
.categories-drawer .submenu {
  text-align: right !important;
}
.categories-drawer .submenu li {
  text-align: right !important;
}

/* Mobile nav drawer */
.mobile-drawer {
  right: auto !important;
  left: -100% !important;
  transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mobile-drawer.active {
  left: 0 !important;
  right: auto !important;
}

/* Mini-cart drawer */
.cart-sidebar {
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.cart-sidebar.active {
  transform: translateX(0) !important;
  left: 0 !important;
  right: auto !important;
}
.cart-item-info {
  text-align: right !important;
}

/* ============================================================
   Search overlay
   ============================================================ */
.ctx-search-overlay input[type="search"] {
  text-align: right;
  padding-right: 20px;
  padding-left: 48px;
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.woocommerce-breadcrumb,
nav[aria-label="Breadcrumb"] ol,
.breadcrumb {
  flex-direction: row-reverse;
}

/* ============================================================
   Hero & Section titles
   ============================================================ */
.ctx-hero-inner,
.section-header,
.shop-header-card {
  text-align: right;
}

/* ============================================================
   Shop — product grid
   ============================================================ */
.ctx-product-card .product-badges {
  left: auto;
  right: 12px;
}

.ctx-product-card .card-actions {
  left: auto;
  right: 0;
}

.product-badge {
  text-align: center;
}

/* ============================================================
   Filter sidebar / widget
   ============================================================ */
.ctx-filter-widget {
  text-align: right;
}

.filter-category-list li {
  text-align: right;
}

/* ============================================================
   Cart page
   ============================================================ */
.cart-item {
  flex-direction: row-reverse;
}

.cart-item-info {
  text-align: right;
}

.cart-actions-row {
  flex-direction: row-reverse;
}

.cart-item-actions {
  flex-direction: column;
  align-items: flex-start;
}

.summary-row {
  flex-direction: row-reverse;
}

/* ============================================================
   Checkout page
   ============================================================ */
.checkout-step-bar {
  flex-direction: row-reverse;
}

.checkout-step-bar .step::before {
  left: auto;
  right: 50%;
}

.checkout-card label {
  text-align: right;
}

.checkout-field-row {
  flex-direction: row-reverse;
}

/* ============================================================
   Account — Auth (login) layout
   ============================================================ */
.auth-split {
  flex-direction: row-reverse;
}

.auth-left {
  text-align: right;
}

.auth-right {
  text-align: right;
}

.auth-brand-title {
  text-align: right;
}

.auth-testimonial {
  text-align: right;
}

/* Form fields */
.auth-tabs {
  flex-direction: row-reverse;
}

.form-group label {
  text-align: right;
}

.form-group input {
  text-align: right;
  direction: ltr; /* keep email/password fields LTR for usability */
}

/* Password toggle icon flipped */
.pw-toggle {
  left: 12px;
  right: auto;
}

.input-icon-right {
  padding-left: 44px;
  padding-right: 14px;
}

/* ============================================================
   Account — Dashboard / Account layout
   ============================================================ */
.account-layout {
  flex-direction: row-reverse;
}

.account-sidebar {
  text-align: right;
  border-right: none;
  border-left: 1px solid var(--color-border, rgba(255,255,255,0.06));
}

.account-nav-link {
  flex-direction: row-reverse;
  text-align: right;
}

.account-nav-link svg {
  margin-right: 0;
  margin-left: 12px;
}

/* Stats grid */
.account-stats-grid {
  text-align: right;
}

/* Recent orders table */
.account-orders-table th,
.account-orders-table td {
  text-align: right;
}

/* Quick actions */
.quick-action-card {
  text-align: right;
}

/* ============================================================
   Order View / Tracker
   ============================================================ */
.order-tracker {
  flex-direction: row-reverse;
}

.tracker-step {
  text-align: center; /* keep centered in RTL */
}

.order-items-list .order-item {
  flex-direction: row-reverse;
}

.order-item-info {
  text-align: right;
}

/* ============================================================
   Edit address list
   ============================================================ */
.address-grid {
  text-align: right;
}

.address-edit-link {
  text-align: left;
}

/* ============================================================
   Quick view modal
   ============================================================ */
.qv-grid {
  flex-direction: row-reverse;
}

.qv-info {
  text-align: right;
}

.qv-actions {
  flex-direction: row-reverse;
}

/* ============================================================
   Announcement bar
   ============================================================ */
.ctx-announcement-bar .announcement-inner {
  flex-direction: row-reverse;
}

/* ============================================================
   Quantity selector
   ============================================================ */
.qty-selector {
  flex-direction: row-reverse;
}

/* ============================================================
   Pagination
   ============================================================ */
.ctx-pagination {
  flex-direction: row-reverse;
}

/* ============================================================
   Badges & status chips
   ============================================================ */
.order-status-badge {
  direction: rtl;
}

/* ============================================================
   Footer
   ============================================================ */
.ctx-footer-grid {
  flex-direction: row-reverse;
}

.footer-col {
  text-align: right;
}

.footer-social-links {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.footer-bottom-bar {
  flex-direction: row-reverse;
}

/* ============================================================
   WooCommerce injected markup
   ============================================================ */
.woocommerce-notices-wrapper,
.woocommerce-info,
.woocommerce-error,
.woocommerce-message {
  text-align: right;
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
  text-align: right;
}

.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-checkout label {
  text-align: right;
}

.woocommerce-checkout #customer_details {
  flex-direction: row-reverse;
}

.woocommerce-tabs ul.tabs {
  flex-direction: row-reverse;
}

.product_meta {
  text-align: right;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
  text-align: right;
}

/* Variation swatches */
.ctx-swatches {
  justify-content: flex-start;
}

/* ============================================================
   Catalogue mode — inquiry table
   ============================================================ */
.ctx-inquiry-table th,
.ctx-inquiry-table td {
  text-align: right;
}

/* ============================================================
   Utility — margin & padding logical overrides
   Swap margin-left/right & padding-left/right where needed.
   ============================================================ */
.mr-auto { margin-right: 0; margin-left: auto; }
.ml-auto { margin-left: 0; margin-right: auto; }

.pl-0 { padding-right: 0; }
.pr-0 { padding-left: 0; }

/* Icon spacing in buttons */
.button-primary svg,
.button-secondary svg {
  margin-right: 0;
  margin-left: 8px;
}

/* Back arrows — flip for RTL */
.cart-back-btn svg,
.back-link svg,
a[class*="back"] svg {
  transform: scaleX(-1);
}

/* ============================================================
   Sticky ATC bar / floating elements
   ============================================================ */
#floating-cart-card {
  right: auto;
  left: 24px;
}

/* Back to top button */
#back-to-top {
  right: auto;
  left: 24px;
}

/* ============================================================
   Hero — Absolute-Positioned Blocks
   ============================================================ */

/* Headline block: LTR top-left → RTL top-right */
.text-block-top-left {
  left: auto !important;
  right: 12% !important;
}

/* Info block: LTR top-right → RTL top-left */
.text-block-center-right {
  right: auto !important;
  left: 12% !important;
  text-align: left !important;
}

/* CTA anchor: follows headline block */
.hero-cta-anchor {
  left: auto !important;
  right: 12% !important;
}

/* Stats block: LTR bottom-left → RTL bottom-right */
.hero-stats-block {
  left: auto !important;
  right: 5% !important;
}

/* Massive slide number: anchored to stats block */
.massive-number {
  left: auto !important;
  right: -20px !important;
}

/* Slide nav list: LTR left edge → RTL right edge */
.hero-nav-left {
  left: auto !important;
  right: 3% !important;
}

/* Active indicator tick: flip to appear on the right of the item */
.hero-nav-left ul li.active::before {
  left: auto !important;
  right: -15px !important;
}

/* Social / scroll column: LTR right edge → RTL left edge */
.hero-nav-right {
  right: auto !important;
  left: 3% !important;
}

/* Hotspot positions: swap left ↔ right so they sit on the
   correct side of the centre product image */
.hotspot-left {
  left: auto !important;
  right: 22% !important;
}

.hotspot-right {
  right: auto !important;
  left: 22% !important;
}

/* Hotspot dot: the pulsing circle lives at the end of the line
   that faces the product image — swap after position flip */
.line-left .hotspot-dot {
  right: auto !important;
  left: -7px !important;
}

.line-right .hotspot-dot {
  left: auto !important;
  right: -7px !important;
}

/* 1440 px breakpoint overrides for hotspot-right */
@media (max-width: 1440px) {
  .hotspot-right {
    right: auto !important;
    left: 15% !important;
  }
}

/* Mobile hero: reset absolute overrides (they become relative at 1024px),
   but ensure text aligns to the reading edge */
@media (max-width: 1024px) {
  .text-block-center-right {
    text-align: right !important;
  }
}

/* ============================================================
   Marquee — force LTR track/wrapper so loop calculations stay correct.
   Do not override marquee-scroll animations so they run LTR.
   ============================================================ */
.marquee-wrapper,
.marquee-section,
.marquee-track,
.marquee-content,
.about-marquee,
.reviews-marquee-wrapper,
.reviews-marquee-track {
  direction: ltr !important;
  text-align: left !important;
}

.marquee-track {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Ensure the text itself renders with Cairo font, has no cursive-breaking letter-spacing, and doesn't wrap */
.marquee-text,
.marquee-capsule {
  font-family: 'Cairo', 'Poppins', sans-serif !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Ensure review cards inside the marquee render in RTL for readability */
.review-card {
  direction: rtl !important;
  text-align: right !important;
}

/* ============================================================
   Category Slider
   ============================================================ */

/* Force LTR on the scroll container so GSAP scrollLeft maths
   remains identical to the LTR implementation */
.category-track-wrapper,
.category-track {
  direction: ltr !important;
}

/* Category cards inside the track should render in RTL */
.category-card {
  direction: rtl !important;
}

/* Mirror slider arrows for RTL */
#cat-prev svg,
#cat-next svg,
#partner-prev svg,
#partner-next svg {
  transform: scaleX(-1) !important;
}

/* Action arrow: nudge left (← toward reading start) in RTL */
.category-card:hover .category-action-btn {
  transform: translateX(-4px) !important;
}

/* Shimmer sweep: run right-to-left (start off-right, exit off-left) */
.category-img-container::after {
  left: auto !important;
  right: -100% !important;
}
.category-card:hover .category-img-container::after {
  right: 150% !important;
  left: auto !important;
  transition: right 1s ease-out !important;
}

/* Mobile category header: right-align items inside the column */
@media (max-width: 660px) {
  .slider-category-header {
    align-items: flex-end !important;
  }
}

/* ============================================================
   Partner Slider
   ============================================================ */

/* Section lives flush against the right rail in LTR → left rail in RTL */
.partner-section {
  padding: var(--spacing-section) 5% var(--spacing-section-sm) 0 !important;
}

/* Blurb stays anchored to the left rail in RTL */
.partner-desc {
  right: auto !important;
  left: 5% !important;
  text-align: left !important;
}

/* Force LTR so the JS offsetLeft / scrollLeft maths stays correct */
.partner-track {
  direction: ltr !important;
}

/* Responsive: swap the 5% rail to the right side */
@media (max-width: 1024px) {
  .partner-nav {
    padding-left: 0 !important;
    padding-right: 5% !important;
  }
  .partner-track {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

/* ============================================================
   Products Section
   ============================================================ */
.product-section-title {
  text-align: right !important;
}

/* ============================================================
   Accordion (Core Promises)
   ============================================================ */

/* Mirror the chevron icon so it points toward the RTL reading start */
.accordion-icon {
  transform: scaleX(-1) rotate(90deg) !important;
}
.accordion-item.active .accordion-icon {
  transform: scaleX(-1) rotate(0deg) !important;
}

/* Indent expanded content from the right (aligns below the title text,
   skipping the numbering glyph that is now on the right side) */
#core-promises .accordion-content-inner {
  padding-left: 0 !important;
  padding-right: 44px !important;
}

/* ============================================================
   About section — mobile title realignment
   ============================================================ */
@media (max-width: 1024px) {
  .about-huge-title {
    text-align: right !important;
  }
}