/* ============================================================
   modules/plugin-calculated-fields.css
   Styles spécifiques au plugin Calculated Fields Form
   
   ⚠️ ARCHITECTURE (2 formulaires) :
   - Chaque formulaire est wrappé dans <div class="rvt-form">
   - Form 1 (1_mois) : mobile
   - Form 2 (2_mois) : desktop
   
   → Utilise .rvt-form pour cibler les 2 en même temps
   ============================================================ */


/* ============================================================
   0. STRUCTURE DE PAGE & CONTEXTE D'EMPILEMENT
   ============================================================ */

.wp-block-post-content,
.entry-content,
.page-content {
    position: relative !important;
}

.rvt-form > div,
.rvt-form [id^="fbuilder"] {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
}

.rvt-form .ui-datepicker,
.rvt-form .slots,
.rvt-form .availableslot,
.rvt-form .dfield,
.rvt-form .fields {
    z-index: 1 !important;
}

#contact {
    position: relative !important;
    z-index: 10 !important;
    isolation: isolate !important;
    margin-top: 2rem;
    padding-top: 1rem;
}

#contact * {
    position: relative;
    z-index: 1;
}


.rvt-form .dfield.fapp {
    grid-template-columns: 70% 30% !important;
}


/* ============================================================
   1. UI DATEPICKER
   ============================================================ */

.ui-datepicker-header.ui-widget-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    min-height: auto !important;
    
}

.availableslot a {
    font-weight: 700 !important;
}
#field_2-0 > div.dfield.fapp > div.slotsCalendar.slotsCalendarfieldname1_2 {
    margin-left: 10px !important;
    margin-top: 5px !important;
}

/* ============================================================
   2. STYLES GÉNÉRAUX (communs aux 2 formulaires)
   ============================================================ */

/* Couleur du texte */
.rvt-form .fields,
.rvt-form label,
.rvt-form input,
.rvt-form select,
.rvt-form .slots a {
    color: #000 !important;
}

/* Chaque ligne de champ en flex (label à gauche) */
/*.rvt-form .fields .dfield:not(.fapp) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem;
    flex: 0 0 auto;
    
}*/

.rvt-form .fields .dfield .dfield-input {
    order: 1;
    flex: 0 0 auto;
}

.rvt-form .fields .dfield label {
    order: 2;
    flex: 0 0 auto;
    /*text-align: left; Non*/
    margin: 0 !important;
}

/* Liens */
.rvt-form a.cff-open-dlg {
    color: var(--wp--preset--color--accent-1) !important;
    font-size: 12px;
}

.rvt-form a.cancel {
    color: var(--wp--preset--color--accent-1) !important;
}

/* Datepicker */
.rvt-form .ui-datepicker-title {
    font-size: 25px;
    font-weight: 500;
    background-color: var(--wp--preset--color--accent-1) !important;
}

.rvt-form .ui-datepicker-header {
    background: var(--wp--preset--color--accent-1) !important;
}

.rvt-form .ui-datepicker th {
    font-size: 15px;
    line-height: 25px !important;
    height: 25px !important;
    width: 70% !important;
}

.rvt-form .ui-datepicker td span,
.rvt-form .ui-datepicker td a {
    font-size: 20px;
    line-height: 35px !important;
    height: 35px !important;
    width: 80% !important;
}

.rvt-form .ui-state-default {
    margin: 2px 2px;
}

.rvt-form .availableslot {
    font-size: 15px;
    font-family: Arial, sans-serif;
}

.rvt-form .slots {
    font-size: 18px;
    font-family: Arial, sans-serif;
}

/* Grille de dispo */
.rvt-form .dfield.fapp {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas:
        "cal   slots"
        "cal   used"
        "uh    uh";
    gap: 1rem;
    align-items: start;
}

.rvt-form .fform {
    color: var(--wp--preset--color--accent-1) !important;
}

.rvt-form .dfield.fapp > .fieldCalendar  { grid-area: cal; }
.rvt-form .dfield.fapp > .slotsCalendar  { grid-area: slots; }
.rvt-form .dfield.fapp > .usedSlots      { grid-area: used; }
.rvt-form .dfield.fapp > span.uh         { grid-area: uh; font-size: 80%; }


/*list des champs de saisie*/
#fieldlist_2 > div {
    text-align: left !important;
   
}

/* Inputs */
.rvt-form input::placeholder {
    color: #666 !important;
}
#fieldlist_2  input[type="email"],
    input[type="tel"],
    input[type="text"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem;
    flex: 0 0 auto;
    max-width: 400px !important;
    /*margin-left: 50px !important;*/
    color: #000 !important;
    border: 1px solid #000 !important;
    box-sizing: border-box !important;
    margin-top: 5px !important ;
    font-size: 18px !important;
    text-align: left !important;
    height: 30px !important;
    /*padding-left: 10px !important;*/
}

.rvt-form input[type="tel"] {
    width: 150px !important;
    box-sizing: border-box !important;
}

/* positionnement du calendrier */
#field_2-0 > div.dfield.fapp > span {
    text-align: left !important;
}

#field_2-0 {
    margin: 0px 0px 0px 0px !important;
}
#field_2-0 > label {
    display: none !important;
}

#field_2-0 > div.dfield.fapp > div.fieldCalendarService.fieldCalendarServicefieldname1_2 {
    display: none !important;
}

/* label : nomn prénom, email, tel */
#field_2-1,
#field_2-2,
#field_2-3,
#field_2-4 {
    margin: 10px 20px 10px 0px !important;   /* ← espace label → input */
    text-align: left !important; 
    /*margin-left: 50px !important;*/
    font-weight: 700 !important;
}


/* politique de données */
#field_2-5 > div.dfield > div.one_column {
    text-align: left;
    margin-left: 95px;
}


/*bouton submit */
.rvt-form .pbSubmit {
    color: var(--wp--preset--color--base) !important;
    background-color: var(--wp--preset--color--accent-1) !important;
    border-radius: 6px !important;
    border: none !important;
}

#fieldlist_2 > div > button {
    width: 150px !important;
    height: 50px !important;
    margin-top: 20px !important;
    margin-right: 0px !important;
    /*padding: 8px 16px !important;*/
    margin-bottom: 50px !important;
    margin-left: 130px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

/**** WP From ***/

/* Form RDV */
#wpforms-submit-293 {
    color: var(--wp--preset--color--base) !important;
    background-color: var(--wp--preset--color--accent-1) !important;
    border-radius: 6px !important;
    border: none !important;
    font-weight: 600px !important;
}

#wpforms-293-field_1-container > label,
#wpforms-293-field_2-container > label,
#wpforms-293-field_3-container > label,
#wpforms-293-field_4-container > label, 
#wpforms-293-field_5-container > label,
#wpforms-293-field_6-container > label,
#wpforms-293-field_7-container > label,
#wpforms-293-field_11-container > label {
    color: var(--wp--preset--color--accent-1) !important;
    font-size : 18px !important;
    font-weight: 700px !important;
}

/* form PRO*/

#wpforms-6564-field_1-container > label,
#wpforms-6564-field_4-container > label,
#wpforms-6564-field_7-container > label,
#wpforms-6564-field_9-container > label, 
#wpforms-6564-field_10-container > label,
#wpforms-6564-field_11-container > label,
#wpforms-6564-field_12-container > label {
    color: var(--wp--preset--color--typo-pro, #6D5C5F) !important;
    font-size : 18px !important;
    font-weight: 700px !important;
}
#wpforms-submit-6564 {
    color: var(--wp--preset--color--base) !important;
    background-color:  var(--wp--preset--color--typo-pro, #6D5C5F) !important;
    border-radius: 6px !important;
    border: none !important;
    font-weight: 600px !important;
}

/* ============================================================
   3. DIALOG CFF
   ============================================================ */

div.cff-dialog-content * {
    color: #000000 !important;
    text-align: left !important;
    font-size: 12px !important;
}


/* ============================================================
   4. COMPENSATION DU HEADER FIXE
   ============================================================ */

:target { scroll-margin-top: 30px; }

#contact, .rvt-form, #contact-section, section[id], h2[id] {
    scroll-margin-top: 100px;
}

body.admin-bar :target,
body.admin-bar #contact,
body.admin-bar .rvt-form,
body.admin-bar section[id] {
    scroll-margin-top: 80px;
}


/* ============================================================
   5. MASQUAGE PENDANT L'INIT ABH
   ============================================================ */

html.rvt-init-lock body {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

html.rvt-init-lock.rvt-ready body {
    opacity: 1;
}


/* ============================================================
   6. BASCULE FORM 1 / FORM 2 SELON L'ÉCRAN
   ============================================================ */

/* Desktop (≥ 1025px) : Form 2 visible, Form 1 caché + grille 2 colonnes */
@media (min-width: 1025px) {
    

    /* Grille desktop : 2 colonnes (calendrier + créneaux) */
    .rvt-form .dfield.fapp {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 320px !important;
        grid-template-areas:
            "cal   slots"
            "cal   used"
            "uh    uh";
        gap: 1rem;
        align-items: start;
    }
    
    .rvt-form .dfield.fapp > .fieldCalendar { grid-area: cal; }
    .rvt-form .dfield.fapp > .slotsCalendar { grid-area: slots; }
    .rvt-form .dfield.fapp > .usedSlots     { grid-area: used; }
    .rvt-form .dfield.fapp > span.uh        { grid-area: uh; font-size: 80%; }
}

/* Mobile (≤ 1024px) : Form 1 visible, Form 2 caché + grille 1 colonne */
@media (max-width: 767px) {
    

    
    /* Grille mobile : 1 colonne */
    .rvt-form .dfield.fapp {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "cal"
            "slots"
            "used"
            "uh";
        width: 100% !important;
        max-width: 100% !important;
        gap: 1rem;
    }
    
    .rvt-form .dfield.fapp > .fieldCalendar,
    .rvt-form .dfield.fapp > .slotsCalendar,
    .rvt-form .dfield.fapp > .usedSlots {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .rvt-form .dfield.fapp .ui-datepicker-inline {
        width: 100% !important;
        max-width: 100% !important;
    }


    #fieldlist_1 > div > button {
    text-align: center !important;
    }
    
    /* Inputs */
    .rvt-form input::placeholder {
        color: #666 !important;
    }
  @media screen and (max-width: 767px) {
    
    /* ============================================================
       ALIGNEMENT DU CHAMP CHECKBOXES (AHB)
       ============================================================ */
    
    /* 1. Centrer le titre du champ (Lieu de rendez-vous) */
    .fields .dfield label,
    .fields > label {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 2. Centrer le conteneur des cases à cocher */
    .fields .dfield {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* 🌟 Centre les cases */
        width: 100% !important;
    }

    .fields .dfield .choice-item {
        display: flex !important;
        justify-content: flex-start !important; /* 🌟 Aligne à gauche */
        align-items: center !important;
        width: 100% !important;
        max-width: 300px !important; /* Aligne la largeur avec vos champs de saisie */
        margin: px auto 0px auto !important; /* Centre le bloc dans la page */
        padding-left: 55px !important;
        padding-top: 10px ! important;
    }

    /* Ajuste l'espace entre la case et le texte */
    .fields .dfield .choice-item input[type="checkbox"] {
        margin-right: 10px !important;
        margin-left: 0 !important;
    }

    /* Le texte de la case reste aligné à gauche */
    .fields .dfield .choice-item label {
        text-align: left !important;
        margin: 0 !important;
    }

    /* 6. Cacher le texte par défaut "Check All That Apply" si nécessaire */
    .fields .uh {
        display: block !important;
        text-align: center !important;
    }
}
    
        .rvt-form input[type="tel"] {
        width: 150px !important;
        box-sizing: border-box !important;
    }
    /* masque le titre*/
    #field_1-0 > label {
        display: none !important;
    }
    
    #field_1-0 > div.dfield.fapp > div.fieldCalendarService.fieldCalendarServicefieldname7_1 {
        display: none !important;
    }
    
    
    /* label : nom, prénom, email, tel */
    #field_1-1,
    #field_1-2,
    #field_1-3,
    #field_1-4,
    #field_1-5 {
        margin: 5px auto 15px auto !important;   /* ← espace label → input */
        /*text-align: center !important; */
        padding: 0px! important;
        font-weight: 700 !important;
        display: block !important;   /* ← important pour margin auto */
    }
    
    
    #fieldlist_1 > div > button {
        width: 50% !important;
        height: 40px !important;
        margin: 20px auto 50px auto !important;   /* ← auto gauche/droite = centré */
        /*padding: 8px 16px !important;*/
        margin-bottom: 50px !important;
        /*margin-left: 180px !important;*/
        font-size: 16px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        /*transition: all 0.2s ease !important;*/
        text-align: center !important;
        padding : 0px! important;
        display: block !important;   /* ← important pour margin auto */
    
    }
    
    /**** WP From ***/
    #wpforms-293 {
        text-align: center !important;
    }
    /* Centrer chaque champ horizontalement */

    #wpforms-293-field_6,
    #wpforms-293-field_2,
    #wpforms-293-field_1 {
    max-width: 100% !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding:0 !important;
    margin: 0 !important;
    }


    #wpforms-submit-293 {
        color: var(--wp--preset--color--base) !important;
        background-color: var(--wp--preset--color--accent-1) !important;
        border-radius: 6px !important;
        border: none !important;
        font-weight: 600px i!important;
    }
    
    
    
/* form PRO*/
#wpforms-6564 .wpforms-field {
    text-align: center !important; /* Centre le contenu du champ */
}

#wpforms-6564 .wpforms-field input[type="text"],
#wpforms-6564 .wpforms-field input[type="email"],
#wpforms-6564 .wpforms-field input[type="textarea"],
#wpforms-6564 .wpforms-field input[type="tel"] {
    max-width: 90% !important;
    display: inline-block !important; /* Permet au text-align: center du parent de fonctionner */
    text-align: left !important;      /* Le texte saisi reste aligné à gauche */
    padding: 10px !important;
}

#wpforms-6564 .wpforms-field-label {
    text-align: center !important;
    max-width: 100% !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin: 0 !important;
}


#wpforms-submit-6564  {
    color: var(--wp--preset--color--base) !important;
    background-color:  var(--wp--preset--color--typo-pro, #6D5C5F) !important;
    border-radius: 6px !important;
    border: none !important;
    font-weight: 600px !important;
}

/* ============================================================
   TEST GORDON - ALIGNEMENT MOBILE
   ============================================================ */

    
    /* 1. On s'assure que le groupe de formulaire prend toute la largeur */
    .gordon-form-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* 2. Les labels (Votre prénom, etc.) sont centrés */
    .gordon-form-group label {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* 3. Les champs prennent 100% de la largeur et le texte est centré */
    .gordon-form-group input[type="text"],
    .gordon-form-group input[type="email"] {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important; /* Centre le texte tapé */
        padding: 12px 15px !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* 4. Le texte d'aide (RGPD) en bas est centré */
    .gordon-rgpd-note,
    .gordon-form-group small,
    .gordon-form-group p {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        font-size: 12px !important;
        margin-top: 10px !important;
    }
    .gordon-btn {
        display: block !important;
        /*width: 100%*/ !important; /* Optionnel : le bouton prend toute la largeur */
        max-width: 300px !important; /* Optionnel : limite la largeur pour faire plus joli */
        margin: 20px auto 0 auto !important; /* 🌟 C'est ça qui le centre (auto à gauche et à droite) */
        text-align: center !important;
    }

}