/**
 * Vitrine Liquidamix - Modern UI/UX Design System
 * Advanced Glassmorphism, Micro-Interactions, Mobile Bottom Sheets & Safe Areas
 */

:root {
  /* Ambient Multi-Layer Diffused Shadows */
  --shadow-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 3px 1px rgba(0, 0, 0, 0.02);
  --shadow-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-elevation-3: 0 10px 25px -3px rgba(0, 0, 0, 0.06), 0 4px 10px -4px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-elevation-4: 0 20px 35px -5px rgba(0, 0, 0, 0.08), 0 10px 15px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-glow-primary: 0 8px 24px -4px rgba(6, 78, 59, 0.25);
  --shadow-glow-accent: 0 8px 24px -4px rgba(16, 185, 129, 0.3);

  /* Physics Springs & Easing Curves */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 180ms;
  --duration-normal: 280ms;
  --duration-slow: 450ms;

  /* Safe Area Insets with Defaults */
  --sab: env(safe-area-inset-bottom, 0px);
  --sat: env(safe-area-inset-top, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Base Smoothing & Fluid Typography */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* Mobile Safe Area Utility Classes */
.pb-safe {
  padding-bottom: max(1rem, calc(1rem + var(--sab))) !important;
}

.pb-dock-safe {
  padding-bottom: max(6.5rem, calc(6.5rem + var(--sab))) !important;
}

.bottom-safe {
  bottom: max(1rem, calc(0.75rem + var(--sab))) !important;
}

.bottom-dock-safe {
  bottom: max(5.5rem, calc(5.5rem + var(--sab))) !important;
}

.pt-safe {
  padding-top: max(0.75rem, calc(0.5rem + var(--sat))) !important;
}

/* Modern Refined Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.7);
}

.hide-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.hide-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Faded Edge Mask for Horizontal Scrollables */
.mask-edge-fade {
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}

/* Glassmorphism 2.0 Surfaces */
.glass-header {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
}

.glass-dock {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.glass-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-elevation-2);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5) !important;
}

/* Tactile & Interactive Micro-Interactions */
.btn-tactile {
  transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.btn-tactile:active {
  transform: scale(0.96) !important;
}

.card-lift {
  transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-spring), border-color var(--duration-normal) ease;
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevation-3);
}

.card-lift:active {
  transform: scale(0.98) translateY(-1px);
}

/* Story Ring Dynamic Conic Gradient */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.story-ring-animated {
  background: linear-gradient(45deg, #f59e0b, #ec4899, #8b5cf6, #10b981);
  background-size: 250% 250%;
  transition: all var(--duration-normal) ease;
}

.story-ring-animated:hover {
  transform: scale(1.06);
  background-position: 100% 100%;
}

/* Pulsating Live Status Indicator */
.pulse-emerald {
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: emeraldPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes emeraldPulse {
  to {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
}

/* Cart Bump & Bounce Animation */
@keyframes cartBounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.22); }
  50% { transform: scale(0.92); }
  75% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.cart-bump {
  animation: cartBounce 420ms var(--ease-bounce) !important;
}

/* Mobile Bottom Sheet Modal Engine */
@media (max-width: 767px) {
  .modal-responsive-sheet {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-responsive-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 28px 28px 0 0 !important;
    padding-bottom: max(1.5rem, calc(1rem + var(--sab))) !important;
    transform: translateY(100%);
    transition: transform 320ms var(--ease-spring), opacity 200ms ease !important;
  }

  .modal-responsive-open .modal-responsive-content {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  .bottom-sheet-handle {
    display: block !important;
    width: 44px;
    height: 5px;
    background-color: #cbd5e1;
    border-radius: 9999px;
    margin: 10px auto 4px auto;
    cursor: grab;
  }
}

@media (min-width: 768px) {
  .bottom-sheet-handle {
    display: none !important;
  }
}

/* Smooth Skeleton Wave Effect */
@keyframes skeletonWave {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-modern {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeletonWave 1.6s infinite ease-in-out;
}

/* Quantity Stepper Button Style */
.qty-stepper-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 700;
  transition: all var(--duration-fast) ease;
  border: 1px solid #e2e8f0;
}

.qty-stepper-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.qty-stepper-btn:active {
  transform: scale(0.92);
}

/* Accessible Modern Focus Rings */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(16, 185, 129, 0.6) !important;
}

/* Chip Selected Glow */
.chip-active {
  box-shadow: 0 4px 14px -2px rgba(6, 78, 59, 0.35);
}