/* AURA COFFEE ROASTERS — Design System & Custom Components */

:root {
  --color-obsidian: #0c0a09;
  --color-amber-primary: #f59e0b;
  --color-amber-hover: #fbbf24;
  --color-amber-glow: rgba(245, 158, 11, 0.25);
  --glass-bg: rgba(28, 25, 23, 0.65);
  --glass-border: rgba(245, 158, 11, 0.15);
  --glass-border-hover: rgba(245, 158, 11, 0.4);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0c0a09;
}
::-webkit-scrollbar-thumb {
  background: #292524;
  border-radius: 9999px;
  border: 2px solid #0c0a09;
}
::-webkit-scrollbar-thumb:hover {
  background: #f59e0b;
}

/* Base Body Styles */
body {
  background-color: var(--color-obsidian);
  color: #f5f5f4;
  overflow-x: hidden;
}

/* Custom Range Input Styling for Subscription Calculator */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #292524;
  border-radius: 6px;
  outline: none;
  transition: background 0.2s;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f59e0b;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
  border: 2px solid #0c0a09;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.85), 0 3px 6px rgba(0, 0, 0, 0.6);
}

input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f59e0b;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
  border: 2px solid #0c0a09;
}

/* Calculator Segmented Control Active State */
.calc-btn {
  transition: all 0.2s ease;
  user-select: none;
}

.calc-btn.active {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: #f59e0b !important;
  color: #fde68a !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

/* Comparison Split Slider */
#comparison-slider {
  touch-action: none;
  cursor: col-resize;
}

/* Details summary chevron */
details > summary::-webkit-details-marker {
  display: none;
}

/* Selection */
::selection {
  background: #f59e0b;
  color: #0c0a09;
}