/* Tyresworld - Size Finder
   Usa i token del child theme. Nessun colore hardcoded: se cambia il logo,
   cambia il widget. Fallback per l'uso su temi diversi. */

.tw-sf {
  --sf-ink: var(--tw-ink, #1C1C1C);
  --sf-red: var(--tw-red, #E4121A);
  --sf-border: var(--tw-border, #E3E6EA);
  --sf-alt: var(--tw-bg-alt, #F6F7F8);
  --sf-radius: var(--tw-radius-lg, 10px);

  background: #fff;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  overflow: hidden;
  margin: 1.5rem 0;
}

.tw-sf__flag { margin: 0; }

.tw-sf__inner { padding: 1.25rem 1.25rem 1.5rem; }

.tw-sf__title {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
  color: var(--sf-ink);
}

/* mobile-first: visuale sopra, campi sotto */
.tw-sf__grid { display: grid; gap: 1rem; }

/* ---------- visuale ---------- */

.tw-sf__visual {
  position: relative;
  margin: 0;
  max-width: 420px;
  width: 100%;
  justify-self: center;
}

.tw-sf__img { display: block; width: 100%; height: auto; }

.tw-sf__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tw-sf__size {
  fill: #fff;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: .5px;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .35);
  stroke-width: 3px;
  font-family: var(--bs-body-font-family, system-ui, sans-serif);
}

/* ---------- campi ---------- */

.tw-sf__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.tw-sf__label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--sf-ink);
  margin-bottom: .2rem;
}

.tw-sf__opt {
  font-weight: 400;
  color: var(--tw-ink-45, #6B6B6B);
}

.tw-sf__select {
  width: 100%;
  min-height: 44px;              /* target touch */
  border: 1px solid var(--sf-border);
  border-radius: var(--tw-radius, 6px);
  background-color: #fff;
  font-size: 1rem;               /* evita lo zoom automatico su iOS */
}

.tw-sf__select:disabled { background-color: var(--sf-alt); color: #9AA0A6; }

.tw-sf__select:focus-visible {
  outline: 2px solid var(--sf-red);
  outline-offset: 1px;
}

/* ---------- azioni ---------- */

.tw-sf__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
}

.tw-sf__submit { min-height: 46px; padding-inline: 1.4rem; }
.tw-sf__submit:disabled { opacity: .45; }

.tw-sf__count {
  margin: 0;
  font-size: .85rem;
  color: var(--tw-green, #00702B);
  font-weight: 600;
}

.tw-sf__noscript {
  margin: .75rem 0 0;
  font-size: .85rem;
  color: var(--tw-ink-70, #4D4D4D);
}

/* ---------- desktop ---------- */

@media (min-width: 768px) {
  .tw-sf__inner { padding: 1.75rem 2rem 2rem; }

  .tw-sf__grid {
    grid-template-columns: minmax(260px, 400px) 1fr;
    align-items: center;
    gap: 2rem;
  }

  .tw-sf__fields { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .tw-sf__actions { margin-top: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-sf * { transition: none !important; }
}