/*
* ==========================================
* SU MISURA (ricerca-per-moto)
* ==========================================
*
* Il taglio a -10deg e gli angoli 5px/1px sono quelli del marchio
* (.input-search-rounded-brand): qui sono applicati a uno pseudo-elemento
* così il testo resta dritto.
*/
.sm {
  --sm-nero: #000;
  --sm-blu: #009DE0;
  --sm-blu-scuro: #0077AA;
  --sm-alluminio: #8C949B;
  --sm-banco: #EEF1F3;
  --sm-inchiostro: #1D2125;
  --sm-bianco: #fff;
  --sm-taglio: skewX(-10deg);
  --sm-angoli: 5px 1px 5px 1px;
  color: var(--sm-inchiostro);
}

.sm-display {
  font-family: 'Orbitron', sans-serif;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* Hero */
.sm-hero {
  background: var(--sm-nero);
  color: var(--sm-bianco);
  padding: 3rem 0 3.5rem;
  /* il taglio obliquo sporge di qualche px oltre il box */
  overflow-x: clip;
}

.sm-hero-intro {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 .75rem;
  max-width: 38rem;
}

.sm-hero-titolo {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin: 0 0 .5rem;
}

/* Targa: la moto salvata */
.sm-targa {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  padding: .9rem 2rem 1rem 1.75rem;
  margin: 0 0 1.5rem .75rem;
  max-width: calc(100% - 1.5rem);
  font-family: 'Roboto Condensed', sans-serif;
  font-style: normal;
  line-height: 1.2;
}

.sm-targa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 6px solid var(--sm-blu);
  border-radius: var(--sm-angoli);
  background: #15191C;
  transform: var(--sm-taglio);
}

.sm-targa > * {
  position: relative;
}

.sm-targa-marca {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sm-blu);
}

.sm-targa-modello {
  font-size: clamp(2rem, 6vw, 4rem);
  margin: .1rem 0 .4rem;
  overflow-wrap: anywhere;
}

.sm-targa-anno {
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
}

.sm-hero-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
}

.sm-link {
  background: none;
  border: 0;
  padding: .25rem 0;
  color: var(--sm-bianco);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
}

.sm-link:hover {
  color: var(--sm-blu);
}

.sm-link-tenue {
  color: rgba(255, 255, 255, .6);
}

@media (prefers-reduced-motion: no-preference) {
  .sm-targa {
    animation: sm-entra .5s cubic-bezier(.2, .7, .2, 1) both;
  }

  @keyframes sm-entra {
    from { opacity: 0; transform: translateX(-2.5rem); }
    to   { opacity: 1; transform: none; }
  }
}

/* Selettore moto: 3 passi in sequenza */
.sm-selettore {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-top: 1.75rem;
  max-width: 64rem;
}

.sm-passo {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1rem;
  margin: 0;
  min-height: 3.5rem;
}

.sm-passo::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #3A4046;
  border-radius: var(--sm-angoli);
  background: #15191C;
  transform: var(--sm-taglio);
  transition: border-color .15s;
}

.sm-passo:focus-within::before {
  border-color: var(--sm-blu);
}

.sm-passo > * {
  position: relative;
}

.sm-passo-n {
  font-family: 'Orbitron', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--sm-blu);
  width: 1.25rem;
  text-align: center;
}

.sm-passo.is-disattivo .sm-passo-n {
  color: #4A5157;
}

.sm-passo-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.sm-passo-lbl {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.1;
}

.sm-passo select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23009DE0' stroke-width='2'/%3E%3C/svg%3E") no-repeat right center;
  border: 0;
  padding: 0 1.5rem 0 0;
  color: var(--sm-bianco);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  text-overflow: ellipsis;
}

.sm-passo select:disabled {
  cursor: not-allowed;
  color: #6B737A;
}

.sm-passo select option {
  color: var(--sm-inchiostro);
  background: var(--sm-bianco);
}

.sm-vai {
  position: relative;
  border: 0;
  background: none;
  color: var(--sm-bianco);
  font-weight: 700;
  font-size: 1.0625rem;
  min-height: 3.5rem;
  padding: 0 2rem;
  cursor: pointer;
}

.sm-vai::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--sm-angoli);
  background: var(--sm-blu);
  transform: var(--sm-taglio);
  transition: background-color .15s;
}

.sm-vai span {
  position: relative;
}

.sm-vai:hover::before {
  background: var(--sm-blu-scuro);
}

.sm-vai:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, .55);
}

.sm-vai:disabled::before {
  background: #2A3036;
}

.sm-vai:focus-visible,
.sm-link:focus-visible,
.sm-categorie a:focus-visible {
  outline: 2px solid var(--sm-blu);
  outline-offset: 3px;
}

@media (min-width: 992px) {
  .sm-selettore {
    grid-template-columns: 1fr 1.4fr .8fr auto;
    gap: 1rem;
  }
}

.sm-promo {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  max-width: 44rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #2A3036;
}

.sm-promo img {
  width: 96px;
  height: auto;
  flex-shrink: 0;
}

.sm-promo p {
  margin: 0;
  color: rgba(255, 255, 255, .85);
}

.sm-codice {
  color: var(--sm-blu);
  font-weight: 700;
  letter-spacing: .06em;
}

/* Categorie */
.sm-altro {
  background: var(--sm-banco);
  padding: 3rem 0;
  overflow-x: clip;
}


.sm-altro-titolo {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  margin: 0 0 .5rem;
}

.sm-altro p {
  max-width: 40rem;
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
  color: #50585F;
}

.sm-categorie {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sm-categorie a {
  position: relative;
  display: inline-block;
  padding: .6rem 1.25rem;
  color: var(--sm-inchiostro);
  font-weight: 700;
  text-decoration: none;
}

.sm-categorie a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--sm-angoli);
  background: var(--sm-bianco);
  border: 1px solid #D3D8DC;
  transform: var(--sm-taglio);
  transition: background-color .15s, border-color .15s;
}

.sm-categorie a span {
  position: relative;
}

.sm-categorie a:hover {
  color: var(--sm-bianco);
}

.sm-categorie a:hover::before {
  background: var(--sm-inchiostro);
  border-color: var(--sm-inchiostro);
}