/* 
 * KEANU Platform — RTL Styles for Arabic 
 * Comprehensive RTL support for all mobile & desktop breakpoints
 */

/* ── Base RTL ───────────────────────────────────────────────────── */
html[dir="rtl"] {
    text-align: right;
    direction: rtl;
    /* Arabic-optimized font stack */
    font-family: 'Cairo', 'Almarai', 'Tajawal', 'Noto Sans Arabic', sans-serif;
}

html[dir="rtl"] body {
    text-align: right;
}

/* ── Header & Nav ───────────────────────────────────────────────── */
html[dir="rtl"] .nav-menu {
    margin-right: auto;
    margin-left: 0;
}

html[dir="rtl"] .header-actions {
    margin-right: 1.5rem;
    margin-left: 0;
}

html[dir="rtl"] .nav-link {
    margin-left: 1.5rem;
    margin-right: 0;
}

/* Reverse underline animation origin for RTL */
html[dir="rtl"] .nav-link::after {
    left: 50%;
    right: 50%;
}
html[dir="rtl"] .nav-link:hover::after,
html[dir="rtl"] .nav-link.active::after {
    left: 1rem;
    right: 1rem;
}

html[dir="rtl"] .top-announcement-bar {
    flex-direction: row;
}

/* Cart badge position for RTL */
html[dir="rtl"] .cart-badge {
    top: -4px;
    left: -4px;
    right: auto;
}

/* ── Mobile Navigation (RTL — slides from LEFT) ─────────────────── */
html[dir="rtl"] .mobile-nav-panel {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

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

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

html[dir="rtl"] .mobile-nav-link i {
    text-align: center;
}

html[dir="rtl"] .mobile-nav-footer {
    flex-direction: row-reverse;
}

/* ── Cart Drawer (RTL — slides from LEFT) ────────────────────────── */
html[dir="rtl"] .cart-drawer {
    right: auto;
    left: -400px;
    box-shadow: 5px 0 30px rgba(0,0,0,0.1);
}

html[dir="rtl"] .cart-drawer.active {
    left: 0;
    right: auto;
}

/* ── Hero Section ───────────────────────────────────────────────── */
html[dir="rtl"] .hero-inner {
    flex-direction: row-reverse;
}

html[dir="rtl"] .hero-content {
    padding-right: 0;
    padding-left: 2rem;
}

html[dir="rtl"] .hero-title,
html[dir="rtl"] .hero-desc,
html[dir="rtl"] .hero-kicker {
    text-align: right;
}

html[dir="rtl"] .hero-actions {
    justify-content: flex-start;
}

html[dir="rtl"] .hero-stats {
    justify-content: flex-start;
}

/* Flip floating cards for RTL */
html[dir="rtl"] .hero-floating-card.card-1 {
    right: auto;
    left: -10%;
}

html[dir="rtl"] .hero-floating-card.card-2 {
    left: auto;
    right: -8%;
}

/* ── Generic Grids & Layouts ────────────────────────────────────── */
html[dir="rtl"] .grid {
    direction: rtl;
}

/* ── Forms ───────────────────────────────────────────────────────── */
html[dir="rtl"] .form-control {
    text-align: right;
}

/* Flip input icon position */
html[dir="rtl"] .input-icon .icon {
    left: auto;
    right: 0.85rem;
}

html[dir="rtl"] .input-icon .form-control {
    padding-left: 1rem;
    padding-right: 2.8rem;
}

/* Flip select dropdown arrow */
html[dir="rtl"] .form-select,
html[dir="rtl"] .sort-select {
    background-position: left 1rem center;
    padding-right: 1rem;
    padding-left: 2.5rem;
}

/* Flip input-group radius */
html[dir="rtl"] .input-group .form-control {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

html[dir="rtl"] .input-group .btn {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* ── Alert border-left → border-right ────────────────────────────── */
html[dir="rtl"] .alert {
    border-left: none;
    border-right: 4px solid currentColor;
}

/* ── Badges ──────────────────────────────────────────────────────── */
html[dir="rtl"] .badge {
    direction: rtl;
}

/* ── About & Contact Grids ───────────────────────────────────────── */
html[dir="rtl"] .about-grid,
html[dir="rtl"] .contact-grid {
    direction: rtl;
}

html[dir="rtl"] .about-badge {
    right: auto;
    left: -1.5rem;
}

html[dir="rtl"] .contact-item:hover {
    transform: translateX(-4px);
}

html[dir="rtl"] .section-title,
html[dir="rtl"] .section-desc {
    text-align: right;
}

/* Flip contact & trust icons */
html[dir="rtl"] .contact-item .contact-icon {
    margin-right: 0;
    margin-left: 1rem;
}

html[dir="rtl"] .trust-item .trust-icon {
    margin-right: 0;
    margin-left: 1rem;
}

/* ── Review Cards ────────────────────────────────────────────────── */
html[dir="rtl"] .review-author {
    flex-direction: row;
}

html[dir="rtl"] .review-avatar {
    margin-right: 0;
    margin-left: 1rem;
}

/* Flip the quote mark */
html[dir="rtl"] .review-card::before {
    right: auto;
    left: 1.5rem;
    content: '\201D';
}

/* ── Product Cards ───────────────────────────────────────────────── */
html[dir="rtl"] .product-card-badges {
    left: auto;
    right: 0.75rem;
}

html[dir="rtl"] .product-card-actions {
    right: auto;
    left: 0.75rem;
}

@media (hover: hover) {
    html[dir="rtl"] .product-card-actions {
        transform: translateX(-10px);
    }
    html[dir="rtl"] .product-card:hover .product-card-actions {
        transform: translateX(0);
    }
}

html[dir="rtl"] .product-price {
    flex-direction: row;
}

/* ── Breadcrumb ──────────────────────────────────────────────────── */
html[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

/* Rotate the chevron separator for RTL */
html[dir="rtl"] .breadcrumb .sep i {
    transform: rotate(180deg);
    display: inline-block;
}

/* ── Dash sidebar ─────────────────────────────────────────────── */
html[dir="rtl"] .dash-nav-link {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .dash-nav-link.active {
    box-shadow: inset -3px 0 0 var(--navy);
}

@media (hover: hover) {
    html[dir="rtl"] .dash-nav-link:hover i {
        transform: scale(1.15) translateX(-2px);
    }
}

/* ── Footer ───────────────────────────────────────────────────── */
html[dir="rtl"] .site-footer {
    text-align: right;
}

html[dir="rtl"] .footer-social {
    justify-content: flex-start;
}

html[dir="rtl"] .footer-bottom {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-contact-item {
    flex-direction: row;
}

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

/* ── WhatsApp Float ─────────────────────────────────────────────── */
html[dir="rtl"] .whatsapp-float {
    right: auto;
    left: calc(2rem + env(safe-area-inset-left));
}

html[dir="rtl"] .scroll-top {
    right: auto;
    left: calc(2rem + env(safe-area-inset-left));
}

@media (max-width: 640px) {
    html[dir="rtl"] .whatsapp-float {
        left: calc(1rem + env(safe-area-inset-left));
        right: auto;
    }
    html[dir="rtl"] .scroll-top {
        left: calc(1rem + env(safe-area-inset-left));
        right: auto;
    }
}

/* ── Typography & General Alignment ─────────────────────────────── */
html[dir="rtl"] p,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] ul, html[dir="rtl"] ol, html[dir="rtl"] li {
    text-align: right;
}

html[dir="rtl"] .text-center {
    text-align: center !important;
}

/* These should be swapped for RTL */
html[dir="rtl"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-right {
    text-align: left !important;
}

/* ── Logical property utilities ──────────────────────────────────── */
html[dir="rtl"] .ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .me-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pe-3 { padding-left: 1rem !important;  padding-right: 0 !important; }

/* ── Legal Pages (CGV/Privacy) RTL ──────────────────────────────── */
html[dir="rtl"] .legal-tabs-inner {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

html[dir="rtl"] .legal-table th {
    text-align: right;
}

html[dir="rtl"] .legal-article ul,
html[dir="rtl"] .legal-article ol {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .legal-highlight {
    border-left: none;
    border-right: 4px solid var(--gold);
    border-radius: 0.5rem 0 0 0.5rem;
}

html[dir="rtl"] .contact-dpo {
    text-align: right;
}

/* ── Mobile-specific RTL fixes ───────────────────────────────────── */
@media (max-width: 900px) {
    html[dir="rtl"] .hero-inner {
        /* On mobile, single column so direction reset */
        direction: rtl;
    }

    html[dir="rtl"] .hero-actions {
        justify-content: center;
    }

    html[dir="rtl"] .hero-stats {
        justify-content: center;
    }

    /* Ensure floating cards stay within bounds for RTL on mobile */
    html[dir="rtl"] .hero-floating-card.card-1 {
        left: 5% !important;
        right: auto !important;
    }
    html[dir="rtl"] .hero-floating-card.card-2 {
        right: 5% !important;
        left: auto !important;
    }
}

@media (max-width: 576px) {
    html[dir="rtl"] .hero-floating-card.card-1 {
        left: 2% !important;
        right: auto !important;
    }
    html[dir="rtl"] .hero-floating-card.card-2 {
        right: 2% !important;
        left: auto !important;
    }
}

/* ── Shop / Checkout RTL ─────────────────────────────────────────── */
html[dir="rtl"] .filter-check .count {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .cart-drawer-item {
    flex-direction: row-reverse;
}

html[dir="rtl"] .slide-overlay {
    left: auto;
    right: 2rem;
}

html[dir="rtl"] .slideshow-dots {
    right: auto;
    left: 2rem;
}

html[dir="rtl"] .checkout-card-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .order-summary .summary-line {
    flex-direction: row-reverse;
}

/* Admin/Dashboard Table RTL */
html[dir="rtl"] .admin-table {
    text-align: right;
}

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