/* /quiz-page e /quiz-page-imprenditore: pagina di funnel su fondo verde, modulo in una scheda chiara.
 * Valori misurati sul sito di oggi (1440 e 390 px). */
@font-face { font-family: "DM Sans"; font-weight: 300 700; src: url("/static/fonts/ghl/DMSans.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 300 700; src: url("/static/fonts/ghl/Inter.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; src: url("/static/fonts/ghl/Montserrat-700.woff2") format("woff2"); font-display: swap; }

body.funnel { background: #114A43; color: #fff; font-family: "OnestRegular", "Onest", sans-serif; line-height: normal; }

/* Parte alta: immagine di sfondo a tutta larghezza, fino al piede */
.funnel__principale {
  background: #114A43 url("/static/img/quiz-page/67aa2368ec1a0fcdb1877aac-35b01f24.webp") center / cover no-repeat;
  padding: 55px 0 45px;
}
.funnel__logo { display: block; width: 206px; height: 72px; margin: 0 auto; position: relative; left: -5px; }
.funnel__logo img { width: 206px; height: 72px; }
.funnel__testa { max-width: 687px; padding: 0; margin: 47px auto 12px; text-align: center; }
.funnel__testa h1, .funnel__avviso { position: relative; left: -3px; }
.funnel__testa h1 { margin: 0; font: 700 45px/49.5px "OnestBold", sans-serif; color: #fff; }
.funnel__testa h1 .evidenza { font-weight: 900; color: #D8E28C; background: none; padding: 0; }
.funnel__avviso { margin: 20px 0 0; font: 700 25px/27.5px "OnestBold", sans-serif; color: #fff; }
.funnel__avviso .evidenza { font-weight: 900; color: #D8E28C; }
.funnel__avviso a { color: #0b6bcb; text-decoration: none; }
.funnel--imprenditore .funnel__testa { margin-bottom: 32px; }

/* Scheda del modulo */
.funnel__scheda {
  width: 585px; max-width: calc(100% - 20px); margin: 0 auto; padding: 28px 46px 30px;
  background: #f3f7f1; color: #2c3345; border: 2px solid #d7e9de; border-radius: 20px;
}
.funnel__scheda .modulo { display: block; font-family: "DM Sans", sans-serif; }
.funnel__scheda .campo { display: block; margin: 0 0 18px; position: relative; }
.funnel__scheda .campo label { display: block; margin: 0 0 8px; font: 500 17px/30.6px "DM Sans", sans-serif; color: #2c3345; }
.funnel__scheda .campo input, .funnel__scheda .campo select, .funnel__scheda .campo textarea {
  display: block; width: 100%; margin: 0; min-height: 0; box-sizing: border-box;
  padding: 8px 15px 8px 20px; font: 300 14px/21px "DM Sans", sans-serif; color: #2c3345;
  background: #fff; border: 1px solid #acacac; border-radius: 5px; box-shadow: none; outline: none;
}
.funnel--imprenditore .funnel__scheda .campo input, .funnel--imprenditore .funnel__scheda .campo select, .funnel--imprenditore .funnel__scheda .campo textarea { padding-left: 15px; }
.funnel__scheda .campo input::placeholder, .funnel__scheda .campo textarea::placeholder { color: #8c8c8c; opacity: 1; }
.funnel__scheda .campo input:focus, .funnel__scheda .campo select:focus, .funnel__scheda .campo textarea:focus { border-color: #114A43; box-shadow: none; }
.funnel__scheda .campo [aria-invalid="true"] { border-color: #5C1A1A; }
.funnel__scheda .campo[hidden] { display: block; height: 22px; margin: 0; overflow: hidden; visibility: hidden; } /* oggi la seconda tendina nascosta lascia uno spazio di 22 px */
.funnel__scheda .campo:has(textarea) label { margin-bottom: 9px; }
.funnel__scheda .campo textarea { height: 108px; min-height: 108px; resize: vertical; }
/* Telefono: bandierina e freccina imitate in CSS (la libreria del prefisso di GHL non si replica) */
.funnel__scheda .campo input[type="tel"] { line-height: 25.2px; padding-left: 50px; }
.funnel--imprenditore .funnel__scheda .campo input[type="tel"] { padding-left: 45px; }
.campo__tel::before {
  content: ""; position: absolute; left: 9px; bottom: 14.5px; width: 20px; height: 14px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #009246 0 33.4%, #fff 33.4% 66.6%, #ce2b37 66.6%); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12);
}
.campo__tel::after {
  content: ""; position: absolute; left: 33px; bottom: 19px; z-index: 1; pointer-events: none;
  border: 3px solid transparent; border-top: 4px solid #555; border-bottom: 0;
}
/* Email: icona busta */
.funnel__scheda .campo input[type="email"] { padding-left: 36px; }
.campo__email::before {
  content: ""; position: absolute; left: 12px; bottom: 11.5px; width: 16px; height: 16px; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238c8c8c' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='1.5' y='3' width='13' height='10' rx='2'/%3E%3Cpath d='M2 4.5l6 4.5 6-4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Tendina: freccia grigia a destra */
.funnel__scheda .campo select {
  height: 43px; line-height: 25.2px; -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
  padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath d='M0 0h10L5 5z' fill='%23999'/%3E%3C/svg%3E") right 15px center / 10px 5px no-repeat;
}
.funnel__scheda .campo select:invalid { color: #8c8c8c; }
.funnel__scheda .campo select option { color: #2c3345; }
.funnel__scheda .campo__aiuto { margin: 11px 0 0; font: 300 12px/21.6px "Inter", sans-serif; color: #2c3345; }
.funnel__scheda .campo:has(.campo__aiuto) { margin-bottom: 0; }
.funnel__scheda .modulo__errore { margin: 14px 0 0; font: 400 14px/1.4 "DM Sans", sans-serif; color: #5C1A1A; }
.funnel__invia {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; min-height: 0; margin: 37px 0 0; padding: 9px 10px;
  background: #114A43; color: #fff; border: 0; border-radius: 10px; font: 600 18px/32.4px "Inter", sans-serif; text-transform: uppercase; cursor: pointer;
}
.funnel__invia:hover { transform: none; background: #0c3833; }
.funnel__invia svg { width: 18px; height: 18px; }
.funnel__invia[disabled] { opacity: .6; cursor: progress; }

/* Prova sociale */
.funnel__prova { margin: 35px 0 0; padding: 0; text-align: center; }
.funnel__prova img { width: 440px; max-width: calc(100% - 20px); height: auto; margin: 0 auto; }
.funnel--imprenditore .funnel__prova img { width: 275px; }
.funnel__prova p { margin: 10px 0 0; padding: 0 20px; font: 400 16px/20.8px "OnestRegular", sans-serif; color: #fff; }

/* Piede (comune alla thank you) */
.funnel__piede { background: #114A43; color: #fff; padding: 20px 0 0; font-family: "Montserrat", sans-serif; }
.funnel__piede-riga { width: 1140px; max-width: calc(100% - 20px); margin: 0 auto; padding: 0; min-height: 140px; display: grid; grid-template-columns: 380px 535px auto; align-items: center; justify-items: start; text-align: left; }
.funnel__piede-riga > a img { width: 150px; height: 52px; }
.funnel__piede-link a { display: inline; color: #D8E28C; font: 700 15px/19.5px "Montserrat", sans-serif; text-decoration: none; }
.funnel__piede-link > a { display: block; }
.funnel__piede-link p { margin: 19.5px 0 0; font: 700 15px/19.5px "Montserrat", sans-serif; color: #D8E28C; }
.funnel__social { display: flex; gap: 32px; }
.funnel__social a { display: block; width: 20px; height: 20px; min-width: 0; min-height: 0; }
.funnel__social img { width: 20px; height: 20px; }
.funnel__copy { width: 1160px; max-width: calc(100% - 20px); margin: 37px auto 0; padding: 0; text-align: center; font: 400 10px/15px "OnestRegular", sans-serif; color: #fff; opacity: 1; }
.funnel__copy button { display: inline; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

@media (max-width: 720px) {
  .funnel__principale { padding: 22px 0 44px; }
  .funnel__testa { max-width: 350px; margin: 34px auto 12px; }
  .funnel--imprenditore .funnel__testa { margin-bottom: 32px; }
  .funnel__testa h1, .funnel__avviso { left: 0; }
  .funnel__testa h1 { font-size: 28px; line-height: 30.8px; }
  .funnel__avviso { font-size: 20px; line-height: 22px; }
  .funnel__scheda { padding: 13px 31px 14px; }
  .funnel__prova { margin-top: 36px; }
  .funnel__prova img { width: 330px; height: 55px; object-fit: contain; }
  .funnel--imprenditore .funnel__prova img { width: 275px; }
  .funnel__prova p { margin-top: 0; font-size: 15px; line-height: 19.5px; }
  .funnel__piede { padding-top: 55px; }
  .funnel__piede-riga { display: block; min-height: 0; text-align: center; }
  .funnel__piede-riga > a { display: block; width: 150px; margin: 0 auto; }
  .funnel__piede-link { width: 100%; margin-top: 31px; }
  .funnel__social { justify-content: center; margin-top: 55px; }
  .funnel__copy { width: auto; max-width: 370px; margin-top: 83px; font-size: 9px; line-height: 13.5px; }
}

/* sul sito di oggi questi testi chiari su fondo scuro sono resi più sottili */
.funnel__prova p, .funnel__copy { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }