/*
Theme Name: ListingHive Child
Template: listinghive
Description: Thème enfant pour ListingHive
Author: Votre Nom
Version: 1.0
*/
/* ============================
   Compte à rebours
============================ */
.countdown-wrapper {
    margin-top: 10px;
    padding: 5px;
    background-color: #eaf7e1;
    border-radius: 5px;
    border: 1px solid #ddd;
    text-align: center;
}

.countdown-wrapper.expired {
    background-color: #ffe5e5; /* Fond rouge clair */
    border-color: #ff0000; /* Bordure rouge */
}

.countdown {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* ============================
   Styles pour le formulaire Contact Form 7
============================ */
.wpcf7-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    background-color: #ffffff !important; /* Fond blanc */
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* Titres dans le formulaire */
.wpcf7-form h3 {
    grid-column: 1 / -1 !important; /* Titres sur toute la largeur */
    margin-bottom: 10px !important;
    font-size: 18px !important;
    color: #333 !important;
}

/* Champs en pleine largeur */
.wpcf7-form .full-width {
    grid-column: 1 / -1 !important; /* Champs description et bouton sur toute la largeur */
}

/* Styles des champs */
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
    background-color: #ffffff !important; /* Fond blanc */
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
    color: #000 !important;
}

/* Style des champs focus */
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: #0073aa !important;
    outline: none !important;
}

/* Style pour le bouton d'envoi */
.wpcf7-form input[type="submit"] {
    background-color: #ff8000 !important; /* Couleur violet */
    color: #fff !important; /* Texte blanc */
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 5px !important; /* Coins arrondis */
    cursor: pointer !important;
    font-size: 16px !important;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #ff8000 !important; /* Couleur plus foncée au survol */
}

.hp-listing__contact-button {
    margin-bottom: 20px; /* Add space below the button */
    text-align: center; /* Center the button if not already aligned */
}

.hp-listing__contact-button .button {
    display: inline-block;
    padding: 10px 20px; /* Adjust padding for better size */
    background-color: #ff8000; /* Button background color */
    color: #ffffff; /* White text */
    text-decoration: none; /* Remove underline */
    border-radius: 8px; /* Slightly rounded corners */
    font-weight: bold; /* Bold text */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.hp-listing__contact-button .button:hover {
    background-color: #2a2eac; /* Dark blue hover color */
}
/* General button container spacing */
.hp-listing__contact-button {
    margin-bottom: 20px; /* Space below each button */
    text-align: center; /* Center-align all buttons */
}

/* Button styling */
.hp-listing__contact-button .button {
    display: inline-block;
    padding: 10px 20px; /* Adjust button size */
    background-color: #ff8000; /* Vibrant pink button background */
    color: #ffffff; /* White text */
    text-decoration: none; /* No underline */
    border-radius: 8px; /* Rounded corners */
    font-weight: bold; /* Bold text */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Button hover effect */
.hp-listing__contact-button .button:hover {
    background-color: #2a2eac; /* Dark blue on hover */
}

/* Additional spacing if necessary (for title and button) */
a + .hp-listing__contact-button {
    margin-top: 10px; /* Space between title and button */
}
/* ============================
   Autocomplétion des villes
============================ */
#city-suggestions {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    z-index: 1000;
}

#city-suggestions li {
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.2s ease;
}

#city-suggestions li:hover {
    background-color: #f0f0f0;
}
/* Ajout ou renforcement de la classe one-col */
.one-col {
    display: flex !important; /* Priorité renforcée */
    flex-direction: column !important; /* Alignement vertical */
    align-items: flex-start !important; /* Alignement à gauche */
    gap: 8px; /* Espacement ajusté */
    grid-column: 1 / -1 !important; /* S'assurer qu'il prend toute la largeur */
}

/* Style des paragraphes dans one-col */
.one-col p {
    margin: 0 !important;
    font-size: 16px !important; /* Taille ajustée */
    color: #333 !important; /* Couleur lisible */
    line-height: 1.5; /* Espacement vertical */
}
.wpcf7-form .one-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
}
/* Supprime les marges et les espaces des inputs hidden */
input[type="hidden"] {
    display: none !important; /* Retire l'élément du flux */
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
}
.one-col p + input[type="hidden"] {
    display: none !important; /* Masque uniquement les champs cachés suivant un <p> */
}
/* Appliquer la transformation en majuscule aux éléments */
#city_display,
#city-suggestions li,
input[name="city"] {
    text-transform: uppercase !important; /* Transforme le texte en majuscule */
}

/* Optionnel : Mettre le texte en majuscule pour l'auto-complétion */
#city-suggestions li {
    text-transform: uppercase !important;
}
/* Style spécifique pour le nom du prestataire dans le formulaire */
#listing_name_display {
    font-size: 24px; /* Taille plus grande */
    font-weight: bold; /* Texte en gras */
    color: #333; /* Couleur plus sombre pour une bonne lisibilité */
    margin-bottom: 10px; /* Espace sous le nom */
    text-transform: uppercase; /* Tout en majuscules */
    text-align: left; /* Aligné à gauche */
}
/* 📌 Tableau des Transactions */
.credits-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px; /* 📌 Réduction de la police pour éviter les retours à la ligne */
}

/* 📌 Entête du tableau */
.credits-table th {
    background-color: #ff8000; /* Violet principal */
    color: white;
    padding: 10px;
    text-align: center;
}

/* 📌 Lignes du tableau (éclaircissement du violet) */
.credits-table tr:nth-child(even) {
    background-color: #fbd38a; /* Violet éclairci */
}

.credits-table tr:nth-child(odd) {
    background-color: #fbe8ff; /* Encore plus clair */
}

/* 📌 Cellules du tableau */
.credits-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    color: black; /* 📌 Texte noir */
}

/* 📌 Badges Achat/Dépense */
.badge-achat, .badge-depense {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 12px; /* 📌 Réduction de la taille pour mobile */
    min-width: 80px;
    text-align: center;
}

.badge-achat {
    background-color: #4CAF50;
    color: white;
}

.badge-depense {
    background-color: #f44336;
    color: white;
}

/* 📌 📱 Optimisation Mobile */
@media screen and (max-width: 768px) {
    .credits-table {
        font-size: 12px; /* 📌 Réduction de la taille de la police */
    }

    .credits-table th, .credits-table td {
        padding: 6px;
    }

    .badge-achat, .badge-depense {
        font-size: 10px; /* 📌 Encore plus petit sur mobile */
        padding: 3px 5px;
        min-width: 60px;
    }
}
/* 📌 Boutons Acheter */
.credit-buttons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Espacement horizontal entre les boutons */
    margin-top: 10px;
}

.credit-button {
    background-color: #ff8000; /* Couleur principale du site */
    color: white;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    text-align: center;
}

.credit-button:hover {
    background-color: #b430d8; /* Version plus foncée au survol */
}

/* 📌 📱 Responsive - Amélioration Mobile */
@media screen and (max-width: 768px) {
    .credit-buttons {
        flex-direction: column; /* Empile les boutons en colonne */
        align-items: center; /* Centre les boutons */
        gap: 10px; /* Ajoute un espacement vertical entre les boutons */
    }

    .credit-button {
        width: 80%; /* Largeur ajustée pour mobile */
        font-size: 14px;
        padding: 10px 15px;
    }
}
/* 📌 Tableau des Fiches Prospects */
.fiches-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 15px !important;
    font-size: 14px !important;
}

/* 📌 Entête du tableau */
.fiches-table th {
    background-color: #ff8000 !important; /* Violet principal */
    color: white !important;
    padding: 10px !important;
    text-align: center !important;
}

/* 📌 Lignes du tableau (alternance de couleurs) */
.fiches-table tr:nth-child(even) {
    background-color: #fdcd76 !important; /* Violet clair */
}

.fiches-table tr:nth-child(odd) {
    background-color: #ffd3a5 !important; /* Encore plus clair */
}

/* 📌 Cellules du tableau */
.fiches-table td {
    border: 1px solid #ddd !important;
    padding: 8px !important;
    text-align: center !important;
    color: black !important;
}

/* 📌 Boutons Acheter */
.credit-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 15


#credit_products {
    display: flex ;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.credit-product-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    width: 180px;
    background-color: #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.credit-product-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.credit-product-price {
    font-weight: bold;
    color: #d542f5;
    margin: 10px 0;
}

.credit-product-buy {
    display: inline-block;
    padding: 8px 12px;
    background: #d542f5;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.credit-product-buy:hover {
    background: #b02bc1;
}
/* ✅ Corrige les styles des inputs de Contact Form 7 */
.wpcf7-form .distance-selector {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.wpcf7-form .distance-selector label {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    gap: 10px !important;
    white-space: nowrap !important;
}

/* ✅ S'assurer que Contact Form 7 ne casse pas tes styles */
.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"] {
    transform: scale(1) !important;
    margin-right: 5px !important;
}