/* ===== Layout helpers ===== */


/* Alert bar look + anchor for absolute close button */
.ann-item {
    position: relative;
    border: 0;
    border-radius: 0;
}

    /* Reserve room for the close button on the logical START side
       -> in RTL, START is the RIGHT side (your requirement) */
    .ann-item.alert-dismissible {
        padding-inline-start: 3rem; /* space for the X */
        padding-inline-end: 1rem;
    }

        /* Place and vertically center the close button on the START side */
        .ann-item.alert-dismissible > .ann-close-fix {
            position: absolute;
            /* vertical centering */
            inset-block-start: 50%;
            /* anchor to START (right in RTL, left in LTR) */
            inset-inline-start: .75rem;
            inset-inline-end: auto;
            /* cancel Bootstrap's default .alert-dismissible .btn-close */
            padding: 0;
            top: auto;
            right: auto;
            left: auto;
            line-height: 1;
            width: 1.25rem;
            height: 1.25rem; /* consistent hit area */
            display: grid;
            place-items: center;
        }

/* ---- Optional fallbacks for older browsers without logical props ---- */
[dir="ltr"] .ann-item.alert-dismissible {
    padding-left: 3rem;
    padding-right: 1rem;
}

[dir="rtl"] .ann-item.alert-dismissible {
    padding-right: 3rem;
    padding-left: 1rem;
}

[dir="ltr"] .ann-item.alert-dismissible > .ann-close-fix {
    left: .75rem;
    right: auto;
}

[dir="rtl"] .ann-item.alert-dismissible > .ann-close-fix {
    left: auto;
}

/* ── Close button: right side + vertically centered (RTL) ── */
.ann-item.alert-dismissible {
    padding-inline-start: 3rem;
    padding-inline-end: 1rem;
}

    .ann-item.alert-dismissible > .ann-close-fix {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* In RTL "right" is the start side — pin it there */
        right: 0.75rem;
        left: auto;
        /* Reset Bootstrap defaults */
        padding: 0;
        margin: 0;
        width: 1.25rem;
        height: 1.25rem;
        display: grid;
        place-items: center;
    }