/**
 * SynckShop - Mobile Bottom Sheets
 * Final visual layer for mobile modals, drawers and sheet-like panels.
 */

:root {
    --sheet-backdrop: rgba(15, 23, 42, 0.52);
    --sheet-backdrop-blur: 6px;
    --sheet-bg: #fff;
    --sheet-border: #e5e7eb;
    --sheet-radius: 20px;
    --sheet-handle: #d1d5db;
    --sheet-padding-x: 1rem;
    --sheet-header-y: 0.8rem;
    --sheet-body-y: 1rem;
    --sheet-footer-y: 0.85rem;
    --sheet-action-height: 38px;
    --sheet-action-radius: 10px;
    --sheet-action-gap: 0.375rem;
    --sheet-action-padding-x: 0.5rem;
    --sheet-action-font-size: 0.72rem;
    --sheet-close-size: 36px;
    --sheet-field-height: 38px;
    --sheet-field-radius: 9px;
    --sheet-field-font-size: 0.84rem;
    --sheet-label-font-size: 0.76rem;
    --sheet-field-padding-y: 0.55rem;
    --sheet-field-padding-x: 0.75rem;
    --sheet-field-gap: 0.55rem;
    --sheet-textarea-height: 82px;
    --sheet-z-index: 10020;
    --sheet-shadow: 0 -18px 48px rgba(15, 23, 42, 0.22);
}

@media (max-width: 767px) {
    .modal,
    .inquiry-modal,
    .installments-modal,
    .voice-modal,
    .pc-builder__modal,
    .pc-builder__filters-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        z-index: var(--sheet-z-index) !important;
    }

    .modal__backdrop,
    .modal__overlay,
    .inquiry-modal__backdrop,
    .installments-modal__backdrop,
    .voice-modal__backdrop,
    .shop-filters__overlay,
    .account-menu__backdrop,
    .cart-offcanvas__backdrop,
    .sec__modal-backdrop,
    .ea__modal-backdrop,
    .pc-builder__filters-overlay,
    .pc-builder__modal {
        background: var(--sheet-backdrop) !important;
        backdrop-filter: blur(var(--sheet-backdrop-blur)) !important;
        -webkit-backdrop-filter: blur(var(--sheet-backdrop-blur)) !important;
    }

    .modal__backdrop,
    .modal__overlay,
    .inquiry-modal__backdrop,
    .installments-modal__backdrop,
    .voice-modal__backdrop,
    .sec__modal-backdrop,
    .ea__modal-backdrop {
        z-index: 0 !important;
    }

    .modal__container,
    .modal__box,
    .inquiry-modal__content,
    .installments-modal__sheet,
    .voice-modal__content,
    .account-menu__content,
    .cart-offcanvas__panel,
    .checkout__sidebar,
    .shop-filters,
    .sec__modal-box,
    .ea__modal-box,
    .pc-builder__modal-content,
    .pc-builder__filters-sidebar {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: min(88dvh, calc(100dvh - 12px)) !important;
        margin: 0 !important;
        background: var(--sheet-bg) !important;
        border: 0 !important;
        border-radius: var(--sheet-radius) var(--sheet-radius) 0 0 !important;
        box-shadow: var(--sheet-shadow) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        z-index: 1 !important;
    }

    .modal__container,
    .modal__box,
    .inquiry-modal__content,
    .installments-modal__sheet,
    .voice-modal__content,
    .sec__modal-box,
    .ea__modal-box,
    .pc-builder__modal-content {
        align-self: flex-end !important;
    }

    .cart-offcanvas {
        z-index: var(--sheet-z-index) !important;
    }

    .cart-offcanvas:not(.cart-offcanvas--open) {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .cart-offcanvas:not(.cart-offcanvas--open) .cart-offcanvas__backdrop,
    .cart-offcanvas:not(.cart-offcanvas--open) .cart-offcanvas__panel,
    .cart-offcanvas:not(.cart-offcanvas--open) .cart-offcanvas__footer {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .cart-offcanvas__panel {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-height: min(88dvh, calc(100dvh - 12px)) !important;
        transform: translate3d(0, calc(100% + 24px), 0) !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .cart-offcanvas--open .cart-offcanvas__panel {
        transform: translate3d(0, 0, 0) !important;
    }

    .account-menu__content {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    .shop-page__sidebar {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: translate3d(0, calc(100% + 24px), 0) !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .shop-page__sidebar--open {
        transform: translate3d(0, 0, 0) !important;
    }

    .pc-builder__filters-sidebar {
        position: relative !important;
        transform: none !important;
    }

    .checkout__sidebar {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-height: min(86dvh, calc(100dvh - 24px)) !important;
        padding: 0 0 calc(env(safe-area-inset-bottom, 0px)) !important;
        transform: translate3d(0, calc(100% + 24px), 0) !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: calc(var(--sheet-z-index) + 2) !important;
    }

    .checkout__sidebar.is-open {
        transform: translate3d(0, 0, 0) !important;
    }

    .modal__container::before,
    .modal__box::before,
    .inquiry-modal__content::before,
    .voice-modal__content::before,
    .cart-offcanvas__panel::before,
    .checkout__sidebar::before,
    .sec__modal-box::before,
    .ea__modal-box::before,
    .pc-builder__modal-content::before,
    .pc-builder__filters-sidebar::before {
        content: '';
        width: 36px;
        height: 4px;
        margin: 10px auto 6px;
        border-radius: 999px;
        background: var(--sheet-handle);
        flex: 0 0 auto;
    }

    .installments-modal__handle,
    .account-menu__handle {
        width: 36px !important;
        height: 4px !important;
        margin: 10px auto 6px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        background: var(--sheet-handle) !important;
        flex: 0 0 auto !important;
    }

    .installments-modal__handle span {
        display: none !important;
    }

    .shop-filters__header::before {
        width: 36px !important;
        height: 4px !important;
        top: 9px !important;
        background: var(--sheet-handle) !important;
    }

    .modal__header,
    .inquiry-modal__header,
    .installments-modal__header,
    .cart-offcanvas__header,
    .shop-filters__header,
    .account-menu__header,
    .pc-builder__modal-header,
    .pc-builder__filters-header {
        min-height: 52px !important;
        padding: var(--sheet-header-y) var(--sheet-padding-x) !important;
        background: #fff !important;
        border-bottom: 1px solid var(--sheet-border) !important;
        color: var(--color-gray-900, #111827) !important;
        flex: 0 0 auto !important;
    }

    .modal__header h2,
    .inquiry-modal__header-info h3,
    .installments-modal__title,
    .cart-offcanvas__title,
    .shop-filters__header h3,
    .pc-builder__modal-header h2,
    .pc-builder__filters-header h3 {
        color: var(--color-gray-900, #111827) !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        line-height: 1.25 !important;
    }

    .inquiry-modal__header-info p,
    .cart-offcanvas__count {
        color: var(--color-gray-500, #6b7280) !important;
    }

    .modal__close,
    .inquiry-modal__close,
    .installments-modal__close,
    .voice-modal__close,
    .cart-offcanvas__close,
    .shop-filters__close,
    .account-menu__close,
    .mobile-menu__close,
    .pc-builder__modal-close,
    .pc-builder__filters-close {
        width: var(--sheet-close-size) !important;
        height: var(--sheet-close-size) !important;
        min-width: var(--sheet-close-size) !important;
        min-height: var(--sheet-close-size) !important;
        padding: 0 !important;
        border: 1px solid var(--sheet-border) !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        color: #475569 !important;
        box-shadow: none !important;
        transform: none !important;
        flex: 0 0 auto !important;
    }

    .modal__close:hover,
    .inquiry-modal__close:hover,
    .installments-modal__close:hover,
    .voice-modal__close:hover,
    .cart-offcanvas__close:hover,
    .shop-filters__close:hover,
    .account-menu__close:hover,
    .mobile-menu__close:hover,
    .pc-builder__modal-close:hover,
    .pc-builder__filters-close:hover {
        background: #eef2f7 !important;
        color: #111827 !important;
        transform: none !important;
    }

    .modal__body,
    .inquiry-modal__form,
    .installments-modal__plans,
    .cart-offcanvas__content,
    .shop-filters__body,
    .account-menu__nav,
    .checkout__sidebar-inner,
    .sec__modal-box > form,
    .ea__modal-box > form,
    .pc-builder__modal-body,
    .pc-builder__filters-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: var(--sheet-body-y) var(--sheet-padding-x) !important;
    }

    .modal__body .form__group,
    .modal__body .form-group,
    .inquiry-form__field,
    .pc-builder__form-group,
    .sec__field {
        gap: var(--sheet-field-gap) !important;
        margin-bottom: 0.65rem !important;
    }

    .modal__body .form__row,
    .modal__body .form-row {
        gap: var(--sheet-field-gap) !important;
        margin-bottom: 0 !important;
    }

    .modal__body label,
    .modal__body .form-label,
    .modal__body .form__group label,
    .modal__body .form-group label,
    .inquiry-form__label,
    .pc-builder__form-group label,
    .sec__field label,
    .form__check {
        font-size: var(--sheet-label-font-size) !important;
        line-height: 1.25 !important;
    }

    .modal__body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    .modal__body select,
    .modal__body textarea,
    .inquiry-modal__form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    .inquiry-modal__form select,
    .inquiry-modal__form textarea,
    .pc-builder__modal-body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    .pc-builder__modal-body select,
    .pc-builder__modal-body textarea,
    .sec__modal-box input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    .sec__modal-box select,
    .sec__modal-box textarea,
    .ea__modal-box input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    .ea__modal-box select,
    .ea__modal-box textarea {
        min-height: var(--sheet-field-height) !important;
        padding: var(--sheet-field-padding-y) var(--sheet-field-padding-x) !important;
        border-radius: var(--sheet-field-radius) !important;
        font-size: var(--sheet-field-font-size) !important;
        line-height: 1.3 !important;
    }

    .modal__body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    .modal__body select,
    .inquiry-modal__form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    .inquiry-modal__form select,
    .pc-builder__modal-body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    .pc-builder__modal-body select,
    .sec__modal-box input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    .sec__modal-box select,
    .ea__modal-box input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    .ea__modal-box select {
        height: var(--sheet-field-height) !important;
    }

    .modal__body textarea,
    .inquiry-modal__form textarea,
    .pc-builder__modal-body textarea,
    .sec__modal-box textarea,
    .ea__modal-box textarea {
        height: auto !important;
        min-height: var(--sheet-textarea-height) !important;
    }

    .modal__body input[type="checkbox"],
    .modal__body input[type="radio"],
    .inquiry-modal__form input[type="checkbox"],
    .inquiry-modal__form input[type="radio"] {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        padding: 0 !important;
    }

    .voice-modal__content {
        padding: 0 var(--sheet-padding-x) calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .voice-modal__state {
        padding: 0.5rem 0 0.75rem !important;
        gap: 0.75rem !important;
    }

    .voice-modal__icon {
        width: 72px !important;
        height: 72px !important;
        font-size: 1.8rem !important;
    }

    .voice-modal__actions {
        width: 100% !important;
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        grid-template-columns: none !important;
        gap: var(--sheet-action-gap) !important;
    }

    .modal__footer,
    .inquiry-modal__footer,
    .installments-modal__footer,
    .cart-offcanvas__footer,
    .pc-builder__modal-footer,
    .pc-builder__filters-footer {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        grid-template-columns: none !important;
        gap: var(--sheet-action-gap) !important;
        padding: var(--sheet-footer-y) var(--sheet-padding-x) calc(var(--sheet-footer-y) + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid var(--sheet-border) !important;
        background: #fff !important;
        box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.06) !important;
        flex: 0 0 auto !important;
    }

    .modal__footer .btn,
    .inquiry-modal__btn-cancel,
    .inquiry-modal__btn-submit,
    .voice-modal__btn,
    .cart-offcanvas__btn,
    .cart-offcanvas__empty-btn,
    .pc-builder__modal-footer .pc-builder__btn,
    .pc-builder__filters-footer .pc-builder__btn,
    .sec__modal-btns .btn,
    .ea__modal-btns .btn {
        width: 100% !important;
        height: var(--sheet-action-height) !important;
        min-height: var(--sheet-action-height) !important;
        min-width: 0 !important;
        padding: 0.68rem var(--sheet-action-padding-x) !important;
        border-radius: var(--sheet-action-radius) !important;
        justify-content: center !important;
        font-size: var(--sheet-action-font-size) !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .cart-offcanvas__actions,
    .sec__modal-btns,
    .ea__modal-btns {
        display: grid !important;
        gap: var(--sheet-action-gap) !important;
    }

    .cart-offcanvas__actions {
        grid-auto-flow: initial !important;
        grid-auto-columns: initial !important;
        grid-template-columns: var(--sheet-action-height) minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: center !important;
    }

    .cart-offcanvas__btn--clear {
        width: var(--sheet-action-height) !important;
        padding: 0 !important;
        gap: 0 !important;
        font-size: 0 !important;
    }

    .cart-offcanvas__btn--clear i {
        margin: 0 !important;
        font-size: 1rem !important;
    }

    .cart-offcanvas__btn--cart-page {
        grid-column: auto !important;
    }

    .cart-offcanvas__footer {
        grid-auto-flow: row !important;
        grid-template-columns: 1fr !important;
    }

    .modal__footer:has(> :nth-child(5)),
    .inquiry-modal__footer:has(> :nth-child(5)),
    .voice-modal__actions:has(> :nth-child(5)),
    .cart-offcanvas__actions:has(> :nth-child(5)),
    .pc-builder__modal-footer:has(> :nth-child(5)),
    .pc-builder__filters-footer:has(> :nth-child(5)),
    .sec__modal-btns:has(> :nth-child(5)),
    .ea__modal-btns:has(> :nth-child(5)) {
        --sheet-action-gap: 0.3rem;
        --sheet-action-height: 34px;
        --sheet-action-padding-x: 0;
    }

    .modal__footer:has(> :nth-child(5)) > :is(.btn, button, a),
    .inquiry-modal__footer:has(> :nth-child(5)) > :is(button, a),
    .voice-modal__actions:has(> :nth-child(5)) > :is(button, a),
    .cart-offcanvas__actions:has(> :nth-child(5)) > :is(button, a),
    .pc-builder__modal-footer:has(> :nth-child(5)) > :is(.pc-builder__btn, button, a),
    .pc-builder__filters-footer:has(> :nth-child(5)) > :is(.pc-builder__btn, button, a),
    .sec__modal-btns:has(> :nth-child(5)) > :is(.btn, button, a),
    .ea__modal-btns:has(> :nth-child(5)) > :is(.btn, button, a) {
        font-size: 0 !important;
        gap: 0 !important;
    }

    .modal__footer:has(> :nth-child(5)) > :is(.btn, button, a) i,
    .inquiry-modal__footer:has(> :nth-child(5)) > :is(button, a) i,
    .voice-modal__actions:has(> :nth-child(5)) > :is(button, a) i,
    .cart-offcanvas__actions:has(> :nth-child(5)) > :is(button, a) i,
    .pc-builder__modal-footer:has(> :nth-child(5)) > :is(.pc-builder__btn, button, a) i,
    .pc-builder__filters-footer:has(> :nth-child(5)) > :is(.pc-builder__btn, button, a) i,
    .sec__modal-btns:has(> :nth-child(5)) > :is(.btn, button, a) i,
    .ea__modal-btns:has(> :nth-child(5)) > :is(.btn, button, a) i {
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    .checkout__sidebar-inner {
        padding-top: 0 !important;
    }

    .checkout__sidebar-title {
        padding: 0 var(--sheet-padding-x) 0.75rem !important;
        margin: 0 !important;
    }

    .checkout__items,
    .checkout__summary-card {
        margin-right: var(--sheet-padding-x) !important;
        margin-left: var(--sheet-padding-x) !important;
    }

}

@media (max-width: 380px) {
    :root {
        --sheet-padding-x: 0.875rem;
        --sheet-radius: 18px;
        --sheet-action-height: 36px;
        --sheet-field-height: 36px;
        --sheet-textarea-height: 76px;
    }
}

/* ============================================
   TOASTS / NOTIFICATIONS - GLOBAL NORMALIZATION
   ============================================ */
body > .synck-toast,
body > .toast,
body > .wishlist-toast,
body > .compare-toast,
body > .notification,
body > .sec__toast,
body > .od__toast {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
    left: 50% !important;
    width: max-content;
    min-width: 0;
    max-width: min(360px, calc(100vw - 2rem));
    transform: translate3d(-50%, 0, 0) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    background: #111827 !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.26) !important;
    font-size: 0.84rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    text-align: left;
    z-index: 100050 !important;
    pointer-events: none;
    white-space: normal;
}

body > .synck-toast,
body > .wishlist-toast:not(.wishlist-toast--show) {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, 12px, 0) !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

body > .synck-toast.is-visible,
body > .wishlist-toast.wishlist-toast--show {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0) !important;
}

body > .synck-toast i,
body > .toast i,
body > .wishlist-toast i,
body > .compare-toast i,
body > .notification i,
body > .sec__toast i,
body > .od__toast i {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
    color: #93c5fd !important;
}

body > .synck-toast span,
body > .toast span,
body > .wishlist-toast span,
body > .compare-toast span,
body > .notification span,
body > .sec__toast span,
body > .od__toast span {
    min-width: 0;
}

body > .synck-toast--success i,
body > .toast--success i,
body > .wishlist-toast--success i,
body > .compare-toast--success i,
body > .notification--success i,
body > .sec__toast--ok i,
body > .od__toast--ok i {
    color: #22c55e !important;
}

body > .synck-toast--error i,
body > .toast--error i,
body > .wishlist-toast--error i,
body > .compare-toast--error i,
body > .notification--error i,
body > .sec__toast--err i,
body > .od__toast--err i {
    color: #f87171 !important;
}

body > .synck-toast--warning i,
body > .toast--warning i,
body > .compare-toast--warning i,
body > .notification--warning i {
    color: #f59e0b !important;
}

body > .synck-toast--info i,
body > .toast--info i,
body > .compare-toast--info i,
body > .notification--info i {
    color: #60a5fa !important;
}

@media (max-width: 768px) {
    body > .synck-toast,
    body > .toast,
    body > .wishlist-toast,
    body > .compare-toast,
    body > .notification,
    body > .sec__toast,
    body > .od__toast {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem) !important;
        max-width: calc(100vw - 2rem);
        padding: 0.72rem 0.95rem;
        font-size: 0.82rem !important;
    }

    body:has(.account) > .synck-toast,
    body:has(.account) > .toast,
    body:has(.account) > .wishlist-toast,
    body:has(.account) > .compare-toast,
    body:has(.account) > .notification,
    body:has(.account) > .sec__toast,
    body:has(.account) > .od__toast {
        bottom: calc(var(--mobile-nav-height, 76px) + env(safe-area-inset-bottom, 0px) + 1rem) !important;
    }

    body[data-page="producto"] > .synck-toast,
    body[data-page="producto"] > .toast,
    body[data-page="producto"] > .wishlist-toast,
    body[data-page="producto"] > .compare-toast,
    body[data-page="producto"] > .notification,
    body[data-page="producto"] > .sec__toast,
    body[data-page="producto"] > .od__toast {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 5.25rem) !important;
    }
}