/* =============================================
   Tramos de cantidad — SDI
   Filas seleccionables de la caja de compra de la ficha.
   ============================================= */

.sdiqd-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

/* Cada tramo es un botón, así que hay que desandar los estilos de botón del
   tema y dejarlo como una fila de formulario. */
.sdiqd-tier {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "radio units saving price";
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  line-height: 1.3;
  color: #502c1e;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.sdiqd-tier:hover {
  border-color: #2ad2c9;
}

.sdiqd-tier.is-selected {
  border-color: #2ad2c9;
}

/* Radio dibujado a mano: no hay <input>, la selección la lleva el JS y se
   refleja en aria-pressed. */
.sdiqd-tier-radio {
  grid-area: radio;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid #c9c9c9;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.sdiqd-tier.is-selected .sdiqd-tier-radio {
  border: 5px solid #2ad2c9;
}

.sdiqd-tier-units {
  grid-area: units;
  font-weight: 600;
  white-space: nowrap;
}

.sdiqd-tier-saving {
  grid-area: saving;
  font-size: 13px;
  color: #d0342c;
  white-space: nowrap;
}

/* El precio y el precio unitario comparten celda, apilados a la derecha, para
   que las cifras de todos los tramos queden alineadas entre sí. */
.sdiqd-tier-price {
  grid-area: price;
  justify-self: end;
  font-weight: 700;
  white-space: nowrap;
}

.sdiqd-tier-per-unit {
  grid-area: price;
  grid-row: 2;
  justify-self: end;
  font-size: 12px;
  color: #8c8c8c;
  white-space: nowrap;
}

/* Aviso de unidades: dorado, como en el diseño. */
.sdiqd-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #B39B80;
}

@media (max-width: 480px) {
  /* En pantallas estrechas el ahorro y el precio no caben en la misma línea. */
  .sdiqd-tier {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "radio units"
      ".     saving"
      ".     price";
  }

  .sdiqd-tier-price,
  .sdiqd-tier-per-unit {
    justify-self: start;
  }

  .sdiqd-tier-per-unit {
    grid-area: price;
    grid-row: auto;
  }
}