/* Watan PJAX V17 - lightweight shell + sidebar navigation */

body.wtn-pjax-loading::before {
    content: '';
    position: fixed;
    z-index: 2147483646;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    pointer-events: none;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(255,255,255,.9), var(--primary, #ef1717), rgba(255,255,255,.9));
    box-shadow: 0 1px 8px rgba(0,0,0,.14);
    animation: wtn-v17-progress 1.05s cubic-bezier(.2,.8,.2,1) infinite;
}

@keyframes wtn-v17-progress {
    0%   { transform: translateX(-100%) scaleX(.28); opacity: .55; }
    45%  { transform: translateX(-16%) scaleX(.76); opacity: 1; }
    100% { transform: translateX(100%) scaleX(.34); opacity: .72; }
}

.store-main.wtn-pjax-enter {
    animation: wtn-v17-content-in 140ms cubic-bezier(.16,1,.3,1) both;
}

@keyframes wtn-v17-content-in {
    from { opacity: .72; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.store-bottom-link.wtn-pjax-target .store-bottom-item,
.store-sidebar-link.wtn-pjax-target,
.store-settings-link.wtn-pjax-target,
.store-profile-balance.wtn-pjax-target,
.store-profile-action.wtn-pjax-target,
.store-notification-button.wtn-pjax-target {
    transform: translateY(-1px) scale(.985);
    opacity: .88;
}

/* Sidebar closes immediately; the current page remains visible until the response is ready. */
body.wtn-pjax-loading .store-main {
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
    body.wtn-pjax-loading::before,
    .store-main.wtn-pjax-enter {
        animation: none !important;
    }
}


/* ==========================================================================
   V18 — Category / product in-app navigation
   ========================================================================== */

/*
 * A tapped content card reacts instantly while the old page remains visible
 * until the fetched Laravel page is ready.
 */
#storeMain a.wtn-content-pjax-target {
    position: relative;
    transform: translateY(-1px) scale(.985);
    transition:
        transform 120ms ease,
        opacity 120ms ease,
        filter 120ms ease;
}

#storeMain a.wtn-content-pjax-target::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),
        0 8px 22px rgba(0,0,0,.10);
}

/*
 * Keep the current content readable while the next category/product loads.
 * Never replace it with a dark/blank skeleton.
 */
body.wtn-pjax-loading #storeMain {
    opacity: 1;
    visibility: visible;
}

/* Small top progress line for any PJAX navigation. */
body.wtn-pjax-loading::before {
    content: '';
    position: fixed;
    z-index: 2147483646;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    pointer-events: none;
    transform-origin: left center;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.90),
        var(--primary, #ef1717),
        rgba(255,255,255,.90)
    );
    animation: wtn-v18-progress 1.15s cubic-bezier(.2,.8,.2,1) infinite;
}

@keyframes wtn-v18-progress {
    0%   { transform: translateX(-100%) scaleX(.28); opacity: .55; }
    45%  { transform: translateX(-16%) scaleX(.74); opacity: 1; }
    100% { transform: translateX(100%) scaleX(.32); opacity: .70; }
}

/* The incoming category/product page feels like the same app surface. */
#storeMain.wtn-pjax-enter {
    animation: wtn-v18-content-in 145ms cubic-bezier(.16,1,.3,1) both;
}

@keyframes wtn-v18-content-in {
    from {
        opacity: .82;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #storeMain a.wtn-content-pjax-target,
    #storeMain.wtn-pjax-enter,
    body.wtn-pjax-loading::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================\n   V19 — Purchase glass overlay + previous category underlay\n   ========================================================================== */

#wtnStoreUnderlayV19 {
    position: fixed;
    z-index: 14;
    top: var(--header-height, 72px);
    right: 0;
    bottom: var(--bottom-height, 78px);
    left: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    opacity: .88;
    filter: saturate(.92) brightness(.82);
    background: var(--background, #070817);
}

#wtnStoreUnderlayV19 .wtn-store-underlay-inner {
    width: min(100%, var(--page-width, 1100px));
    min-height: 100%;
    margin: 0 auto;
    transform-origin: top center;
}

#wtnStoreUnderlayV19 a,
#wtnStoreUnderlayV19 button,
#wtnStoreUnderlayV19 input,
#wtnStoreUnderlayV19 select,
#wtnStoreUnderlayV19 textarea,
#wtnStoreUnderlayV19 form {
    pointer-events: none !important;
}

body.wtn-store-overlay-active #storeMain {
    position: relative;
    z-index: 18;
    background: transparent !important;
}

body.wtn-store-overlay-active #storeMain > .product-page-wrapper,
body.wtn-store-overlay-active #storeMain > .created-page {
    background: transparent !important;
}

body.wtn-store-overlay-active::after {
    content: '';
    position: fixed;
    z-index: 15;
    top: var(--header-height, 72px);
    right: 0;
    bottom: var(--bottom-height, 78px);
    left: 0;
    pointer-events: none;
    background: rgba(2, 5, 14, .14);
    backdrop-filter: blur(1.4px);
    -webkit-backdrop-filter: blur(1.4px);
}

@media (max-width: 720px) {
    #wtnStoreUnderlayV19 {
        opacity: .80;
    }

    body.wtn-store-overlay-active::after {
        background: rgba(2, 5, 14, .10);
    }
}

/* ========================================================================== 
   V21 - Product overlay visibility + Android scroll hard fix
   ========================================================================== */

/* Freeze only the category snapshot behind the purchase sheet. */
body.wtn-store-overlay-active {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body.wtn-store-overlay-active #storeMain {
    position: relative !important;
    z-index: 18 !important;
    overflow: visible !important;
    background: transparent !important;
}

/*
 * The whole product page becomes a fixed native scroll layer between
 * the site header and the bottom navigation. This avoids Android losing
 * the document scroll owner after a PJAX swap.
 */
body.wtn-store-overlay-active #storeMain > .product-page-wrapper {
    position: fixed !important;
    z-index: 30 !important;
    top: var(--header-height, 72px) !important;
    right: 0 !important;
    bottom: var(--bottom-height, 78px) !important;
    left: 0 !important;

    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    display: block !important;
    margin: 0 !important;
    padding: 18px 10px 150px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y pinch-zoom !important;

    background: transparent !important;
    transform: none !important;
    contain: none !important;
}

body.wtn-store-overlay-active #storeMain > .product-page-wrapper .modal,
body.wtn-store-overlay-active #storeMain > .product-page-wrapper.order-template-split .modal,
body.wtn-store-overlay-active #storeMain > .product-page-wrapper.order-template-compact .modal,
body.wtn-store-overlay-active #storeMain > .product-page-wrapper .modal-content {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.wtn-store-overlay-active #storeMain > .product-page-wrapper .modal {
    margin: 0 auto !important;
}

body.wtn-store-overlay-active #storeMain > .product-page-wrapper form {
    padding-bottom: 34px !important;
}

body.wtn-store-overlay-active #storeMain > .product-page-wrapper .buy-button {
    scroll-margin-bottom: 160px !important;
}

/* Apply the same reliable scroll model to the post-purchase page. */
body.wtn-store-overlay-active #storeMain > .created-page {
    position: fixed !important;
    z-index: 30 !important;
    top: var(--header-height, 72px) !important;
    right: 0 !important;
    bottom: var(--bottom-height, 78px) !important;
    left: 0 !important;

    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    display: block !important;
    margin: 0 !important;
    padding: 18px 10px 150px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y pinch-zoom !important;

    background: transparent !important;
    transform: none !important;
    contain: none !important;
}

body.wtn-store-overlay-active #storeMain > .created-page .created-card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto !important;
}

@media (max-width: 700px) {
    body.wtn-store-overlay-active #storeMain > .product-page-wrapper,
    body.wtn-store-overlay-active #storeMain > .created-page {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    body.wtn-store-overlay-active #storeMain > .product-page-wrapper .modal {
        width: calc(100% - 8px) !important;
        border-radius: 34px 34px 0 0 !important;
    }
}