/**
 * Marino Flowers — Arabic Typography System v1.6.0
 * Arabic font: Amiri
 * Translation engine: TranslatePress
 *
 * This plugin changes Arabic typography and Arabic text direction/alignment only.
 * It does not reorder columns, grids, carousels, menus, or the overall page layout.
 */

:root {
    --marino-arabic-font: "Amiri", "Noto Naskh Arabic", serif;
}

/* JS marks the exact elements/runs that contain Arabic. */
body.translatepress-ar .marino-arabic-font,
body[class*="translatepress-ar_"] .marino-arabic-font,
html[lang^="ar"] .marino-arabic-font,
.marino-arabic-typography-active .marino-arabic-font {
    font-family: var(--marino-arabic-font) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-rendering: optimizeLegibility;
}

/* Preserve size/weight/colour supplied by Elementor/WooCommerce. */
span.marino-arabic-font {
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-decoration: inherit;
}

/*
 * Hard fallbacks for WooCommerce product-title implementations.
 * Product titles are translated on the Arabic catalog, and some widgets put
 * font-family on nested anchors/spans with equal or stronger specificity.
 */
body.translatepress-ar .woocommerce-loop-product__title,
body.translatepress-ar .woocommerce-loop-product__title *,
body.translatepress-ar .wc-block-grid__product-title,
body.translatepress-ar .wc-block-grid__product-title *,
body.translatepress-ar .wc-block-components-product-name,
body.translatepress-ar .wc-block-components-product-name *,
body.translatepress-ar .product-title,
body.translatepress-ar .product-title *,
body.translatepress-ar .product-name,
body.translatepress-ar .product-name *,
body.translatepress-ar div.product .product_title,
body.translatepress-ar div.product .product_title *,
body[class*="translatepress-ar_"] .woocommerce-loop-product__title,
body[class*="translatepress-ar_"] .woocommerce-loop-product__title *,
body[class*="translatepress-ar_"] .wc-block-grid__product-title,
body[class*="translatepress-ar_"] .wc-block-grid__product-title *,
body[class*="translatepress-ar_"] .wc-block-components-product-name,
body[class*="translatepress-ar_"] .wc-block-components-product-name *,
body[class*="translatepress-ar_"] .product-title,
body[class*="translatepress-ar_"] .product-title *,
body[class*="translatepress-ar_"] .product-name,
body[class*="translatepress-ar_"] .product-name *,
body[class*="translatepress-ar_"] div.product .product_title,
body[class*="translatepress-ar_"] div.product .product_title *,
html[lang^="ar"] .woocommerce-loop-product__title,
html[lang^="ar"] .woocommerce-loop-product__title *,
html[lang^="ar"] .wc-block-grid__product-title,
html[lang^="ar"] .wc-block-grid__product-title *,
html[lang^="ar"] .wc-block-components-product-name,
html[lang^="ar"] .wc-block-components-product-name *,
html[lang^="ar"] .product-title,
html[lang^="ar"] .product-title *,
html[lang^="ar"] .product-name,
html[lang^="ar"] .product-name *,
html[lang^="ar"] div.product .product_title,
html[lang^="ar"] div.product .product_title * {
    font-family: var(--marino-arabic-font) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Form controls cannot contain wrapper spans. */
input.marino-arabic-font,
textarea.marino-arabic-font,
select.marino-arabic-font,
option.marino-arabic-font,
button.marino-arabic-font {
    font-family: var(--marino-arabic-font) !important;
    letter-spacing: 0 !important;
}

input.marino-arabic-font::placeholder,
textarea.marino-arabic-font::placeholder {
    font-family: var(--marino-arabic-font) !important;
    letter-spacing: 0 !important;
}

/* Never alter WordPress admin UI or TranslatePress's switcher. */
#wpadminbar .marino-arabic-font,
#wpadminbar.marino-arabic-font,
.trp-language-switcher .marino-arabic-font,
.trp-language-switcher.marino-arabic-font {
    font-family: inherit !important;
}


/* -----------------------------------------------------------
 * Arabic text direction / alignment
 * -----------------------------------------------------------
 * TranslatePress can swap the text while an Elementor/widget rule keeps
 * text-align:left. These rules flip Arabic text itself to RTL/right while
 * preserving deliberately centered content. Layout/flex/grid order is untouched.
 */
body.translatepress-ar .marino-arabic-rtl,
body[class*="translatepress-ar_"] .marino-arabic-rtl,
html[lang^="ar"] .marino-arabic-rtl,
.marino-arabic-typography-active .marino-arabic-rtl {
    direction: rtl !important;
    unicode-bidi: plaintext !important;
}

/* Centered Elementor/site content remains centered. */
body.translatepress-ar .elementor-align-center .marino-arabic-rtl,
body.translatepress-ar .has-text-align-center.marino-arabic-rtl,
body.translatepress-ar .text-center.marino-arabic-rtl,
body[class*="translatepress-ar_"] .elementor-align-center .marino-arabic-rtl,
html[lang^="ar"] .elementor-align-center .marino-arabic-rtl {
    text-align: center !important;
}

/* Arabic form fields should type from the right. */
body.translatepress-ar input.marino-arabic-font,
body.translatepress-ar textarea.marino-arabic-font,
body.translatepress-ar select.marino-arabic-font,
body[class*="translatepress-ar_"] input.marino-arabic-font,
body[class*="translatepress-ar_"] textarea.marino-arabic-font,
body[class*="translatepress-ar_"] select.marino-arabic-font,
html[lang^="ar"] input.marino-arabic-font,
html[lang^="ar"] textarea.marino-arabic-font,
html[lang^="ar"] select.marino-arabic-font {
    direction: rtl !important;
    text-align: right !important;
}

/* -----------------------------------------------------------
 * Marino custom homepage hero — Arabic mirror
 * -----------------------------------------------------------
 * The homepage hero is custom HTML/CSS (.mf-main-hero), not the
 * Elementor Slides widget. On English desktop/tablet the copy is
 * intentionally pinned to the right using margin-left:auto.
 * Arabic mirrors the exact block to the left while keeping the
 * contents centered inside that block.
 */
@media (min-width: 850px) {
    body.translatepress-ar .mf-hero-section .mf-main-hero__copy,
    body[class*="translatepress-ar_"] .mf-hero-section .mf-main-hero__copy,
    html[lang^="ar"] .mf-hero-section .mf-main-hero__copy {
        width: min(520px, 43%) !important;
        margin-left: 2% !important;
        margin-right: auto !important;
        text-align: center !important;
        direction: rtl !important;
    }

    /* Mirror the English reading overlay so the Arabic copy stays legible
       on the left without washing out the product photography on the right. */
    body.translatepress-ar .mf-hero-section::before,
    body[class*="translatepress-ar_"] .mf-hero-section::before,
    html[lang^="ar"] .mf-hero-section::before {
        background: linear-gradient(
            90deg,
            rgba(247, 244, 239, 0.55) 0%,
            rgba(247, 244, 239, 0.30) 30%,
            rgba(247, 244, 239, 0.08) 45%,
            rgba(247, 244, 239, 0) 55%,
            rgba(247, 244, 239, 0) 100%
        ) !important;
    }
}

@media (min-width: 550px) and (max-width: 849px) {
    body.translatepress-ar .mf-hero-section .mf-main-hero__copy,
    body[class*="translatepress-ar_"] .mf-hero-section .mf-main-hero__copy,
    html[lang^="ar"] .mf-hero-section .mf-main-hero__copy {
        width: 47% !important;
        margin-left: 1% !important;
        margin-right: auto !important;
        text-align: center !important;
        direction: rtl !important;
    }

    body.translatepress-ar .mf-hero-section::before,
    body[class*="translatepress-ar_"] .mf-hero-section::before,
    html[lang^="ar"] .mf-hero-section::before {
        background: linear-gradient(
            90deg,
            rgba(247, 244, 239, 0.82) 0%,
            rgba(247, 244, 239, 0.52) 28%,
            rgba(247, 244, 239, 0.12) 48%,
            rgba(247, 244, 239, 0) 60%,
            rgba(247, 244, 239, 0) 100%
        ) !important;
    }
}

/* Mobile keeps the established centered layout. Do not mirror the block. */
@media (max-width: 549px) {
    body.translatepress-ar .mf-hero-section .mf-main-hero__copy,
    body[class*="translatepress-ar_"] .mf-hero-section .mf-main-hero__copy,
    html[lang^="ar"] .mf-hero-section .mf-main-hero__copy {
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        direction: rtl !important;
    }
}

/* Keep all visible hero copy centered inside the mirrored block. */
body.translatepress-ar .mf-main-hero__eyebrow,
body.translatepress-ar .mf-main-hero__title,
body.translatepress-ar .mf-main-hero__text,
body.translatepress-ar .mf-main-hero__button,
body[class*="translatepress-ar_"] .mf-main-hero__eyebrow,
body[class*="translatepress-ar_"] .mf-main-hero__title,
body[class*="translatepress-ar_"] .mf-main-hero__text,
body[class*="translatepress-ar_"] .mf-main-hero__button,
html[lang^="ar"] .mf-main-hero__eyebrow,
html[lang^="ar"] .mf-main-hero__title,
html[lang^="ar"] .mf-main-hero__text,
html[lang^="ar"] .mf-main-hero__button {
    text-align: center !important;
}