/* ========================================================================= */
/* SIAPUN - Custom Design System & Utility Styles                           */
/* ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

@layer base {
  html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  body {
    font-family: 'Inter', sans-serif;
    color: #0e1d2c;
    background-color: #F8FAFC;
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
  }
}

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

.material-symbols-outlined.fill-icon {
  font-variation-settings: 'FILL' 1;
}

/* Custom Soft Glow Shadows */
.glow-teal {
  box-shadow: 0 10px 30px -10px rgba(0, 184, 169, 0.35);
}

.glow-blue {
  box-shadow: 0 10px 30px -10px rgba(0, 102, 255, 0.35);
}

/* Custom Slider Styling */
input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* Smooth Accordion Animations */
.faq-content {
  transition: all 0.3s ease-in-out;
}

.faq-icon {
  transition: transform 0.25s ease;
}

/* Modal Transition */
#demo-modal {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}