/* *********************** */
/*    CHECKBOX STYLING     */
/* *********************** */

/* Label base */
#pricingContainer label {
  width: 2.8rem;
  height: 1.8rem;
}

/* Checked state background */
#pricingContainer input:checked+label {
  background: var(--accent);
}

/* Knob / pseudo-element */
#pricingContainer label::after {
  content: '';
  inset: 0.15rem auto auto 0.15rem;
  width: var(--lg);
  height: var(--lg);
  background: var(--white);
  border-radius: 50%;
  transition: transform var(--trans-med);
  position: absolute;
}

/* Move knob when checked */
#pricingContainer input:checked+label::after {
  transform: translateX(1rem);
}

/* Entry amount color when unchecked */
#pricingContainer input:not(:checked)~.entry-amount span {
  color: var(--medium-grey);
}

/* Mobile scaling */
@media (max-width: 48rem) {
  #pricingContainer {
    margin-top: 1rem;
  }
}

/* *********************** */
/*    DROPDOWN STYLING     */
/* *********************** */

/* Model radio button checked state */
input[name="modelSelect"]:checked+label {
  background-color: var(--accent);
}

/* Label background when checked */
.dropdown-container input[type="checkbox"]:checked+label {
  background-color: var(--darkist-grey);
}

/* Arrow image: transition and rotation */
.dropdown-container input[type="checkbox"]+label img {
  transition: transform var(--trans-med) ease;
}

.dropdown-container input[type="checkbox"]:not(:checked)+label img {
  transform: rotate(90deg);
  background-color: var(--medium-grey);
}

/* Dropdown content: slide-down effect */
.dropdown-container .dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--trans-med) ease;
}

.dropdown-container input[type="checkbox"]:checked~.dropdown-content {
  max-height: 1000px;
  /* enough to fit content */
}

/* Odd rows background */
.dropdown-container .spec-item:nth-child(odd) {
  background-color: var(--light-grey);
}

/* *********************** */
/*    SLIDER STYLING     */
/* *********************** */

input[type="range"] {
  accent-color: var(--accent);
}

input[type="range"]:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}