/* ============================================================
   EcommerceWebsite / SystemStandardization / Drawers.css
   ONE SHARED DRAWER DESIGN - Site.Master + Public.Master
   Windows 11-inspired, solid floating panels (no backdrop blur).
   The original page content and business logic are untouched.
   ============================================================ */

html[data-standardization] {
    --wa-drawer-gap: 10px;
    --wa-drawer-radius: 22px;
    --wa-drawer-width: 480px;
    --wa-drawer-width-wide: 530px;
    --wa-drawer-width-compact: 390px;
    --wa-drawer-surface: var(--wa-surface, var(--theme-surface, var(--surface, #fff)));
    --wa-drawer-ink: var(--wa-text, var(--theme-text, var(--text, #172033)));
    --wa-drawer-line: var(--wa-border, var(--theme-border, var(--border, #cbd5e1)));
    --wa-drawer-accent: var(--wa-accent, var(--theme-accent, var(--primary, #1683ff)));
    --wa-drawer-muted: var(--wa-muted, var(--theme-muted, var(--text-soft, #64748b)));
    --wa-drawer-shadow: 0 22px 65px rgba(0, 0, 0, .27), 0 0 0 1px color-mix(in srgb, var(--wa-drawer-accent) 13%, transparent);
}

/* Master-level panels: public, authenticated and legacy aliases.
   Keep the existing IDs, event handlers, iframe URLs and contents. */
html[data-standardization] :is(
    .app-drawer, .app-info-drawer, .right-drawer,
    .vendor-info-drawer, .customer-info-drawer, .wa-drawer
) {
    box-sizing: border-box !important;
    position: fixed !important;
    top: var(--wa-drawer-gap) !important;
    bottom: var(--wa-drawer-gap) !important;
    height: calc(100vh - 2 * var(--wa-drawer-gap)) !important;
    height: calc(100dvh - 2 * var(--wa-drawer-gap)) !important;
    min-height: 0 !important;
    max-height: none !important;
    width: min(var(--wa-drawer-width), calc(100vw - 2 * var(--wa-drawer-gap))) !important;
    max-width: calc(100vw - 2 * var(--wa-drawer-gap)) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--wa-drawer-accent) 22%, var(--wa-drawer-line)) !important;
    border-radius: var(--wa-drawer-radius) !important;
    color: var(--wa-drawer-ink) !important;
    background: var(--wa-drawer-surface) !important;
    box-shadow: var(--wa-drawer-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    isolation: isolate;
    z-index: 88020 !important;
}
html[data-standardization] :is(.wa-drawer-wide, .cart-host-drawer, .public-cart-host-drawer) {
    --wa-drawer-width: var(--wa-drawer-width-wide);
}
html[data-standardization] .wa-drawer-compact {
    --wa-drawer-width: var(--wa-drawer-width-compact);
}

/* Right and left sides share one shape; neither touches the browser edge. */
html[data-standardization] :is(
    .wa-drawer-right, .app-drawer-right, .app-info-drawer-right,
    #RightDrawer, #CustomerDrawer, #VendorDrawer,
    .public-info-drawer, .public-cart-host-drawer, #ItemDrawer
):not(.wa-drawer-left):not(.app-info-drawer-left) {
    right: var(--wa-drawer-gap) !important;
    left: auto !important;
    border-radius: var(--wa-drawer-radius) !important;
}
html[data-standardization] :is(
    .wa-drawer-left, .app-info-drawer-left, #VendorInfoDrawer
) {
    left: var(--wa-drawer-gap) !important;
    right: auto !important;
    border-radius: var(--wa-drawer-radius) !important;
}

/* Header, body and fixed footer: one standard layout with independent scrolling. */
html[data-standardization] :is(
    .app-drawer, .app-info-drawer, .wa-drawer
) > :is(.drawer-head, .drawer-header, .app-drawer-header, .products-filter-head) {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    min-height: 66px !important;
    padding: 13px 17px !important;
    color: var(--wa-drawer-ink) !important;
    background: color-mix(in srgb, var(--wa-drawer-accent) 9%, var(--wa-drawer-surface)) !important;
    border-bottom: 1px solid var(--wa-drawer-line) !important;
    backdrop-filter: none !important;
}
html[data-standardization] :is(.app-drawer, .app-info-drawer, .wa-drawer) > :is(
    .drawer-body, .drawer-scroll, .products-filter-scroll
) {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--wa-drawer-accent) 38%, var(--wa-drawer-line)) transparent;
}
html[data-standardization] :is(.app-drawer, .app-info-drawer, .wa-drawer) > :is(
    .drawer-footer, .products-filter-actions
) {
    flex: 0 0 auto !important;
    border-top: 1px solid var(--wa-drawer-line) !important;
    background: var(--wa-drawer-surface) !important;
    padding: 13px 16px max(13px, env(safe-area-inset-bottom)) !important;
}
html[data-standardization] :is(.app-drawer, .app-info-drawer, .wa-drawer) > iframe.drawer-page-frame {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    border: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    background: var(--wa-bg, var(--bg, #f8fafc)) !important;
}
html[data-standardization] :is(.app-drawer, .app-info-drawer, .wa-drawer) .drawer-title {
    color: var(--wa-drawer-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
html[data-standardization] :is(.app-drawer, .app-info-drawer, .wa-drawer) :is(
    .drawer-x, .drawer-close, .products-filter-close, .app-drawer-close
) {
    flex: 0 0 auto;
    min-width: 38px;
    min-height: 38px;
    border: 1px solid var(--wa-drawer-line) !important;
    border-radius: 12px !important;
    color: var(--wa-drawer-ink) !important;
    background: var(--wa-surface-2, var(--surface-2, #f1f5f9)) !important;
    cursor: pointer;
}
html[data-standardization] :is(.app-drawer, .app-info-drawer, .wa-drawer) :is(
    .drawer-x, .drawer-close, .products-filter-close, .app-drawer-close
):hover {
    border-color: var(--wa-drawer-accent) !important;
    background: color-mix(in srgb, var(--wa-drawer-accent) 12%, var(--wa-drawer-surface)) !important;
}

/* Solid dim backdrop. No blur, glass or changes to the page below. */
html[data-standardization] :is(.app-drawer-overlay, .drawer-overlay, .products-item-drawer-overlay) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 88000 !important;
    background: rgba(8, 15, 27, .54) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}
/* The product item backdrop starts completely inert when its drawer is closed. */
html[data-standardization] #ItemDrawerOverlay:not(.is-open):not(.open):not(.active):not(.show):not([aria-hidden='false']) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
html[data-standardization] #ItemDrawerOverlay:is(.is-open, .open, .active, .show, [aria-hidden='false']) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
html[data-standardization] .app-drawer-overlay:not(.is-open):not(.open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
html[data-standardization] .app-drawer-overlay:is(.is-open, .open) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
html[data-standardization] :is(.app-drawer, .app-info-drawer, .right-drawer, .vendor-info-drawer, .customer-info-drawer) {
    transform: translateX(calc(100% + 35px)) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s ease !important;
}
html[data-standardization] :is(.app-drawer, .app-info-drawer, .right-drawer, .vendor-info-drawer, .customer-info-drawer).wa-drawer-left,
html[data-standardization] .app-info-drawer-left {
    transform: translateX(calc(-100% - 35px)) !important;
}
html[data-standardization] :is(.app-drawer, .app-info-drawer, .right-drawer, .vendor-info-drawer, .customer-info-drawer):is(.is-open, .open) {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Product filter has its own full-screen wrapper and backdrop.
   Only the panel is positioned/rounded here; existing Products.js owns visibility. */
html[data-standardization] #CategoriesModal.products-filter-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 88010 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-standardization] #CategoriesModal .products-filter-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(8, 15, 27, .54) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-standardization] #CategoriesModal .products-filter-modal {
    --wa-drawer-width: 460px;
    right: var(--wa-drawer-gap) !important;
    left: auto !important;
    overflow: hidden !important;
}
html[data-standardization] #CategoriesModal .products-filter-scroll {
    padding: 16px !important;
}
html[data-standardization] #CategoriesModal .products-filter-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap;
}
html[data-standardization] #CategoriesModal .products-filter-head h2 {
    margin: 0;
    color: var(--wa-drawer-ink) !important;
}
html[data-standardization] #CategoriesModal .products-filter-head p {
    color: var(--wa-drawer-muted) !important;
}

/* Product item drawer uses the same container/header/body/footer as every other. */
html[data-standardization] #ItemDrawer.products-item-drawer {
    --wa-drawer-width: 520px;
    right: var(--wa-drawer-gap) !important;
    left: auto !important;
    transform: translateX(calc(100% + 35px)) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s ease !important;
}
html[data-standardization] #ItemDrawer:is(.is-open, .open, .active, .show, [aria-hidden='false']) {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
html[data-standardization] #ItemDrawer > .drawer-body {
    padding: 16px !important;
}

/* Mobile navigation also gets the same floating edge and corner language. */
html[data-standardization] .mobile-drawer {
    z-index: 88020 !important;
    top: var(--wa-drawer-gap) !important;
    bottom: var(--wa-drawer-gap) !important;
    height: calc(100dvh - 2 * var(--wa-drawer-gap)) !important;
    border-radius: var(--wa-drawer-radius) !important;
    overflow: hidden !important;
    background: var(--wa-drawer-surface) !important;
    border: 1px solid var(--wa-drawer-line) !important;
    backdrop-filter: none !important;
}
html[data-standardization='internal'] .mobile-drawer {
    left: var(--wa-drawer-gap) !important;
    right: auto !important;
}
html[data-wa-public-master='true'] .mobile-drawer {
    right: var(--wa-drawer-gap) !important;
    left: auto !important;
}
html[data-standardization] .mobile-drawer-overlay {
    z-index: 88000 !important;
    background: rgba(8, 15, 27, .54) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Small phones still show floating, full-height drawers, with safe-area support. */
@media (max-width: 600px) {
    html[data-standardization] {
        --wa-drawer-gap: 6px;
        --wa-drawer-radius: 18px;
    }
    html[data-standardization] :is(.app-drawer, .app-info-drawer, .right-drawer, .vendor-info-drawer, .customer-info-drawer, .wa-drawer) {
        width: calc(100vw - 2 * var(--wa-drawer-gap)) !important;
        max-width: none !important;
    }
    html[data-standardization] .mobile-drawer {
        width: min(390px, calc(100vw - 2 * var(--wa-drawer-gap))) !important;
        max-width: none !important;
    }
    html[data-standardization] #CategoriesModal .products-filter-modal {
        width: calc(100vw - 2 * var(--wa-drawer-gap)) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    html[data-standardization] :is(.app-drawer, .app-info-drawer, .mobile-drawer, #ItemDrawer, .products-filter-modal, .app-drawer-overlay) {
        transition: none !important;
    }
}

/* Respect WebForms/JavaScript hidden state even with the unified flex layout. */
html[data-standardization] :is(.wa-drawer, .app-drawer, .app-info-drawer)[hidden] {
    display: none !important;
}