/* 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;
    }
}

/* Purchase viewport: one scroll layer, measured against the actual app bars. */
#wtnStoreUnderlayV19 { position:fixed; z-index:14; top:var(--wtn-overlay-top, var(--header-height,72px)); right:0; bottom:var(--wtn-overlay-bottom, var(--bottom-height,88px)); left:0; overflow:hidden; pointer-events:none; user-select:none; opacity:.32; background:var(--background,#070817); contain:strict; }
#wtnStoreUnderlayV19 .wtn-store-underlay-inner { width:min(100%,var(--page-width,1100px)); margin:0 auto; transform-origin:top center; }
#wtnStoreUnderlayV19 * { pointer-events:none !important; animation:none !important; transition:none !important; }
body.wtn-store-overlay-active { overflow:hidden !important; overscroll-behavior:none; }
body.wtn-store-overlay-active #storeMain { position:static !important; z-index:auto; background:transparent !important; transform:none !important; filter:none !important; animation:none !important; contain:none !important; }
body.wtn-store-overlay-active #storeMain > :is(.product-page-wrapper,.created-page) { position:fixed !important; z-index:30; top:var(--wtn-overlay-top, var(--header-height,72px)); right:0; bottom:var(--wtn-overlay-bottom, var(--bottom-height,88px)); left:0; width:100%; min-height:0 !important; height:auto !important; margin:0 !important; padding:12px 12px 24px !important; display:block !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior-y:contain; scroll-padding-block:12px 24px; touch-action:pan-y pinch-zoom; background:rgba(3,7,16,.30); box-sizing:border-box; transform:none !important; }
body.wtn-store-overlay-active #storeMain > :is(.product-page-wrapper,.created-page) :is(.modal,.modal-content,.created-card) { position:relative; max-height:none !important; height:auto; overflow:visible !important; }
body.wtn-store-overlay-active .created-card { margin:0 auto !important; }
body.wtn-store-overlay-active .buy-button { scroll-margin-block:16px; }