/* Style de la page pour les professionnels de Tra-V */

body {
    font-family: inika, 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #2C2C54;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navbar Styles */
/* Navbar Styles */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: #E6FFE6;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-radius: 0 0 20px 20px;
	height: 30px;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Logo Section */
.navbar-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    font-size: 2.3rem;
    font-weight: bold;
    color: #000;
    transition: transform 0.3s ease-in-out;
}

.navbar-logo img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.navbar-logo:hover {
    transform: scale(1.1);
}

/* Navigation Menu */
.navbar-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin-top: 15px;
    padding: 0;
	flex-wrap: wrap;
}

.navbar-links .nav-link {
    text-decoration: none;
    color: black;
    font-size: 1.0rem;
    font-weight: 500;
    padding: 10px 20px;
    background-color: #E6FFE6;
    border-radius: 50px;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.navbar-links .nav-link:hover {
    background-color: #fff;
    color: #000;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	transform: scale(1.1);
}

/* Hamburger Menu */
.navbar-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.navbar-toggle span {
    width: 35px;
    height: 4px;
    background: white;
    border-radius: 3px;
}

@media (max-width: 768px) {
    .navbar-links {
        flex-direction: column;
        background: #16A085;
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        display: none;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .navbar-links.active {
        display: flex;
    }

    .navbar-toggle {
        display: flex;
    }
}



/* Sous-menu déroulant */
/* 🌿 Dropdown modernisé */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    backdrop-filter: blur(12px);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    min-width: 230px;
    padding: 12px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 999;
}

.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    color: #2C3E50;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    background: transparent;
    border-left: 4px solid transparent;
}

.dropdown-link::after {
    content: '➜';
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(-5px);
    font-size: 0.95rem;
    color: #2C3E50;
}

.dropdown-link:hover {
    background-color: #d4ffe1;
    padding-left: 28px;
    border-left: 4px solid #2ECC71;
    border-radius: 0 10px 10px 0;
}

.dropdown-link:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* 🎯 Responsive */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        display: none;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: none;
        border-radius: 12px;
        padding: 0;
        width: 100%;
    }

    .navbar ul.active .dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-container {
    display: flex; /* Permet d'aligner l'image et le texte sur une même ligne */
    align-items: center; /* Centre verticalement l'image et le texte */
    gap: 10px; /* Ajoute un espace entre le logo et le texte */
}

.logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.logo-text {
    font-size: 2.4rem; /* Taille du texte "Tra-V" */
    font-weight: bold;
    color: #000; /* Couleur du texte */
    font-family: inika, 'Poppins', sans-serif; /* Police utilisée */
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Style du bouton de déconnexion */
.logout-btn {
    margin-left: 10px;
    padding: 6px 12px;
    background-color: #dc3545; /* Rouge */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

/* Effet au survol */
.logout-btn:hover {
    background-color: #b02a37; /* Rouge foncé */
}

.user-nav {
    margin-left: 350px;
	min-width: 220px;
}

.intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: #fff; /* Couleur de fond harmonieuse */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    border-radius: 12px;
    border-bottom: 3px solid #000;
    max-width: 80%; /* Limite la largeur */
    margin: 20px auto; /* Centre horizontalement */
    height: auto; /* Ajuste la hauteur en fonction du contenu */
}

.intro h1 {
    font-size: 2.7rem; /* Taille plus douce */
    color: #000;
    margin: 0.5rem 0;
}

.intro p {
    font-size: 1.1rem; /* Ajuste la taille pour un meilleur contraste */
    margin: 0.5rem 0;
    color: #000;
    max-width: 600px; /* Limite la largeur du texte */
    line-height: 1.5; /* Améliore la lisibilité */
    text-align: center;
}

.form-section {
    max-width: fit-content;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #FFF;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.activity-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #000;
}

.activity-form input, 
.activity-form select, 
.activity-form textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    font-size: 1rem;
    color: #2C3E50;
    transition: border-color 0.3s;
}

.activity-form input:focus, 
.activity-form select:focus, 
.activity-form textarea:focus {
    border-color: #1ABC9C;
    outline: none;
}

.activity-form button {
    display: inline-block;
    background-color: #1ABC9C;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.activity-form button:hover {
    background-color: #16A085;
}

/* 🌟 Section d'information principale */
.info {
    padding: 4rem 2rem;
    background-color: #E6FFE6; /* Fond clair et agréable */
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 📝 Conteneur centré */
.info-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* 🎯 Titre principal */
.info h2 {
    font-size: 2.5rem;
    color: #2C3E50;
    margin-bottom: 1rem;
}

/* 📝 Sous-titre d'introduction */
.info-intro {
    font-size: 1.2rem;
    color: #34495E;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 📦 Grille des cartes d'information */
.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* 📦 Carte individuelle */
.info-card {
    background-color: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #ddd;
}

/* 🎨 Effet de survol */
.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* 📷 Icônes */
.info-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

/* 📝 Titres des cartes */
.info-card h3 {
    font-size: 1.5rem;
    color: #2C3E50;
    margin-bottom: 0.5rem;
}

/* 📝 Texte des cartes */
.info-card p {
    font-size: 1rem;
    color: #34495E;
    line-height: 1.6;
}

/* 🚀 Bouton d'appel à l'action */
.cta {
    margin-top: 3rem;
}

.cta-button {
    background-color: #38a169;
    color: white;
    padding: 0.75rem 2rem;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
    background-color: #2f855a;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}


footer {
    text-align: center;
}

/* Styles pour les icônes interactives */
.activity-icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.activity-icon {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f4f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    position: relative;
}

.activity-icon img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}

.activity-icon label {
    font-size: 0.9rem;
    color: #2C3E50;
    font-weight: bold;
}

.activity-icon:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}

.activity-icon.active {
    transform: translateY(-10px);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.7);
    background-color: #fff;
}

/* ✅ Style du bouton "Ajouter l'Activité" */
.activity-form button[type="submit"] {
    display: inline-block;
    padding: 10px 35px;
    font-size: 1.3rem;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #D4FFD0, #38a169);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
	left: 35%;
    overflow: hidden;
    z-index: 1;
    isolation: isolate;
    margin-top: 20px;
}

/* ✅ Effet de dégradé dynamique */
.activity-form button[type="submit"]::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, #D4FFD0, #38a169, #2C3E50, #38a169);
    background-size: 200% 200%;
    z-index: -1;
    transition: all 0.5s ease;
}

/* ✅ Effet de survol */
.activity-form button[type="submit"]:hover::before {
    animation: gradientAnimation 2s infinite alternate;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* ✅ Effet de survol - animation du bouton */
.activity-form button[type="submit"]:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
}

/* ✅ Effet de clic */
.activity-form button[type="submit"]:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* 🟢 Conteneur général des horaires */
.opening-hours-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
}

/* 🟢 Style du conteneur de chaque jour */
.day-hours {
    border: 2px solid #000;
    border-radius: 8px;
    padding: 10px;
    background-color: #fff;
    transition: max-height 0.5s ease, opacity 0.3s;
    overflow: hidden; /* ✅ Empêche le débordement du contenu */
    min-height: 60px;
    position: relative; /* ✅ Garde la hauteur indépendante */
	height: auto;
	margin-top: 10px;
}

/* 🟢 Légende (titre du jour) centré verticalement */
.day-hours legend {
    font-size: 1.1rem;
    color: #000;
    padding: 5px 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center; /* ✅ Centre verticalement */
    justify-content: space-between;
    cursor: pointer;
    background-color: #fff;
    border-radius: 6px;
    transition: 0.4s ease;
	border: 1px solid #d1d1d1;
}

.day-hours legend:hover {
	transform: scale(1.10);
}

/* 🟢 Icône de la flèche pour ouvrir/fermer */
.toggle-arrow {
    font-size: 1.1rem;
	margin-left: 10px;
    transition: transform 0.3s;
    color: #000;
}

/* 🟢 Conteneur du contenu du jour */
.day-content {
    max-height: 0; /* ✅ Hauteur initiale 0 */
    transition: max-height 0.5s ease, opacity 0.3s;
    opacity: 0;
}

/* 🟢 Contenu visible uniquement lorsque non replié */
.day-hours:not(.collapsed) .day-content {
    min-height: 380px; /* ✅ Hauteur dynamique */
    opacity: 1;
}

/* 🟢 Rotation de la flèche lors de l'ouverture */
.day-hours:not(.collapsed) .toggle-arrow {
    transform: rotate(180deg);
}

.day-hours.collapsed {
    max-height: 60px; /* ✅ Hauteur des jours fermés */
}

/* 🟢 Style du jour fermé */
.day-hours.closed {
    opacity: 0.2;
    background-color: #f1f1f1;
}

/* 🕰️ Style général pour le conteneur de sélection d'heure */
.time-picker-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

/* ✅ Espacement entre le label et l'input */
label {
    font-weight: bold !important;
    margin-bottom: 10px !important; /* ✅ Ajoute un léger espace entre le label et l'input */
    font-size: 1rem !important;
    color: #000 !important;
}


/* ✅ Style pour l'input de type "time" */
input[type="time"] {
    width: 60%;
    padding: 8px 12px;
    font-size: 1rem;
    border: 2px solid #000;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #2C3E50;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    appearance: none;
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0.8;
	margin-bottom: 30px;
	margin-top: 5px;
}



/* 🌟 Effet lors du survol */
input[id$="-midi-start"]:hover {
    border-color: #71ff54;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

input[id$="-midi-end"]:hover {
    border-color: #ff240e;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

input[id$="-soir-start"]:hover {
    border-color: #71ff54;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

input[id$="-soir-end"]:hover {
    border-color: #ff240e;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

/* 🌟 Effet lors du survol */
input[id$="-midi-start"]:focus {
    border-color: #71ff54;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

input[id$="-midi-end"]:focus {
    border-color: #ff240e;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

input[id$="-soir-start"]:focus {
    border-color: #71ff54;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

input[id$="-soir-end"]:focus {
    border-color: #ff240e;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

.time-selection {
	display: flex;
	flex-direction: column;
}



/* 🎯 Style pour le texte explicatif */
small {
    font-size: 0.9rem;
    color: #34495E;
    opacity: 0.8;
    margin-top: 4px;
    z-index: 1;
}

/* Style de l'input type="time" */
.time-input {
	position: relative;
	left: 17%;
    appearance: none; /* Supprime le style natif */
    width: 60%;
    padding: 8px 10px;
    border: 1px solid #b5e6a7;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    color: #2C3E50;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    outline: none;
}

.time-input:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: #90c695;
    transform: scale(1.05);
}

/* Effet visuel lorsque l'input est actif */
.time-input:focus {
    border-color: #5fae55;
    box-shadow: 0 0 5px rgba(95, 174, 85, 0.5);
}

/* ✅ Conteneur de la case à cocher stylisée */
.closed-day-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin: 8px 0;
    position: relative;
}

/* ✅ Masque la vraie case à cocher */
.closed-day {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* ✅ Style du carré personnalisé */
.custom-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #2C3E50;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    color: transparent;
    font-size: 18px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

/* ✅ Effet au survol */
.closed-day-container:hover .custom-checkbox {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ✅ Icône de validation visible quand la case est cochée */
.closed-day:checked + .custom-checkbox {
    background-color: #FF6B6B;
    border-color: #FF6B6B;
    color: white;
}

/* ✅ Texte du label avec transition */
.closed-day-label {
    color: #2C3E50;
    font-size: 1rem;
    transition: color 0.3s;
}

/* ✅ Changement de couleur du label lorsque coché */
.closed-day:checked ~ .closed-day-label {
    color: #FF6B6B;
    font-weight: bold;
}

.closed-half-day-container {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.closed-half-day-container label {
    display: flex;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
}

.closed-half-day-container .custom-checkbox {
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 2px solid #2C3E50;
    margin-right: 5px;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
}

.closed-half-day-container input[type="checkbox"]:checked + .custom-checkbox {
    background-color: #2C3E50;
    color: white;
}

label[for="restaurant-street-number"] {
    display: block;
    margin-top: 25px; /* Ajuste la valeur pour descendre */
}

/* ✅ Style général pour tous les champs de l'étape 1 */
input[id^="restaurant-"], 
select[id^="restaurant-"], 
select[id^="vege-option"] {
    width: 100% !important;
    max-width: 350px !important; /* Taille uniforme */
    padding: 10px !important;
    font-size: 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
	margin-bottom: 20px !important;
}

/* ✅ Effet au survol */
input[id^="restaurant-"]:hover, 
select[id^="restaurant-"]:hover,
select[id^="vege-option"]:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
    transform: scale(1.05) !important;
}

/* ✅ Effet au focus */
input[id^="restaurant-"]:focus, 
select[id^="restaurant-"]:focus {
    border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

/* ✅ Style pour la liste déroulante de type de cuisine */
select[id^="restaurant-cuisine"] {
    max-width: 280px !important; 
    cursor: pointer !important;
    text-align: center !important;
}

/* ✅ Style pour le menu végétarien */
select[id^="vege-option"] {
    max-width: 200px !important;
    font-weight: bold !important;
    text-align: center !important;
}


#restaurant-street-number,
#restaurant-street-name,
#restaurant-city,
#restaurant-postal-code,
#restaurant-country,
#restaurant-phone {
    width: 100% !important;
    max-width: 250px !important; /* Taille uniforme */
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
	 margin-bottom: 25px !important;
}

/* ✅ Centrage de l'élément de la carte */
#restaurant-map {
    width: 100% !important;
    max-width: 500px !important;
    height: 250px !important;
    margin: 20px auto !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
}

/* ✅ Style général pour les champs d'adresse */
input[id^="restaurant-address-"],
input[id^="restaurant-city-"],
input[id^="restaurant-postal-code-"],
input[id^="restaurant-phone-"] {
    width: 100% !important;
    max-width: 350px !important;
    padding: 10px !important;
    font-size: 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
}

/* ✅ Effet au survol et au focus */
input[id^="restaurant-address-"]:hover,
input[id^="restaurant-city-"]:hover,
input[id^="restaurant-postal-code-"]:hover,
input[id^="restaurant-phone-"]:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
    transform: scale(1.05) !important;
}

input[id^="restaurant-address-"]:focus,
input[id^="restaurant-city-"]:focus,
input[id^="restaurant-postal-code-"]:focus,
input[id^="restaurant-phone-"]:focus {
    border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

/* ✅ Conteneur pour l'alignement des champs d'adresse */
.restaurant-address-group {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
}

/* ✅ Style du champ de numéro et rue */
input[id^="restaurant-street-number-"] {
    max-width: 100px !important;
}

/* ✅ Style du champ de téléphone */
input[id^="restaurant-phone-"] {
    max-width: 250px !important;
}

/* ✅ Carte interactive */
#restaurant-map {
    width: 100% !important;
    max-width: 400px !important;
    height: 250px !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    margin: auto !important;
}


/* ✅ Conteneur des tables */
#table-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

/* ✅ Style des tables ajoutées dynamiquement */
.table-item {
    padding: 15px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 8px;
    position: relative;
    margin-bottom: 10px;
}

/* ✅ Style des labels et inputs */
.table-item label {
    font-weight: bold;
    display: block;
    margin-top: 8px;
}

/* ✅ Champs de saisie */
.table-item input, .table-item select {
    width: 90%;
    text-align: center;
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* ✅ Bouton de suppression */
.remove-table {
    background: #ff0909;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    position: relative;
    left: 41.5%;
}

.remove-table:hover {
    background: #ff0000;
}

/* ✅ Style du champ "Nom de la Table" */
input[id^="table-name-"] {
    width: 100% !important;
    max-width: 180px !important;
    padding: 8px !important;
    font-size: 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
}

/* ✅ Effet au survol */
input[id^="table-name-"]:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
}

/* ✅ Effet au focus */
input[id^="table-name-"]:focus {
    border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

/* ✅ Modifier la taille et le style du placeholder */
input[id^="table-name-"]::placeholder {
    font-size: 0.9rem !important;  /* Ajuste la taille du texte */
    font-style: italic !important; /* Optionnel : met en italique */
    color: #888 !important; /* Optionnel : change la couleur pour plus de visibilité */
    opacity: 1 !important; /* Assure la visibilité sur certains navigateurs */
}



/* ✅ Conteneur principal */
.table-config-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px !important;
}

/* ✅ Style général pour les champs */
input[id^="table-count-"], 
input[id^="table-seats-"], 
select[id^="table-location-"] {
    width: 100% !important;
    max-width: 180px !important; /* ✅ Taille uniforme */
    padding: 10px !important;
    font-size: 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
}

/* ✅ Ajustement pour le select */
select[id^="table-location-"] {
    max-width: 200px !important; 
    cursor: pointer !important;
}

/* ✅ Effets au survol et au focus */
input[id^="table-count-"]:hover, 
input[id^="table-seats-"]:hover, 
select[id^="table-location-"]:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
    transform: scale(1.05) !important;
}

input[id^="table-count-"]:focus, 
input[id^="table-seats-"]:focus, 
select[id^="table-location-"]:focus {
    border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

/* ✅ Conteneur de la case "Réservable en ligne" */
.reservable-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important; /* ✅ Espacement entre la case et le texte */
    margin-top: 10px !important;
    width: 100% !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ✅ Case à cocher "Réservable" */
input[id^="table-reservable-"] {
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #000 !important;
    border-radius: 5px !important;
    background: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
	position: relative;
	left: 15px;
}

/* ✅ Effet au survol */
input[id^="table-reservable-"]:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
}

/* ✅ Effet lorsqu'elle est cochée */
input[id^="table-reservable-"]:checked {
    background: #71ff54 !important;
    border-color: #71ff54 !important;
    color: white !important;
}

/* ✅ Ajout d'une icône ✔ lorsqu'elle est cochée */
input[id^="table-reservable-"]:checked::before {
    content: "✔" !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: black !important;
    text-align: center !important;
    display: block !important;
}

/* ✅ Style du label pour un alignement parfait */
.reservable-container label {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #000 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    position: relative;
	left: 15px;
}

/* ✅ Bouton "Supprimer" */
button.remove-table {
    background: red !important;
    color: white !important;
    font-size: 1rem !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
}

button.remove-table:hover {
    background: darkred !important;
}




/* ✅ Espacement entre le texte des labels et les inputs */
.address-group {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
}

.small-input {
    width: 20%;
}


select {
    background-color: white;
    cursor: pointer;
}

.upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px dashed #000 !important;
    padding: 10px !important;
    margin: 10px 0 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    width: 100% !important;
    max-width: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ✅ Effet au survol */
.upload-container:hover {
    background: rgba(72, 169, 166, 0.2) !important;
}

.custom-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.upload-icon {
    width: 40px !important;
    height: 40px !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

/* ✅ Effet au survol de l'icône */
.upload-container:hover .upload-icon {
    opacity: 1 !important;
}

.custom-upload span {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #000 !important;
    text-align: center !important;
    margin-top: 5px !important;
}

.preview-image {
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin: 5px;
    border-radius: 5px;
}

/* ✅ Conteneur principal */
.bnb-form-section {
    max-width: 600px;
    margin: 50px auto;
    text-align: center;
}

/* ✅ Barre de progression */
/* ✅ Conteneur de la barre de progression */
.progress-bar {
    width: 100%;
    height: 9px;
    background: #E0E0E0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
}

/* ✅ Effet de progression animé */
.progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(120deg, #000 25%, #888 50%, #000 75%);
    background-size: 200% 100%;
    transition: width 0.4s ease-in-out;
    animation: progressAnimation 1.5s infinite linear;
}

/* ✅ Animation de mouvement à l'intérieur */
@keyframes progressAnimation {
    from {
        background-position: 0% 0;
    }
    to {
        background-position: -200% 0;
    }
}


/* ✅ Étapes du formulaire */
.form-step {
    display: none;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
	width: 100%;
}

.form-step.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
	position: relative;
	right: 22px;
}

/* ✅ Titres */
h2 {
	margin-top: 60px;
    color: #111;
	font-size: 2rem;
    font-weight: 600;
	text-align: center;
}

h3 {
    color: #000;
	font-size: 1.4rem;
    font-weight: 600;
}

/* ✅ Style général des sous-titres h4 */
h4 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #111; /* Noir profond */
	border-top: 2px solid #f4f4f4;
    margin-bottom: 25px;
    padding-left: 12px;
    transition: all 0.3s ease-in-out;
	display: inline-block;
}

h4:hover {
    border-top-color: #1A1A1A; /* Accentuation de la barre */
}

/* ✅ Espacement entre plusieurs h4 */
h4:not(:first-child) {
    margin-top: 20px;
}

/* ✅ Conteneur général des types d'hébergement */
.bnb-type-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    padding: 10px;
    max-width: 600px; /* Ajustable selon besoin */
    margin-left: auto;
    margin-right: auto;
}

/* ✅ Style des options */
.bnb-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px; /* Taille réduite */
    height: 80px; /* Taille réduite */
    padding: 12px;
    border: 2px solid #d1d1d1;
    background: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

/* ✅ Icônes ajustées */
.bnb-option img {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
}

/* ✅ Effet au survol et sélection */
.bnb-option:hover,
.bnb-option.selected {
    background: #1c1c1c;
    color: white;
    border-color: #1c1c1c;
    transform: scale(1.05);
}

.bnb-option:hover img,
.bnb-option.selected img {
    filter: invert(1);
}

/* ✅ Texte plus lisible */
.bnb-option span {
    font-size: 13px;
    font-weight: 500;
}

#bnb-guests, #bnb-rooms, #bnb-beds, #bnb-bathrooms {
    text-align: center; /* Centre le texte horizontalement */
}



/* ✅ Conteneur des équipements */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

/* ✅ Style général des labels */
.amenities-grid label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #2C3E50; /* Gris foncé pour la lisibilité */
    transition: all 0.2s ease-in-out;
	font-weight: 550;
}

/* ✅ Cacher l'input natif */
.amenities-grid label input[type="checkbox"] {
    display: none;
}

/* ✅ Création d'une case personnalisée */
.amenities-grid label::before {
    content: "";
    min-width: 20px;
    min-height: 20px;
    border-radius: 4px;
    background: transparent;
    border: 2px solid #2C3E50;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}

/* ✅ Effet visuel lorsque sélectionné */
.amenities-grid label.checked::before {
    background: #71ff54; /* Fond noir */
    border-color: #71ff54;
    content: "✔";
    color: #ffffff; /* Texte blanc */
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ✅ Changement de couleur du texte pour plus de lisibilité */
.amenities-grid label.checked {
    font-weight: bold;
    color: #000; /* Texte noir */
}

/* ✅ Effet au survol */
.amenities-grid label:hover::before {
    border-color: #71ff54; /* Gris plus foncé */
}








/* ✅ Téléchargement d'images */
.image-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    border: 2px dashed #000;
    padding: 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.image-upload:hover {
    border-color: #000;
    background: rgba(0, 0, 0, 0.05);
}

.image-upload img {
    width: 50px;
    opacity: 0.7;
}

/* ✅ Style de l'aperçu des images */
#preview-container, 
#menu-preview-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

/* ✅ Miniatures des images téléchargées */
#preview-container img, 
#menu-preview-container img {
    width: 80px !important;
    height: 80px !important;
    margin: 5px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    border: 2px solid #D0D0D0 !important;
}

/* ✅ Boutons de navigation */
.form-navigation {
    display: flex;
    justify-content: space-between; /* Alignement correct */
    align-items: center;
    margin-top: 30px; /* Évite le chevauchement avec le reste du contenu */
    padding-top: 20px;
    border-top: 1px solid #ccc; /* Séparation visuelle */
}

/* ✅ Style du bouton Précédent désactivé */
#prev-step:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ✅ Style du bouton Précédent actif */
#prev-step {
    opacity: 1;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}



button {
    background: #000;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1rem;
}

button:hover {
    background: #333;
    transform: scale(1.05);
}

button:disabled {
    background: #D0D0D0;
    cursor: not-allowed;
}

#next-step {
    background: linear-gradient(to right, #000000, #1a1a1a); /* Dégradé noir */
    color: #ffffff; /* Texte blanc */
    font-size: 0.9rem;
    font-weight: bold;
    padding: 12px 24px;
    border: 2px solid #ffffff; /* Bordure blanche */
    border-radius: 6px; /* Coins arrondis */
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

/* Effet de survol */
#next-step:hover {
    background: linear-gradient(to right, #ffffff, #f0f0f0); /* Dégradé blanc */
    color: #000000; /* Texte noir */
    border: 2px solid #000000; /* Bordure noire */
}

/* Effet au clic */
#next-step:active {
    transform: scale(0.95); /* Légère réduction au clic */
}

/* ✅ Style du bouton futuriste */
#service-submit-btn {
    background: transparent;
    color: #000;
    font-size: 1rem;
    font-weight: bold;
    padding: 14px 32px;
    border: 2px solid #000;
    border-radius: 50px; /* ✅ Effet moderne, style pill button */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 20px auto;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    position: relative;
    overflow: hidden;
}

/* ✅ Ajout d'un effet néon autour du bouton */
#service-submit-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: 50px;
    z-index: -1;
    transition: all 0.4s ease-in-out;
    opacity: 0.8;
}

/* ✅ Effet au survol */
#service-submit-btn:hover {
    color: #000000;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    transform: scale(1.06);
}

/* ✅ Animation de l'effet néon au survol */
#service-submit-btn:hover::before {
    opacity: 1;
    filter: blur(6px);
    transform: scale(1.15);
}

/* ✅ Effet de clic */
#service-submit-btn:active {
    transform: scale(0.96);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/* ✅ Conteneur de la Step 5 */
.step-5-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ✅ Style des champs de saisie */
.step-5-container input[type="text"],
.step-5-container textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 2px solid #ccc;
    border-radius: 6px;
    background: #f9f9f9;
    transition: border-color 0.3s ease-in-out;
}

/* ✅ Effet au focus */
.step-5-container input[type="text"]:focus,
.step-5-container textarea:focus {
    border-color: #2C3E50;
    background: #fff;
    box-shadow: 0 0 8px rgba(44, 62, 80, 0.3);
    outline: none;
}

/* ✅ Taille uniforme pour la description */
.step-5-container textarea {
    resize: none;
    height: 120px;
}

/* ✅ Labels bien espacés */
.step-5-container label {
    font-size: 1rem;
    font-weight: bold;
    display: block;
    margin-top: 15px;
    color: #2C3E50;
}

.bnb-details-container {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Ajuste l'espace entre les sections */
    margin-top: 20px;
}

/* ✅ Grille des règles */
.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
    border: 2px solid #ccc;
}

/* ✅ Style des labels des règles */
.rules-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #000;
    transition: all 0.2s ease-in-out;
    position: relative; /* ✅ Nécessaire pour bien placer la case à cocher */
}

/* ✅ Cacher la checkbox native mais la garder fonctionnelle */
.rules-grid input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* ✅ Création d'une case à cocher personnalisée */
.rules-grid label::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: transparent;
    border: 2px solid #2C3E50;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}

/* ✅ Effet visuel quand la règle est sélectionnée */
.rules-grid label.selected::before {
    background: #71ff54;
    border-color: #71ff54;
    content: "✔";
    font-size: 14px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


/* ✅ Effet au survol */
.rules-grid label:hover::before {
    border-color: #71ff54;
}

/* ✅ Effet quand la case est cochée */
.rules-grid input[type="checkbox"]:checked + label::before {
    background: #2C3E50;
    border-color: #2C3E50;
    content: "✔";
    font-size: 14px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* ✅ Style général pour tous les champs de texte et sélection */
input[id^="bnb-"], 
select[id^="bnb-"] {
    width: 100% !important;
    max-width: 350px !important; 
    padding: 10px !important;
    font-size: 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important; /* ✅ Centre les champs horizontalement */
	margin-bottom: 20px !important;
}

/* ✅ Ajustement spécifique pour le champ du pays */
select[id^="bnb-country"] {
    max-width: 300px !important; 
    cursor: pointer !important;
}

/* ✅ Effets au survol et au focus */
input[id^="bnb-"]:hover, 
select[id^="bnb-"]:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
    transform: scale(1.05) !important;
}

input[id^="bnb-"]:focus, 
select[id^="bnb-"]:focus {
    border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

/* ✅ Style pour le champ "Nom du logement" */
input[id^="bnb-name"] {
    max-width: 300px !important;
}

/* ✅ Conteneur principal */
.bnb-config-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px !important;
}

/* ✅ Style spécifique pour les cases à cocher */
input[id^="bnb-rules"], input[id^="bnb-amenities"] {
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #000 !important;
    border-radius: 5px !important;
    background: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
}

/* ✅ Effet au survol */
input[id^="bnb-rules"]:hover, 
input[id^="bnb-amenities"]:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
}

/* ✅ Effet lorsqu'elles sont cochées */
input[id^="bnb-rules"]:checked, 
input[id^="bnb-amenities"]:checked {
    background: #71ff54 !important;
    border-color: #71ff54 !important;
    color: white !important;
}

/* ✅ Ajout d'une icône ✔ lorsqu'elles sont cochées */
input[id^="bnb-rules"]:checked::before, 
input[id^="bnb-amenities"]:checked::before {
    content: "✔" !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: black !important;
    text-align: center !important;
    display: block !important;
}

/* ✅ Style du label pour un alignement parfait */
.rules-container label, 
.amenities-container label {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #000 !important;
    cursor: pointer !important;
    display: block !important;
    align-items: center !important;
}

/* ✅ Espacement correct pour les labels contenant un input */
.capacity-controls label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important; /* ✅ Ajoute un espace entre le texte et l'input */
    font-weight: bold !important;
    margin-bottom: 10px !important; /* ✅ Ajoute un espace entre les labels */
    text-align: center !important;
    width: 100% !important;
}


/* ✅ Style des champs de description et instructions spéciales */

#bnb-description,
#bnb-special-instructions {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    color: #2C3E50;
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 6px;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    resize: none; /* Empêche le redimensionnement manuel */
	margin-top:10px;
}

/* ✅ Taille par défaut */
#bnb-description {
    height: 100px; /* Plus grand pour la description principale */
    height: 100px; /* Plus grand pour la description principale */
	width:80%;
}

#bnb-special-instructions {
    height: 70px; /* Taille adaptée aux instructions courtes */
	width:80%;
}

/* ✅ Effet au focus */
#bnb-description:focus,
#bnb-special-instructions:focus {
    border-color: #2C3E50;
    background: #fff;
    box-shadow: 0 0 8px rgba(44, 62, 80, 0.3);
    outline: none;
}

/* ✅ Style des labels */
#bnb-description + label,
#bnb-special-instructions + label {
    font-size: 1rem;
    font-weight: bold;
    color: #2C3E50;
    margin-bottom: 5px;
    display: block;
}

/* ✅ Conteneur pour une meilleure présentation */
.description-container,
.instructions-container {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ✅ Conteneur spécifique à l'upload du BnB */
.bnb-image-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    border: 2px dashed #000;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
}

/* ✅ Icône d’upload spécifique */
.bnb-image-upload img {
    width: 50px;
    height: 50px;
    opacity: 0.8;
    transition: opacity 0.3s ease-in-out;
}

/* ✅ Effet au survol */
.bnb-image-upload:hover {
    background: #e0e0e0;
    border-color: #111;
}

.bnb-image-upload:hover img {
    opacity: 1;
}

/* ✅ Cacher l’input file d'origine */
.bnb-image-upload input[type="file"] {
    display: none;
}

/* ✅ Cacher l'input file natif */
input[type="file"] {
    display: none !important;
}

/* ✅ Conteneur des chambres */
#room-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-top: 10px !important;
}

/* ✅ Style des chambres ajoutées dynamiquement */
.room-item {
    padding: 15px !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    position: relative !important;
    margin-bottom: 15px !important;
}

/* ✅ Style des labels et inputs */
.room-item label {
    font-weight: bold !important;
    margin-bottom: 10px !important; /* ✅ Ajoute un espacement sous les labels */
    text-align: center !important;
}

/* ✅ Style des inputs de texte et de nombre */
input[id^="suite-name-"], 
input[id^="bed-single-"], 
input[id^="bed-double-"], 
input[id^="room-price-"], 
input[id^="room-count-"] {
    width: 100% !important;
    max-width: 250px !important;
    padding: 10px !important;
    font-size: 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
}

/* ✅ Style spécifique pour le champ du nom de la suite */
input[id^="suite-name-"] {
    max-width: 280px !important;
}

/* ✅ Effets au survol et au focus */
input[id^="suite-name-"]:hover, 
input[id^="bed-single-"]:hover, 
input[id^="bed-double-"]:hover, 
input[id^="room-price-"]:hover, 
input[id^="room-count-"]:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
    transform: scale(1.05) !important;
}

input[id^="suite-name-"]:focus, 
input[id^="bed-single-"]:focus, 
input[id^="bed-double-"]:focus, 
input[id^="room-price-"]:focus, 
input[id^="room-count-"]:focus {
    border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

/* ✅ Conteneur des équipements des chambres */
.room-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
    border: 2px solid #ccc;
}

/* ✅ Style des labels */
.room-amenities-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #000;
    transition: all 0.2s ease-in-out;
    position: relative; /* ✅ Nécessaire pour bien placer la case à cocher */
}

/* ✅ Cacher la checkbox native mais la garder fonctionnelle */
.room-amenities-grid input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* ✅ Création d'une case à cocher personnalisée */
.room-amenities-grid label::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: transparent;
    border: 2px solid #2C3E50;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}

/* ✅ Effet visuel lorsque sélectionné */
.room-amenities-grid label.checked::before {
    background: #71ff54;
    border-color: #71ff54;
    content: "✔";
    font-size: 16px;
    color: white;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ✅ Effet au survol */
.room-amenities-grid label:hover::before {
    border-color: #71ff54;
}

/* ✅ Texte en gras quand sélectionné */
.room-amenities-grid label.checked {
    font-weight: bold;
    color: #000;
}


/* ✅ Bouton de suppression */
.remove-room {
    background: #ff4c4c;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
	position: relative;
	left: 41.5%;
}

.remove-room:hover {
    background: #c0392b;
}

.paddroom {
	text-align: center;
	font-size: 0.9rem;
	margin-top: 25px;
}


#suite-name-1, #bed-single-1, #bed-double-1, #room-price-1, #room-count-1  {
	position: relative;
	left: 4%;
}

/* ✅ Style général des inputs pour l'hôtel */
input[id^="hotel-name"], 
input[id^="hotel-stars"], 
input[id^="hotel-street-number"], 
input[id^="hotel-street-name"], 
input[id^="hotel-city"], 
input[id^="hotel-postal-code"], 
select[id^="hotel-country"] {
    width: 100% !important;
    max-width: 300px !important;
    padding: 10px !important;
    font-size: 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
}

/* ✅ Effets au survol et au focus */
input[id^="hotel-name"]:hover, 
input[id^="hotel-stars"]:hover, 
input[id^="hotel-street-number"]:hover, 
input[id^="hotel-street-name"]:hover, 
input[id^="hotel-city"]:hover, 
input[id^="hotel-postal-code"]:hover, 
select[id^="hotel-country"]:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
    transform: scale(1.05) !important;
}

input[id^="hotel-name"]:focus, 
input[id^="hotel-stars"]:focus, 
input[id^="hotel-street-number"]:focus, 
input[id^="hotel-street-name"]:focus, 
input[id^="hotel-city"]:focus, 
input[id^="hotel-postal-code"]:focus, 
select[id^="hotel-country"]:focus {
    border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

/* ✅ Espacement entre les labels et les inputs */
.hotel-form-section label {
    font-weight: bold !important;
    margin-bottom: 6px !important; /* ✅ Ajoute un espacement sous les labels */
    text-align: center !important;
}

/* ✅ Style spécifique aux sélections */
select[id^="hotel-country"] {
    max-width: 320px !important;
    cursor: pointer !important;
}

/* ✅ Conteneur des étoiles */
.rating-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 35px auto;
}

/* ✅ Barre des étoiles */
.stars {
    display: flex;
    gap: 8px;
    cursor: pointer;
}

/* ✅ Style des étoiles SVG */
.star {
    width: 40px;
    height: 40px;
    fill: #b3b3b3; /* Étoile vide par défaut */
    transition: fill 0.3s ease, transform 0.2s ease;
    display: block;
}

/* ✅ Effet lorsque l'étoile est survolée ou active */
.star.hover,
.star.active {
    fill: #ffda21; /* Jaune doré */
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px rgba(255, 218, 33, 0.8)) 
            drop-shadow(0 0 8px rgba(255, 218, 33, 0.6)); /* Effet lumineux */
    transition: transform 0.2s ease, filter 0.3s ease;
}

/* ✅ Conteneur principal des champs remplissables */
.form-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
}

/* ✅ Effet survol */
.form-field:hover {
    background: #e8e8e8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ✅ Label des champs */
.form-field label {
    font-weight: bold;
    color: #333;
    flex: 1;
}

/* ✅ Inputs & Textareas */
.form-field input,
.form-field textarea,
.form-field select {
    width: 60%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 14px;
}

/* ✅ Focus sur input/textarea */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: #71ff54;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6);
}

/* ✅ Suppression de champ */
.remove-field {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.remove-field img {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

.remove-field:hover img {
    opacity: 1;
}

/* ✅ Style des dropdowns */
.form-field select {
    cursor: pointer;
    appearance: none;
    background: #fff;
}

/* ✅ Bouton ajouter */
.add-field-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    padding: 10px;
    background: #1ABC9C;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin: 10px auto;
}

.add-field-btn:hover {
    background: #16A085;
}

/* ✅ Conteneur des réductions/tarifications */
#discount-container,
#pricing-container {
    padding: 10px;
    background: rgba(240, 240, 240, 0.8);
    border-radius: 6px;
    margin-top: 10px;
}

.activity-builder {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
    width: fit-content;
	min-width: 1150px;
    max-width: 100%;
    flex-wrap: nowrap; /* ✅ Reste toujours sur une ligne */
}


/* ✅ Conteneur des questions à sélectionner */
.question-selection-container {
    width: 434px;
	min-width: 434px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ✅ Liste des critères à sélectionner */
.question-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ✅ Style des critères à glisser */
.question-item {
    background: white;
    padding: 10px;
    border-radius: 6px;
    cursor: grab;
    transition: all 0.2s ease;
}

.question-item:hover {
    background: #e0ffe0;
}

.drop-zone {
    width: 100%;
	min-width: 600px;
    min-height: 220px;
	max-height: 464px;
    background: #f9f9f9;
    border: 2px dashed #71ff54;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.3s ease-in-out;
    font-size: 16px;
    color: #555;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: auto; 
	scrollbar-width: none;/* ✅ Ne pas forcer de scroll interne ici */
    position: relative;
	right: 4% !important;
}


/* ✅ Quand il ne contient aucun élément */
.drop-zone.empty {
    right: 38%; /* ✅ Décalage seulement quand il est vide */
	top:20%;
}

/* ✅ Quand il contient au moins un élément */
.drop-zone.has-content {
    justify-content: flex-start; /* Aligner en haut dès qu'il y a un élément */
    min-height: 300px; /* Augmente la taille minimale pour éviter un saut visuel */
    right: 1%; /* ✅ Repositionné correctement */
	top: 10%;
}

/* ✅ Effet quand on glisse un élément */
.drop-zone.drag-over {
    background: #EAFDE7;
    border-color: #27AE60;
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.3);
    color: #2ECC71;
}


/* ✅ Texte d'instruction */
.drop-zone h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

/* ✅ Zone de contenu stable */
.drop-zone .step-content {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

/* ✅ Élément ajouté */
.drop-zone .form-field {
    width: 85%;
    max-width: 600px;
    background: white;
    border-radius: 8px;
    padding: 12px 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: transform 0.2s ease-in-out;
}

/* ✅ Effet léger au survol */
.drop-zone .form-field:hover {
    transform: scale(1.02);
}

/* ✅ Texte du critère */
.drop-zone .form-field label {
    font-weight: 500;
    color: #333;
    flex-grow: 1;
    text-align: left;
}

/* ✅ Champ de saisie */
.drop-zone .form-field input {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 10px;
    width: 50%;
    font-size: 14px;
}

/* ✅ Bouton de suppression avec icône */
.drop-zone .remove-field {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease-in-out;
}

/* ✅ Icône de suppression */
.drop-zone .remove-field img {
    width: 25px; /* Taille ajustable */
    height: 25px;
    transition: transform 0.2s ease-in-out;
}

/* ✅ Effet au survol */
.drop-zone .remove-field:hover img {
    transform: scale(1.1);
}


/* ✅ Boutons navigation */
.form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* ✅ Boutons précédent / suivant */
#activity-prev-step,
#activity-next-step {
    background: #1ABC9C;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#activity-prev-step:disabled {
    background: #ccc;
    cursor: not-allowed;
}

#activity-next-step:hover {
    background: #16A085;
}

/* ✅ Bouton soumission */
#activity-submit-form {
    display: block;
    width: 100%;
    max-width: 250px;
    padding: 12px;
    background: #FF6B6B;
    color: white;
    font-size: 16px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin: 20px auto;
}

#activity-submit-form:hover {
    background: #D63031;
}

/* ✅ Style des inputs et selects spécifiques à la Step 1 */
#activity-name,
#activity-location,
#activity-contact,
#activity-type {
    width: 100% !important;
    max-width: 280px !important;
    padding: 10px !important;
    font-size: 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ✅ Effets au survol et focus */
#activity-name:hover,
#activity-location:hover,
#activity-contact:hover,
#activity-type:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
    transform: scale(1.05) !important;
}

#activity-name:focus,
#activity-location:focus,
#activity-contact:focus,
#activity-type:focus {
    border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

/* ✅ Ajustement du select "Type d'activité" */
#activity-type {
    cursor: pointer !important;
    appearance: none !important;
}

/* ✅ Ajout d'un espace entre les champs */
#activity-name + label,
#activity-location + label,
#activity-contact + label,
#activity-type + label {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    display: block !important;
    text-align: left !important;
	margin-top: 20px;
}

#activity-namev2 {
	font-size: 17px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    display: block !important;
    text-align: left !important;
	margin-top: 20px;
}

/* Style des options */
#activity-type option {
  padding: 12px 16px;
  font-size: 16px;
  font-family: 'Segoe UI', sans-serif;
  color: #2c3e50;
  background-color: #fdfdfd;
  border-bottom: 1px solid #e0e0e0;
  line-height: 1.6;
  font-weight: 500;
}

/* ✅ Centrage et alignement des inputs */
.fixed-fields {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    background: #f9f9f9 !important;
    padding: 20px !important;
    border-radius: 10px !important;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2) !important;
}

/* ✅ Bouton "Suivant" */
#activity-next-step {
    background-color: #1ABC9C !important;
    color: #fff !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease-in-out !important;
    display: block !important;
    width: 100% !important;
    max-width: 200px !important;
    margin: 20px auto !important;
    text-align: center !important;
}

#activity-next-step:hover {
    background-color: #16A085 !important;
}

.activityv2-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 35px auto;
}

.p-add-activity {
	font-size: 0.8rem; 
	text-align: center;
}

.p-act-parenthese {
	font-size: 0.7rem; 
	text-align: center;
}

.hidden {
	display: none;
}

/* ✅ Style de la modale */
.modal {
    position: fixed!important;
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%, -50%)!important;
    width: 80%!important;
    max-width: 600px!important;
    max-height: 80vh!important; /* ✅ Hauteur max avec scroll */
    background: #fff!important;
    border-radius: 12px!important;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3)!important;
    z-index: 1000!important;
    overflow: hidden!important;
    display: flex!important;
    flex-direction: column!important;
}

/* ✅ Contenu de la modale */
.modal-content {
    padding: 20px!important; /* ✅ Active le scroll uniquement si nécessaire */
	overflow-y: auto;
}

/* ✅ Cache la scrollbar sur certains navigateurs */
.modal-content::-webkit-scrollbar {
    display: none;
}

/* ✅ Empêche la modale de s'afficher par erreur */
#hours-modal.hidden {
    display: none !important;
}

/* ✅ Bouton de fermeture */
.close-modal {
    position: absolute!important;
    bottom: 685px!important;
    left: 280px!important;
    background: none!important;
    border: none!important;
    cursor: pointer!important;
}

.close-modal img {
    width: 24px!important;
    height: 24px!important;
}

/* ✅ Assurer que le conteneur des horaires reste propre */
#hours-container {
    max-height: 70vh!important;
    overflow-y: auto!important; /* ✅ Scroll interne si trop de contenu */
    padding-right: 10px!important; /* ✅ Pour éviter que le texte colle au bord */
}

/* ✅ Correction de la disposition des inputs */
.time-selection {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* ✅ 2 colonnes égales */
    align-items: center !important;
    justify-content: center !important;
}

/* ✅ Sélection précise pour la modale des horaires dans le formulaire d'activités */
#hours-modal .modal-content .day-hours {
    max-height: 240px;
}

#save-hours {
	position: relative;
	left: 40%;
	margin-top: 20px;
}

/* ✅ Masque totalement la vraie checkbox tout en gardant sa position */
.closed-day {
    position: absolute;
    opacity: 0;
    width: 20px; /* Même taille que la case stylisée */
    height: 20px;
    cursor: pointer;
}


/* ✅ Base de la case stylisée */
.closed-day-container label::before {
    content: "" !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #d32f2f !important;
    border-radius: 5px !important;
    background-color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease-in-out !important, border-color 0.2s ease-in-out !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: transparent !important;
}

/* ✅ Effet au survol */
.closed-day-container:hover label::before {
    border-color: #9a0000 !important;
    transform: scale(1.1) !important;
}

/* ✅ Case cochée : Couleur & ✔ */
.closed-day:checked + label::before {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
    color: white !important;
    content: "✔" !important;
    font-size: 16px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
}

/* ✅ Animation fluide */
@keyframes fadeInCheckmark {
    0% { transform: scale(0.5) !important; opacity: 0 !important; }
    100% { transform: scale(1) !important; opacity: 1 !important; }
}

.closed-day:checked + label::before {
    animation: fadeInCheckmark 0.2s ease-in-out !important;
}


/* ✅ Assurer que la zone entière est cliquable */
.closed-day-container label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ✅ MODAL des horaires */
.hours-modal {
    display: none; /* ✅ Cachée par défaut */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

/* ✅ Fond assombri derrière la modal */
.modal-overlay {
    display: none; /* ✅ Caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* ✅ Bouton pour fermer la modal */
.close-modal {
    background: #16A085;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
	position: relative;
	left: 92% !important;
	bottom: 93% !important;
}



/* ✅ Rotation de la flèche */
.toggle-arrow {
    font-size: 1.1rem;
    margin-left: 10px;
    transition: transform 0.3s;
    color: #000;
}

/* ✅ Bouton "Définir les horaires" moderne */
button.toggle-hours {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    width: 100% !important;
    max-width: 200px !important;
    height: 40px !important; /* ✅ Uniformisation avec les inputs */
    
    padding: 10px 15px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    
    color: #000 !important;
    background: #fff !important; /* ✅ Effet Apple-like */
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    
    cursor: pointer !important;
    text-align: center !important;
    
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15) !important;
    margin: 10px auto !important;
	position:relative;

}

/* ✅ Effet au survol */
button.toggle-hours:hover {
    transform: scale(1.05) !important;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25) !important;
	border-color: #71ff54 !important;
}

/* ✅ Effet lors du clic */
button.toggle-hours:active {
    transform: scale(0.98) !important;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3) !important;
	border-color: #71ff54 !important;
}

/* ✅ Uniformisation automatique des champs dans la drop-zone */
.drop-zone input,
.drop-zone select,
.drop-zone textarea,
.drop-zone button {
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.9rem;
  padding: 8px 10px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  box-shadow: none;
}

.drop-zone input:hover,
.drop-zone select:hover,
.drop-zone textarea:hover {
  border: 2px solid #71ff54;
  border-radius: 8px;
  font-size: 0.9rem;
  padding: 8px 10px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  box-shadow: none;
}

/* ✅ Focus cohérent */
.drop-zone input:focus,
.drop-zone select:focus,
.drop-zone textarea:focus,
.drop-zone button:focus {
  border-color: #71ff54;
  box-shadow: 0 0 8px rgba(113, 255, 84, 0.4);
  outline: none;
}

/* ✅ Fond de la modale */
#modal-container-activity {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  min-height: 700px;
  min-width: 650px;
  filter: none !important;
  backdrop-filter: none !important;
}

/* ✅ Contenu de la modale */
#modal-content-container-activity {
  background: #fff;
  padding: 40px 60px;
  border-radius: 16px;
  width: 95%;
  max-width: 1000px;      /* ✅ Plus large */
  min-height: 75vh;       /* ✅ Plus haute */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow-y: auto;
  animation: fadeInModal 0.3s ease-in-out;
    filter: none !important;
  backdrop-filter: none !important;
}

/* ✅ Animation */
@keyframes fadeInModal {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ✅ Titre centré */
#modal-content-container-activity h3 {
  font-size: 1.4rem;
  margin-bottom: 25px;
  text-align: center;
  color: #2c3e50;
}

/* ✅ Labels uniformes */
#modal-content-container-activity label {
  display: block;
  font-weight: 600;
  font-size: 1.1rem !important;
  margin: 16px auto 6px;
  color: #333;
  width: 100%;
  max-width: 450px;
  text-align: left;
}

/* ✅ Inputs, selects, textarea uniformes et centrés */
#modal-content-container-activity input[type="text"],
#modal-content-container-activity input[type="number"],
#modal-content-container-activity input[type="email"],
#modal-content-container-activity input[type="url"],
#modal-content-container-activity input[type="file"],
#modal-content-container-activity select,
#modal-content-container-activity textarea {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 10px;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.95rem;
  display: block;
  background: #fff;
  transition: border 0.2s, box-shadow 0.2s;
}

/* ✅ Survol */
#modal-content-container-activity input:hover,
#modal-content-container-activity select:hover,
#modal-content-container-activity textarea:hover {
  border-color: #71ff54;
}

/* ✅ Focus */
#modal-content-container-activity input:focus,
#modal-content-container-activity select:focus,
#modal-content-container-activity textarea:focus {
  border-color: #71ff54;
  box-shadow: 0 0 8px rgba(113, 255, 84, 0.4);
  outline: none;
}

/* ✅ Conteneur de checkbox dans les modales */
.modal-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 5px 0;
}

/* ✅ Cacher la checkbox native */
.modal-checkbox-group input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

/* ✅ Apparence personnalisée des labels */
.modal-checkbox-group label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #333;
  user-select: none;
}

/* ✅ Case personnalisée */
.modal-checkbox-group label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: transparent;
  border: 2px solid #2C3E50;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
}

/* ✅ Survol */
.modal-checkbox-group label:hover::before {
  border-color: #71ff54;
}

/* ✅ Quand la case est cochée */
.modal-checkbox-group input[type="checkbox"]:checked + label::before {
  background: #71ff54;
  border-color: #71ff54;
  content: "✔";
  font-size: 15px;
  color: white;
  text-align: center;
  line-height: 18px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ✅ Texte actif */
.modal-checkbox-group input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: #000;
}


/* ✅ Container du bouton */
#modal-content-container-activity .modal-buttons {
  margin-top: 30px;
  text-align: center;
  position: relative;
}

/* ✅ Nouveau style du bouton Enregistrer */
#modal-content-container-activity .btn-save {
  padding: 12px 30px;
  background-color: white; /* ou transparent selon compatibilité */
  border: 2px solid #000;
  border-radius: 25px;
  color: #000;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  animation: pulseShadow 2s infinite ease-in-out;
  margin: 0 auto;
  position: relative;
  top: 2%;
  left: 36.5%;
}

/* ✅ Effet au survol */
#modal-content-container-activity .btn-save:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

/* ✅ Animation perpétuelle subtile */
@keyframes pulseShadow {
  0% {
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  }
  100% {
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
  }
}



/* ✅ Bouton Fermer */
#modal-content-container-activity .btn-cancel {
  padding: 10px 22px;
  background-color: #ccc;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  color: #333;
  transition: background 0.3s;
}

#modal-content-container-activity .btn-cancel:hover {
  background-color: #bbb;
}

.drop-image-activity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: #fdfdfd;
  border: 2px dashed #000;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  margin-top: 25px;
}

.upload-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.optional-text {
  font-style: italic;
  font-size: 0.8rem;
  color: #888;
  position: relative;
  left: 5%;
}

.duration-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.duration-input-group input,
.duration-input-group select {
  padding: 8px;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.95rem;
  max-width: 150px;
  width: 100%;
}

.duration-hint {
  font-size: 0.75rem;
  font-style: italic;
  color: #666;
  margin-top: 5px;
  position: relative;
  left: 35%;
}

.label-info {
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
  font-size: 0.95rem;
}

/* ✅ Résumé des documents sélectionnés */
.doc-summary-list {
  margin-top: 10px;
  list-style: none;
  padding-left: 0;
  font-size: 0.9rem;
  color: #333;
}

.doc-summary-list li {
  margin: 4px 0;
  padding-left: 20px;
  position: relative;
}

.doc-summary-list li::before {
  content: "📎";
  position: absolute;
  left: 0;
}

/* ✅ Fond de la sous-modale */
#modal-container-activity-subdocs {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ Contenu de la sous-modale */
#modal-content-container-activity-subdocs {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  animation: fadeInSubModal 0.25s ease-in-out;
}

/* ✅ Animation */
@keyframes fadeInSubModal {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ✅ Cache la case native mais garde sa position fonctionnelle */
#modal-content-container-activity-subdocs input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

/* ✅ Case à cocher stylisée */
#modal-content-container-activity-subdocs .modal-check::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 2px solid #2c3e50;
  border-radius: 4px;
  background-color: white;
  vertical-align: middle;
  transition: all 0.2s ease-in-out;
}

/* ✅ Conteneur label cliquable */
#modal-content-container-activity-subdocs .modal-check {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
  padding-left: 30px; /* espace pour la case à cocher */
}

/* ✅ Case cochée */
#modal-content-container-activity-subdocs .modal-check.checked::before {
  background-color: #71ff54;
  border-color: #71ff54;
  content: "✔";
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

/* ✅ Hover */
#modal-content-container-activity-subdocs .modal-check:hover::before {
  border-color: #71ff54;
}

/* ✅ Input de texte personnalisé dans la sous-modale */
#modal-content-container-activity-subdocs input[type="text"] {
  width: 70%;
  max-width: 400px;
  padding: 10px;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 0.95rem;
  background-color: white;
  transition: border 0.2s, box-shadow 0.2s;
  display: block;
  margin: 15px auto; /* Centrage */
}

/* ✅ Hover + focus */
#modal-content-container-activity-subdocs input[type="text"]:hover,
#modal-content-container-activity-subdocs input[type="text"]:focus {
  border-color: #71ff54;
  box-shadow: 0 0 8px rgba(113, 255, 84, 0.4);
  outline: none;
}

/* ✅ Zone de configuration dynamique */
#pricing-config-zone {
  margin-top: 20px!important;
  display: flex!important;
  flex-direction: column!important;
  gap: 25px !important;
  align-items: center !important;
}

/* ✅ Chaque bloc de tarification */
.pricing-block {
  background: #f7f7f7;
  border: 1px solid #000;
  border-radius: 12px;
  padding: 20px !important;
  width: 100%;
  max-width: 500px;
  transition: all 0.3s ease;
  position: relative;
  left:6%;
  margin-top: 20px;
}

/* ✅ Animation d’apparition douce */
.pricing-block {
  animation: fadeInPricingBlock 0.3s ease-in-out;
}

@keyframes fadeInPricingBlock {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ✅ Style des inputs à l’intérieur des blocs */
.pricing-block input,
.pricing-block select,
.pricing-block textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 2px solid #000;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
  transition: border 0.2s, box-shadow 0.2s;
}

.pricing-block input:focus,
.pricing-block select:focus,
.pricing-block textarea:focus {
  border-color: #71ff54;
  box-shadow: 0 0 8px rgba(113, 255, 84, 0.3);
  outline: none;
}

/* ✅ Labels dans les blocs */
.pricing-block label {
  display: block;
  font-weight: 600;
  margin-top: 12px;
  color: #2c3e50;
  font-size: 0.95rem;
}

/* ✅ Bouton Ajouter une règle */
#add-pricing-block {
  background: #ffffff;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  color: #000 !important;
}

#add-pricing-block:hover {
  transform: scale(1.05);
  border-color: #71ff54;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

#add-promo {
  background: #ffffff;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  color: #000 !important;
  position: relative;
  left: 33.5% !important;
}

#add-promo:hover {
  transform: scale(1.05);
  border-color: #71ff54;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

#add-traffic-block {
  background: #ffffff;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  color: #000 !important;
  position: relative;
  left: 28% !important;
}


#add-traffic-block:hover {
  transform: scale(1.05);
  border-color: #71ff54;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

#add-special-date {
  background: #ffffff;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  color: #000 !important;
  position: relative;
  left: 33.5% !important;
}

#add-special-date:hover {
  transform: scale(1.05);
  border-color: #71ff54;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ✅ Message aide */
.hint-text {
  margin-top: 15px;
  font-size: 0.75rem;
  font-style: italic;
  color: #666;
  text-align: center;
}

.add-field-btn2 {
	color: #000;
	position: relative;
	left: 36%;
}

/* ✅ Bouton supprimer dans chaque pricing-block */
.pricing-block .delete-pricing-block {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s ease;
  z-index: 2;
}

.pricing-block .delete-pricing-block img {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.pricing-block .delete-pricing-block:hover img {
  opacity: 1;
  transform: scale(1.1);
}

#latest-booking-time {
	position: relative;
	left: 18%;
}



/* ✅ Styles unifiés pour tous les inputs / selects / textareas */
#reservation-settings-container input[type="text"],
#reservation-settings-container input[type="number"],
#reservation-settings-container input[type="email"],
#reservation-settings-container input[type="time"],
#reservation-settings-container select,
#reservation-settings-container textarea {
    width: 100% !important;
    max-width: 280px !important;
    padding: 10px !important;
    font-size: 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ✅ Focus + hover */
#reservation-settings-container input:focus,
#reservation-settings-container select:focus,
#reservation-settings-container textarea:focus {
	border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

#reservation-settings-container input:hover,
#reservation-settings-container select:hover,
#reservation-settings-container textarea:hover {
      border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
    transform: scale(1.05) !important;
}



/* ✅ Label cohérent */
#reservation-settings-container label {
  font-weight: 500;
  color: #2C3E50;
  margin-bottom: 10px;
  margin-top: 10px;
  display: block;
}

/* ✅ Textarea spécifique */
#reservation-settings-container textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}

/* ✅ Bouton "Ajouter un créneau" ou autre bouton secondaire */
#reservation-settings-container .add-field-btn2 {
  display: inline-block;
  padding: 10px 14px;
  background-color: #2ecc71;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
  transition: background-color 0.2s ease;
}

#reservation-settings-container .add-field-btn2:hover {
  background-color: #27ae60;
}

/* ✅ Bouton supprimer créneau */
#reservation-settings-container .remove-slot-btn {
  background: transparent;
  color: #e74c3c;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
  transition: color 0.2s ease;
}

#reservation-settings-container .remove-slot-btn:hover {
  color: #c0392b;
}



#reservation-settings-container .slot-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

/* ✅ Responsive si jamais nécessaire */
@media (max-width: 600px) {
  #reservation-settings-container .slot-row {
    flex-direction: column;
    align-items: flex-start;
  }

  #reservation-settings-container .add-field-btn2 {
    width: 100%;
    text-align: center;
  }
}

.duration-fields {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

.duration-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.duration-label {
  font-weight: bold;
  color: #2C3E50;
}

.form-description-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 700px;
  margin: 0 auto;
}

.char-counter {
  font-size: 0.85rem;
  color: #555;
  text-align: right;
  font-weight: 500;
}

.desc-helper {
  font-size: 0.85rem;
  font-style: italic;
  color: #888;
}

textarea {
  resize: none;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
}

textarea:hover {
    border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
    transform: scale(1.05) !important;
}

textarea:focus {
    border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

#activity-description {
    font-size: 17px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    display: block !important;
    text-align: left !important;
	margin-top: 20px;
}

input[type="tel"] {
    width: 100% !important;
    max-width: 280px !important;
    padding: 10px !important;
    font-size: 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
}

input[type="tel"]:focus {
	border-color: #71ff54 !important;
    background: rgba(255, 255, 255, 1) !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(113, 255, 84, 0.8) !important;
}

input[type="tel"]:hover {
      border-color: #71ff54 !important;
    box-shadow: 0 0 8px rgba(113, 255, 84, 0.6) !important;
    transform: scale(1.05) !important;
}

.keywords-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 30px;
  padding: 10px 15px;
  border-radius: 12px;
  background-color: #f9f9f9;
}

.custom-keyword-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.custom-keyword-list {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.custom-keyword-item {
  background-color: #f2f2f2;
  padding: 15px 12px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #000;
}

#add-custom-keyword {
	background-color: transparent;
	color: #000;
	border: 2px solid #000;
	border-radius: 25px;
}

.delete-custom-keyword {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.delete-custom-keyword img {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.delete-custom-keyword:hover {
  transform: scale(1.2);
  background: none;
}

#reservation-model {
  padding: 12px 16px;
  font-size: 16px;
  font-family: 'Segoe UI', sans-serif;
  color: #2c3e50;
  background-color: #fdfdfd;
  border-bottom: 1px solid #e0e0e0;
  line-height: 1.6;
  font-weight: 500;
}