/*
 * Zino RTL Layout
 * ---------------
 * Default: html[dir=rtl] — all Persian text.
 *
 * Use direction:ltr ONLY on structural rows (.layout-bar, .layout-cluster,
 * .header-main-flex) so items sit at predictable physical left/right.
 * That LTR is for POSITION, not for reading Persian — put direction:rtl back
 * on text inside those rows when needed (e.g. .header-cart-price).
 *
 * .dir-ltr — rare: isolated numbers/codes only (phone, SKU), not whole sentences.
 */

:root {
    --layout-gap: 24px;
    --layout-gap-sm: 16px;
    --layout-gap-xs: 10px;
}

/* ── Document baseline ── */
html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] input:not(.dir-ltr):not(.direction-ltr),
html[dir="rtl"] textarea:not(.dir-ltr):not(.direction-ltr),
html[dir="rtl"] select:not(.dir-ltr):not(.direction-ltr),
html[dir="rtl"] .form-control:not(.dir-ltr):not(.direction-ltr) {
    direction: rtl;
    text-align: right;
}

/* ── Direction utilities ── */
.dir-ltr,
.direction-ltr {
    direction: ltr;
    text-align: left;
}

.dir-rtl,
.direction-rtl {
    direction: rtl;
    text-align: right;
}

.dir-ltr input,
.dir-ltr textarea,
.dir-ltr select,
.direction-ltr input,
.direction-ltr textarea,
.direction-ltr select {
    direction: ltr;
    text-align: left;
}

/* ── 3-column toolbar: physical left | center | right ── */
.layout-toolbar-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 632px) minmax(0, 1fr);
    align-items: center;
    gap: var(--layout-gap);
    direction: ltr;
}

.layout-toolbar-3 > .layout-slot-left {
    grid-column: 1;
    justify-self: start;
}

.layout-toolbar-3 > .layout-slot-center {
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
}

.layout-toolbar-3 > .layout-slot-right {
    grid-column: 3;
    justify-self: end;
}

/* ── Two-sided bar (topbar, nav row, footer bars) ── */
.layout-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--layout-gap-sm);
    direction: ltr;
}

.layout-bar-start {
    display: flex;
    align-items: center;
    gap: var(--layout-gap-sm);
    flex-wrap: wrap;
}

.layout-bar-end {
    flex-shrink: 0;
}

/* Do NOT use layout-bar-end on inline text — it sets display:flex and breaks RTL sentence order */
.layout-bar-end:not(span) {
    display: flex;
    align-items: center;
    gap: var(--layout-gap-sm);
}

/* ── Item clusters ── */
/* Physical LTR cluster (actions: user → heart → cart) */
.layout-cluster {
    display: inline-flex;
    align-items: center;
    gap: var(--layout-gap-xs);
    direction: ltr;
}

/* Horizontal menu list (Persian item order). Prefer .zino-menu-list for styled nav. */
.layout-menu-list,
.zino-menu-list {
    display: flex;
    align-items: center;
    gap: var(--layout-gap);
    flex-wrap: wrap;
    direction: rtl;
}

.layout-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* @deprecated alias — use .layout-menu-list */
.layout-cluster-rtl {
    display: flex;
    align-items: center;
    gap: var(--layout-gap);
    flex-wrap: wrap;
    direction: rtl;
}

.layout-cluster-rtl.layout-cluster-end,
.layout-menu-list.layout-bar-end {
    justify-content: flex-end;
    flex: 1;
}

/* Search: prefer .zino-search-field in zino-components.css */
.layout-search-field {
    position: relative;
    width: 100%;
}

.layout-search-field .search-input,
.layout-search-field .form-control {
    direction: rtl;
    text-align: right;
    padding: 12px 16px 12px 48px;
}

.layout-search-field .search-btn {
    position: absolute;
    top: 50%;
    left: 12px;
    right: auto;
    transform: translateY(-50%);
}

/* ── Mobile: collapse toolbar to logo-right / actions-left ── */
@media (max-width: 992px) {
    .layout-toolbar-3 {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .layout-toolbar-3 > .layout-slot-left,
    .layout-toolbar-3 > .layout-slot-center,
    .layout-toolbar-3 > .layout-slot-right {
        grid-column: auto;
        justify-self: auto;
        width: auto;
    }

    .layout-toolbar-3 > .layout-slot-left {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
}