/**
 * Kadence Ludo - Formulaire de contact
 * Styles spécifiques au bloc Kadence Advanced Form
 *
 * Chargé uniquement sur les pages contenant un formulaire (.ludo-form-card)
 * ou un bloc Kadence Advanced Form.
 *
 * IMPORTANT : seul `.ludo-form-card` reçoit le style "carte" pour éviter
 * les boîtes imbriquées (le bloc Kadence a plusieurs wrappers internes).
 *
 * @package Kadence_Ludo
 */

/* ==========================================================================
   0. Variables Kadence Advanced Form — override au niveau du document
   Kadence utilise des variables CSS internes (--kb-form-*) pour styler
   ses champs. On les redéfinit ici pour qu'elles correspondent au design
   Ludo, ce qui évite les guerres de spécificité.
   ========================================================================== */

/* Spécificité doublée (.x.x) pour battre les sélecteurs Kadence avec ID intégré
   comme .wp-block-kadence-advanced-form38707-cpt-id */
.wp-block-kadence-advanced-form.wp-block-kadence-advanced-form,
.kb-form-wrap.kb-form-wrap,
.ludo-form-card.ludo-form-card,
[class*="wp-block-kadence-advanced-form"][class*="cpt-id"],
.kb-field.kb-field,
input.kb-field,
textarea.kb-field,
select.kb-field {
    --kb-form-placeholder-color: var(--ludo-text, #6B7280) !important;
    --kb-form-input-color: var(--ludo-text-strong, #1A1A2E) !important;
    --kb-form-input-background: #FAFAFA !important;
    --kb-form-input-border: rgba(0, 0, 0, 0.08) !important;
    --kb-form-input-border-focus: var(--ludo-primary, #E36C1D) !important;
    --kb-form-label-color: var(--ludo-text, #6B7280) !important;
    --kb-form-button-color: #FFFFFF !important;
    --kb-form-button-color-hover: #FFFFFF !important;
    --kb-form-button-background: var(--ludo-primary, #E36C1D) !important;
    --kb-form-button-background-hover: #F5820A !important;
}

/* ==========================================================================
   0b. Règles GLOBALES sur .kb-field (Kadence Advanced Form)
   Ces règles s'appliquent même sans parent .ludo-form-card.
   Le fichier CSS ne charge que sur les pages avec formulaire (functions.php),
   donc le scope reste sain.
   ========================================================================== */

input.kb-field,
textarea.kb-field,
select.kb-field,
.kb-text-field,
.kb-email-field,
.kb-tel-field,
.kb-textarea-field,
.kb-select-field {
    background: #FAFAFA !important;
    background-color: #FAFAFA !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    padding: clamp(10px, 1.2vw, 14px) clamp(14px, 1.6vw, 18px) !important;
    font-size: clamp(13px, calc(12px + 0.15vw), 14px) !important;
    color: var(--ludo-text-strong, #1A1A2E) !important;
    -webkit-text-fill-color: var(--ludo-text-strong, #1A1A2E) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}

/* Placeholder visible — toutes variantes navigateur */
.kb-field::placeholder,
.kb-text-field::placeholder,
.kb-email-field::placeholder,
.kb-tel-field::placeholder,
.kb-textarea-field::placeholder {
    color: var(--ludo-text, #6B7280) !important;
    -webkit-text-fill-color: var(--ludo-text, #6B7280) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.kb-field::-webkit-input-placeholder {
    color: var(--ludo-text, #6B7280) !important;
    -webkit-text-fill-color: var(--ludo-text, #6B7280) !important;
    opacity: 1 !important;
}

.kb-field::-moz-placeholder {
    color: var(--ludo-text, #6B7280) !important;
    opacity: 1 !important;
}

.kb-field:-ms-input-placeholder {
    color: var(--ludo-text, #6B7280) !important;
    opacity: 1 !important;
}

/* Focus */
.kb-field:focus,
.kb-text-field:focus,
.kb-email-field:focus,
.kb-tel-field:focus,
.kb-textarea-field:focus,
.kb-select-field:focus {
    border-color: var(--ludo-primary, #E36C1D) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(227, 108, 29, 0.1) !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Textarea hauteur min */
textarea.kb-field,
.kb-textarea-field {
    min-height: clamp(100px, 12vw, 130px) !important;
    resize: vertical !important;
}

/* ==========================================================================
   1. Carte formulaire (UNIQUEMENT le wrapper avec .ludo-form-card)
   ========================================================================== */

.ludo-form-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: clamp(16px, 1.6vw, 20px) !important;
    padding: clamp(20px, 3vw, 40px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
}

/* Wrappers internes Kadence : transparents (pour éviter boîtes imbriquées) */
.ludo-form-card .kb-form-wrap,
.ludo-form-card .wp-block-kadence-advanced-form,
.ludo-form-card form,
.ludo-form-card .kb-advanced-form,
.ludo-form-card > .wp-block-kadence-advanced-form > * {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   2. Titre du formulaire (h3 "Nous contacter")
   ========================================================================== */

.ludo-form-card h3,
.ludo-form-title {
    font-size: clamp(20.8px, calc(19.2px + 0.5vw), 28px) !important;
    font-weight: 700 !important;
    color: var(--ludo-primary, #E36C1D) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    margin: 0 0 clamp(20px, 2.4vw, 30px) 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
    line-height: 1.2 !important;
    width: 100% !important;
}

/* ==========================================================================
   3. Labels
   ========================================================================== */

.ludo-form-card label,
.ludo-form-card .kb-form-field-label,
.ludo-form-card .kadence-blocks-form-field label {
    font-size: clamp(13px, calc(12px + 0.15vw), 14px) !important;
    color: var(--ludo-text, #6B7280) !important;
    margin: 0 0 8px 0 !important;
    display: block !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Astérisque "requis" en magenta */
.ludo-form-card label .required,
.ludo-form-card .required {
    color: var(--ludo-accent, #E5007D) !important;
    margin-left: 2px !important;
}

/* ==========================================================================
   4. Inputs / textarea / select
   ========================================================================== */

.ludo-form-card input[type="text"],
.ludo-form-card input[type="email"],
.ludo-form-card input[type="tel"],
.ludo-form-card input[type="number"],
.ludo-form-card input[type="url"],
.ludo-form-card input[type="date"],
.ludo-form-card textarea,
.ludo-form-card select,
.ludo-form-card .kb-field {
    background: #FAFAFA !important;
    background-color: #FAFAFA !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    padding: clamp(10px, 1.2vw, 14px) clamp(14px, 1.6vw, 18px) !important;
    font-size: clamp(13px, calc(12px + 0.15vw), 14px) !important;
    color: var(--ludo-text-strong, #1A1A2E) !important;
    -webkit-text-fill-color: var(--ludo-text-strong, #1A1A2E) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}

/* Select avec icône custom + texte des options visibles */
.ludo-form-card select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

/* Options du select (apparaissent dans la dropdown native) */
.ludo-form-card select option {
    color: var(--ludo-text-strong, #1A1A2E) !important;
    background: #FFFFFF !important;
    padding: 8px !important;
}

/* Texte de la 1ère option (placeholder) en gris */
.ludo-form-card select option:first-child,
.ludo-form-card select option[value=""],
.ludo-form-card select:invalid {
    color: var(--ludo-text, #6B7280) !important;
}

/* ==========================================================================
   5. Focus
   ========================================================================== */

.ludo-form-card input:focus,
.ludo-form-card textarea:focus,
.ludo-form-card select:focus {
    border-color: var(--ludo-primary, #E36C1D) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(227, 108, 29, 0.1) !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* ==========================================================================
   6. Placeholders
   ========================================================================== */

.ludo-form-card input::placeholder,
.ludo-form-card textarea::placeholder,
.ludo-form-card .kb-field::placeholder,
.ludo-form-card input.kb-field::placeholder,
.ludo-form-card textarea.kb-field::placeholder {
    color: var(--ludo-text, #6B7280) !important;
    -webkit-text-fill-color: var(--ludo-text, #6B7280) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Préfixes legacy pour vieux navigateurs */
.ludo-form-card input::-webkit-input-placeholder,
.ludo-form-card .kb-field::-webkit-input-placeholder {
    color: var(--ludo-text, #6B7280) !important;
    -webkit-text-fill-color: var(--ludo-text, #6B7280) !important;
    opacity: 1 !important;
}

.ludo-form-card input::-moz-placeholder,
.ludo-form-card .kb-field::-moz-placeholder {
    color: var(--ludo-text, #6B7280) !important;
    opacity: 1 !important;
}

.ludo-form-card input:-ms-input-placeholder,
.ludo-form-card .kb-field:-ms-input-placeholder {
    color: var(--ludo-text, #6B7280) !important;
    opacity: 1 !important;
}

/* ==========================================================================
   7. Textarea — hauteur min
   ========================================================================== */

.ludo-form-card textarea {
    min-height: clamp(100px, 12vw, 130px) !important;
    resize: vertical !important;
}

/* ==========================================================================
   8. Wrapper de champ Kadence (espacement entre champs)
   ========================================================================== */

.ludo-form-card .kadence-blocks-form-field {
    margin-bottom: clamp(14px, 1.8vw, 20px) !important;
}

/* ==========================================================================
   9. Grille 2 colonnes pour Nom/Email (utilitaire si besoin manuel)
   ========================================================================== */

.ludo-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(12px, 1.6vw, 20px) !important;
    margin-bottom: clamp(14px, 1.8vw, 20px) !important;
}

/* ==========================================================================
   10. Bouton submit
   ========================================================================== */

.ludo-form-card button[type="submit"],
.ludo-form-card .kb-forms-submit,
.ludo-form-card .kb-button,
.ludo-form-card .wp-block-button__link,
.ludo-btn-submit {
    background: var(--ludo-primary, #E36C1D) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: clamp(12px, 1.5vw, 16px) clamp(24px, 3vw, 40px) !important;
    font-size: clamp(13px, calc(12px + 0.2vw), 15px) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 8px 25px rgba(227, 108, 29, 0.25) !important;
    text-decoration: none !important;
    width: auto !important;
}

.ludo-form-card button[type="submit"]:hover,
.ludo-form-card .kb-forms-submit:hover,
.ludo-form-card .kb-button:hover,
.ludo-btn-submit:hover {
    background: #F5820A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(227, 108, 29, 0.35) !important;
    color: #FFFFFF !important;
}

/* Conteneur du bouton submit aligné à droite */
.ludo-form-card .kb-forms-submit-wrap {
    text-align: right !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ==========================================================================
   11. Responsive : 2 colonnes Nom+Email passent en 1 colonne sur mobile
   ========================================================================== */

@media (max-width: 600px) {
    .ludo-form-row {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   12. Messages de retour Kadence (succès / avertissement / erreur)
   Kadence injecte un .kb-adv-form-message avec :
     - .kb-adv-form-success → message de succès après envoi
     - .kb-adv-form-warning → champs requis manquants OU erreur d'envoi
   ========================================================================== */

.kb-adv-form-message {
    border-radius: var(--radius-lg, 12px) !important;
    padding: clamp(12px, 1.6vw, 18px) clamp(16px, 2vw, 22px) !important;
    font-size: var(--ludo-font-base, 15px) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin: 0 0 clamp(14px, 1.8vw, 20px) 0 !important;
    border: 1px solid transparent !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Pictogramme (cercle coloré avec symbole) en pseudo-element */
.kb-adv-form-message::before {
    content: "" !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    margin-top: 1px !important;
}

/* --- Succès (vert) --- */
.kb-adv-form-message.kb-adv-form-success {
    background-color: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: #065F46 !important;
}

.kb-adv-form-message.kb-adv-form-success::before {
    background-color: var(--ludo-success, #10b981) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}

/* --- Avertissement (orange — champs requis ou erreur d'envoi) --- */
.kb-adv-form-message.kb-adv-form-warning {
    background-color: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #92400E !important;
}

.kb-adv-form-message.kb-adv-form-warning::before {
    background-color: var(--ludo-warning, #f59e0b) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") !important;
}

/* --- Surlignage des champs en erreur (validation native HTML5) --- */
.ludo-form-card input:invalid:not(:placeholder-shown),
.ludo-form-card textarea:invalid:not(:placeholder-shown),
.ludo-form-card .kb-field:invalid:not(:placeholder-shown) {
    border-color: var(--ludo-error, #ef4444) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08) !important;
}