/* ==========================================================================
   Sri Venkata Naturals - Global Frontend Stylesheet
   ========================================================================== */

/* 1. Google Material Symbols Outlined Configuration */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.material-symbols-outlined.fill-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* 2. Inverted Glass Blur Green Navigation Dock */
.nav-dock-green {
  background: rgba(10, 48, 18, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 20px 45px -10px rgba(0, 30, 10, 0.5), 0 0 25px rgba(74, 222, 128, 0.2);
}

/* Dock Item macOS-style Fish-eye & Hover Physics */
.dock-item {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.dock-item:hover {
  transform: translateY(-6px) scale(1.12);
}

.dock-item:active {
  transform: translateY(-2px) scale(0.98);
}

/* 3. Glassmorphism Panels & Surface Treatments */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(27, 94, 32, 0.08);
  box-shadow: 0 8px 24px -4px rgba(27, 94, 32, 0.04);
}

.frosted-glass {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-input {
  background: #ffffff;
  border: 1px solid rgba(27, 94, 32, 0.16);
  transition: all 0.2s ease;
}

.glass-input:focus {
  outline: none;
  border-color: #1b5e20;
  box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.12);
}

.active-pill {
  background: rgba(27, 94, 32, 0.08);
  border-color: #1b5e20;
}

/* 4. Elegant Scrollbar Utilities */
.no-scrollbar::-webkit-scrollbar,
.custom-scroll-hide::-webkit-scrollbar {
  display: none;
}

.no-scrollbar,
.custom-scroll-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.custom-scrollbar::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f4ef;
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #c0c9bb;
  border-radius: 8px;
}

/* 5. Custom Range Slider */
.custom-range-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1b5e20;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}