/* Whyrun - ShoeFinder ("Trova la tua scarpa ideale") - colori Whyrun, sfondo fotografico */

.shoefinder-wizard {
  /* limite ragionevole per non stare attaccati ai bordi del container del tema
     (che è molto largo), ma senza restringerlo due volte come prima */
  max-width: 1300px;
  margin: 56px auto 100px;
  text-align: center;
  font-family: "Formular", Arial, sans-serif;
}

/* Riserva lo spazio verticale di uno step "medio" (domande con le card),
   così sf-progress sta sempre nello stesso punto dallo step 2 in poi.
   La landing (step 1) è più alta per via della foto: min-height è un minimo,
   non un massimo, quindi lì il contenitore cresce e basta - resta un caso a parte.
   Nessun centraggio: il contenuto resta allineato in alto come prima. */
.sf-steps {
  min-height: 474px;
}

@media (max-width: 767px) {
  .sf-steps {
    min-height: 0;
  }
}

.sf-step {
  display: none;
}

.sf-step.sf-step--active {
  display: block;
}

/* STEP 1 - landing: titolo orizzontale in alto, testo+bottone a sinistra, foto scarpa un filo sotto a destra */
.sf-step--intro {
  text-align: left;
}

.sf-intro {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}

.sf-intro__text {
  flex: 0 1 380px;
  max-width: 380px;
  height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sf-intro__image {
  flex: 0 0 auto;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-intro__image img {
  height: 100%;
  width: auto;
  max-width: 100%;
}

.sf-title {
  font-family: "Formular", Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.1;
  margin: 0 0 12px;
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
}

.sf-title--intro {
  /* ora il titolo sta nella colonna di testo (380px), non più a piena larghezza */
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  margin: 0 0 24px;
}

.sf-subtitle {
  font-family: "Formular", Arial, sans-serif;
  font-size: 1.2rem;
  color: #333;
  margin: 0 0 36px;
}

.sf-lead {
  font-size: 1.15rem;
  color: #333;
  margin-bottom: 16px;
}

.sf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  font-family: "Formular", Arial, sans-serif;
  border: 2px solid #E84872;
  background: #E84872;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  padding: 0 24px;
  border-radius: 0;
  cursor: pointer;
  transition: opacity 0.2s;
}

.sf-btn:hover {
  opacity: 0.85;
}

.sf-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* .sf-btn è display:flex con width:fit-content: per restare centrato negli
   step centrati (tutti tranne la landing) serve margin:auto esplicito */
#sf-show-results {
  margin: 0 auto;
}

.sf-btn--outline {
  background: transparent;
  color: #E84872;
}

.sf-options {
  display: grid;
  gap: 24px;
  margin: 0 auto;
  max-width: 900px;
}

.sf-options--2 { grid-template-columns: repeat(2, minmax(200px, 1fr)); max-width: 560px; }
.sf-options--3 { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.sf-options--4 { grid-template-columns: repeat(4, minmax(160px, 1fr)); }

@media (max-width: 767px) {
  .sf-options--2,
  .sf-options--3,
  .sf-options--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .sf-intro {
    flex-direction: column;
    align-items: center;
  }

  .sf-intro__text,
  .sf-intro__image {
    height: auto;
  }
}

.sf-card {
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sf-card img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

.sf-card span {
  font-family: "Formular", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 1.05rem;
}

.sf-card:hover {
  border-color: #E84872;
}

.sf-choice--selected {
  border-color: #E84872;
  box-shadow: 0 0 0 1px #E84872;
}

.sf-recap {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  max-width: 900px;
  margin: 0 auto 32px;
  overflow: hidden;
}

.sf-recap__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #eee;
}

.sf-recap__row:last-child {
  border-bottom: none;
}

.sf-recap__cell {
  padding: 16px 24px;
  text-align: left;
  border-left: 1px solid #eee;
}

.sf-recap__cell:first-child {
  border-left: none;
}

.sf-recap__label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}

.sf-recap__value {
  display: block;
  font-family: "Formular", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
}

.sf-recap__warning {
  color: #b00020;
  font-weight: 600;
}

.sf-recap__redo {
  /* .sf-btn è display:flex con width:fit-content: senza margin:auto esplicito
     resta allineato a sinistra invece che centrato */
  margin: 8px auto 0;
}

.sf-progress {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 56px 0 0;
  padding: 0;
  flex-wrap: wrap;
}

.sf-progress li {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.sf-progress__dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Formular", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #000;
  flex-shrink: 0;
}

.sf-progress li.active .sf-progress__dot,
.sf-progress li.done .sf-progress__dot {
  background: #E84872;
  color: #fff;
}

.sf-progress li:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 68px;
  height: 2px;
  background: #ddd;
  margin: 0 10px;
}

.sf-progress li.done:not(:last-child)::after {
  background: #E84872;
}

@media (max-width: 767px) {
  .sf-progress li:not(:last-child)::after {
    width: 18px;
    margin: 0 4px;
  }
}

/* Riepilogo mostrato in cima alla pagina risultati */
.sf-recap--results {
  margin-top: 24px;
}

/* Il titolo "La tua scarpa ideale" nella pagina risultati usa di default lo
   stile generico del tema (font diverso, allineato a sinistra). Qui lo
   riportiamo in stile Formular centrato, coerente col resto dello
   shoefinder. Scoperto per body#shoesresult per non toccare le altre pagine
   che riusano lo stesso componente page-title-section. */
body#shoesresult .page-title-section {
  font-family: "Formular", Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
}

/* ---------- Whyrun: sfondo fotografico a tutta larghezza + landing centrata ---------- */

body#shoesfinder {
  overflow-x: hidden;
}

.shoefinder-wizard {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  left: 50%;
  margin: 0 0 0 -50vw;
  padding: 50px 20px 100px;
  color: #000;
  background: url("../img/shoefinder/fondo_ricerca_scarpa_1.jpg") center bottom / cover no-repeat;
}

@media (max-width: 767px) {
  .shoefinder-wizard {
    padding: 40px 16px 64px;
  }
}

.sf-title {
  font-weight: 400;
  letter-spacing: 0.02em;
}

.sf-step--intro {
  text-align: center;
}

.sf-intro {
  display: block;
}

.sf-intro__text {
  flex: none;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  align-items: center;
}

.sf-intro__icon {
  display: block;
  margin: 0 auto 32px;
  color: #E84872;
}

.sf-intro__text .sf-btn {
  margin: 24px auto 0;
}

.sf-lead,
.sf-subtitle {
  color: #000;
}

/* Pagina risultati senza prodotti: il pulsante "Torna alla Home" usa .btn-primary del tema
   (verde Sportland, blu al passaggio del mouse). Qui lo portiamo ai colori Whyrun,
   solo per questo blocco, ridefinendo le variabili Bootstrap del pulsante. */
body#shoesresult .page-content--not-found .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #E84872;
  --bs-btn-border-color: #E84872;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #C93A62;
  --bs-btn-hover-border-color: #C93A62;
  --bs-btn-focus-shadow-rgb: 232, 72, 114;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #B0335A;
  --bs-btn-active-border-color: #B0335A;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #E84872;
  --bs-btn-disabled-border-color: #E84872;
  border-radius: 0;
  font-family: "Formular", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}