/* ----------------------------------------
   Formulaire Fluent Forms dans la modale (markup imposé par le plugin)
   ---------------------------------------- */

.promo-modal__form {
    width: 100%;
    text-align: left;
}

.promo-modal__form .ff-el-group {
    margin-bottom: var(--spacing-md);
}

.promo-modal__form .ff-el-input--label label {
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--gray-300);
}

/* Le bloc est répété dans le sélecteur pour passer devant les styles du
   plugin, qui repassent le champ en blanc avec un texte gris au focus.
   16 px minimum : en dessous, iOS zoome sur le champ. */
.promo-modal .promo-modal__form .ff-el-form-control,
.promo-modal .promo-modal__form .ff-el-form-control:focus {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: var(--border-light);
    border-radius: var(--border-radius);
    background: var(--carbon-200);
    color: var(--white);
    font-size: 1rem;
}

.promo-modal .promo-modal__form .ff-el-form-control:focus {
    border-color: var(--white);
}

.promo-modal .promo-modal__form input[type="email"].ff-el-form-control {
    padding-left: 46px;
    background: var(--carbon-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") 15px center / 20px no-repeat;
}

.promo-modal__form .ff-el-form-control::placeholder {
    color: var(--gray-500);
}

.promo-modal .promo-modal__form .ff-el-is-error .ff-el-form-control {
    border-color: var(--color-primary-light);
}

/* Consentement : case sur mesure, zone de clic sur tout le libellé. */
.promo-modal__form .ff-el-form-check-label,
.promo-modal__form .ff-el-tc label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--font-size-meta);
    line-height: var(--line-height-body);
    color: var(--gray-400);
}

.promo-modal__form .ff-el-tc label {
    min-height: 44px;
    cursor: pointer;
}

.promo-modal__form .ff-el-tc input[type="checkbox"] {
    appearance: none;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    border: 1px solid var(--gray-500);
    border-radius: 4px;
    background: var(--carbon-200);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.promo-modal__form .ff-el-tc input[type="checkbox"]:hover {
    border-color: var(--gray-300);
}

.promo-modal__form .ff-el-tc input[type="checkbox"]:checked {
    border-color: var(--color-primary);
    background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-9' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.promo-modal__form .ff-el-tc input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

.promo-modal__form .ff-btn-submit,
.promo-modal__form .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    font-size: 1.0625rem;
}

.promo-modal__form .ff-errors-in-stack,
.promo-modal__form .error {
    color: var(--color-primary-light);
    font-size: var(--font-size-meta);
}

/* La confirmation Fluent Forms n'est pas montrée : la roue prend le relais. */
.promo-modal__form .ff-message-success {
    display: none;
}

.promo-modal.has-result-error .ff-message-success {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .promo-modal__form .ff-el-tc input[type="checkbox"] {
        transition: none;
    }
}

/* Aperçu administrateur : mêmes champs, hors du conteneur .fluentform du
   plugin. Ces deux règles remplacent celles que le plugin applique en public. */
.promo-preview-form .ff-el-input--label {
    margin-bottom: 6px;
}

.promo-preview-form .ff-el-is-required label::after {
    content: " *";
    color: var(--color-primary-light);
}