/* ==========================================================================
   CookPal Survey Stylesheet
   Segmented Progress Bar Satisfaction Meters & Custom Recommendation Slider
   Zero Unicode Emojis - 100% Vector SVG & Modern CSS
   ========================================================================== */

/* ==========================================================================
   1. Segmented Progress Bar Satisfaction Meter (Section 2)
   ========================================================================== */
.progress-meter-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px !important;
  background-color: #F1F5F9 !important;
  border-radius: 16px !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s ease !important;
}

.progress-meter-container:hover {
  border-color: #CBD5E1 !important;
  background-color: #E8EEF5 !important;
}

.progress-bar-step,
.progress-step-btn {
  flex: 1 1 0% !important;
  height: 26px !important;
  border-radius: 10px !important;
  background-color: #E2E8F0 !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  touch-action: manipulation !important;
}

@media (min-width: 640px) {
  .progress-bar-step,
  .progress-step-btn {
    height: 30px !important;
    border-radius: 12px !important;
  }
}

.progress-bar-step .step-dot,
.progress-step-btn .step-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background-color: #94A3B8 !important;
  transition: all 0.2s ease !important;
  pointer-events: none !important;
}

.progress-bar-step:hover,
.progress-step-btn:hover {
  transform: translateY(-2px) scale(1.04) !important;
}

/* Theme Accents for Feature Rating Active States */
.progress-bar-step.active-orange,
.progress-step-btn.active-orange {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%) !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4) !important;
}
.progress-bar-step.active-orange .step-dot,
.progress-step-btn.active-orange .step-dot {
  background-color: #FFFFFF !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8) !important;
}

.progress-bar-step.active-emerald,
.progress-step-btn.active-emerald {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}
.progress-bar-step.active-emerald .step-dot,
.progress-step-btn.active-emerald .step-dot {
  background-color: #FFFFFF !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8) !important;
}

.progress-bar-step.active-blue,
.progress-step-btn.active-blue {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}
.progress-bar-step.active-blue .step-dot,
.progress-step-btn.active-blue .step-dot {
  background-color: #FFFFFF !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8) !important;
}

.progress-bar-step.active-purple,
.progress-step-btn.active-purple {
  background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%) !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4) !important;
}
.progress-bar-step.active-purple .step-dot,
.progress-step-btn.active-purple .step-dot {
  background-color: #FFFFFF !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8) !important;
}

.progress-bar-step.preview-active,
.progress-step-btn.preview-active {
  opacity: 0.85 !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   2. Radio Card Interactive Selection
   ========================================================================== */
.radio-card {
  transition: all 0.2s ease;
}

.radio-card:hover {
  border-color: #FB923C;
  box-shadow: 0 4px 12px -2px rgba(249, 115, 22, 0.1);
}

.radio-card.selected {
  background-color: #FFF7ED;
  border-color: #F97316;
  box-shadow: 0 0 0 1.5px #F97316;
}

/* ==========================================================================
   3. Feature Chip Interactive Selection
   ========================================================================== */
.feature-chip {
  transition: all 0.2s ease;
  user-select: none;
}

.feature-chip:hover {
  border-color: #FB923C;
}

.feature-chip.active {
  background-color: #FFF7ED;
  border-color: #F97316;
  color: #C2410C;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
}

/* ==========================================================================
   4. Custom Interactive NPS Recommendation Progress Track & Gauge
   ========================================================================== */
#customNpsTrack {
  position: relative !important;
  width: 100% !important;
  height: 20px !important;
  border-radius: 9999px !important;
  background-color: #E2E8F0 !important;
  border: 1.5px solid #CBD5E1 !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.1) !important;
}

@media (min-width: 640px) {
  #customNpsTrack {
    height: 24px !important;
  }
}

#customNpsFill {
  height: 100% !important;
  border-radius: 9999px !important;
  background: linear-gradient(90deg, #EF4444 0%, #F59E0B 45%, #10B981 85%, #059669 100%) !important;
  transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3) !important;
}

#customNpsThumb {
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-color: #FFFFFF !important;
  border: 3.5px solid #10B981 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3) !important;
  transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

@media (min-width: 640px) {
  #customNpsThumb {
    width: 36px !important;
    height: 36px !important;
    border-width: 4px !important;
  }
}

.custom-nps-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.custom-nps-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 36px !important;
  height: 36px !important;
  cursor: grab !important;
  background: transparent !important;
}

.custom-nps-slider::-webkit-slider-thumb:active {
  cursor: grabbing !important;
}

.custom-nps-slider::-moz-range-thumb {
  width: 36px !important;
  height: 36px !important;
  cursor: grab !important;
  background: transparent !important;
  border: none !important;
}

.nps-tick-btn {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background-color: #CBD5E1 !important;
  border: 2px solid #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  touch-action: manipulation !important;
}

@media (min-width: 640px) {
  .nps-tick-btn {
    width: 18px !important;
    height: 18px !important;
  }
}

.nps-tick-btn:hover {
  transform: scale(1.4) !important;
  background-color: #F97316 !important;
}

.nps-tick-btn.active {
  transform: scale(1.35) !important;
  background-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35) !important;
}

/* ==========================================================================
   5. Toast Notifications
   ========================================================================== */
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background-color: #0F172A;
  color: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.4);
  border: 1px solid #334155;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast.toast-success {
  border-left: 4px solid #10B981;
}

.toast.toast-error {
  border-left: 4px solid #EF4444;
}

.toast.toast-info {
  border-left: 4px solid #3B82F6;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}