/* ==========================================================================
   CUSTOM FORM BLOCK — Assets CSS
   Harmonisé avec les caractéristiques des templates de marque (Toyota, Renault, Dacia...)
   ========================================================================== */

.custom-form-component-wrapper {
    font-family: var(--theme-font-secondary, var(--theme-font-body, var(--maurin-font-secondary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)));
    color: var(--theme-text-color, #1e293b);
}

.custom-form-component-wrapper .cf-card {
    background-color: var(--cf-bg-card, var(--theme-card-background, #ffffff));
    border: 1px solid var(--cf-border, var(--theme-card-border-color, #e2e8f0));
    border-radius: var(--cf-radius, var(--theme-card-radius, var(--theme-border-radius, 0px)));
    padding: 36px 32px;
    transition: box-shadow 0.2s ease;
}

@media (max-width: 768px) {
    .custom-form-component-wrapper .cf-card {
        padding: 24px 18px;
    }
}

/* Titres */
.custom-form-component-wrapper .cf-section-title,
.custom-form-component-wrapper .cf-form-title {
    font-family: var(--theme-title-font, var(--theme-font-primary, var(--maurin-font-primary, inherit))) !important;
    color: var(--theme-section-title-color, var(--theme-block-title-color, var(--theme-text-color, inherit)));
}

.custom-form-component-wrapper .cf-section-subtitle,
.custom-form-component-wrapper .cf-form-desc {
    font-family: var(--theme-font-secondary, var(--theme-font-body, var(--maurin-font-secondary, inherit)));
    color: var(--theme-section-subtitle-color, var(--theme-block-subtitle-color, #64748b));
}

/* Boutons de sélection d'action (« Ma demande concerne : ») */
.custom-form-component-wrapper .cf-action-btn {
    border: 1px solid var(--cf-border, var(--theme-border-color, #cbd5e1));
    background: #f8fafc;
    color: var(--cf-text, var(--theme-text-color, #334155));
    padding: 10px 18px;
    border-radius: var(--cf-btn-radius, var(--theme-button-radius, var(--theme-btn-radius, 0px))) !important;
    font-family: var(--theme-button-font, var(--theme-font-secondary, inherit));
    font-size: var(--theme-button-font-size, 14px);
    font-weight: var(--theme-button-font-weight, 600);
    text-transform: var(--theme-button-text-transform, none);
    letter-spacing: var(--theme-button-letter-spacing, normal);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.custom-form-component-wrapper .cf-action-btn:hover {
    border-color: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52)));
    background: #ffffff;
    color: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52)));
}

.custom-form-component-wrapper .cf-action-btn.active {
    background: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52))) !important;
    border-color: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52))) !important;
    color: var(--theme-button-text-color, #ffffff) !important;
    font-weight: var(--theme-button-font-weight, 700);
}

/* Champs de saisie & labels */
.custom-form-component-wrapper .form-label {
    color: var(--cf-text, var(--theme-text-color, #1e293b));
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    font-family: var(--theme-font-secondary, var(--theme-font-body, inherit));
}

.custom-form-component-wrapper .form-control,
.custom-form-component-wrapper .form-select {
    border: 1px solid var(--cf-border, var(--theme-border-color, #cbd5e1));
    border-radius: var(--cf-input-radius, var(--theme-button-radius, var(--theme-border-radius, 0px))) !important;
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--theme-font-secondary, var(--theme-font-body, inherit));
    color: var(--cf-text, var(--theme-text-color, #1e293b));
    background-color: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.custom-form-component-wrapper .form-control:focus,
.custom-form-component-wrapper .form-select:focus {
    border-color: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52))) !important;
    box-shadow: 0 0 0 3px rgba(100, 107, 82, 0.18) !important;
    outline: none;
}

.custom-form-component-wrapper .form-check-input:checked {
    background-color: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52))) !important;
    border-color: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52))) !important;
}

.custom-form-component-wrapper .form-check-input:focus {
    border-color: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52))) !important;
    box-shadow: 0 0 0 3px rgba(100, 107, 82, 0.18) !important;
}

/* Module rendez-vous */
.custom-form-component-wrapper .cf-appointment-card {
    border: 1px solid var(--cf-border, var(--theme-border-color, #e2e8f0));
    background-color: var(--cf-bg-soft, var(--theme-bg-light, var(--maurin-bg-soft, #f8fafc)));
    border-radius: var(--cf-radius, var(--theme-card-radius, var(--theme-border-radius, 0px))) !important;
    padding: 20px;
}

.custom-form-component-wrapper .cf-appointment-card h5 {
    font-family: var(--theme-title-font, var(--theme-font-primary, inherit));
    color: var(--theme-section-title-color, var(--theme-text-color, inherit));
}

.custom-form-component-wrapper .cf-appointment-card i {
    color: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52))) !important;
}

/* Bouton principal de soumission */
.custom-form-component-wrapper .cf-submit-btn {
    background: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52))) !important;
    border-color: var(--cf-primary, var(--theme-button-bg, var(--theme-primary, #646B52))) !important;
    color: var(--theme-button-text-color, #ffffff) !important;
    font-family: var(--theme-button-font, var(--theme-font-secondary, inherit));
    font-weight: var(--theme-button-font-weight, 700);
    font-size: var(--theme-button-font-size, 16px);
    text-transform: var(--theme-button-text-transform, none);
    letter-spacing: var(--theme-button-letter-spacing, normal);
    padding: 14px var(--theme-button-padding-x, 36px);
    border-radius: var(--cf-btn-radius, var(--theme-button-radius, var(--theme-btn-radius, 0px))) !important;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--theme-button-height, 48px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.custom-form-component-wrapper .cf-submit-btn:hover {
    background: var(--cf-primary-hover, var(--theme-button-hover-bg, var(--theme-button-bg-hover, var(--theme-secondary, #575E48)))) !important;
    border-color: var(--cf-primary-hover, var(--theme-button-hover-bg, var(--theme-button-bg-hover, var(--theme-secondary, #575E48)))) !important;
    color: var(--theme-button-text-color, #ffffff) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.custom-form-component-wrapper .cf-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Messages d'alerte */
.custom-form-component-wrapper .cf-success-alert,
.custom-form-component-wrapper .cf-error-alert {
    border-radius: var(--cf-radius, var(--theme-card-radius, var(--theme-border-radius, 0px))) !important;
}