/* ==========================================================================
   Form di contatto (Geomarketing Kairos) - pannello laterale
   Il form non sta piu' nell'hero: una linguetta rossa resta sempre agganciata
   al bordo destro della finestra e al click fa scorrere dentro un pannello.
   Il pannello si muove con "right" e NON con transform: un antenato con
   transform diventa il blocco contenitore dei discendenti in position:fixed,
   e il menu dei prefissi (fixed) non si posizionerebbe piu' sulla viewport.
   Le classi .kairos-hero-form* restano quelle di prima: le usano gli script.
   ========================================================================== */

/* la validazione Bootstrap usa il rosso di default (#dc3545): lo allineiamo
   al rosso del brand cosi' anche gli stati di errore restano #cd1719 */
:root {
    --bs-form-invalid-color: #cd1719;
    --bs-form-invalid-border-color: #cd1719;
}


/* --- campi -------------------------------------------------------------- */
.kairos-hero-form .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--kairos-ink);
}
.kairos-hero-form .form-control {
    padding: 9px 12px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--kairos-ink);
    background-color: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    box-shadow: none;
}
.kairos-hero-form .form-control::placeholder {
    color: #9a9a9a;
}
.kairos-hero-form .form-control:focus {
    border-color: var(--kairos-red);
    box-shadow: 0 0 0 3px rgba(205, 23, 25, 0.15);
}
.kairos-hero-form textarea.form-control {
    min-height: 82px;
    resize: vertical;
}
/* il tema applica "input { padding: 12px 25px; width: 100% }" a qualunque
   input: sulla checkbox diventava un rettangolo da 52x26px */
.kairos-hero-form__check {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}
.kairos-hero-form .form-check-input {
    flex: 0 0 auto;
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin: 1px 0 0;
    padding: 0;
    border: 1px solid #b9b9b9;
    border-radius: 3px;
    cursor: pointer;
}
.kairos-hero-form__check .form-check-label {
    flex: 1;
    margin: 0;
    cursor: pointer;
}
.kairos-hero-form__check .invalid-feedback {
    flex: 0 0 100%;
    margin-top: 0;
}
.kairos-hero-form .form-check-input:checked {
    background-color: var(--kairos-red);
    border-color: var(--kairos-red);
}
.kairos-hero-form .form-check-input:focus {
    border-color: var(--kairos-red);
    box-shadow: 0 0 0 3px rgba(205, 23, 25, 0.15);
}
.kairos-hero-form .form-check-label {
    font-size: 13px;
    line-height: 1.35;
    color: #4a4a4a;
}
.kairos-hero-form .invalid-feedback {
    font-size: 12px;
    line-height: 1.3;
}

/* --- bottone ------------------------------------------------------------ */
.kairos-hero-form__submit {
    display: block;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    border-radius: 4px;
    background-color: var(--kairos-red);
    color: #fff;
    font-family: var(--kairos-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    transition: background-color 0.3s;
}
.kairos-hero-form__submit:hover,
.kairos-hero-form__submit:focus-visible {
    background-color: #cd1719;
    color: #fff;
}

/* ==========================================================================
   Pannello laterale e linguetta
   ========================================================================== */
.kairos-drawer {
    /* il pannello lascia sempre scoperta la linguetta, che da aperto
       serve anche a richiuderlo */
    --kairos-drawer-w: min(440px, calc(100vw - 44px));
}
/* velo scuro dietro il pannello aperto: cliccandolo si chiude */
.kairos-drawer__velo {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background-color: rgba(18, 18, 20, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.kairos-drawer.is-aperto .kairos-drawer__velo {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s;
}
.kairos-drawer__corpo {
    position: fixed;
    top: 0;
    bottom: 0;
    right: calc(-1 * var(--kairos-drawer-w));
    z-index: 1200;
    width: var(--kairos-drawer-w);
    transition: right 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kairos-drawer.is-aperto .kairos-drawer__corpo {
    right: 0;
}
/* la linguetta sporge a sinistra del pannello: da chiuso e' l'unica parte
   visibile, attaccata al bordo destro della finestra */
.kairos-drawer__linguetta {
    position: absolute;
    top: 50%;
    right: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    /* 24px di icona + 26px sopra e sotto */
    height: 76px;
    margin-top: -38px;
    padding: 0;
    border: 0;
    background-color: var(--kairos-red);
    color: #fff;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    /* a riposo e' un po' trasparente per non coprire del tutto la pagina:
       torna piena al passaggio del mouse, col focus e a pannello aperto */
    opacity: 0.75;
    transition: background-color 0.3s, opacity 0.3s;
}
.kairos-drawer__linguetta:hover,
.kairos-drawer__linguetta:focus-visible,
.kairos-drawer.is-aperto .kairos-drawer__linguetta {
    opacity: 1;
}
.kairos-drawer__linguetta svg {
    display: block;
    flex: 0 0 auto;
}
/* al passaggio resta il rosso pieno dei bottoni della pagina («Guarda il
   video», «Invia»): cambia solo l'opacità, niente rosso scuro */
.kairos-drawer__linguetta:hover,
.kairos-drawer__linguetta:focus-visible {
    background-color: #cd1719;
}
.kairos-drawer__linguetta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -5px;
}
.kairos-drawer__pannello {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.kairos-drawer__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 0;
    border-top: 4px solid var(--kairos-red);
}
.kairos-drawer__titolo {
    margin: 0;
    font-family: var(--kairos-font);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kairos-ink);
}
.kairos-drawer__chiudi {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kairos-ink);
    cursor: pointer;
}
.kairos-drawer__chiudi:hover,
.kairos-drawer__chiudi:focus-visible {
    color: var(--kairos-red);
}
/* dentro il pannello la card non galleggia piu' sulla foto */
.kairos-drawer .kairos-hero-form__card {
    background-color: #fff;
    box-shadow: none;
    padding: 18px 26px 30px;
}
/* il menu dei prefissi deve stare sopra il pannello */
.kairos-drawer .kairos-prefix__list {
    z-index: 1300;
}
/* pagina ferma sotto il pannello aperto */
html.kairos-drawer-aperto,
html.kairos-drawer-aperto body {
    overflow: hidden;
}
@media (max-width: 575px) {
    .kairos-drawer {
        --kairos-drawer-w: calc(100vw - 38px);
    }
    .kairos-drawer__linguetta {
        width: 38px;
        height: 64px;
        margin-top: -32px;
    }
    .kairos-drawer__linguetta svg {
        width: 20px;
        height: 20px;
    }
    .kairos-drawer__testa {
        padding: 18px 20px 0;
    }
    .kairos-drawer .kairos-hero-form__card {
        padding: 14px 20px 26px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .kairos-drawer__corpo,
    .kairos-drawer__velo {
        transition: none;
    }
}

/* --- honeypot antispam: fuori schermo, non "display:none" (alcuni bot
       riconoscono display:none e saltano il campo) ------------------------ */
.kairos-hero-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- esito dell'invio ---------------------------------------------------- */
.kairos-hero-form__status {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13.5px;
    line-height: 1.4;
}
.kairos-hero-form__status.is-ok {
    background-color: #e7f4ec;
    border: 1px solid #b6ddc6;
    color: #1c6b3c;
}
.kairos-hero-form__status.is-error {
    background-color: #fdeaea;
    border: 1px solid #f2bdbd;
    color: #cd1719;
}
.kairos-hero-form__submit[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* --- etichetta "(facoltativo)" ------------------------------------------- */
.kairos-hero-form__opt {
    font-weight: 400;
    color: #8a8a8a;
}

/* --- cellulare: prefisso internazionale + numero -------------------------
   il <select> si dimensiona sul contenuto ma non oltre 132px, cosi' il numero
   tiene sempre almeno meta' riga anche nella card stretta del desktop */
.kairos-hero-form__phone {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* --- dropdown dei prefissi ------------------------------------------------
   sostituisce il <select> nativo, il cui popup e' disegnato dal sistema
   operativo: non stilabile e senza barra di scorrimento */
.kairos-prefix {
    flex: 0 0 auto;
}
.kairos-prefix__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 86px;
    height: 100%;
    padding: 9px 10px;
    font-family: var(--kairos-font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--kairos-ink);
    background-color: #fff;
    border: 1px solid #d6d6d6;
    cursor: pointer;
}
.kairos-prefix__toggle:focus-visible,
.kairos-prefix__toggle[aria-expanded="true"] {
    border-color: var(--kairos-red);
    box-shadow: 0 0 0 3px rgba(205, 23, 25, 0.15);
    outline: none;
}
.kairos-prefix__caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6c6c6c;
}
.kairos-prefix__list {
    position: fixed;
    z-index: 1000;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    background-color: #fff;
    border: 1px solid #d6d6d6;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.kairos-prefix__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--kairos-ink);
    cursor: pointer;
}
.kairos-prefix__option:hover,
.kairos-prefix__option.is-active {
    background-color: #f1f1f1;
}
.kairos-prefix__option[aria-selected="true"] {
    font-weight: 600;
}
.kairos-prefix__option[aria-selected="true"] .kairos-prefix__code {
    color: var(--kairos-red);
}
.kairos-prefix__code {
    flex: 0 0 auto;
    color: #7a7a7a;
    font-variant-numeric: tabular-nums;
}
.kairos-hero-form__phone .form-control {
    flex: 1 1 auto;
    min-width: 0; /* senza questo il flex item non scende sotto la sua larghezza intrinseca */
}
/* la validazione Bootstrap colora il campo: il messaggio sta fuori dal gruppo,
   quindi va mostrato a mano quando il numero non e' valido */
.was-validated .kairos-hero-form__phone:has(:invalid) ~ .invalid-feedback {
    display: block;
}

/* --- link all'informativa privacy dentro la checkbox --------------------- */
.kairos-hero-form__check .form-check-label a {
    color: var(--kairos-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.kairos-hero-form__check .form-check-label a:hover {
    color: #cd1719;
}

/* --- utility del tema mancante ------------------------------------------ */
.kairos-hero-form .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- niente angoli arrotondati: form, campi e bottoni -------------------- */
.kairos-hero-form__card,
.kairos-hero-form .form-control,
.kairos-hero-form .form-check-input,
.kairos-hero-form__submit,
.kairos-hero-form__status,
.kairos-prefix__toggle,
.kairos-prefix__list {
    border-radius: 0;
}