/**
 * Gravity Forms Modern Styler CSS
 * FORMULAIRE ID 61 - Style Minimaliste Inspiré QuotePage
 * Version: 1.0.0
 */

/* Variables CSS pour la palette de couleurs */
:root {
    --form61-navy: #1A2755;
    --form61-gold: rgb(201, 176, 134);
    --form61-slate: #64748b;
    --form61-bg-light: #f8fafc;
    --form61-transition: 300ms;
}

/* ========================================
   CONTENEUR GÉNÉRAL DU FORMULAIRE
======================================== */
#gform_wrapper_61 {
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

#gform_wrapper_61 .gform_body {
    max-width: 100%;
}

/* ========================================
   LABELS - STYLE UPPERCASE MINIMALISTE
======================================== */
#gform_wrapper_61 .gfield_label {
    display: block !important;
    font-size: 0.75rem !important;
    /* 12px */
    font-weight: 700 !important;
    color: var(--form61-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
    transition: color var(--form61-transition) ease !important;
}

/* Label devient doré au focus du champ */
#gform_wrapper_61 .gfield:focus-within .gfield_label {
    color: var(--form61-gold) !important;
}

/* Masquer l'indicateur de requis par défaut (on peut le garder si besoin) */
#gform_wrapper_61 .gfield_required {
    color: var(--form61-gold) !important;
    margin-left: 0.25rem !important;
}

/* ========================================
   INPUTS - BORDER-BOTTOM UNIQUEMENT
======================================== */
#gform_wrapper_61 input[type="text"],
#gform_wrapper_61 input[type="email"],
#gform_wrapper_61 input[type="tel"],
#gform_wrapper_61 input[type="url"],
#gform_wrapper_61 input[type="number"],
#gform_wrapper_61 input[type="date"],
#gform_wrapper_61 select,
#gform_wrapper_61 textarea {
    /* Ne pas forcer width: 100% - respecter les paramètres Gravity Forms (Small/Medium/Large) */
    background-color: var(--form61-bg-light) !important;
    border: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    /* gray-200 */
    padding: 0.75rem 1rem !important;
    /* py-3 px-4 */
    font-size: 1.125rem !important;
    /* text-lg */
    font-weight: 500 !important;
    /* font-medium */
    color: var(--form61-navy) !important;
    outline: none !important;
    transition: all var(--form61-transition) ease !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Placeholder style */
#gform_wrapper_61 input::placeholder,
#gform_wrapper_61 textarea::placeholder {
    color: #d1d5db !important;
    /* gray-300 */
    opacity: 1 !important;
}

/* FOCUS STATE - Border devient dorée + fond blanc */
#gform_wrapper_61 input[type="text"]:focus,
#gform_wrapper_61 input[type="email"]:focus,
#gform_wrapper_61 input[type="tel"]:focus,
#gform_wrapper_61 input[type="url"]:focus,
#gform_wrapper_61 input[type="number"]:focus,
#gform_wrapper_61 input[type="date"]:focus,
#gform_wrapper_61 select:focus,
#gform_wrapper_61 textarea:focus {
    background-color: white !important;
    border-bottom-color: var(--form61-gold) !important;
}

/* ========================================
   TEXTAREA - Style cohérent
======================================== */
#gform_wrapper_61 textarea {
    min-height: 6rem !important;
    resize: vertical !important;
}

/* ========================================
   SELECT - Style minimaliste
======================================== */
#gform_wrapper_61 select {
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231A2755' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    padding-right: 2.5rem !important;
}

/* ========================================
   CHAMPS ADRESSE - Grille 2 colonnes
======================================== */
#gform_wrapper_61 .ginput_complex .ginput_full,
#gform_wrapper_61 .ginput_complex .ginput_left,
#gform_wrapper_61 .ginput_complex .ginput_right {
    width: 100% !important;
}

/* ========================================
   CHECKBOXES & RADIOS - Style simple
======================================== */
#gform_wrapper_61 .gfield_checkbox li,
#gform_wrapper_61 .gfield_radio li {
    margin-bottom: 0.75rem !important;
}

#gform_wrapper_61 input[type="checkbox"],
#gform_wrapper_61 input[type="radio"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    accent-color: var(--form61-gold) !important;
    margin-right: 0.75rem !important;
    cursor: pointer !important;
}

#gform_wrapper_61 .gfield_checkbox label,
#gform_wrapper_61 .gfield_radio label {
    font-size: 0.875rem !important;
    color: var(--form61-slate) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all var(--form61-transition) ease !important;
}

/* Radio button sélectionné : texte en gras, couleur navy et taille augmentée */
body #gform_wrapper_61 .gfield_radio input[type="radio"]:checked+label {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--form61-navy) !important;
}

/* ========================================
   BOUTON DE SOUMISSION
======================================== */
#gform_wrapper_61 .gform_footer,
#gform_wrapper_61 .gform_page_footer {
    margin-top: 3rem !important;
    padding: 0 !important;
}

#gform_wrapper_61 .gform_button,
#gform_wrapper_61 input[type="submit"],
#gform_wrapper_61 .gform_next_button,
#gform_wrapper_61 .gform_previous_button {
    background-color: var(--form61-navy) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 1rem 3rem !important;
    border: none !important;
    border-radius: 9999px !important;
    /* rounded-full */
    cursor: pointer !important;
    transition: all var(--form61-transition) ease !important;
    box-shadow: 0 10px 25px -5px rgba(26, 39, 85, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    /* Pour l'effet ripple */
}

#gform_wrapper_61 .gform_button:hover,
#gform_wrapper_61 input[type="submit"]:hover,
#gform_wrapper_61 .gform_next_button:hover {
    background-color: #152044 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 15px 35px -5px rgba(26, 39, 85, 0.4) !important;
}

#gform_wrapper_61 .gform_previous_button {
    background-color: transparent !important;
    color: var(--form61-slate) !important;
    box-shadow: none !important;
    padding: 1rem 1.5rem !important;
}

#gform_wrapper_61 .gform_previous_button:hover {
    background-color: var(--form61-bg-light) !important;
    color: var(--form61-navy) !important;
    transform: scale(1) !important;
}

/* Effet ripple sur les boutons */
#gform_wrapper_61 .ripple {
    position: absolute !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: -10px !important;
    margin-left: -10px !important;
    animation: ripple-animation 0.6s ease-out !important;
    pointer-events: none !important;
}

@keyframes ripple-animation {
    from {
        transform: scale(0);
        opacity: 1;
    }

    to {
        transform: scale(25);
        opacity: 0;
    }
}

/* ========================================
   MESSAGES DE VALIDATION
======================================== */
#gform_wrapper_61 .gfield_error .gfield_label {
    color: #ef4444 !important;
    /* red-500 */
}

#gform_wrapper_61 .gfield_error input,
#gform_wrapper_61 .gfield_error select,
#gform_wrapper_61 .gfield_error textarea {
    border-bottom-color: #ef4444 !important;
}

#gform_wrapper_61 .validation_message,
#gform_wrapper_61 .gfield_description.validation_message {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    margin-top: 0.5rem !important;
    font-weight: 500 !important;
}

/* ========================================
   DESCRIPTIONS DE CHAMPS
======================================== */
#gform_wrapper_61 .gfield_description {
    color: var(--form61-slate) !important;
    font-size: 0.75rem !important;
    /* text-xs */
    margin-top: 0.25rem !important;
    line-height: 1.5 !important;
}

/* ========================================
   WRAPPER INFORMATIF (comme le shield)
======================================== */
#gform_wrapper_61 .gfield.info-box {
    background-color: #eff6ff !important;
    /* blue-50 */
    border: 1px solid #dbeafe !important;
    /* blue-100 */
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

#gform_wrapper_61 .gfield.info-box .gfield_label {
    color: var(--form61-navy) !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.25rem !important;
}

#gform_wrapper_61 .gfield.info-box .gfield_description {
    color: var(--form61-slate) !important;
    font-size: 0.75rem !important;
}

/* ========================================
   GRILLE 2 COLONNES (comme dans le React)
   RESPECTE LES CHOIX DE GRAVITY FORMS
======================================== */
/* Ne pas forcer de grille - laisser Gravity Forms gérer le layout */
/* Les utilisateurs peuvent utiliser les classes natives de Gravity Forms */

/* ========================================
   CHAMPS TÉLÉPHONE - GRAVITY WIZ PLUGIN
======================================== */
/* S'assurer que le gfield parent du téléphone a un z-index élevé */
#gform_wrapper_61 .gfield.gfield_contains_required.gfield--type-phone {
    position: relative !important;
    z-index: 1000 !important;
}

/* Conteneur du champ téléphone avec sélecteur de pays */
#gform_wrapper_61 .iti {
    width: 100% !important;
    position: relative !important;
}

/* Dropdown de sélection de pays - z-index élevé pour passer au-dessus */
#gform_wrapper_61 .iti__dropdown-content {
    z-index: 999999 !important;
    position: absolute !important;
}

/* Container parent du dropdown */
#gform_wrapper_61 .iti__country-container {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 999999 !important;
}

/* Bouton du pays sélectionné - ajuster la largeur pour laisser place au placeholder */
#gform_wrapper_61 .iti__selected-country {
    padding: 0.75rem 0.5rem !important;
    background-color: var(--form61-bg-light) !important;
    border: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    min-width: 80px !important;
}

/* Input téléphone - ajuster le padding-left pour éviter que le texte ne soit caché */
#gform_wrapper_61 input[type="tel"].iti__tel-input {
    padding-left: 80px !important;
    /* Espace pour le drapeau + indicatif */
}

/* S'assurer que le placeholder commence aussi au bon endroit */
#gform_wrapper_61 input[type="tel"].iti__tel-input::placeholder {
    padding-left: 0 !important;
    /* Le padding est déjà sur l'input */
}

/* Liste des pays dans le dropdown */
#gform_wrapper_61 .iti__country-list {
    max-height: 200px !important;
    overflow-y: auto !important;
    background: white !important;
    border: 1px solid var(--form61-navy) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Items dans la liste de pays */
#gform_wrapper_61 .iti__country {
    padding: 0.5rem 1rem !important;
    cursor: pointer !important;
}

#gform_wrapper_61 .iti__country:hover,
#gform_wrapper_61 .iti__country.iti__highlight {
    background-color: var(--form61-bg-light) !important;
}

/* ========================================
   CHAMPS NOMBRE (pour la valeur du bateau)
======================================== */
#gform_wrapper_61 .ginput_container_number {
    position: relative !important;
}

#gform_wrapper_61 .ginput_container_number input {
    font-size: 1.5rem !important;
    /* text-2xl */
    font-weight: 700 !important;
}

/* Style pour le symbole monétaire (pour tous les champs nombre SAUF le 53) */
/* Style pour le symbole monétaire (pour tous les champs nombre SAUF le 53) */
#gform_wrapper_61 .ginput_container_number::before {
    content: '$ / € / £';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af !important;
    /* gray-400 */
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.125rem;
    z-index: 10;
}

#gform_wrapper_61 .ginput_container_number input[type="number"],
#gform_wrapper_61 .ginput_container_number input.gfield_number_formatted {
    padding-left: 5rem !important;
}

/* Retirer le symbole monétaire UNIQUEMENT pour le champ ID 53 */
#gform_wrapper_61 #field_61_53 .ginput_container_number::before {
    content: none !important;
}

#gform_wrapper_61 #field_61_53 .ginput_container_number input[type="number"],
#gform_wrapper_61 #field_61_53 .ginput_container_number input.gfield_number_formatted {
    padding-left: 1rem !important;
    /* Padding normal sans symbole */
}

/* ========================================
   RESPONSIVE - MOBILE
======================================== */
@media (max-width: 768px) {

    /* Forcer tous les champs en pleine largeur sur mobile */
    #gform_wrapper_61 input[type="text"],
    #gform_wrapper_61 input[type="email"],
    #gform_wrapper_61 input[type="tel"],
    #gform_wrapper_61 input[type="url"],
    #gform_wrapper_61 input[type="number"],
    #gform_wrapper_61 input[type="date"],
    #gform_wrapper_61 select,
    #gform_wrapper_61 textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        /* Éviter le zoom sur iOS */
    }

    #gform_wrapper_61 .gform_button,
    #gform_wrapper_61 input[type="submit"] {
        width: 100% !important;
        padding: 1.25rem !important;
    }

    #gform_wrapper_61 .gform_fields.two-columns {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   ANIMATIONS SMOOTH
======================================== */
#gform_wrapper_61 .gfield {
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#gform_wrapper_61 .gfield:nth-child(1) {
    animation-delay: 0.05s;
}

#gform_wrapper_61 .gfield:nth-child(2) {
    animation-delay: 0.1s;
}

#gform_wrapper_61 .gfield:nth-child(3) {
    animation-delay: 0.15s;
}

#gform_wrapper_61 .gfield:nth-child(4) {
    animation-delay: 0.2s;
}

#gform_wrapper_61 .gfield:nth-child(5) {
    animation-delay: 0.25s;
}

#gform_wrapper_61 .gfield:nth-child(6) {
    animation-delay: 0.3s;
}

#gform_wrapper_61 .gfield:nth-child(7) {
    animation-delay: 0.35s;
}

#gform_wrapper_61 .gfield:nth-child(8) {
    animation-delay: 0.4s;
}

/* ========================================
   RESET DES STYLES GRAVITY FORMS
======================================== */
#gform_wrapper_61 .gform_heading {
    margin-bottom: 2rem !important;
}

#gform_wrapper_61 .gform_title {
    font-size: 1.875rem !important;
    /* text-3xl */
    font-weight: 700 !important;
    color: var(--form61-navy) !important;
    margin-bottom: 0.5rem !important;
}

#gform_wrapper_61 .gform_description {
    color: var(--form61-slate) !important;
    font-size: 1rem !important;
}

/* Supprimer les marges par défaut */
#gform_wrapper_61 ul.gform_fields {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#gform_wrapper_61 .gfield {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* ========================================
   CONFIRMATION MESSAGE
======================================== */
#gform_confirmation_wrapper_61 {
    background-color: #ecfdf5 !important;
    /* green-50 */
    border: 2px solid #10b981 !important;
    /* green-500 */
    border-radius: 1rem !important;
    padding: 2rem !important;
    text-align: center !important;
    margin: 2rem 0 !important;
}

#gform_confirmation_message_61 {
    color: var(--form61-navy) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* ========================================
   PAGINATION STEPS (MULTI-PAGE FORMS)
======================================== */
#gform_wrapper_61 .gf_page_steps {
    margin-bottom: 2rem !important;
}

/* Cercle du numéro - étape en attente (pas encore visitée) */
#gform_wrapper_61 .gf_step_pending .gf_step_number {
    background-color: #e2e8f0 !important;
    /* gris clair */
    color: #64748b !important;
}

/* Cercle du numéro - étape active (page courante) - Navy Blue */
#gform_wrapper_61 .gf_step_active .gf_step_number {
    background-color: var(--form61-navy) !important;
    color: white !important;
}

/* Cercle du numéro - étape complétée - Beige/Gold */
#gform_wrapper_61 .gf_step_completed .gf_step_number {
    background-color: var(--form61-gold) !important;
    color: white !important;
}

/* Fin du CSS pour formulaire 61 */