/* ========================================
   Custom Styles & Utilities
   ======================================== */

/* CSS Custom Properties (Variables) */
:root {
  font-size: 16px;
  --ultra-large: calc(50px + (155 - 50) * (100vw - 320px) / (1920 - 320));
  --h1: calc(40px + (48 - 19) * (100vw - 320px) / (1920 - 320));
  --h2: calc(24px + (40 - 16) * (100vw - 320px) / (1920 - 320));
  --h3: calc(16px + (24 - 16) * (100vw - 320px) / (1920 - 320));
  --p: calc(15px + (20 - 16) * (100vw - 320px) / (1920 - 320));
  --p-tiny: calc(14px + (16 - 14) * (100vw - 320px) / (1920 - 320));
  --footer: calc(10px + (14 - 10) * (100vw - 320px) / (1920 - 320));
}

/* Typography Classes */
.ms-ultra-large {
  font-size: var(--ultra-large);
  line-height: 1;
}

.ms-h1 {
  font-size: var(--h1);
  line-height: 1.1;
}

.ms-h2 {
  font-size: var(--h2);
  line-height: 1.3;
}

.ms-h3 {
  font-size: var(--h3);
  line-height: 1.3;
}

.ms-p {
  font-size: var(--p);
  line-height: 1.2;
}

.ms-p-tiny {
  font-size: var(--p-tiny);
  line-height: 1.2;
}

.ms-footer {
  font-size: var(--footer);
  line-height: 1;
}

/* Layout Utilities */
html, body {
  max-width: 100vw;
}

/* Slider Customization */
.w-slider-dot.w-active {
  background-color: #fff;
  width: 1.9rem !important;
  opacity: 1;
}

.w-slider-dot {
  width: 0.8rem !important;
  height: 0.35rem !important;
  border-radius: 2px;
  opacity: 0.5;
}

/* Form Elements */
select { 
  appearance: none !important; 
  -webkit-appearance: none !important; 
  -moz-appearance: none !important; 
}