/**
 * Modern UI Engine v3.0.0 - Master Stylesheet
 * Native Elementor Support, Liquid Glass UI Kit, Neumorphism, 3D Tilt & Micro-Animations
 */

:root {
  --muie-white: #ffffff;
  --muie-navy-dark: #0b132b;
  --muie-navy-surface: #1c2541;
  --muie-navy-royal: #1e3a8a;
  --muie-navy-border: rgba(11, 19, 43, 0.08);

  --muie-glass-white-bg: rgba(255, 255, 255, 0.88);
  --muie-glass-white-border: rgba(11, 19, 43, 0.08);
  --muie-glass-navy-bg: rgba(11, 19, 43, 0.82);
  --muie-glass-navy-border: rgba(255, 255, 255, 0.15);
  --muie-glass-subtle-blur: 14px;

  --muie-soft-white-bg: #f8fafc;
  --muie-soft-shadow-light: #ffffff;
  --muie-soft-shadow-dark: rgba(11, 19, 43, 0.07);

  --muie-ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --muie-trans-fast: 0.18s var(--muie-ease-smooth);
}

/* ==========================================================================
   1. LIQUID GLASS UI KIT (Hyper-Realistic Acrylic with Chromatic Caustics)
   ========================================================================== */

/* Base Liquid Glass Capsule - Elementor Compatible */
.muie-liquid-pill,
.elementor-button.muie-liquid-pill,
.elementor-element .muie-liquid-pill {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.25) 40%, rgba(255, 255, 255, 0.1) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 
    0 12px 28px -4px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04),
    inset 0 2px 4px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 6px 0 rgba(0, 0, 0, 0.08) !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  cursor: pointer;
  user-select: none;
  transition: transform var(--muie-trans-fast), box-shadow var(--muie-trans-fast), filter var(--muie-trans-fast) !important;
  text-decoration: none !important;
}

.muie-liquid-pill:hover,
.elementor-button.muie-liquid-pill:hover {
  transform: translateY(-2px) scale(1.02) !important;
}

.muie-liquid-pill:active,
.elementor-button.muie-liquid-pill:active {
  transform: translateY(1px) scale(0.99) !important;
}

/* Specular Glare Reflection on Liquid Capsule */
.muie-liquid-pill::before,
.elementor-button.muie-liquid-pill::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 8px;
  right: 8px;
  height: 40%;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* 1. Liquid Glass Button - Amber Orange Flame (Start project) */
.muie-liquid-amber,
.elementor-button.muie-liquid-amber {
  background: linear-gradient(180deg, rgba(255, 140, 50, 0.9) 0%, rgba(235, 75, 20, 0.95) 100%) !important;
  border: 1.5px solid rgba(255, 220, 180, 0.85) !important;
  box-shadow: 
    0 14px 30px -4px rgba(249, 115, 22, 0.45),
    0 6px 14px rgba(249, 115, 22, 0.25),
    inset 0 2px 5px rgba(255, 255, 255, 0.9),
    inset 0 -3px 8px rgba(180, 40, 0, 0.4) !important;
  color: #ffffff !important;
}

.muie-liquid-amber:hover,
.elementor-button.muie-liquid-amber:hover {
  box-shadow: 
    0 18px 36px -4px rgba(249, 115, 22, 0.55),
    0 8px 18px rgba(249, 115, 22, 0.35),
    inset 0 2px 6px rgba(255, 255, 255, 0.95) !important;
}

/* 2. Liquid Glass Button - Cyan Liquid Droplet (Secondary / Pro plan) */
.muie-liquid-cyan,
.elementor-button.muie-liquid-cyan {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.75) 0%, rgba(2, 132, 199, 0.85) 100%) !important;
  border: 1.5px solid rgba(200, 240, 255, 0.85) !important;
  box-shadow: 
    0 14px 30px -4px rgba(14, 165, 233, 0.4),
    0 6px 14px rgba(14, 165, 233, 0.2),
    inset 0 2px 5px rgba(255, 255, 255, 0.9),
    inset 0 -3px 8px rgba(3, 105, 161, 0.4) !important;
  color: #ffffff !important;
}

/* 3. Liquid Glass Button - Violet Neon Royal */
.muie-liquid-violet,
.elementor-button.muie-liquid-violet {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.85) 0%, rgba(109, 40, 217, 0.92) 100%) !important;
  border: 1.5px solid rgba(240, 215, 255, 0.85) !important;
  box-shadow: 
    0 14px 30px -4px rgba(147, 51, 234, 0.42),
    0 6px 14px rgba(147, 51, 234, 0.2),
    inset 0 2px 5px rgba(255, 255, 255, 0.9),
    inset 0 -3px 8px rgba(76, 29, 149, 0.4) !important;
  color: #ffffff !important;
}

/* 4. Liquid Glass Button - Emerald Mint */
.muie-liquid-emerald,
.elementor-button.muie-liquid-emerald {
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.8) 0%, rgba(5, 150, 105, 0.9) 100%) !important;
  border: 1.5px solid rgba(210, 255, 235, 0.85) !important;
  box-shadow: 
    0 14px 30px -4px rgba(16, 185, 129, 0.4),
    0 6px 14px rgba(16, 185, 129, 0.2),
    inset 0 2px 5px rgba(255, 255, 255, 0.9),
    inset 0 -3px 8px rgba(6, 95, 70, 0.4) !important;
  color: #ffffff !important;
}

/* 5. Liquid Glass Button - Clear Water Transparent */
.muie-liquid-clear,
.elementor-button.muie-liquid-clear {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(245, 250, 255, 0.35) 60%, rgba(220, 235, 255, 0.2) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 
    0 14px 28px -4px rgba(100, 150, 220, 0.16),
    0 4px 10px rgba(0, 0, 0, 0.05),
    inset 0 2px 4px rgba(255, 255, 255, 1),
    inset 0 -2px 6px rgba(100, 150, 250, 0.15) !important;
  color: #0b132b !important;
}

/* Chromatic Aberration Dispersion Flare */
.muie-prismatic-corner {
  position: relative;
  overflow: hidden;
}

.muie-prismatic-corner::after {
  content: '';
  position: absolute;
  bottom: -15px;
  right: -15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.7) 0%, rgba(236, 72, 153, 0.5) 40%, rgba(245, 158, 11, 0.6) 70%, transparent 100%);
  filter: blur(8px);
  pointer-events: none;
}

/* Large Liquid Glass Card & Section (Image 3 Floating Slab Style) */
.muie-liquid-slab,
.elementor-element.muie-liquid-slab,
.elementor-container.muie-liquid-slab {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(240, 245, 255, 0.15) 100%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 28px !important;
  box-shadow: 
    0 24px 60px -8px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.04),
    inset 0 2px 4px rgba(255, 255, 255, 0.95),
    inset 0 -3px 8px rgba(0, 0, 0, 0.05) !important;
  position: relative;
}

/* Search Capsule & Switch */
.muie-liquid-search {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 9999px;
  box-shadow: 
    0 12px 28px -4px rgba(0, 0, 0, 0.08),
    inset 0 2px 4px rgba(255, 255, 255, 0.95);
  padding: 4px 6px 4px 16px;
}

.muie-liquid-toggle-track {
  width: 58px;
  height: 32px;
  border-radius: 9999px;
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 
    0 8px 18px rgba(16, 185, 129, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.muie-liquid-toggle-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: 1.5px;
  right: 2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 1);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==========================================================================
   2. ELEMENTOR CONTAINER, COLUMN & WIDGET UTILITIES
   ========================================================================== */
.muie-glass,
.muie-glass-subtle,
.elementor-element.muie-glass,
.elementor-element.muie-glass-subtle {
  background: var(--muie-glass-white-bg) !important;
  backdrop-filter: blur(var(--muie-glass-subtle-blur)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--muie-glass-subtle-blur)) saturate(160%) !important;
  border: 1px solid var(--muie-glass-white-border) !important;
  box-shadow: 0 4px 20px -2px rgba(11, 19, 43, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  border-radius: 14px;
  color: #0b132b;
  transition: transform var(--muie-trans-fast), box-shadow var(--muie-trans-fast);
}

.muie-navy-glass,
.elementor-element.muie-navy-glass {
  background: var(--muie-glass-navy-bg) !important;
  backdrop-filter: blur(var(--muie-glass-subtle-blur)) !important;
  -webkit-backdrop-filter: blur(var(--muie-glass-subtle-blur)) !important;
  border: 1px solid var(--muie-glass-navy-border) !important;
  box-shadow: 0 6px 24px -2px rgba(11, 19, 43, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-radius: 14px;
  color: #ffffff;
  transition: transform var(--muie-trans-fast), box-shadow var(--muie-trans-fast);
}

.muie-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Padding & Radius Helpers */
.muie-p-none { padding: 0 !important; }
.muie-p-sm   { padding: 0.75rem !important; }
.muie-p-md   { padding: 1.5rem !important; }
.muie-p-lg   { padding: 2rem !important; }

/* Astra Theme Safe Rules */
.ast-main-header-wrap,
.ast-primary-header-bar,
.main-navigation,
.ast-header-break-point .main-header-bar-navigation {
  z-index: 100 !important;
}

/* Native Form Protection */
form input[type="text"],
form input[type="email"],
form textarea,
form select {
  font-family: inherit;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0b132b !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  box-shadow: none !important;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .muie-liquid-pill:hover,
  .muie-tilt {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}