/*
** modal-style.css
** Sistema base de modales: ocultar/mostrar, offcanvas, overlay, inner panel.
** Usado por: .cart-modal, .filtering-modal
*/

/* ── Base: oculto por defecto ────────────────────────────────────────────── */

.cart-modal,
.filtering-modal {
    display: none;
    opacity: 1;
    justify-content: flex-end;
    padding: 0;
    transition: background-color 0.3s ease-in, left 0s 0.3s, right 0s 0.3s;
}

.cart-modal.cover-modal,
.filtering-modal.cover-modal {
    background: rgba(0, 0, 0, 0);
}

.cart-modal.active,
.filtering-modal.active {
    background: rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease-out;
}

/* ── Inner panel ─────────────────────────────────────────────────────────── */

.cart-modal-inner,
.filtering-modal-inner {
    background: white;
    overflow: auto;
}

/* ── Modo side: offcanvas ────────────────────────────────────────────────── */

.side.cart-modal,
.side.filtering-modal {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -99999rem;
    right: 99999rem;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99;
    transition: opacity 0.25s ease-in, left 0s 0.25s, right 0s 0.25s;
}

.side.cart-modal.show-modal,
.side.filtering-modal.show-modal {
    display: flex;
}

.side.cart-modal.active,
.side.filtering-modal.active {
    left: 0;
    right: 0;
    opacity: 1;
    justify-content: flex-end;
    padding: 0;
    z-index: 999;
    transition: opacity 0.25s ease-out;
}

/* ── Modo side: inner panel slide-in ─────────────────────────────────────── */

.side .cart-modal-inner,
.side .filtering-modal-inner {
    width: 31rem;
    padding: 0;
    opacity: 0;
    box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
    transform: translateX(20rem);
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

.side.cart-modal.active .cart-modal-inner,
.side.filtering-modal.active .filtering-modal-inner {
    opacity: 1;
    transform: translateX(0);
    transition-timing-function: ease-out;
}

/* ── Side: section-inner ─────────────────────────────────────────────────── */

.side .section-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: calc(100% - 2rem);
    margin: 0 auto;
}

/* ── Botón cerrar ────────────────────────────────────────────────────────── */

button.close-nav-toggle {
    font-size: 1.8rem;
    padding: 4rem 0;
}

button.close-nav-toggle svg {
    position: absolute;
    right: 0;
}

button.close-nav-toggle .toggle-text {
    margin-right: 0;
}

/* v2 */