/* ========================================
   VOTRE CSS ORIGINAL POUR LE WIDGET
   (Reste inchangé et parfait)
   ======================================== */

/* Conteneur principal du widget */
.widget_mod_vikbooking_horizontalsearch .vbmodhorsearchmaindiv {
    background: #2C3D50 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

/* Conteneur du formulaire */
.vbo-horizsearch-standardformat-wrap {
    background: #2C3D50 !important;
}

/* Labels et textes plus lisibles */
.widget_mod_vikbooking_horizontalsearch {
    color: #fff !important;
}

.vbmodhorsearchmaindiv label,
.vbmodhorsearchmaindiv * {
    color: white !important;
    font-weight: 500 !important;
}

/* Garder les champs lisibles */
.vbmodhorsearchmaindiv input[type="text"],
.vbmodhorsearchmaindiv select {
    color: #333 !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 8px !important;
}

/* Options des sélecteurs lisibles */
.vbmodhorsearchmaindiv select option {
    color: #333 !important;
    background: white !important;
}

/* ICÔNES CALENDRIER - Solution correcte basée sur le vrai code */
.vbmodhorsearchcheckindiv i.far.fa-calendar-alt.vbo-caltrigger,
.vbmodhorsearchcheckoutdiv i.far.fa-calendar-alt.vbo-caltrigger {
    color: white !important;
    background-color: transparent !important;
    border: 1px solid white !important;
}

/* Bouton de réservation */
.vbmodhorsearchmaindiv .vbsearchinputmodhors,
.vbmodhorsearchmaindiv .btn {
    transition: background-color 0.3s ease !important;
    background-color: #3286B8 !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
}

/* Bouton rouge au survol */
.vbmodhorsearchmaindiv .vbsearchinputmodhors:hover,
.vbmodhorsearchmaindiv .btn:hover {
    background-color: #E74C3C !important;
    cursor: pointer !important;
}

/* Groupes de champs */
.vbmodhorsearchcheckindiv,
.vbmodhorsearchcheckoutdiv,
.vbmodhorsearchrac,
.vbmodhorsearchbookdiv {
    margin-bottom: 15px !important;
}

/* Améliorer l'espacement des groupes d'entrée */
.input-group {
    display: flex !important;
    align-items: center !important;
}

.input-group i {
    margin-left: 10px !important;
    cursor: pointer !important;
    color: white !important;
}

/* CSS qui fonctionne - basé sur le HTML réel */
.vbdivsearch {
    background: #2C3D50 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}
.vbo-search-mainview {
    background: #2C3D50 !important;
}
.vb-search-inner {
    background: #2C3D50 !important;
}

/* Labels et textes plus lisibles */
.vbdivsearch label,
.vb-search-inner label,
.vbdivsearch *,
.vb-search-inner * {
    color: white !important;
    font-weight: 500 !important;
}

/* Garder les champs lisibles */
.vbdivsearch input,
.vbdivsearch select,
.vb-search-inner input,
.vb-search-inner select {
    color: #333 !important;
    background: white !important;
}

/* Options des sélecteurs lisibles */
.vbdivsearch select option,
.vb-search-inner select option {
    color: #333 !important;
    background: white !important;
}

/* Icônes calendrier visibles - Classes FontAwesome */
.vbdivsearch .far.fa-calendar-alt,
.vb-search-inner .far.fa-calendar-alt,
.vbdivsearch .fas.fa-calendar-alt,
.vb-search-inner .fas.fa-calendar-alt,
.vbdivsearch .vbo-caltrigger,
.vb-search-inner .vbo-caltrigger {
    color: white !important;
    font-size: 16px !important;
}

/* Bouton rouge au survol - simple et efficace */
.vbo-search-submit button,
.vbo-search-submit .btn {
    transition: background-color 0.3s ease !important;
    background-color: #3286B8 !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
}
.vbo-search-submit button:hover,
.vbo-search-submit .btn:hover {
    background-color: #E74C3C !important;
    cursor: pointer !important;
}

/* ========================================
   CORRECTIONS ADDITIONNELLES POUR SHORTCODE
   (Seulement ce qui manque au shortcode)
   ======================================== */

/* Standardiser la hauteur des champs dans le shortcode */
.vbdivsearch input[type="text"],
.vbdivsearch select,
.vb-search-inner input[type="text"],
.vb-search-inner select,
.vbo-search-mainview input[type="text"],
.vbo-search-mainview select {
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Standardiser les icônes calendrier dans le shortcode */
.vbdivsearch .vbo-caltrigger,
.vb-search-inner .vbo-caltrigger,
.vbo-search-mainview .vbo-caltrigger {
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid white !important;
    border-radius: 4px !important;
    margin-left: 5px !important;
}

/* Layout du formulaire shortcode */
.vbdivsearch form,
.vb-search-inner form,
.vbo-search-mainview form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    align-items: flex-end !important;
}

/* Containers des champs shortcode */
.vbdivsearch .field-container,
.vb-search-inner .field-container,
.vbo-search-mainview .field-container {
    flex: 1 !important;
    min-width: 180px !important;
    margin-bottom: 15px !important;
}

/* Labels du shortcode */
.vbdivsearch label,
.vb-search-inner label,
.vbo-search-mainview label {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Responsive pour shortcode */
@media (max-width: 768px) {
    .vbdivsearch form,
    .vb-search-inner form,
    .vbo-search-mainview form {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .vbdivsearch .field-container,
    .vb-search-inner .field-container,
    .vbo-search-mainview .field-container {
        width: 100% !important;
        min-width: auto !important;
    }
}
🎯 Fixed VikBooking Button Design
Original Button
✅ This version works because:
• Targets the correct classes: .btn.vbo-pref-color-btn
• Uses !important to override VikBooking's default styles
• Works on white background with proper contrast
• Supports both button and anchor elements
📝 Form Demo - How it looks in context
Request Information for One-Bedroom House
Full Name
Full Name
e-Mail
e-Mail
Message
Message

I agree to the terms and conditions
📋 CSS Code to Add to Your Site
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

/* Enhanced VikBooking Button Design */
.btn.vbo-pref-color-btn,
button.vbo-pref-color-btn,
a.vbo-pref-color-btn,
.vbo-pref-color-btn {
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    
    /* Modern gradient background matching your site */
    background: linear-gradient(45deg, #3498db, #2980b9) !important;
    
    display: inline-block !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin: 0px !important;
    
    /* More generous padding for better touch targets */
    padding: 12px 24px !important;
    
    border: none !important;
    outline: 0px !important;
    color: white !important;
    
    /* More rounded corners for modern look */
    border-radius: 6px !important;
    
    /* Smooth transition with multiple properties */
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    
    /* Modern text styling */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    
    /* Subtle shadow for depth */
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
    
    /* Prevent text selection */
    user-select: none !important;
}

.btn.vbo-pref-color-btn:focus,
button.vbo-pref-color-btn:focus,
a.vbo-pref-color-btn:focus,
.vbo-pref-color-btn:focus {
    text-decoration: none !important;
    outline: 2px solid #3498db !important;
    outline-offset: 2px !important;
}

.btn.vbo-pref-color-btn:hover,
button.vbo-pref-color-btn:hover,
a.vbo-pref-color-btn:hover,
.vbo-pref-color-btn:hover {
    text-decoration: none !important;
    
    /* Dramatic color change on hover - matching your site's red accent */
    background: linear-gradient(45deg, #E74C3C, #C0392B) !important;
    
    color: white !important;
    
    /* Lift effect */
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4) !important;
}

/* Active state for better user feedback */
.btn.vbo-pref-color-btn:active,
button.vbo-pref-color-btn:active,
a.vbo-pref-color-btn:active,
.vbo-pref-color-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
}
🔧 Key Fixes Applied:
• Multiple selectors: Covers buttons, links, and generic elements
• !important declarations: Overrides VikBooking's default styles
• White background compatible: High contrast colors
• Consistent with your design: Same gradients and hover effects as your hero section