/* ==========================================================================
   AVASHOP 10 TRUE APPLE LIQUID GLASS (iOS 26 SPECIFICATION)
   Based on Apple WWDC 2025 Architecture & Liquid Glass Reference Guide:
   - True Optical Lensing (refraction + chromatic dispersion)
   - Multi-Layered Specular Rim Light (Prismatic Bevel)
   - Ambient Volumetric Drop Shadows
   - Pure Gel-like Fluid Responsiveness (.interactive())
   - Materialization & Morphing
   ========================================================================== */

:root {
    /* Brand & Boutique Color Palette */
    --ava-page-bg: #F8F9FD;
    --ava-surface: #FFFFFF;
    --ava-ink: #19162B;
    --ava-ink-secondary: #615C72;
    --ava-ink-muted: #94A3B8;

    /* Violet Boutique Accents */
    --ava-violet: #6D28D9;
    --ava-violet-hover: #5B21B6;
    --ava-violet-active: #4C1D95;
    --ava-violet-tint: rgba(109, 40, 217, 0.08);
    --ava-violet-glow: rgba(109, 40, 217, 0.35);
    --ava-rose-accent: #E11D48;
    --ava-search-blue: #0969DA;

    /* Semantic Status */
    --ava-success: #059669;
    --ava-warning: #D97706;
    --ava-danger: #DC2626;

    /* Radii Scale */
    --ava-radius-small: 12px;
    --ava-radius-medium: 16px;
    --ava-radius-large: 24px;
    --ava-radius-pill: 999px;

    /* Sizing Scale */
    --ava-touch-target: 44px;
    --ava-input-height: 52px;
    --ava-dock-h: 58px;

    /* Motion Curves matching Apple iOS 26 Fluid Bouncy Spring */
    --ava-ease-snappy: cubic-bezier(0.22, 1, 0.36, 1);
    --ava-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ava-dur-fast: 160ms;
    --ava-dur-normal: 240ms;
    --ava-dur-morph: 300ms;

    /* ==========================================================================
       LIQUID GLASS OPTICS & PHYSICAL SPECIFICATIONS
       ========================================================================== */
    --ava-liquid-tint: rgba(255, 255, 255, 0.48);
    --ava-liquid-blur: 24px;
    --ava-liquid-saturate: 220%;
    --ava-liquid-contrast: 112%;
    --ava-liquid-brightness: 106%;

    /* Quadruple Optical Bevel:
       1. Top Prismatic Sun Catch (1.5px bright white specular)
       2. Lateral Edge Sheen (1px translucent glass refraction)
       3. Bottom Sub-surface Scattering (Ambient Violet Absorption)
       4. Inner Deep Core Occlusion */
    --ava-liquid-specular-inner:
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1.5px 1.5px 0 rgba(109, 40, 217, 0.12),
        inset 1.5px 0 1.5px 0 rgba(255, 255, 255, 0.70),
        inset -1.5px 0 1.5px 0 rgba(255, 255, 255, 0.70),
        inset 0 0 16px 0 rgba(255, 255, 255, 0.30);

    /* Volumetric Liquid Drop Shadows */
    --ava-liquid-shadow:
        0 24px 48px -12px rgba(25, 22, 43, 0.22),
        0 12px 24px -6px rgba(25, 22, 43, 0.12),
        0 4px 8px -2px rgba(25, 22, 43, 0.06);
}

/* ==========================================================================
   1. NAVIGATION LIQUID GLASS (.ava-glass-nav)
   SwiftUI: .glassEffect(.regular, in: .capsule)
   ========================================================================== */
/* 1. Navigation Liquid Glass: Header & Mobile Floating Capsule */
.ava-glass-nav {
    position: relative;
    background: rgba(255, 255, 255, 0.40) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 20px -2px rgba(25, 22, 43, 0.08);
}

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    .ava-glass-nav {
        background: rgba(255, 255, 255, 0.40) !important;
        backdrop-filter: 
            blur(24px) 
            saturate(200%) 
            contrast(108%) 
            brightness(104%) !important;
        -webkit-backdrop-filter: 
            blur(24px) 
            saturate(200%) 
            contrast(108%) 
            brightness(104%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.75) !important;
        box-shadow: 
            0 10px 30px -5px rgba(25, 22, 43, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -1px 0 rgba(109, 40, 217, 0.08) !important;
    }
}

/* 2. Action Liquid Glass (.ava-glass-action) */
.ava-glass-action {
    position: relative;
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #5B21B6 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 
        0 12px 28px -4px rgba(109, 40, 217, 0.50),
        0 6px 12px -2px rgba(109, 40, 217, 0.35),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.70),
        inset 0 -1.5px 1px 0 rgba(76, 29, 149, 0.55) !important;
    overflow: hidden;
    transition: transform var(--ava-dur-fast) var(--ava-ease-snappy), box-shadow var(--ava-dur-fast) ease;
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .ava-glass-action {
        backdrop-filter: blur(16px) saturate(200%);
        -webkit-backdrop-filter: blur(16px) saturate(200%);
    }
}

.ava-glass-action:hover {
    box-shadow: 
        0 16px 36px -4px rgba(109, 40, 217, 0.60),
        0 8px 16px -2px rgba(109, 40, 217, 0.40),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.90) !important;
    transform: translateY(-1.5px);
}

.ava-glass-action:active {
    transform: scale(0.975);
}

/* Fluid Liquid Specular Sheen Ribbon */
.ava-glass-action::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -70%;
    width: 28%;
    height: 200%;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.15) 30%, 
        rgba(255, 255, 255, 0.65) 50%, 
        rgba(255, 255, 255, 0.15) 70%, 
        transparent 100%
    );
    transform: rotate(28deg);
    pointer-events: none;
    animation: avaLiquidSheen 5s ease-in-out infinite;
}

@keyframes avaLiquidSheen {
    0%, 70% { transform: translateX(-100%) rotate(28deg); opacity: 0; }
    75% { opacity: 1; }
    100% { transform: translateX(750%) rotate(28deg); opacity: 0; }
}

/* 3. Overlay Liquid Glass (.ava-glass-overlay) & Glass Panels (.ava-glass-strong) */
.ava-glass-overlay,
.ava-glass-strong {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 
        0 24px 48px -12px rgba(25, 22, 43, 0.18),
        0 8px 16px -4px rgba(25, 22, 43, 0.08),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(109, 40, 217, 0.08) !important;
}

@supports (backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px)) {
    .ava-glass-overlay,
    .ava-glass-strong {
        backdrop-filter: blur(24px) saturate(200%) contrast(108%) brightness(104%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(200%) contrast(108%) brightness(104%) !important;
    }
}

/* ==========================================================================
   4. SOLID FALLBACK (.ava-glass-solid)
   iOS 26.2+ Lock Screen Solid & Accessibility fallback
   ========================================================================== */
.ava-glass-solid,
[data-ava-glass="solid"] .ava-glass-nav,
[data-ava-glass="solid"] .ava-glass-overlay,
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .ava-glass-nav {
        background: #FFFFFF !important;
        border-color: #CBD5E1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    }
    .ava-glass-overlay {
        background: #FFFFFF !important;
        border-color: #CBD5E1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ==========================================================================
   FLUID MOTION & INTERACTION KEYFRAMES (iOS 26 Spring Curves)
   ========================================================================== */

.variation-card.is-selected {
    border-color: var(--ava-violet) !important;
    background-color: var(--ava-violet-tint) !important;
    box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.35) !important;
    animation: avaVarPulse 260ms var(--ava-ease-snappy) forwards;
}

.variation-card.is-selected-preorder {
    border-color: #9333EA !important;
    background-color: rgba(250, 245, 255, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.35) !important;
    animation: avaPreorderGlow 320ms var(--ava-ease-snappy) forwards;
}

@keyframes avaVarPulse {
    0% { transform: scale(0.96); }
    50% { transform: scale(1.025); }
    100% { transform: scale(1); }
}

@keyframes avaPreorderGlow {
    0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.6); }
    50% { transform: scale(1.025); box-shadow: 0 0 16px rgba(147, 51, 234, 0.35); }
    100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.35); }
}

.cart-badge.pop-trigger {
    animation: avaBadgePop 340ms var(--ava-ease-spring) forwards;
}

@keyframes avaBadgePop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes avaDockFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Reduced Motion Override (iOS 26.4 Standard) */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   INPUTS & TOUCH SIZING ENFORCEMENT & PRIMARY BUTTON STYLING
   ========================================================================== */

#add-to-cart-btn,
button#add-to-cart-btn {
    min-height: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #5B21B6 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 12px 28px -4px rgba(109, 40, 217, 0.50), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1.5px 1px 0 rgba(76, 29, 149, 0.55) !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
}

#add-to-cart-btn:disabled,
button#add-to-cart-btn:disabled {
    background: #E2E8F0 !important;
    color: #64748B !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.qty-btn {
    min-width: 44px !important;
    min-height: 44px !important;
}

.qty-input-group {
    min-height: 52px !important;
}

/* Clean Search Input Clear Control */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

/* Standardized Empty Panel */
.ava-empty-panel {
    max-width: 720px;
    margin: 32px auto;
    padding: 32px 24px;
    border-radius: var(--ava-radius-large);
    text-align: center;
}
@media (min-width: 768px) {
    .ava-empty-panel {
        padding: 56px 40px;
    }
}
.ava-empty-icon-wrap {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}