/* ==========================================================================
   LAVI Aesthetic Clinic — Universal Stylesheet (style.css)
   Preserves 100% exact luxury aesthetic, layout, typography, and backgrounds
   ========================================================================== */

/* Base Layout Resets & Scrollbar Management */
@layer base {
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: clip;
    max-width: 100vw;
  }
  body {
    overscroll-behavior-y: none;
  }
  main > :first-child {
    margin-top: 0 !important;
  }
  main > :last-child {
    margin-bottom: 0 !important;
  }
}

/* Custom Scrollbar suppression */
::-webkit-scrollbar {
  display: none;
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* --------------------------------------------------------------------------
   Specialized Luxury Tactile Texture Suite (High-Perception Artisan System)
   -------------------------------------------------------------------------- */

/* 1. Universal Cotton-Fiber Paper Grain Canvas */
.lavi-texture-paper,
.lavi-bg-paper-grain {
  background-color: #faf5eb !important;
  background-image: 
    radial-gradient(circle at 12% 14%, rgba(211, 164, 92, 0.18) 0%, transparent 48%),
    radial-gradient(circle at 88% 26%, rgba(248, 188, 101, 0.16) 0%, transparent 52%),
    radial-gradient(circle at 18% 68%, rgba(183, 131, 50, 0.14) 0%, transparent 44%),
    radial-gradient(circle at 82% 86%, rgba(211, 164, 92, 0.16) 0%, transparent 48%),
    url("data:image/svg+xml,%3Csvg width='320' height='320' viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='paperFiber' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.52' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.52 0 0 0 0 0.40 0 0 0 0 0.22 0 0 0 0.14 0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' filter='url(%23paperFiber)'/%3E%3C/svg%3E") !important;
  background-attachment: scroll !important;
  background-repeat: repeat;
}

/* Ensure child main and sections do NOT mask the body canvas with flat opaque color */
body.lavi-bg-paper-grain main.bg-surface,
body.lavi-texture-paper main.bg-surface,
body.lavi-texture-dossier main.bg-surface,
body.lavi-bg-paper-grain section.bg-surface,
body.lavi-texture-paper section.bg-surface,
body.lavi-texture-dossier section.bg-surface {
  background-color: transparent !important;
}

/* 2. Mineral Limewash & Travertine Plaster Texture */
.lavi-texture-limewash {
  background-color: #f2ebd9 !important;
  background-image: 
    radial-gradient(ellipse at 25% 20%, rgba(255, 252, 246, 0.85) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 75%, rgba(235, 222, 200, 0.75) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='limewash' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.024' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.56 0 0 0 0 0.44 0 0 0 0 0.26 0 0 0 0.18 0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' filter='url(%23limewash)'/%3E%3C/svg%3E") !important;
  background-repeat: repeat;
}

/* 3. Archival Clinical Dossier Micro-Grain Noise */
.lavi-texture-dossier,
.lavi-bg-subtle-noise {
  background-color: #faf4e8 !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(255, 250, 240, 0.75) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cdefs%3E%3Cfilter id='dossierNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.52 0 0 0 0 0.38 0 0 0 0 0.20 0 0 0 0.12 0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' filter='url(%23dossierNoise)'/%3E%3C/svg%3E") !important;
  background-repeat: repeat;
}

/* 4. Champagne Raw-Silk Shimmer Texture */
.lavi-texture-silk {
  background-color: #fbf6ec !important;
  background-image: 
    linear-gradient(135deg, rgba(255, 252, 246, 0.96) 0%, rgba(245, 238, 225, 0.92) 100%),
    repeating-linear-gradient(45deg, rgba(211, 164, 92, 0.06) 0px, rgba(211, 164, 92, 0.06) 1.5px, transparent 1.5px, transparent 5px),
    repeating-linear-gradient(-45deg, rgba(183, 131, 50, 0.05) 0px, rgba(183, 131, 50, 0.05) 1.5px, transparent 1.5px, transparent 5px) !important;
}

/* 5. Deep Roasted Espresso Bronze Velvet (VIP Dark Modules & Footer) */
.lavi-texture-dark-bronze {
  background-color: #191611 !important;
  background-image: 
    radial-gradient(circle at 18% 22%, rgba(211, 164, 92, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(183, 131, 50, 0.24) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(126, 83, 0, 0.18) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='240' height='240' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='velvet' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.95 0 0 0 0 0.78 0 0 0 0 0.45 0 0 0 0.18 0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' filter='url(%23velvet)'/%3E%3C/svg%3E") !important;
  border-color: rgba(211, 164, 92, 0.35) !important;
}

/* Debossed Luxury Inputs inside Dark Modules */
.lavi-texture-dark-bronze input[type="text"],
.lavi-texture-dark-bronze input[type="email"],
.lavi-texture-dark-bronze input[type="tel"],
.lavi-texture-dark-bronze select,
.lavi-texture-dark-bronze textarea {
  background-color: #faf5ec !important;
  border: 1px solid rgba(211, 164, 92, 0.45) !important;
  box-shadow: inset 0 1.5px 3px rgba(68, 46, 21, 0.10) !important;
  color: #1e1b14 !important;
}
.lavi-texture-dark-bronze input:focus,
.lavi-texture-dark-bronze select:focus,
.lavi-texture-dark-bronze textarea:focus {
  background-color: #ffffff !important;
  border-color: #d3a45c !important;
  box-shadow: 0 0 0 3px rgba(211, 164, 92, 0.35) !important;
}

/* --------------------------------------------------------------------------
   Architectural Luxury Detailing & Embellishments
   -------------------------------------------------------------------------- */

/* Haute-Couture Gilded Ivory Cards: Warm Parchment Base + Gleaming Gold Hairline */
.lavi-border-gilded {
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 50%, #faf5eb 100%) !important;
  border: 1px solid rgba(200, 150, 70, 0.48) !important;
  box-shadow: 
    0 0 0 1px rgba(211, 164, 92, 0.22),
    0 10px 28px -6px rgba(68, 46, 21, 0.08),
    0 2px 8px -1px rgba(183, 131, 50, 0.06) !important;
  position: relative;
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lavi-border-gilded:hover {
  border-color: rgba(183, 131, 50, 0.85) !important;
  box-shadow: 
    0 0 0 1.5px rgba(211, 164, 92, 0.50),
    0 18px 44px -8px rgba(68, 46, 21, 0.14),
    0 4px 14px -1px rgba(183, 131, 50, 0.16) !important;
}

/* Double Hairline Frame for Certified Doctor Dossiers & Legal Folios */
.lavi-border-gilded-double {
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 65%, #f8f3e5 100%) !important;
  border: 1.5px solid rgba(183, 131, 50, 0.65) !important;
  box-shadow: 
    0 0 0 3px #fff9ee,
    0 0 0 4.5px rgba(211, 164, 92, 0.35),
    0 16px 44px -10px rgba(68, 46, 21, 0.12) !important;
}

/* Frosted Fluted Glassmorphism */
.lavi-glass-fluted {
  background: rgba(255, 249, 238, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(183, 131, 50, 0.25) !important;
  box-shadow: 0 4px 20px -2px rgba(68, 46, 21, 0.06) !important;
  transform: translateZ(0);
}

/* Debossed Inset Luxury Form Field */
.lavi-input-debossed {
  background-color: #faf3e6 !important;
  border: 1px solid rgba(183, 131, 50, 0.35) !important;
  box-shadow: inset 0 1.5px 3px rgba(68, 46, 21, 0.08) !important;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lavi-input-debossed:focus {
  background-color: #ffffff !important;
  border-color: #7e5300 !important;
  box-shadow: 
    inset 0 1px 2px rgba(68, 46, 21, 0.03),
    0 0 0 3px rgba(211, 164, 92, 0.28) !important;
  outline: none !important;
}

/* Liquid Gold Button Shimmer */
.lavi-btn-gold {
  position: relative;
  overflow: hidden;
  background-color: #7e5300;
  transition: all 300ms ease;
}

.lavi-btn-gold::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: rotate(25deg);
  transition: all 650ms ease;
}

.lavi-btn-gold:hover::after {
  left: 130%;
}

/* Mobile Navigation Drawer High-Priority Viewport Layering */
#mobile-menu-backdrop {
  z-index: 9998 !important;
}

#mobile-menu-drawer {
  z-index: 9999 !important;
  box-shadow: -8px 0 36px rgba(30, 27, 20, 0.35) !important;
}

/* Fix background-attachment for iOS/Android touch browsers */
@media (max-width: 1023px) {
  .lavi-texture-paper,
  .lavi-bg-paper-grain,
  .lavi-texture-limewash,
  .lavi-texture-dossier,
  .lavi-bg-subtle-noise,
  .lavi-texture-dark-bronze {
    background-attachment: scroll !important;
  }
}

/* Horizontal scroll indicators reset */
.scroll-hint-container {
  position: relative;
  width: 100%;
}

/* --------------------------------------------------------------------------
   LAVI Aesthetic Clinic — Luxury Scroll-Reveal Animation Engine
   -------------------------------------------------------------------------- */

.lavi-reveal {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 750ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base directions */
.reveal-up {
  transform: translateY(32px);
}
.reveal-down {
  transform: translateY(-28px);
}
.reveal-left {
  transform: translateX(-36px);
}
.reveal-right {
  transform: translateX(36px);
}
.reveal-scale {
  transform: scale(0.95);
}

/* Active visible state when scrolled into viewport */
.lavi-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Luxury Stagger Delays for Grid Elements */
.delay-100 { transition-delay: 100ms; }
.delay-150 { transition-delay: 150ms; }
.delay-200 { transition-delay: 200ms; }
.delay-250 { transition-delay: 250ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Motion preference safety */
@media (prefers-reduced-motion: reduce) {
  .lavi-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   LAVI Aesthetic Clinic — Horizontal Side-Scrolling Carousel Engine
   -------------------------------------------------------------------------- */
.lavi-carousel-track {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  cursor: grab;
  user-select: none;
}

.lavi-carousel-track::-webkit-scrollbar {
  display: none !important;
}

.lavi-carousel-track.cursor-grabbing {
  cursor: grabbing !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

.lavi-carousel-item {
  scroll-snap-align: start !important;
  flex: 0 0 auto !important;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease !important;
}

.lavi-carousel-item:hover {
  transform: translateY(-4px);
}

.lavi-carousel-nav-btn {
  background: rgba(255, 249, 238, 0.95);
  border: 1.5px solid rgba(183, 131, 50, 0.45);
  box-shadow: 0 4px 14px rgba(68, 46, 21, 0.08);
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lavi-carousel-nav-btn:hover {
  background: #7e5300;
  color: #ffffff !important;
  border-color: #7e5300;
  box-shadow: 0 6px 20px rgba(126, 83, 0, 0.35);
  transform: scale(1.05);
}

/* Radiant Glow Card */
.lavi-glow-card {
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 55%, #faf5eb 100%) !important;
  border: 1px solid rgba(200, 150, 70, 0.45) !important;
  box-shadow: 
    0 0 0 1px rgba(211, 164, 92, 0.18),
    0 8px 24px -6px rgba(68, 46, 21, 0.07) !important;
  position: relative;
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lavi-glow-card:hover {
  border-color: rgba(183, 131, 50, 0.85) !important;
  box-shadow: 
    0 0 0 1.5px rgba(211, 164, 92, 0.45),
    0 16px 40px -8px rgba(68, 46, 21, 0.12),
    0 4px 12px -1px rgba(183, 131, 50, 0.12) !important;
}

/* Luxury Shimmer Text */
.lavi-shimmer-text {
  background: linear-gradient(135deg, #7e5300 0%, #b78332 50%, #916421 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   Floating VIP Action Dock (Vertical Stack - Zero Overlap Guarantee)
   -------------------------------------------------------------------------- */
#lavi-sticky-actions {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.25rem !important;
  z-index: 9990 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.75rem !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 640px) {
  #lavi-sticky-actions {
    bottom: 2rem !important;
    right: 1.75rem !important;
    gap: 0.85rem !important;
  }
}

#lavi-sticky-actions a {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3.25rem !important;
  height: 3.25rem !important;
  border-radius: 9999px !important;
  transition: transform 250ms ease, box-shadow 250ms ease !important;
}

@media (min-width: 640px) {
  #lavi-sticky-actions a {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
}

#lavi-sticky-actions a:hover {
  transform: translateY(-2px) scale(1.06) !important;
}

#lavi-sticky-actions a:active {
  transform: scale(0.95) !important;
}