/* Configuratore della stima (mobile first: una colonna di scelte sul
   telefono, più colonne quando c'è spazio) */

.configurator {
  background: var(--carta);
  border-radius: 4px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--s-4);
}

.configurator__title {
  font-size: var(--t-h3);
  margin: 0;
}

.configurator__step {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.configurator__step legend {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0;
  margin-bottom: var(--s-2);
  font-weight: 600;
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: var(--imposta);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.9rem;
}

.service-picker {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  gap: 0.6rem;
}

.service-picker__item {
  position: relative;
}

.service-picker__input,
.size-steps__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.service-picker__label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  align-items: center;
  height: 100%;
  padding: 0.85rem 0.9rem;
  border: 1.5px solid var(--linea);
  border-radius: 4px;
  background: var(--nebbia);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}

.service-picker__label:hover {
  border-color: rgba(47, 93, 62, 0.5);
}

.service-picker__icon {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  color: var(--imposta);
}

.service-picker__title {
  font-weight: 600;
  line-height: 1.25;
}

.service-picker__price {
  grid-column: 2;
  font-size: var(--t-small);
  color: var(--granito);
}

.service-picker__check {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(27, 42, 33, 0.3);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: transparent;
}

.service-picker__input:checked + .service-picker__label {
  border-color: var(--imposta);
  background: color-mix(in srgb, var(--imposta) 9%, var(--carta));
}

.service-picker__input:checked + .service-picker__label .service-picker__check {
  background: var(--imposta);
  border-color: var(--imposta);
  color: #fff;
}

.service-picker__input:focus-visible + .service-picker__label,
.size-steps__input:focus-visible + .size-steps__label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.size-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.size-steps__label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5em 1.3em;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}

.size-steps__label:hover {
  border-color: rgba(47, 93, 62, 0.5);
}

.size-steps__input:checked + .size-steps__label {
  background: var(--imposta);
  border-color: var(--imposta);
  color: #fff;
}

.size-steps__desc {
  margin: var(--s-1) 0 0;
  font-size: var(--t-small);
  color: var(--granito);
}

.estimate-panel {
  padding: var(--s-3);
  background: var(--bosco);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
}

.estimate-panel[hidden] {
  display: none;
}

.estimate-panel__label {
  margin: 0;
  font-size: var(--t-small);
}

.estimate-panel__value {
  margin: 0.1em 0 var(--s-1);
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: 1.1;
  color: var(--sera);
  font-variant-numeric: tabular-nums;
}

.estimate-panel__note {
  margin: 0;
  font-size: var(--t-small);
}

.estimate-empty {
  margin: 0;
  color: var(--granito);
}

.estimate-empty[hidden] {
  display: none;
}

.configurator [data-configuratore-submit] {
  width: 100%;
}

@media (min-width: 640px) {
  .configurator [data-configuratore-submit] {
    width: auto;
    justify-self: start;
  }
}

.configurator [data-configuratore-submit][aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}