/* =========================================================
   SCROLL TRA SEZIONI FORM
   Target: #form-iscrizione .form-section
   ========================================================= */

html {
  scroll-behavior: smooth;
}

.form-section {
  position: relative;
  scroll-margin-top: 120px;
}

/* Contenitore del bottone inserito via JS subito dopo ogni sezione */
.section-scroll-next {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* Visibile solo per la sezione attiva */
.section-scroll-next.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Bottone */
.section-scroll-next-btn {
  width: 44px;
  height: 44px;
  border: 0;
  outline: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: #1d1d1f;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
  animation: formArrowFloat 2.2s ease-in-out infinite;
}

/* Hover */
.section-scroll-next-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.05);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Active / click */
.section-scroll-next-btn:active {
  transform: scale(0.98);
}

/* Focus accessibile */
.section-scroll-next-btn:focus-visible {
  outline: 3px solid rgba(0, 102, 204, 0.35);
  outline-offset: 3px;
}

/* Icona freccia */
.section-scroll-next-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Animazione leggera */
@keyframes formArrowFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

/* Stato disabled opzionale, se mai servirà */
.section-scroll-next-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  animation: none;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.06);
}

/* =========================================================
   ADATTAMENTO VISIVO ALLE SEZIONI ESISTENTI
   ========================================================= */

/* Piccolo respiro sotto il titolo, se vuoi uniformare il layout */
.form-section-title {
  position: relative;
}

/* Evita che il bottone stia troppo attaccato a sezioni dense */
#form-iscrizione .form-section + .section-scroll-next {
  min-height: 52px;
}

/* Se vuoi un look più morbido sulle card/sezioni */
#form-iscrizione .form-section.even,
#form-iscrizione .form-section.odd {
  border-radius: 4px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767.98px) {
  .form-section {
    scroll-margin-top: 96px;
  }

  .section-scroll-next {
    margin-top: 20px;
  }

  .section-scroll-next-btn {
    width: 42px;
    height: 42px;
  }

  .section-scroll-next-btn svg {
    width: 15px;
    height: 15px;
  }
}

/* =========================================================
   ACCESSIBILITÀ / MOTION REDUCTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .section-scroll-next {
    transition: none;
  }

  .section-scroll-next-btn {
    transition: none;
    animation: none;
  }
}

/* ********************** */
/* scroll to next section */

.form-section {
  scroll-margin-top: 120px;
}

.section-scroll-next {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.section-scroll-next.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.section-scroll-next-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d1d1f;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  animation: formArrowFloat 2.2s ease-in-out infinite;
}

.section-scroll-next-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 1);
}

.section-scroll-next-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes formArrowFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .section-scroll-next,
  .section-scroll-next-btn {
    transition: none;
    animation: none;
  }
}