/**
 * Halloween Devis Plugin Style
 * Version: 2.6 (Bouton principal stylisé)
 * Ce fichier ne contient que les styles du plugin. Le reset de Tailwind est désactivé
 * globalement pour éviter tout conflit avec le thème.
 */

/*
 * SECTION 1: STYLES SPÉCIFIQUES AU PLUGIN
 */
.hdp-plugin-wrapper * {
    box-sizing: border-box; /* Un mini-reset essentiel pour notre plugin */
}

/* Style pour le bouton principal d'ouverture de la modale */
.hdp-plugin-wrapper #open-form-button {
    width: 100%; /* Prend toute la largeur disponible */
    background-color: #F97316 !important; /* Couleur orange, forcée pour éviter les conflits */
    color: #ffffff !important; /* Texte blanc, forcé */
    border-radius: 9999px; /* Bords très arrondis (comme 'rounded-full') */
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
}
.hdp-plugin-wrapper #open-form-button:hover {
    background-color: #EA580C !important; /* Orange plus foncé au survol */
}


.hdp-plugin-wrapper dialog {
    border: none;
    padding: 0;
    margin: auto;
    width: 90%;
    max-width: 600px;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    position: relative;
    z-index: 100000;
}

.hdp-plugin-wrapper dialog::backdrop {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
}

.hdp-plugin-wrapper .step-indicator {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.hdp-plugin-wrapper .step-indicator .step {
    width: 30px;
    height: 30px;
    background-color: #e5e7eb;
    color: #4b5563;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 0 5px;
    transition: background-color 0.3s, color 0.3s;
}
.hdp-plugin-wrapper .step-indicator .step.active {
    background-color: #8B5CF6; /* Violet */
    color: #fff;
}

.hdp-plugin-wrapper #devis-form input[type="text"],
.hdp-plugin-wrapper #devis-form input[type="email"],
.hdp-plugin-wrapper #devis-form input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    width: 100%;
}
.hdp-plugin-wrapper #devis-form input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #8B5CF6;
    box-shadow: 0 0 0 2px #8B5CF6;
}

.hdp-plugin-wrapper #devis-form button {
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.375rem !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}
.hdp-plugin-wrapper #devis-form button[data-next-step],
.hdp-plugin-wrapper #devis-form button[type="submit"] {
    background-color: #F97316 !important;
    color: #ffffff !important;
}
.hdp-plugin-wrapper #devis-form button[data-next-step]:hover,
.hdp-plugin-wrapper #devis-form button[type="submit"]:hover {
    background-color: #EA580C !important;
}
.hdp-plugin-wrapper #devis-form button[data-prev-step] {
    background-color: #E5E7EB !important;
    color: #374151 !important;
}
.hdp-plugin-wrapper #devis-form button[data-prev-step]:hover {
    background-color: #D1D5DB !important;
}