/* ============================================================
   Mochello — RTL / Arabic stylesheet
   ------------------------------------------------------------
   Loaded only on /ar/. Mirrors every direction-sensitive rule
   found in style.css, swaps the Latin type stack for Arabic,
   and reverses directional motion (marquees, hover nudge).
   Scope: html[dir="rtl"] so it also covers WooCommerce blocks.
   ============================================================ */

/* ── 1. Typography ───────────────────────────────────────── */

html[dir="rtl"] {
    --font-display: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Tajawal', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[dir="rtl"] body {
    line-height: 1.85;
    letter-spacing: 0;
}

/* Arabic glyphs need a touch more room at display sizes. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    line-height: 1.45;
}

html[dir="rtl"] h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
html[dir="rtl"] h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }

/* Latin brand name / digits should never be broken up. */
html[dir="rtl"] .mc-logo,
html[dir="rtl"] .mc-nav-list a,
html[dir="rtl"] .mc-lang-switch {
    font-family: var(--font-display);
}

html[dir="rtl"] .mc-price,
html[dir="rtl"] .woocommerce-Price-amount,
html[dir="rtl"] .mc-cart-count,
html[dir="rtl"] .mc-reviews-hist-count {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ── 2. Header / navigation ──────────────────────────────── */

html[dir="rtl"] .mc-header-inner {
    direction: rtl;
}

html[dir="rtl"] .mc-nav-list {
    padding-inline-start: 0;
}

/* The active-link underline spans the link; nothing to mirror. */

/* ── 4. Product grid (float-based) ───────────────────────── */

html[dir="rtl"] .woocommerce ul.products li.product {
    float: right !important;
    margin: 0 0 var(--space-8) var(--space-8) !important;
}

html[dir="rtl"] .woocommerce ul.products li.product:nth-child(3n) {
    margin-left: 0 !important;
    margin-right: var(--space-8) !important;
}

html[dir="rtl"] .woocommerce ul.products li.product:nth-child(3n + 1) {
    clear: right;
}

html[dir="rtl"] .woocommerce ul.products li.first,
html[dir="rtl"] .woocommerce ul.products li.last {
    clear: none;
    float: right;
    margin-left: var(--space-8) !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .woocommerce ul.products li.first {
    clear: right;
}

/* Sale / discount / hot badges */
html[dir="rtl"] .woocommerce span.onsale,
html[dir="rtl"] .mc-discount-badge {
    left: auto;
    right: 14px;
}

html[dir="rtl"] .mc-hot-badge {
    right: auto;
    left: 14px;
}

/* Cart counter badge sits on the opposite corner */
html[dir="rtl"] .mc-cart-count {
    right: auto;
    left: 2px;
}

/* ── 5. Notices ──────────────────────────────────────────── */

html[dir="rtl"] .woocommerce-message,
html[dir="rtl"] .woocommerce-info,
html[dir="rtl"] .woocommerce-error {
    border-left: 0;
    padding-left: var(--space-4);
    padding-right: var(--space-6);
}

html[dir="rtl"] .woocommerce-message { border-right: 4px solid var(--success); }
html[dir="rtl"] .woocommerce-info    { border-right: 4px solid var(--accent); }
html[dir="rtl"] .woocommerce-error   { border-right: 4px solid var(--error); }

/* ── 6. Tables ───────────────────────────────────────────── */

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

html[dir="rtl"] .woocommerce-checkout .woocommerce-checkout-review-order-table .product-total {
    text-align: left;
}

html[dir="rtl"] .mc-product-description td { text-align: right; }
html[dir="rtl"] .mc-attributes-table td    { text-align: right; }
html[dir="rtl"] .mc-product-buybox .variations th { text-align: right; }

/* ── 7. Sorting dropdown ─────────────────────────────────── */

html[dir="rtl"] .mc-ordering::after {
    right: auto;
    left: 14px;
    border-right: 0;
    border-left: 2px solid var(--text-secondary);
    transform: translateY(-50%) rotate(-45deg);
}

html[dir="rtl"] .mc-ordering select,
html[dir="rtl"] .woocommerce-ordering select,
html[dir="rtl"] form.woocommerce-ordering select.orderby {
    padding-left: 38px;
    padding-right: 16px;
    text-align: right;
}

/* ── 8. My account ───────────────────────────────────────── */

html[dir="rtl"] .mc-myaccount-status {
    right: auto;
    left: 8px;
}

html[dir="rtl"] .mc-myaccount-nav-item.is-active::before {
    left: auto;
    right: -3px;
}

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

html[dir="rtl"] .mc-myaccount-content form label .required {
    margin-left: 0 !important;
    margin-right: 2px !important;
}

html[dir="rtl"] .mc-myaccount-content form .password-input input {
    padding-right: 16px !important;
    padding-left: 48px !important;
}

html[dir="rtl"] .mc-myaccount-content form .show-password-input {
    right: auto !important;
    left: 8px !important;
}

html[dir="rtl"] .mc-myaccount-content form .form-row-first {
    margin-right: 0;
    margin-left: 16px;
}

html[dir="rtl"] .mc-myaccount-content form .form-row-last {
    margin-right: 16px;
    margin-left: 0;
}

html[dir="rtl"] .mc-myaccount-content .woocommerce-MyAccount-orders.subscriptions {
    border-left: 0 !important;
    border-right: 4px solid var(--accent) !important;
}

/* ── 9. Single product ───────────────────────────────────── */

html[dir="rtl"] .mc-single-price .mc-price-tax {
    margin-left: 0;
    margin-right: auto;
}

/* Quantity stepper: keep the numeric field readable LTR */
html[dir="rtl"] .mc-single-add-to-cart .quantity input.qty,
html[dir="rtl"] .mc-product-buybox .quantity input.qty {
    direction: ltr;
    text-align: center;
}

html[dir="rtl"] .mc-highlight-card { text-align: right; }
html[dir="rtl"] .mc-testimonial-card { text-align: right; }

html[dir="rtl"] .mc-product-details .mc-section-heading {
    text-align: right;
}

html[dir="rtl"] .mc-product-details .mc-section-heading::after {
    margin-left: auto;
    margin-right: 0;
}

html[dir="rtl"] .mc-about-mission-centered .mc-about-mission-text { text-align: right; }
html[dir="rtl"] .mc-about-mission-stat { text-align: right; }

/* Description lists: bullets move to the right edge */
html[dir="rtl"] .mc-product-description ul,
html[dir="rtl"] .mc-product-description ol {
    padding-left: 0;
    padding-right: 0;
}

html[dir="rtl"] .mc-product-description li {
    padding-left: 0;
    padding-right: var(--space-8);
    position: relative;
}

html[dir="rtl"] .mc-product-description ol li {
    padding-left: 0;
    padding-right: var(--space-10);
}

html[dir="rtl"] .mc-product-description ul li::before,
html[dir="rtl"] .mc-product-description ol li::before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .mc-product-description blockquote {
    border-left: 0;
    border-right: 4px solid var(--accent);
    padding-left: var(--space-4);
    padding-right: var(--space-6);
}

html[dir="rtl"] .mc-product-trust li:hover {
    transform: translateX(-4px);
}

/* Review histogram numbers align away from the text */
html[dir="rtl"] .mc-reviews-hist-count { text-align: left; }

html[dir="rtl"] .mc-review-verified::before {
    margin-right: 0;
    margin-left: 4px;
}

/* Gallery chrome */
html[dir="rtl"] .mc-video-badge {
    left: auto;
    right: 12px;
}

html[dir="rtl"] .mc-gallery-zoom {
    right: auto;
    left: 12px;
}

html[dir="rtl"] .mc-lightbox-close {
    right: auto;
    left: 20px;
}

/* Colour swatch tooltip stays centred */
html[dir="rtl"] .mc-color-swatch-label {
    left: 50%;
    transform: translateX(50%);
}

/* ── 10. Policy / legal body ─────────────────────────────── */

html[dir="rtl"] .mc-policy-body .mc-article-body ul,
html[dir="rtl"] .mc-policy-body .mc-article-body ol,
html[dir="rtl"] .mc-legal-body ul,
html[dir="rtl"] .mc-legal-body ol {
    padding-left: 0;
    padding-right: var(--space-6);
}

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

/* ── 11. Contact / WhatsApp ──────────────────────────────── */

html[dir="rtl"] .mc-contact-select {
    padding-right: 16px !important;
    padding-left: 44px !important;
}

html[dir="rtl"] .mc-whatsapp-fab {
    right: auto;
    left: 22px;
}

html[dir="rtl"] .mc-toast-container {
    right: auto;
    left: 24px;
}

/* ── 12. WooCommerce blocks (cart / checkout) ────────────── */

html[dir="rtl"] .wc-block-checkout select.wc-block-components-select__select {
    padding-right: 1rem;
    padding-left: 2.5rem;
    text-align: right;
}

html[dir="rtl"] .wc-block-components-quantity-selector input[type="number"] {
    direction: ltr;
    text-align: center;
}

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

html[dir="rtl"] .wc-block-cart-items__header,
html[dir="rtl"] .wc-block-components-totals-item {
    text-align: right;
}

/* ── 13. Motion ──────────────────────────────────────────── */

/* Testimonial marquee: scroll the other way so it reads right-to-left. */
@keyframes mc-scroll-testimonials-rtl {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

html[dir="rtl"] .mc-testimonial-track,
html[dir="rtl"] .mc-testimonials-track,
html[dir="rtl"] [class*="testimonial"] [class*="track"] {
    animation-name: mc-scroll-testimonials-rtl;
}

@keyframes mc-fadeSlideIn-rtl {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

html[dir="rtl"] .mc-fade-slide-in {
    animation-name: mc-fadeSlideIn-rtl;
}

/* Legacy order-reversal utility is meaningless in RTL. */
html[dir="rtl"] .mc-order-reverse { direction: rtl; }
html[dir="rtl"] .mc-order-reverse > * { direction: rtl; }

/* ── 14. Generic form + input alignment ──────────────────── */

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] textarea {
    text-align: right;
}

html[dir="rtl"] input[type="email"]::placeholder,
html[dir="rtl"] input[type="text"]::placeholder,
html[dir="rtl"] textarea::placeholder {
    text-align: right;
}

html[dir="rtl"] .mc-newsletter-form,
html[dir="rtl"] .mc-subscribe-form {
    flex-direction: row-reverse;
}

/* ── 15. Mobile ──────────────────────────────────────────── */

@media (max-width: 768px) {
    html[dir="rtl"] .woocommerce ul.products li.product {
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }

    html[dir="rtl"] .mc-nav-list li.current-menu-item > a {
        border-left: 0;
        border-right: 3px solid var(--accent);
        padding-left: 0;
        padding-right: var(--space-3);
    }
}

/* ── 16. Footer ──────────────────────────────────────────── */

html[dir="rtl"] .mc-footer-grid,
html[dir="rtl"] .mc-footer-cols,
html[dir="rtl"] .footer-widgets {
    direction: rtl;
}

html[dir="rtl"] .mc-footer-col,
html[dir="rtl"] .mc-footer-bottom {
    text-align: right;
}