/* WhatsBot Landing Direction System v1.5.0
 * Explicit bidirectional layout for Starter + Stacklight.
 * Does not rely on Bootstrap's flex direction heuristics.
 */

html[dir="rtl"],
body.wb-landing-rtl {
    direction: rtl;
}

html[dir="ltr"],
body.wb-landing-ltr {
    direction: ltr;
}

body.wb-landing-rtl {
    text-align: right;
}

body.wb-landing-ltr {
    text-align: left;
}

/* --- Shared navbar semantics --- */
.wb-navbar-brand {
    margin: 0 !important;
}

.wb-navbar-actions {
    white-space: nowrap;
}

@media (min-width: 992px) {
    /* LTR: brand | centered navigation | actions */
    .wb-landing-ltr .wb-navbar-shell {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 28px;
        direction: ltr;
    }

    .wb-landing-ltr .wb-navbar-brand {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .wb-landing-ltr .wb-navbar-collapse {
        grid-column: 2;
        grid-row: 1;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 18px;
        min-width: 0;
        direction: ltr;
    }

    .wb-landing-ltr .wb-navbar-menu {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        margin-inline: auto !important;
        direction: ltr;
    }

    .wb-landing-ltr .wb-navbar-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        direction: ltr;
    }

    /* RTL: actions | centered navigation | brand */
    .wb-landing-rtl .wb-navbar-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 28px;
        direction: ltr; /* grid placement below is explicit */
    }

    .wb-landing-rtl .wb-navbar-brand {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        direction: rtl;
    }

    .wb-landing-rtl .wb-navbar-collapse {
        grid-column: 1;
        grid-row: 1;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 18px;
        min-width: 0;
        direction: ltr;
    }

    .wb-landing-rtl .wb-navbar-actions {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        direction: rtl;
    }

    .wb-landing-rtl .wb-navbar-menu {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        margin-inline: auto !important;
        direction: rtl;
    }

    /* Explicit hero placement. Do not depend on .row + direction behavior. */
    .wb-hero-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        direction: ltr; /* keep CSS Grid line numbering physical and explicit */
    }

    .wb-hero-row > .wb-hero-copy,
    .wb-hero-row > .wb-hero-visual {
        width: 100% !important;
        max-width: none !important;
        grid-row: 1;
    }

    .wb-landing-ltr .wb-hero-row > .wb-hero-copy {
        grid-column: 1;
        text-align: left !important;
    }

    .wb-landing-ltr .wb-hero-row > .wb-hero-visual {
        grid-column: 2;
    }

    .wb-landing-rtl .wb-hero-row > .wb-hero-copy {
        grid-column: 2;
        text-align: right !important;
        direction: rtl;
    }

    .wb-landing-rtl .wb-hero-row > .wb-hero-visual {
        grid-column: 1;
        direction: rtl;
    }

    .wb-landing-rtl .wb-hero-copy > p {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}

/* Hero controls and benefit rows follow the language direction. */
.wb-landing-rtl .wb-hero-actions,
.wb-landing-rtl .wb-hero-benefits {
    direction: rtl;
    justify-content: flex-start;
}

.wb-landing-ltr .wb-hero-actions,
.wb-landing-ltr .wb-hero-benefits {
    direction: ltr;
    justify-content: flex-start;
}

/* Arabic text and cards */
.wb-landing-rtl .st-card:not(.text-center),
.wb-landing-rtl .st-pricing-card:not(.text-center),
.wb-landing-rtl .st-testimonial:not(.text-center),
.wb-landing-rtl .st-changelog,
.wb-landing-rtl .st-changelog-card,
.wb-landing-rtl .glass-card:not(.text-center),
.wb-landing-rtl .feature-card:not(.text-center),
.wb-landing-rtl .pricing-card:not(.text-center),
.wb-landing-rtl .testimonial-card:not(.text-center) {
    text-align: right;
    direction: rtl;
}

/* Bootstrap 5 LTR utility compensation when the page is Arabic. */
.wb-landing-rtl .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
.wb-landing-rtl .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
.wb-landing-rtl .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
.wb-landing-rtl .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
.wb-landing-rtl .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
.wb-landing-rtl .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }

.wb-landing-rtl .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
    text-align: right;
    direction: rtl;
}

.wb-landing-rtl .dropdown-item {
    text-align: right;
    direction: rtl;
}

/* Starter changelog uses a physical left border in the original stylesheet. */
.wb-landing-rtl .st-changelog {
    border-left: 0 !important;
    border-right: 2px solid var(--slate-200);
    padding-left: 0 !important;
    padding-right: 32px;
}
.wb-landing-rtl .st-changelog::before {
    left: auto !important;
    right: -7px;
}

/* Stacklight animated WhatsApp mockup: keep the composition but localize its text flow. */
.wb-theme-stacklight.wb-landing-rtl .hero-phone,
.wb-theme-stacklight.wb-landing-rtl .hero-phone-body,
.wb-theme-stacklight.wb-landing-rtl .hero-phone-header,
.wb-theme-stacklight.wb-landing-rtl .hero-analytics-card,
.wb-theme-stacklight.wb-landing-rtl .hero-toast,
.wb-theme-stacklight.wb-landing-rtl .hero-bot-indicator {
    direction: rtl;
    text-align: right;
}

/* Mobile/tablet: native Bootstrap collapse remains intact; only language direction changes. */
@media (max-width: 991.98px) {
    .wb-landing-rtl .wb-navbar-shell {
        direction: rtl;
    }
    .wb-landing-rtl .wb-navbar-collapse,
    .wb-landing-rtl .wb-navbar-menu,
    .wb-landing-rtl .wb-navbar-actions {
        direction: rtl;
        text-align: right;
    }
    .wb-landing-rtl .wb-navbar-actions {
        justify-content: flex-start;
    }
    .wb-landing-rtl .wb-hero-copy {
        text-align: right !important;
        direction: rtl;
    }
    .wb-landing-rtl .wb-hero-copy > p {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}