/**
 * Galaxyy Forms — mise en forme générique des formulaires (classes posées par
 * Galaxyy_Forms_Renderer) : champs pleine largeur à bordure grise, deux champs
 * par ligne, mentions légales en petit. Un projet ajuste la mise en forme d'un
 * formulaire précis dans son thème enfant via `.galaxyy-forms-form-<id>`. Tokens --gt-* du thème, avec valeurs de repli.
 *
 * --galaxyy-forms-gap : espacement entre champs et lignes (30px par défaut), réglable par le
 * conteneur du formulaire.
 */

.galaxyy-forms-form {
    width: 100%;
}

.galaxyy-forms-intro {
    margin: 20px 0 30px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.galaxyy-forms-lead {
    margin: 0 0 10px;
    font-size: 15px;
}

/* Champ piège à robots (Galaxyy_Forms_Renderer::render_honeypot) : hors de l'écran, sans display:none. */
.galaxyy-forms-annexe {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Champ sur une demi-ligne (comme s'il partageait une ligne avec un champ absent). */
@media (min-width: 1200px) {
    .galaxyy-forms-demi {
        width: calc(50% - 15px);
    }
}

.galaxyy-forms-row {
    display: flex;
    gap: var(--galaxyy-forms-gap, 30px) 30px;
    margin-bottom: var(--galaxyy-forms-gap, 30px);
}

.galaxyy-forms-row > .galaxyy-forms-field {
    flex: 1 1 0;
    margin: 0;
}

.galaxyy-forms-field {
    margin: 0 0 var(--galaxyy-forms-gap, 30px);
}

/* Question de contrôle : détachée des cases à cocher qui la précèdent. */
.galaxyy-forms-field--verification {
    margin-top: var(--galaxyy-forms-gap, 30px);
}

.galaxyy-forms-label {
    display: block;
    margin-bottom: 15px;
}

.galaxyy-forms-form input:not([type="checkbox"]),
.galaxyy-forms-form select,
.galaxyy-forms-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    border: 2px solid var(--gt-color-neutral-700, #60727a);
    border-radius: 4px;
    background-color: var(--gt-color-white, #fff);
    color: var(--gt-color-neutral-900, #202427);
    font-family: inherit;
    font-size: 14px;
}

.galaxyy-forms-form textarea {
    resize: vertical;
}

/* Même spécificité que la règle des champs ci-dessus, qu'elle doit remplacer. */
.galaxyy-forms-form :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--gt-color-error, #b30000);
}

.galaxyy-forms-field--checkbox {
    margin-bottom: 16px;
    font-size: 13px;
}

.galaxyy-forms-field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.galaxyy-forms-field--checkbox input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
}

.galaxyy-forms-field--checkbox a {
    color: inherit;
    text-decoration: underline;
}

.galaxyy-forms-error,
.galaxyy-forms-error-summary {
    color: var(--gt-color-error, #b30000);
    font-size: 13px;
}

.galaxyy-forms-error {
    display: block;
    margin-top: 4px;
}

.galaxyy-forms-error-summary {
    margin-bottom: 30px;
    font-weight: bold;
}

.galaxyy-forms-footer {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-top: 30px;
}

.galaxyy-forms-required-notice {
    margin: 0;
    color: var(--gt-color-neutral-700, #60727a);
    font-size: 13px;
}

.galaxyy-forms-success {
    padding: 30px 0;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.galaxyy-forms-success:focus {
    outline: none;
}

.galaxyy-forms-footer:empty {
    display: none;
}

/* #region Groupe radio : options en pastilles */
.galaxyy-forms-field--radio {
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    border: 0;
}

.galaxyy-forms-field--radio legend {
    padding: 0;
}

.galaxyy-forms-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.galaxyy-forms-choice {
    position: relative;
    cursor: pointer;
}

.galaxyy-forms-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.galaxyy-forms-choice span {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 20px;
    box-sizing: border-box;
    border: 2px solid var(--gt-color-primary, #80c241);
    border-radius: 50px;
    background-color: var(--gt-color-white, #fff);
    transition: background-color 0.2s;
}

.galaxyy-forms-choice:hover span,
.galaxyy-forms-choice input:checked + span {
    background-color: var(--gt-color-primary, #80c241);
}

.galaxyy-forms-choice input:focus-visible + span {
    outline: 3px solid var(--gt-color-neutral-900, #202427);
    outline-offset: 2px;
}
/* #endregion */

/* #region Champ fichier (avec le script : libellé en bouton, nom du fichier choisi) */
.galaxyy-forms-hint {
    display: block;
    margin: 10px 0;
    font-size: 12px;
}

.galaxyy-forms-field--file-js input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.galaxyy-forms-field--file-js .galaxyy-forms-label {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    margin: 0;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 50px;
    background-color: var(--gt-color-primary, #80c241);
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.galaxyy-forms-field--file-js .galaxyy-forms-label:hover {
    background-color: var(--gt-color-hover-primary, #abda7c);
}

.galaxyy-forms-field--file-js:has(input:focus-visible) .galaxyy-forms-label {
    outline: 3px solid var(--gt-color-neutral-900, #202427);
    outline-offset: 2px;
}

.galaxyy-forms-file {
    display: flex;
    align-items: center;
    gap: 4px;
}

.galaxyy-forms-file__clear {
    padding: 0 4px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
/* #endregion */

/* #region Formulaire en plusieurs étapes */
/* Cible du défilement au changement d'étape : dégagée d'un en-tête collant (s'ajoute au
   scroll-padding-top de la page). */
.galaxyy-forms-progress {
    display: flex;
    justify-content: center;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    scroll-margin-top: 80px;
}

.galaxyy-forms-progress[hidden] {
    display: none;
}

/* Point et trait vers l'étape précédente ; étapes faites et en cours en vert. */
.galaxyy-forms-progress__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 130px;
    color: var(--gt-color-neutral-700, #60727a);
    font-size: 15px;
}

.galaxyy-forms-progress__step::before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--gt-color-neutral-200, #cbd3d6);
}

.galaxyy-forms-progress__step + .galaxyy-forms-progress__step::after {
    content: "";
    position: absolute;
    top: 11px;
    right: calc(50% + 12px);
    width: calc(100% - 24px);
    height: 2px;
    background-color: var(--gt-color-neutral-200, #cbd3d6);
}

.galaxyy-forms-progress__step[aria-current="step"],
.galaxyy-forms-progress__step.is-done {
    color: var(--gt-color-neutral-900, #202427);
}

.galaxyy-forms-progress__step[aria-current="step"]::before,
.galaxyy-forms-progress__step.is-done::before,
.galaxyy-forms-progress__step[aria-current="step"]::after,
.galaxyy-forms-progress__step.is-done::after {
    background-color: var(--gt-color-primary, #80c241);
}

.galaxyy-forms-step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.galaxyy-forms-step[hidden] {
    display: none;
}

.galaxyy-forms-step:focus {
    outline: none;
}

.galaxyy-forms-step-intro {
    margin: 0 0 10px;
}

.galaxyy-forms-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.galaxyy-forms-step-nav > :last-child {
    margin-left: auto;
}

.galaxyy-forms-previous {
    min-width: 60px;
    min-height: 54px;
    border: 3px solid var(--gt-color-neutral-700, #60727a);
    background: none;
    color: var(--gt-color-neutral-700, #60727a);
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.galaxyy-forms-previous:hover {
    background-color: var(--gt-color-neutral-700, #60727a);
    color: var(--gt-color-white, #fff);
}

.galaxyy-forms-step-nav button[hidden] {
    display: none;
}
/* #endregion */

@media (max-width: 991px) {
    .galaxyy-forms-row {
        flex-direction: column;
    }
}