/* Custom styles for micro-animations and smooth rendering */
.glass-nav {
    background: rgba(10, 51, 23, 0.65); border-bottom: none;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(201, 139, 62, 0.1);
}

.fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth image hover transition */
.img-hover-zoom {
    transition: transform 0.7s ease;
}
.group:hover .img-hover-zoom {
    transform: scale(1.05);
}

.premium-gradient {
    background: linear-gradient(135deg, #8E511D 0%, #C98B3E 50%, #F1C27D 100%);
    background-size: 200% auto;
    transition: 0.5s;
    color: #051A0C !important; /* Forest dark */
    border: none !important;
}
.premium-gradient:hover {
    background-position: right center;
    box-shadow: 0 0 20px rgba(201, 139, 62, 0.4);
}
.premium-text-gradient {
    background: linear-gradient(135deg, #8E511D 0%, #C98B3E 50%, #F1C27D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.premium-glow {
    transition: all 0.4s ease;
}
.premium-glow:hover {
    box-shadow: 0 0 30px rgba(201, 139, 62, 0.2);
    border-color: rgba(201, 139, 62, 0.4);
    transform: translateY(-5px);
}
.radial-bg {
    background: radial-gradient(circle at center, #1F100A 0%, #08120B 100%);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #051A0C;
}

::-webkit-scrollbar-thumb {
    background: #8E511D;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #C98B3E;
}

/* Better Focus States for Accessibility */
*:focus-visible {
    outline: 2px solid #C98B3E !important;
    outline-offset: 2px;
}

/* ===================================================
   Mobile App (PWA) Native Touch & Bottom Dock Styling
   =================================================== */
html, body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    overscroll-behavior-y: contain;
    overflow-x: clip;
    max-width: 100vw;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Off-screen Image Rendering Optimization */
img {
    content-visibility: auto;
}

/* Hardware GPU Acceleration for Sliding Drawers and Fixed Overlays */
#cartSidebar,
#mobileMenu,
#mobileAppBottomNav,
#adminMobileBottomNav,
#cookieConsentBanner,
#cookiePreferencesModal {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Mobile Touch Targets & Interaction */
button, a, input, select, textarea, .category-btn, .bottom-tab-item {
    touch-action: manipulation;
}

/* Smooth Tap / Touch Feedback */
.category-btn:active,
.add-to-cart:active,
.buy-now:active,
.btn-primary:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

main {
    overflow-x: clip;
    width: 100%;
}

/* Hide scrollbar for Chrome, Safari and Opera + Momentum scrolling */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    -webkit-overflow-scrolling: touch;
}

/* Fluid luxury typography helper */
.fluid-hero-title {
    font-size: clamp(2.25rem, 7vw, 5.5rem);
    line-height: 1.1;
}

.fluid-section-title {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    line-height: 1.2;
}

/* Safe Area Inset Support for iPhone Notch & Home Indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #mobileAppBottomNav,
    #adminMobileBottomNav {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }
}

.bottom-nav-glass {
    background: #051A0C !important;
    background-color: #051A0C !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.9);
}

.bottom-tab-item {
    flex: 1 1 0%;
    min-width: 0;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.bottom-tab-item:active {
    transform: scale(0.90);
}

.bottom-tab-item.active i,
.bottom-tab-item.active span {
    color: #C98B3E !important;
}

/* Ensure mobile footer has clean clearance above bottom dock without excessive space */
@media (max-width: 767px) {
    footer {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ===================================================
   Page Transition Animations (Fade In / Fade Out)
   =================================================== */

/* Native W3C Cross-Document View Transitions */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both pageViewFadeOut;
}

::view-transition-new(root) {
    animation: 260ms cubic-bezier(0.16, 1, 0.3, 1) both pageViewFadeIn;
}

@keyframes pageViewFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.994);
    }
}

@keyframes pageViewFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.994);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Universal Smooth Page Entry & Exit Animations (Opacity only to preserve fixed positioning) */
@keyframes pageLoadFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

body {
    animation: pageLoadFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) ease-out;
    transform: none !important;
}

/* Smooth fade out when user clicks a link to leave the page */
body.page-is-leaving {
    opacity: 0 !important;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

/* Mobile Native Navigation Dock & Modal Layering */
#mobileAppBottomNav,
#adminMobileBottomNav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9990 !important;
}

/* Ensure slide-out cart and modals appear cleanly ABOVE the bottom dock */
#cartSidebarOverlay {
    z-index: 99998 !important;
}

#cartSidebar {
    z-index: 99999 !important;
}

#cookieConsentBanner,
#cookiePreferencesModal {
    z-index: 99995 !important;
}

/* Page navigation progress line at top of screen */
#pageTransitionBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #8E511D 0%, #C98B3E 50%, #F1C27D 100%);
    box-shadow: 0 0 10px rgba(201, 139, 62, 0.8), 0 0 5px rgba(241, 194, 125, 0.5);
    z-index: 99999;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    pointer-events: none;
    opacity: 0;
}

#pageTransitionBar.active {
    opacity: 1;
    width: 85%;
}

#pageTransitionBar.done {
    width: 100%;
    opacity: 0;
    transition: width 0.15s ease, opacity 0.2s ease 0.1s;
}

/* Accessibility: respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    body {
        animation: none !important;
    }
    body.page-is-leaving {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}