/* ============================================================================
   form-v1.0.0.css — Design System FORMULAIRES & CHAMPS DE SAISIE
   ============================================================================
   Nomenclature :
     .form-group           conteneur label + champ + aide/erreur
     .form-label            <label> d'un champ (alias moderne du sélecteur <label> nu)
     .form-control           input texte/password/email/date/number, textarea
     .form-select             <select>
       Tailles (combinables) : .form-control-sm / .form-control-lg,
                                 .form-select-sm / .form-select-lg
     .form-check / .form-check-input / .form-check-label   case à cocher & radio
     .switch                  interrupteur toggle (basé sur un input checkbox masqué)
     .form-text                texte d'aide sous un champ
     .validation-message / .field-validation-error   messages d'erreur Blazor / MVC
       (générés respectivement par <ValidationMessage> et la validation
       non-intrusive ASP.NET des pages Identity)

   Toutes les couleurs/rayons/typos proviennent des tokens --color-* / --radius-* /
   --font-family-* définis dans le :root de Settings-v1.0.0.css. Le token
   --color-error fait office de "danger" dans cette charte (pas de --color-danger
   dédié) — c'est aussi lui qui alimente .btn-danger dans button-v1.0.0.css.

   Les hauteurs .form-control-sm/-lg/(défaut) sont calées sur .btn-sm/-lg/-md
   (button-v1.0.0.css) pour une cible tactile homogène entre champs et boutons.

   Sélecteurs historiques (input/select/textarea nus, .inputselect, .inputcheckbox)
   restent supportés en alias des nouvelles classes pour ne rien casser dans les
   vues Razor pas encore migrées — leur nettoyage est prévu en Phase 2.
   ============================================================================ */

:root {
    /* --- Input : couleurs (dérivées des tokens globaux) --- */
    --color-bg-input: var(--color-white);
    --color-text-input: var(--color-text-dark);
    --color-text-placeholder: var(--color-grey);
    --color-border-input: var(--tab-border-color, #ced4da);
    --color-border-input-hover: var(--color-grey-hover);
    --color-border-input-focus: var(--color-primary);
    --font-size-input: 1rem;
    --font-weight-input: 400;
    --shadow-input: 0 1px 3px rgb(0 0 0 / 6%);
    --shadow-input-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);

    /* --- Input : rayon, aligné sur le rayon des boutons (surchargeable par tenant) --- */
    --radius-input: var(--radius-button, var(--radius-normal));

    /* --- Input : tailles, alignées sur .btn-sm / .btn-md / .btn-lg --- */
    --input-width: 100%;
    --input-height-sm: 2.25rem;
    --input-height-normal: 2.75rem; /* = .form-control par défaut ("md") */
    --input-height-lg: 3.25rem;
    --input-height-double: 6rem; /* textarea (2 lignes) */
    --input-height-triple: 9rem; /* textarea (3 lignes) */

    /* --- Switch (toggle) --- */
    --switch-width: 46px;
    --switch-height: 26px;
    --switch-knob-size: 20px;

    /* --- Label --- */
    --font-size-label: 0.95rem; /* taille lisible, pas un titre — cf. .form-group label */
    --color-text-label: var(--color-text-dark);
    --font-weight-label: 500;

    /* --- Container --- */
    --color-border-container-form: var(--color-accent-light);
}


/***********************************  */

/* Fichier CSS dédié aux Formulaires */

/***********************************  */

/* ============================================================================
   1. MOTEUR D'INPUT — input[type], select, textarea, .form-control, .form-select
   ============================================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.form-control,
.form-select {
    display: block;
    box-sizing: border-box;
    width: var(--input-width);
    /* 🐛 Sans ceci, le min-width implicite du navigateur pour <input>/<select> (basé sur leur
       taille de contenu par défaut, ~150px) l'emporte sur width:100% dès que leur conteneur est
       plus étroit — le champ déborde alors réellement de son wrapper (constaté : un input dans un
       wrapper à max-width:110px se rendait quand même à 150px, chevauchant son voisin de droite).
       min-width:0 laisse width:100% gouverner la taille réelle, quelle que soit l'étroitesse du
       conteneur. */
    min-width: 0;
    height: var(--input-height-normal);
    margin-top: 0.25rem;
    padding: 0.5rem 0.9rem;
    color: var(--color-text-input);
    font-size: var(--font-size-input);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-input);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-input);
    outline: none;
    box-shadow: var(--shadow-input);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* compatibilité navigateur (type Safari) pour les input date/number */
input[type="date"],
input[type="number"] {
    appearance: none;
    appearance: textfield;
}

textarea,
.form-control.textarea {
    height: var(--input-height-double);
    min-height: var(--input-height-double);
    padding: 0.6rem 0.9rem;
    resize: vertical;
}

/* Textarea "confort de saisie" (éditeur de contenu, liste longue, template…) */
.textarea-tall {
    height: auto;
    min-height: 12rem;
}

    ::placeholder {
        color: var(--color-text-placeholder);
        opacity: 1;
    }

/* --- États : hover --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled):not([readonly]),
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--color-border-input-hover);
}

/* --- États : focus (souris + clavier) --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--color-border-input-focus);
    box-shadow: var(--shadow-input-focus);
}

/* recommandation WCAG : distinguer nettement la navigation clavier */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--color-border-input-focus);
    outline-offset: 2px;
}

/* --- États : disabled / readonly --- */
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled,
input[readonly],
textarea[readonly],
.form-control[readonly] {
    background-color: var(--color-background-light);
    color: var(--color-grey);
    border-color: var(--color-disabled);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.75;
}

/* Nécessaire pour les champs autofillable (évite la coloration système pour les champs préremplis) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    box-shadow: 0 0 0 1000px var(--color-bg-input) inset !important;
    -webkit-text-fill-color: var(--color-text-input) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

input[type="password"].inputselect,
input[type="password"].form-control {
    background: var(--color-bg-input) !important;
    appearance: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   2. TAILLES — .form-control-sm/-lg, .form-select-sm/-lg (alignées sur .btn-*)
   ============================================================================ */

.form-control-sm,
.form-select-sm {
    height: var(--input-height-sm);
    padding: 0.35rem 0.7rem;
    font-size: 0.9rem;
}

.form-control-lg,
.form-select-lg {
    height: var(--input-height-lg);
    padding: 0.65rem 1.1rem;
    font-size: 1.15rem;
}

/* ============================================================================
   3. STRUCTURE — .form-group, .form-label, label
   ============================================================================ */

.form-group {
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 150px;
}

label,
.form-label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--color-text-label);
    font-family: var(--font-family-base);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
}

/* Espacement input/label lorsqu'ils sont adjacents (hors .form-group, qui gère déjà le gap) */
input + label,
select + label,
textarea + label,
label + input,
label + select,
label + textarea {
    display: block;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.label-legende {
    font-size: var(--font-size-label);
    font-family: var(--font-family-base);
    margin: 0.3rem auto;
    color: var(--color-grey);
}

/* ============================================================================
   4. MESSAGES D'AIDE & ERREURS — .form-text, .validation-message, MVC unobtrusive
   ============================================================================ */

.form-text {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--color-grey);
}

/* Blazor <ValidationMessage> / MVC validation non-intrusive (pages Identity)
   + alias legacy .warning-message / .field-error rencontrés dans certaines vues
   (mêmes règles, pour que tous les formulaires profitent du style centralisé) */
.validation-message,
.field-validation-error,
.warning-message,
.field-error {
    display: block;
    position: static;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    font-style: normal;
    opacity: 1;
    pointer-events: auto;
    color: var(--color-error);
}

/* 🐛 Fix espace fantôme sous (quasiment) tout champ en floating-label de l'appli : Blazor
   <ValidationMessage> (mode Interactive Server) ne rend rien tant qu'il n'y a pas d'erreur —
   SAUF pendant le pré-rendu statique (avant connexion du circuit SignalR), où il rend un
   placeholder `<div hidden="true">` vide. `display:block` ci-dessus (règle d'auteur) bat
   toujours `[hidden]{display:none}` (règle navigateur par défaut) quelle que soit la
   spécificité — l'origine de la règle prime avant la spécificité dans la cascade CSS — donc ce
   placeholder vide redevenait un bloc visible dans le flux (margin-top:0.3rem) sous CHAQUE
   champ, confirmé en le commentant dans EspaceClient/Modules/SubscriptionManager/Components/
   Pages/Admin/ManageClientSubscription.razor. :empty ne cible que les divs sans le moindre
   enfant (aucun texte) : une vraie erreur affichée reste inchangée. *@
.validation-message:empty,
.field-validation-error:empty,
.warning-message:empty,
.field-error:empty {
    display: none;
}

.field-validation-valid {
    display: none;
}

/* Classes injectées automatiquement par Blazor sur les <Input*> liés à un EditContext */
.invalid,
input.invalid,
select.invalid,
textarea.invalid,
.form-control.invalid,
.form-select.invalid {
    border-color: var(--color-error);
}

    .invalid:focus,
    .form-control.invalid:focus,
    .form-select.invalid:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
    }

.modified.valid,
.valid.modified {
    border-color: var(--color-success);
}

/* ============================================================================
   5. CASES À COCHER & RADIO — .form-check
   ============================================================================ */

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary);
    width: 1.15em;
    height: 1.15em;
    cursor: pointer;
}

    input[type="checkbox"]:focus-visible,
    input[type="radio"]:focus-visible {
        outline: 2px solid var(--color-border-input-focus);
        outline-offset: 2px;
    }

    input[type="checkbox"]:disabled,
    input[type="radio"]:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-check-input {
    accent-color: var(--color-primary);
    width: 1.15em;
    height: 1.15em;
    margin: 0;
    cursor: pointer;
}

.form-check-label {
    margin: 0;
    color: var(--color-text-label);
    font-family: var(--font-family-base);
    font-size: var(--font-size-input);
    font-weight: var(--font-weight-input);
    cursor: pointer;
}

/* Legacy : ancien style .inputcheckbox (case à cocher carrée agrandie) */
.inputcheckbox {
    height: var(--input-height-sm);
    width: var(--input-height-sm);
    box-sizing: border-box;
    margin-top: 0.5rem;
    accent-color: var(--color-primary);
    border: 1px solid var(--color-border-input);
    outline: none;
    border-radius: var(--radius-input);
}

/***********************************  */

/* PERSO : INPUT password + bouton */

/* le wrapper du bouton */
.password-wrapper {
    position: absolute;
    right: 0.5rem;
    top: 60%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none; /* IMPORTANT : le wrapper lui-même ne capture pas les clics */
}

/* le bouton reste cliquable mais hors du flux pour le label */
.password-toggle-btn {
    pointer-events: all; /* le bouton reste cliquable */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

    .password-toggle-btn img {
        height: 1rem;
        width: 1rem;
    }

    .password-toggle-btn:focus {
        outline: none;
    }

/****************************************  */

/* INTERRUPTEUR TOGGLE — .switch */

/* Container du switch */
.switch {
    position: relative;
    display: inline-block;
    width: var(--switch-width);
    height: var(--switch-height);
    flex-shrink: 0;
}

    /* Masque le checkbox natif */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch input:focus-visible + .slider {
        outline: 2px solid var(--color-border-input-focus);
        outline-offset: 2px;
    }

    .switch input:disabled + .slider {
        cursor: not-allowed;
        opacity: 0.6;
    }

/* Slider */
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--color-disabled);
    transition: 0.25s;
    border-radius: var(--radius-double);
}

    /* Bouton rond */
    .slider::before {
        position: absolute;
        content: "";
        height: var(--switch-knob-size);
        width: var(--switch-knob-size);
        left: 3px;
        bottom: 3px;
        background-color: var(--color-white);
        box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
        transition: 0.25s;
        border-radius: var(--radius-circle);
    }

/* Quand activé */
.switch input:checked + .slider {
    background-color: var(--color-primary);
}

    .switch input:checked + .slider::before {
        transform: translateX(calc(var(--switch-width) - var(--switch-knob-size) - 6px));
    }

/* Optionnel : coins carrés au lieu de la forme pilule par défaut */
.slider.square {
    border-radius: var(--radius-input);
}

    .slider.square::before {
        border-radius: var(--radius-min);
    }

/****************************************  */

/* UPLOAD FICHIER — input[type="file"] */

input[type="file"] {
    height: auto;
    padding: 0.4rem;
    background-color: var(--color-bg-input);
    border: 1px dashed var(--color-border-input);
    border-radius: var(--radius-input);
    color: var(--color-text-input);
    font-size: var(--font-size-input);
    font-family: var(--font-family-base);
    cursor: pointer;
}

    input[type="file"]::file-selector-button,
    input[type="file"]::-webkit-file-upload-button {
        margin-right: 0.75rem;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: var(--radius-button);
        background-color: var(--color-background-light);
        color: var(--color-primary);
        font-family: inherit;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    input[type="file"]:hover::file-selector-button,
    input[type="file"]:hover::-webkit-file-upload-button {
        background-color: color-mix(in srgb, var(--color-background-light) 80%, var(--color-primary) 20%);
    }

    input[type="file"]:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

/***************************************  */

/* CLASS PERSO POUR INPUT (legacy, alias de .form-control) */

.inputselect {
    height: var(--input-height-normal);
    width: var(--input-width);
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.5rem 0.9rem;
    color: var(--color-text-input);
    font-size: var(--font-size-input);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-input);
    outline: none;
    border-radius: var(--radius-input);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-input);
}

/***************************************  */

/* FLOATTING LABEL */

/* ----------------------------------- */

/* 1. Configuration du conteneur */

/* ----------------------------------- */
.form-group-floating {
    position: relative;

    /* Exemple de marge/padding autour */
    margin-bottom: 10px;
    padding-top: 10px; /* Espace pour le label flottant */
}


    /* ----------------------------------- */

    /* 2. Style de l'Input (Base) */

    /* ----------------------------------- */
    .form-group-floating .inputselect {
        width: var(--input-width);
        padding: 15px 10px 5px; /* Ajustez le padding pour le label */
        border: 1px solid var(--color-border-input);
        border-radius: var(--radius-input);
        box-sizing: border-box;

        /* Masquer le placeholder car le label prend sa place */

        /* Le 'opacity: 0;' est parfois plus compatible que 'color: transparent' */

        /* Assurez-vous que l'input a un placeholder, même un espace */

        /* input::placeholder { opacity: 0; } */
    }


    /* ----------------------------------- */

    /* 3. Style du Label (Positionnement initial) */

    /* ----------------------------------- */
    /* 🐛 left:25px + un transform:scale() SANS transform-origin explicite scale à partir du CENTRE
       de la boîte du label par défaut — le bord gauche visuellement affiché après réduction se
       déplace donc de (largeur × (1-0.85))/2, une valeur qui varie avec la longueur du texte du
       label ET sa font-size (ex: certains champs la réduisent localement, cf. IdentityConfigPanel).
       Résultat : aucun champ ne démarre au même retrait visuel. transform-origin:left ancre la
       réduction sur le bord gauche (qui ne bouge donc plus jamais), et left passe à 0.6rem (demande
       utilisateur) pour un décalage identique, quels que soient la longueur du champ ou la
       font-size du label. */
    .form-group-floating .floating-label {
        position: absolute;
        left: 0.6rem;
        top: 0;
        transform: translateY(0) scale(0.85);
        transform-origin: left top;
        font-size: 1.2rem;
        /* 🐛 Sans nowrap, un label trop long pour un champ étroit repasse à la ligne — top:0 ne
           prévoit qu'une seule ligne, la 2ᵉ ligne retombe alors DANS l'input et recouvre sa
           valeur (constaté sur "Code NAF/APE"/"Capital social (€)" en champ réduit). Un label qui
           déborde légèrement à droite d'un champ trop étroit reste toujours moins cassé qu'un
           label qui recouvre le texte tapé. */
        white-space: nowrap;
        color: var(--color-text-label);
        background-color: var(--color-bg-input);
        border-left: 5px solid var(--color-bg-input);
        border-right: 5px solid var(--color-bg-input);
        padding: 0;
        pointer-events: none;
        transition: transform 0.25s ease, color 0.2s ease, font-size 0.2s ease;
    }


/****************************************  */

/* CONTAINER dediés pour FORM */

/* MAIN CONTAINER */
.container-form-add {
    width: 22%;
    height: auto;
    border: 2px solid var(--color-border-container-form);
    border-radius: var(--radius-input);
    padding: 2rem;
    margin: 1rem auto;
}

.container-form-add-medium {
    width: 40%;
    height: auto;
    border: 2px solid var(--color-border-container-form);
    border-radius: var(--radius-input);
    padding: 3rem;
    margin: 1rem auto;
}

.container-form-add-big {
    width: 100%;
    height: auto;
    border: 2px solid var(--color-border-container-form);
    border-radius: var(--radius-input);
    padding: 4rem;
    margin: 1rem auto;
}

/* ============================================================================
   5bis. RADIO CUSTOM — .hidden-radio / .radio-label / .custom-radio
   ============================================================================
   Pattern : <InputRadio Value="..." class="hidden-radio" /> suivi d'un
   <span class="custom-radio"></span>, le tout dans un <label class="radio-label">.
   Globalisé ici (déplacé depuis AddContact.razor.css) car <InputRadio> est un
   composant Blazor : l'<input> qu'il génère ne porte pas l'attribut de scope
   b-xxxxxxxx du fichier .razor.css appelant, donc une règle CSS scopée ne peut
   jamais masquer le natif — d'où le bug "radio natif + custom visibles en double"
   observé partout où ce pattern était utilisé. Réutilisable tel quel dans
   n'importe quel composant (ContactModal.razor, etc.), présent ou futur.
   ============================================================================ */

.hidden-radio,
.hidden-radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    height: 1px !important;
    width: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-weight: normal;
}

.custom-radio {
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    border: 2px solid #ccc;
    transition: all 0.2s ease;
}

/* On cible l'input *généré* qui est le frère immédiat du span. */
.radio-label input[type="radio"]:checked ~ .custom-radio {
    background-color: #fff;
    border: 2px solid #f4a261;
    position: relative;
}

    .radio-label input[type="radio"]:checked ~ .custom-radio::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #f4a261;
    }

/* ============================================================================
   5ter. FORM-FLOATING — label flottant standard (focus / champ rempli)
   ============================================================================
   Distinct de .form-group-floating (pattern legacy statique ci-dessus, toujours
   utilisé par .inputselect ailleurs) : ici le label remonte réellement au focus
   ou dès que le champ est rempli, comme le floating-label Bootstrap. Nécessite
   un attribut placeholder non vide (même un simple espace " ") sur les <InputText>
   Blazor pour que :not(:placeholder-shown) fonctionne.
   ============================================================================ */

.form-floating {
    position: relative;
}

    .form-floating > .form-control {
        height: var(--input-height-lg, 3.25rem);
        padding: 1.5rem 0.85rem 0.5rem;
    }

    .form-floating > label {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        padding: 1rem 0.85rem;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        pointer-events: none;
        border: 1px solid transparent;
        transform-origin: 0 0;
        transition: opacity .1s ease-in-out, transform .1s ease-in-out;
        color: var(--color-text-placeholder);
        font-weight: var(--font-weight-input);
    }

    .form-floating > .form-control::placeholder {
        color: transparent;
    }

    .form-floating > .form-control:focus,
    .form-floating > .form-control:not(:placeholder-shown) {
        padding-top: 1.625rem;
        padding-bottom: 0.375rem;
    }

        .form-floating > .form-control:focus ~ label,
        .form-floating > .form-control:not(:placeholder-shown) ~ label {
            opacity: .75;
            transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
            color: var(--color-text-label);
        }

        .form-floating > .form-control:focus ~ label {
            color: var(--color-border-input-focus);
        }

/* ============================================================================
   5quater. GRILLE FORMULAIRE MINIMALE — .form-grid-2
   ============================================================================
   Pas d'équivalent Bootstrap .row/.col-md-* dans ce projet (non vendorisé) : ce
   strict minimum permet de poser 2 champs par ligne dans une modale de formulaire
   (ex: ContactModal) sans réinventer un système de grille complet. S'appuie sur
   .form-group déjà défini plus haut (chaque enfant DIRECT de .form-grid-2 doit
   être un .form-group ou un .form-floating).
   ============================================================================ */

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

    .form-grid-2 > .form-group,
    .form-grid-2 > .form-floating {
        min-width: 0; /* évite le débordement d'un input dans une colonne grid */
    }

@media (width <= 767px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}