.calculator {
  position: relative;
  isolation: isolate;
  background:
    var(--section-fade),
    radial-gradient(ellipse at 92% 18%, #44203a 0, transparent 34%),
    radial-gradient(ellipse at 8% 70%, #2a1829 0, transparent 40%);
}

.calculator-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.calculator-art::before,
.calculator-art::after {
  content: '';
  position: absolute;
  aspect-ratio: 1;
  background: url('./assets/industries/casino-chip.webp') center / contain no-repeat;
}

.calculator-art::before {
  width: clamp(136px, 21vw, 350px);
  top: 2%;
  right: max(-48px, calc((100% - 1580px) / 2));
  transform: rotate(-24deg);
  opacity: .57;
}

.calculator-art::after {
  width: clamp(150px, 24vw, 385px);
  bottom: 3%;
  left: max(-114px, calc((100% - 1680px) / 2));
  transform: rotate(32deg) scaleX(-1);
  filter: hue-rotate(118deg) saturate(.83);
  opacity: .42;
}

.calculator h2 {
  position: relative;
  margin: 0 auto clamp(24px, 4vw, 48px);
  padding-inline: var(--gutter);
  text-align: center;
  text-wrap: balance;
}

.calculator h2::after { content: none; }

.quote-grid {
  display: grid;
  width: min(100% - var(--gutter) * 2, 1110px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(12px, 1.5vw, 24px);
}

#quote-form, .quote-summary {
  min-width: 0;
  padding: clamp(18px, 3.25vw, 42px);
  border-radius: 20px;
  background: #1d141d;
}

#quote-form fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
#quote-form legend { padding: 0; color: var(--ink); font-weight: 750; }
#quote-options > legend { margin-bottom: 18px; font: 750 clamp(1.05rem, 2vw, 1.25rem)/1.25 var(--button-font); }

.quote-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quote-field { display: grid; align-content: end; min-width: 0; }
.quote-field label, .quote-slider label {
  color: var(--rose-light);
  font: 650 .88rem/1.4 var(--button-font);
}

.quote-field label { margin-bottom: 6px; }
.quote-field select {
  width: 100%;
  min-height: 52px;
  padding: 9px 38px 9px 13px;
  appearance: none;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ff93cb' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") right 11px center / 18px no-repeat;
  cursor: pointer;
  transition: background-color .18s;
}

.quote-field select:enabled:hover { background-color: #2a1b29; }
.quote-field select:disabled {
  background-image: none;
  color: var(--muted);
  opacity: 1;
  cursor: default;
}
.quote-field select:focus-visible, #quote-target:focus-visible { outline-offset: 3px; }

.quote-geo { margin-top: 5px; color: var(--muted); font-size: .85rem; }
.quote-geo summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 44px;
  color: var(--rose-light);
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.quote-geo summary::-webkit-details-marker { display: none; }
.quote-geo summary::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-inline: 2px 1px;
  border: solid var(--accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg);
}

.quote-geo[open] summary::before { transform: translateY(-2px) rotate(45deg); }
.quote-geo summary:hover { color: var(--accent-hover); }
.quote-geo dl {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 9px;
  background: var(--field);
}

.quote-geo dl > div { display: grid; grid-template-columns: 46px 1fr; gap: 4px 8px; line-height: 1.4; }
.quote-geo dt { font-weight: 700; color: var(--ink); }

.quote-slider {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.quote-slider-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
}

#quote-target-value {
  color: var(--accent-lime);
  font: 900 clamp(1.65rem, 3vw, 2.4rem)/1 var(--display);
  font-variant-numeric: tabular-nums;
}

#quote-target {
  --quote-progress: 0%;
  --slider-track: linear-gradient(to right, var(--accent-lime) var(--quote-progress), #58354e var(--quote-progress));
  --slider-thumb: var(--accent-lime);
  display: block;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

#quote-target:hover { --slider-thumb: #d7ff7f; }
#quote-target:active { --slider-thumb: var(--ink); }

#quote-target::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 10px;
  background: var(--slider-track);
}

#quote-target::-moz-range-track {
  height: 7px;
  border-radius: 10px;
  background: var(--slider-track);
}

#quote-target::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8.5px;
  border: 2px solid var(--page);
  border-radius: 50%;
  background: var(--slider-thumb);
}

#quote-target::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--page);
  border-radius: 50%;
  background: var(--slider-thumb);
}

.quote-ticks {
  position: relative;
  height: 1.4em;
  color: var(--muted);
  font: 650 .75rem/1.4 var(--button-font);
}

.quote-ticks span { position: absolute; }
.quote-ticks span:nth-child(2) { left: 21.05%; transform: translateX(-50%); }
.quote-ticks span:nth-child(3) { left: 47.37%; transform: translateX(-50%); }
.quote-ticks span:last-child { right: 0; }

.quote-summary {
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 4% 0, #412039 0, transparent 75%), #221623;
}

.quote-summary .quote-market {
  margin-bottom: 16px;
  color: var(--accent-hover);
  font: 720 .84rem/1.4 var(--button-font);
}

.quote-delivery {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 12px;
  padding: 14px 12px;
  border-radius: 10px;
  background: #140e168f;
}

.quote-delivery > div { display: grid; align-content: start; gap: 4px; }
.quote-delivery dt { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.quote-delivery dd {
  font: 900 clamp(1.6rem, 3.3vw, 2.65rem)/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.quote-delivery > div:first-child dd { color: var(--accent-lime); }

.quote-breakdown { margin-top: 4px; font-size: .88rem; }
.quote-breakdown > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 12px;
  padding-block: 9px;
}

.quote-breakdown > div + div { border-top: 1px solid var(--rule); }
.quote-breakdown dd { font-weight: 720; }
.quote-breakdown .quote-price dd { font: 900 clamp(1.9rem, 4vw, 3rem)/1 var(--display); }
.quote-summary .quote-note { margin: 4px 0 16px; font-size: .83rem; }

.quote-cta {
  min-height: 54px;
  margin-top: auto;
  border-radius: 12px;
  font-size: clamp(1.06rem, 1.7vw, 1.24rem);
  -webkit-tap-highlight-color: transparent;
}

.quote-cta .icon { transition: transform .18s; }
.quote-cta:hover .icon { transform: translateX(4px); }
.quote-cta:active { background: var(--accent-lime); }

@media (max-width: 860px) {
  .quote-grid { grid-template-columns: minmax(0, 1fr); max-width: 610px; }
  .calculator-art::before { top: -12px; right: -66px; opacity: .32; }
  .calculator-art::after { bottom: 0; left: -81px; }
}

@media (max-width: 485px) {
  .calculator h2 { font-size: clamp(40px, 10vw, 62px); }
  .quote-fields { column-gap: 8px; }
  .quote-field select { padding-inline: 9px 24px; background-position: right 5px center; background-size: 14px; }
}

@media (max-width: 384px) {
  .quote-fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .quote-field select { padding-inline: 12px 35px; background-position: right 9px center; background-size: 17px; }
}

@media (forced-colors: active) {
  .quote-field select { appearance: auto; border: 1px solid ButtonText; }
  #quote-target { appearance: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-cta .icon, .quote-field select { transition: none; }
  .quote-cta:hover .icon { transform: none; }
}