/* Container principale della pagina e il logo */
.external-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Cambiato da 'center' a 'flex-start' */
    min-height: 100vh;
}


.generic-element-external-container {
    flex-grow: 0; /* Impostato a 0 per evitare che cresca oltre il necessario */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Contenitore per il logo */
.header-external-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(1vw + 1px)
}

    .header-external-logo img {
        max-width: 40px; /* Riduci la dimensione del logo */
        margin-right: 10px; /* Spazio tra logo e scritta */
    }

    .header-external-logo h2 {
        font-family: 'Inter', sans-serif;
        font-size: 1.5rem;
        font-weight: bold;
        color: #000; /* Colore del testo nero */
        margin: 0; /* Rimuovi margine per centratura */
    }

/* Card esterna per il contenuto */
.input-external-card {
    position: relative;
    padding: 2rem;
    padding-bottom: 50px; /* Spazio extra per il bottone */
    background: #FFFFFF;
    box-shadow: 0px 0px 24px 4px rgba(65, 6, 255, 0.25);
    border-radius: 20px;
    width: min(90%, clamp(40rem, 65vw, 90rem)); /* Min 40rem (~640px), preferito 65vw, max 90rem (~1440px) */
    margin: auto;
    margin-top: 20px; /* Aggiungi margine superiore per evitare che si avvicini troppo al logo */
    transition: box-shadow 0.5s ease, padding-bottom 0.3s ease;
    font-family: 'Inter', sans-serif;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .input-external-card {
        padding: 1rem 1rem 40px 1rem; /* meno spazio ai lati e sotto */
        border-radius: 0; /* facoltativo: card a tutta larghezza anche nei bordi */
        width: 100vw; /* estensione completa */
        margin: 0; /* rimuovi margini orizzontali */
        margin-top: 10px; /* Aggiungi margine superiore per evitare che si avvicini troppo al logo */
    }
}

/* H1 allineato a sinistra e con margine inferiore ridotto */
.input-external-card h1.bubble-title {
    text-align: center;
    margin-bottom: 0.75rem; /* Margine inferiore ridotto */
}

/* H3 vicino all'h1 con colore grigio scuro, allineato a sinistra */
.input-external-card h3 {
    margin-top: 0.25rem; /* Spazio ridotto tra h1 e h3 */
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: normal;
    color: #4f4f4f; /* Grigio scuro */
    text-align: center; /* Allineamento a sinistra */
}

/* Linea orizzontale tra il titolo e il corpo del testo, stile dotted */
.input-external-card hr {
    border: none;
    border-top: 0px dotted #4106FF; /* Linea tratteggiata viola */
    margin: 1.5rem 0;
}

/* Corpo del testo con campi personalizzati in grassetto, allineato a sinistra */
.input-external-card p {
    font-size: 1rem;
    text-align: center;
}

    .input-external-card p b {
        font-weight: bold; /* Grassetto per i campi personalizzati */
    }

/* Bottone centrato e posizionato sul bordo della card */
.mando-add-external-button, .mando-delete-external-button {
    padding: 12px 24px;
    color: white;
    border: 2px solid;
    box-shadow: 0px 0px 10px 0px rgba(65, 6, 255, 0.35);
    text-align: center;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.15s ease-in, color 0.15s ease-in, box-shadow 0.15s ease-in, transform 0.2s ease-in;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    font-size: 1em;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    min-width: 60px; /* Lunghezza minima */
    position: absolute;
    bottom: -20px; /* Posizionato sul bordo inferiore della card */
    left: 50%;
    transform: translateX(-50%);
}

    /* Aggiunta di spazio per il movimento dell'icona */
    .mando-add-external-button .material-symbols-outlined, .mando-delete-external-button .material-symbols-outlined {
        margin-left: 8px;
        font-size: 1.2em;
        font-variation-settings: 'wght' 700, 'GRAD' 200, 'opsz' 20;
        color: white;
        transition: transform 0.2s ease-in;
    }

/* Stile del bottone verde per aggiungere */
.mando-add-external-button {
    background-color: #4106FF;
    border-color: #4106FF;
}

    .mando-add-external-button:hover {
        background-color: white;
        color: #4106FF;
        border-color: #4106FF;
        box-shadow: none;
    }

        .mando-add-external-button:hover .material-symbols-outlined {
            color: #4106FF;
            transform: translateX(3px); /* Sposta l'icona a destra durante l'hover */
        }

/* Stile del bottone rosso per eliminare */
.mando-delete-external-button {
    background-color: #ff0505;
    border-color: #ff0505;
}

    .mando-delete-external-button:hover {
        background-color: white;
        color: #ff0505;
        border-color: #ff0505;
        box-shadow: none;
    }

        .mando-delete-external-button:hover .material-symbols-outlined {
            color: #ff0505;
            transform: translateX(3px); /* Sposta l'icona a destra durante l'hover */
        }


.video-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    height: auto;
    overflow: hidden;
    margin: auto; /* Centra il contenitore nella pagina */
}

#video {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%; /* Impedisce che il video esca dai margini */
    border-radius: 20px; /* Arrotonda gli angoli esterni */
    display: block;
    margin: auto; /* Centra il video nel contenitore */
    z-index: 1; /* Il video rimane sotto */
    /*Center to screen*/
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Il canvas rimane sopra */
    pointer-events: none; /* Non blocca le interazioni */
    background: transparent; /* Assicura che il video sia visibile sotto */
    border-radius: 20px; /* Arrotonda anche il canvas per combaciare con il video */
}

/* Pulsanti allineati correttamente */
.signer-spaced-buttons {
    display: flex;
    flex-direction: row;
    gap: clamp(16px, 2vw, 32px);
    justify-content: center;
    margin-top: 16px;
}

.webcam-background {
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    overflow: hidden;
    z-index: 10000;
}

.button-webcam {
    align-items: center;
    margin: auto;
    position: absolute;
    bottom: 0.5em;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 4;
}

.text-webcam {
    position: absolute;
    top: 1em;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5em 1.5em;
    box-sizing: border-box;
    border-radius: 30px;
    z-index: 3;
}

    .text-webcam #webcam-text.bubble-title {
        color: white;
        border: none;
        margin: 0;
        padding: 0;
        font-size: 1.8rem;
    }

.close-icon-webcam {
    position: absolute;
    top: 1em;
    right: 1.5em;
    background-color: white;
    z-index: 5;
}

.close-icon-webcam {
    background-color: white;
}

/* Wrapper che centra la card */
#card-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

/* Rettangolo con ratio CIE */
.cie-rectangle {
    /* Rimuoviamo aspect-ratio: 1.59 / 1; */
    transition: all 0.3s ease; /* Transizione per width e height */
    border: 3px solid #410bf5;
    box-shadow: 0 0 20px 5px rgba(65, 11, 245, 0.5);
    border-radius: 8px;
}

#oval-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.face-oval {
    transition: all 0.3s ease;
    border: 3px solid #410bf5;
    box-shadow: 0 0 20px 5px rgba(65, 11, 245, 0.5);
    /* L'arrotondamento va bene con aspect-ratio 0.8/1, lo manteniamo */
    border-radius: 50%;
}

#photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}