/* Shared homepage and modpack RAM selector. */
.ram-price-calculator {
  --ram-progress: 0%; position: relative; isolation: isolate; overflow: visible;
  margin: 18px 0 16px; padding: 18px 18px 16px; border: 2px solid var(--border);
  background: color-mix(in srgb, var(--panel-2) 82%, var(--bg)); box-shadow: inset 3px 3px rgba(0,0,0,.08);
}
.ram-calculator-content { position: relative; z-index: 2; }
.ram-selection { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.ram-selection label { color: var(--text); font-family: var(--pixel); font-size: .51rem; line-height: 1.5; text-transform: uppercase; }
.ram-selection output { color: var(--fresh-accent-text, var(--accent)); font-family: var(--pixel); font-size: .65rem; }
.ram-price-calculator input[type="range"] {
  width: 100%; height: 10px; margin: 0; appearance: none; border: 2px solid var(--border); border-radius: 0;
  background: linear-gradient(90deg, var(--fresh-action, var(--accent)) 0 var(--ram-progress), var(--bg) var(--ram-progress) 100%); cursor: pointer;
}
.ram-price-calculator input[type="range"]::-webkit-slider-thumb {
  width: 22px; height: 24px; appearance: none; border: 3px solid color-mix(in srgb, var(--text) 48%, var(--border)); border-radius: 0;
  background: var(--panel); box-shadow: 3px 3px 0 var(--vox-shadow, rgba(0,0,0,.2)); cursor: grab;
}
.ram-price-calculator input[type="range"]::-moz-range-thumb {
  width: 18px; height: 20px; border: 3px solid color-mix(in srgb, var(--text) 48%, var(--border)); border-radius: 0;
  background: var(--panel); box-shadow: 3px 3px 0 var(--vox-shadow, rgba(0,0,0,.2)); cursor: grab;
}
.ram-price-calculator input[type="range"]:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 4px; }
.ram-slider-labels { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; color: var(--muted); font-size: .65rem; }
.ram-calculator-total { display: flex; align-items: baseline; gap: 9px; margin: 15px 0 0 !important; }
.ram-calculator-total strong { color: var(--text); font-family: var(--pixel); font-size: .8rem; }
.ram-calculator-total span { color: var(--muted); font-size: .78rem; }