@charset "utf-8";
/*
    Zivamode — RTL (Arabic) overrides
    Applied when <html dir="rtl"> is set by the language layer.
    Also swaps display fonts: Amiri (serif) for headings, Tajawal for UI.
*/

/* ---------------------------------------------------- typography */
[dir='rtl'] body {
    font-family: 'Tajawal', 'DM Sans', -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.8;
}

/* Arabic must never be letter-spaced (it breaks glyph joins) */
[dir='rtl'] body,
[dir='rtl'] body * {
    letter-spacing: normal;
}

[dir='rtl'] .heading-display,
[dir='rtl'] .heading-editorial,
[dir='rtl'] .logo,
[dir='rtl'] .footer-logo,
[dir='rtl'] .collection-name,
[dir='rtl'] .overlay-title,
[dir='rtl'] .testimonial-text,
[dir='rtl'] .contact-item-value,
[dir='rtl'] .form-title,
/* Gallery badge sits in the end corner of the card media box */
[dir='rtl'] .product-card__count {
    right: auto;
    left: 12px;
}

/* Sale flag sits in the start corner — mirrors with the layout */
[dir='rtl'] .product-card__sale-flag {
    left: auto;
    right: 12px;
}

[dir='rtl'] .product-card__title,
[dir='rtl'] .page-title,
[dir='rtl'] .product-info__title,
[dir='rtl'] .mobile-nav-links a,
[dir='rtl'] .empty-state__text,
[dir='rtl'] .error-hero__code {
    font-family: 'Amiri', 'Cormorant Garamond', serif;
    letter-spacing: normal;
}

[dir='rtl'] .heading-display {
    line-height: 1.35;
}

/* No synthetic italics in Arabic */
[dir='rtl'] em,
[dir='rtl'] .hero-title em,
[dir='rtl'] .signature-name,
[dir='rtl'] .testimonial-text {
    font-style: normal;
}

/* ------------------------------------------------------- hero mirror */
@media (min-width: 861px) {
    [dir='rtl'] .hero-content {
        padding-left: var(--space-md);
        padding-right: max(var(--space-md), calc((100vw - 1400px) / 2 + var(--space-md)));
    }

    [dir='rtl'] .hero-image {
        clip-path: polygon(85% 0, 0 0, 0 100%, 100% 100%);
    }

    [dir='rtl'] .hero-image-overlay {
        left: auto;
        right: var(--space-lg);
    }
}

@media (min-width: 861px) and (max-width: 1200px) {
    [dir='rtl'] .hero-content {
        padding-right: var(--space-lg);
        padding-left: var(--space-md);
    }
}

/* ------------------------------------------------- content padding mirror */
@media (min-width: 861px) {
    [dir='rtl'] .featured-content,
    [dir='rtl'] .story-content,
    [dir='rtl'] .contact-content {
        padding-right: 0;
        padding-left: var(--space-lg);
    }

    [dir='rtl'] .footer-brand {
        padding-right: 0;
        padding-left: var(--space-md);
    }
}

/* --------------------------------------------------------- micro details */
[dir='rtl'] .featured-badge {
    left: auto;
    right: var(--space-md);
}

[dir='rtl'] .btn-text::after {
    content: '\2190'; /* ← */
    margin-left: 0;
    margin-right: 0.5rem;
}

[dir='rtl'] .btn-text:hover::after {
    margin-right: 0.75rem;
    margin-left: 0;
}

[dir='rtl'] .craft-list li {
    padding-left: 0;
    padding-right: var(--space-md);
}

[dir='rtl'] .craft-list li::before {
    left: auto;
    right: 0;
}

[dir='rtl'] .testimonial-card::before {
    right: auto;
    left: var(--space-md);
}

[dir='rtl'] .product-card__title::after {
    transform-origin: right;
}

[dir='rtl'] .breadcrumbs__list li + li::before {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ---------------------------------------------------- mobile navigation */
[dir='rtl'] .mobile-nav {
    right: auto;
    left: -100%;
}

[dir='rtl'] .mobile-nav.active {
    left: 0;
    right: auto;
}

[dir='rtl'] .mobile-nav-close {
    right: auto;
    left: var(--space-md);
}

/* ------------------------------------------------------- floating action */
[dir='rtl'] .whatsapp-float {
    right: auto;
    left: 26px;
}

[dir='rtl'] .whatsapp-float__label {
    right: auto;
    left: 70px;
    transform: translateY(-50%) translateX(-8px);
}

[dir='rtl'] .whatsapp-float:hover .whatsapp-float__label {
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 576px) {
    [dir='rtl'] .whatsapp-float {
        left: 18px;
        right: auto;
    }
}