/*
 * Formulaire d'inscription à l'info-lettre — [potsetiques_newsletter_form].
 *
 * Mise en forme STRUCTURELLE seulement : espacements, largeurs, alignements.
 * Aucune couleur, aucune police, aucun rayon : tout cela appartient au thème,
 * et le formulaire doit se fondre dans les trois habillages maison sans être
 * retouché. Les boutons portent la classe `button` du thème.
 */

.psnl-signup {
    max-width: 34rem;
    margin: 0 auto;
}

.psnl-signup__title {
    margin: 0 0 .5rem;
}

.psnl-signup__text {
    margin: 0 0 1.25rem;
}

/* Messages : mêmes variables Bootstrap que la case du checkout (checkout.css),
   donc aucune couleur en dur et suivi automatique de la charte du thème. */
.psnl-signup__notice {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-radius: var(--bs-border-radius, .375rem);
}

.psnl-signup__notice--ok {
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
    border-left: 4px solid var(--bs-success);
}

.psnl-signup__notice--ko {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
    border-left: 4px solid var(--bs-danger);
}

.psnl-signup__field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0 0 1rem;
}

.psnl-signup__field input {
    width: 100%;
    box-sizing: border-box;
}

.psnl-signup__consent {
    display: flex;
    margin: 0 0 1.25rem;
    font-size: .9375em;
    line-height: 1.5;
}

.psnl-signup__consent label {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.psnl-signup__consent input {
    margin-top: .2em;
    flex: 0 0 auto;
}

.psnl-signup__submit {
    margin: 0;
}