/* 
Plugin Name: Dufoor Booking
Plugin URI: https://dufoor.com
Description: Responsive Styling.
Version: 1.0.0
Author: Dufoor Bookings
Author URI: https://dufoor.com
Tags: one-column, right-sidebar, fluid-layout, responsive-layout, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: dufoorbookings
License: GNU General Public License version 3.0 & Envato Regular/Extended License
License URI:  http://www.gnu.org/licenses/gpl-3.0.html & http://themeforest.net/licenses

All PHP code is released under the GNU General Public Licence version 3.0
All HTML/CSS/JAVASCRIPT code is released under Envato's Regular/Extended License

[Table of contents]

1. Base
2. Bootstrap grid
3. Bold themes grid 
4. Template
5. Header
6. Footer
7. Post
8. Elements
9. Animations
10. Woocommerce
11. Cost calculator
12. Screens
13. Woocommerce screens
14. Gutenberg


Sticky header / 
    -    split in left column with logo, 
    -    right column split in two rows 
         -    top row with phone number and email adres, search field language selector,  
         -    bottom row with wordpress main menu as small button with onclick that show the menu, next to it buttons with a scrolldown feature on click Gallery, Availability, Specs, Text. right side a book this ship now button. 
Slider exterieur yacht photos, header on top (left photo big with video play overlay, right 3 photos small beneeth eachother)
Page breadcrumbs
Main features in colored row cabins/ showers/ toilets/ m2 
Text
Video bar
Calendar availability / booking show alternative yachts in same period. show yachts available on occupied date
Image gallery interieur
FAQ
Reviews
Related yachts. 
Sailing Routes -> on that page refer to booking module calendar
Book now sticky div on bottom and onclick focus on calendar availability
footer
*/


/* General Styling Normale schermen */


/* Header Booking Container Styling */

/* General Styling Forms */
input:focus {
    outline: none; /* Removes the default focus outline */
    border: none;  /* Removes any border applied during focus */
}


/* Header Booking Container Styling */
#header__booking__container {
    position: relative;
    z-index: 10;
    margin-bottom: 0;
    padding-bottom: 0;
    overflow: visible;
    height: auto;
    display: flex;
    justify-content: center;
    width: 100%;  
    background-color: transparent;
}

#header__booking__container .flex_cell {
    width: 100%;
    max-width: 900px;
    background-color: var(--enfold-main-color-bg2);
    padding: 0px;
}

#header__booking__container form {
    margin-bottom: 0px;
}

/* Flexbox layout for the form wrapper */
.header-booking-form__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    flex-wrap: wrap; /* Ensure flex items wrap */
    gap: 0px; /* Gap between form elements */
}

/* Date field styles */
.header-booking-form__wrapper .form-field--dates {
    display: flex;
}

.header-booking-form__wrapper .form-field--dates .field-wrap .field-input-wrap input:hover {
    background-color: var(--gray-400) !important;
}

.header-booking-form__wrapper .form-field--guests .field-wrap .field-input-wrap input:hover {
    background-color: var(--gray-400) !important;
}

.header-booking-form__wrapper .form-field--guests .field-wrap:hover {
    background-color: green;
}

.form-field {
    flex: 1; /* Each field takes up equal width */
    min-width: 0; /* Prevents fields from overflowing */
    margin: 0px;
    padding: 0px;
}

.form-field .field-wrap {
    width: 100%;
    margin: 0px;
    padding: 0px;  
}

/* Ensure input fields and icons are aligned */
.header-booking-form__wrapper .field-input-wrap {
    display: flex;
    position: relative;
    width: 100%;
}

.header-booking-form__wrapper .field-input-wrap > i {
    position: absolute;
    border: none;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    font-size: 1.3rem;
    color: var(--base-blue);
    z-index: 1;
}

/* Style input text fields */
#header__booking__container .field-input-wrap .input-text {
    padding-left: 45px !important;
    padding-right: 20px !important;
    text-align: left !important;
    font-weight: 500;
    color: var(--base-blue) !important;
    height: 100%;
    background: transparent;
    font-size: 1rem;
    border: none;
    outline: none;
    cursor: pointer;
}

/* Specific styling for date input */
.header-booking-form__wrapper .input-text--date {
    padding-left: 55px;
}

/* Styling for guests input */
.header-booking-form__wrapper .input-text--guests {
    padding-left: 45px;
}

/* Field separator styling */
.field-separator {
    width: 1px;
    background-color: var(--primary-natural);
    margin: 0px;
    padding: 0px;
    align-self: stretch; /* Stretch the separator within the flex container */
}

.field-wrap {
    display: flex;
    align-items: stretch;
    min-height: 100%;
    height: 100%;
}

.form-field input {
    width: 100%;
    min-height: 76px;
}

.form-label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
    font-size: 14px;
}

/* Submit Button Styling */
.header-booking-form__cta {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.header-booking-button {
    position: relative;
    width: 100%;
    min-height: 96px;
    padding: 0px;
    margin: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-accent) !important;
    border: none;
    color: var(--white);
    font-size: 1.0rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Icon Wrapper - Transparent Circle with White Border */
.icon-wrap {
    position: relative;
    width: 20px; /* Circle size */
    height: 20px; /* Circle size */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    border-radius: 50%;
    background-color: transparent; /* Transparent background */
    border: 1px solid var(--white); /* White border */
}

/* Long Arrow Icon Styling */
.icon-wrap i {
    position: absolute;
    left: -4px; /* Initially position the arrowhead inside the circle */
    font-size: 0.8rem; /* Adjust size as needed */
    color: var(--white); /* Arrow color */
    transition: transform 0.3s ease, right 0.3s ease; /* Smooth transition for movement */
}

/* On Hover - Move Arrow Outside the Circle */
.header-booking-button:hover i {
    left: 4px;
    transform: translateX(10px); /* Move the arrowhead outside the circle */
}

/* Optional: Background Color Change on Hover */
.header-booking-button:hover {
}

/* Optional: Change circle border color on hover */
.header-booking-button:hover .icon-wrap {
}



/* Responsive Layouts */
/* Default flex direction (row) for screens wider than 768px */
@media (min-width: 768px) {
    #header__booking__container {
        position: absolute;
        transform: translateY(-180px);
    }

    .header-booking-form__wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .form-field {
        flex: 1 1 30%; /* Each field takes up around 30% of the available space */
    }

    .form-field--guests {
        flex: 1 1 20%; /* Adjust space for the guest field */
    }

    .header-booking-form__cta {
        flex: 1 1 auto;
    }
}

/* Stacked column layout for screens smaller than 768px */
@media (max-width: 768px) {
    #header__booking__container .responsive #top #wrap_all .av-flex-cells .no_margin {
        padding-left: 0 !important;  /* Remove padding on the left */
        padding-right: 0 !important; /* Remove padding on the right */
        width: 100%; /* Ensure it takes full width */
        margin: 0; /* Remove any margin if necessary */
    }

    .header-booking-form__wrapper {
        flex-direction: column;
    }

    .form-field,
    .header-booking-form__cta {
        width: 100%;
    }
}

  













/* Daterangepicker Styling */
.daterangepicker .drp-calendar {
    max-width: 100% !important; /* or your desired value */
}

.daterangepicker.show-calendar-above:before {
    content: '';
    position: absolute;
    top: auto;
    bottom: -8px; /* Arrow pointing up */
    border-width: 8px 8px 0 8px;
    border-color: #fff transparent transparent transparent;
    border-style: solid;
    z-index: 2;
}

.daterangepicker.show-calendar-above:after {
    content: '';
    position: absolute;
    top: auto;
    bottom: -9px;
    border-width: 9px 9px 0 9px;
    border-color: rgba(0, 0, 0, 0.1) transparent transparent transparent;
    border-style: solid;
    z-index: 1;
}

.daterangepicker.show-calendar-below:before {
    content: '';
    position: absolute;
    top: -8px; /* Arrow pointing down */
    bottom: auto;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #fff transparent;
    border-style: solid;
    z-index: 2;
}

.daterangepicker.show-calendar-below:after {
    content: '';
    position: absolute;
    top: -9px;
    bottom: auto;
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    border-style: solid;
    z-index: 1;
}

/* Style for selectable dates (available dates) */
.daterangepicker td.available {
    background-color: #a7d9e3; /* Light blue background */
    color: #333; /* Text color */
    border-radius: 0%; /* Optional: make the selected dates look like rounded circles */
}

/* Style for hover effect on selectable dates */
.daterangepicker td.available:hover {
    background-color: #a8d697; /* Slightly darker green on hover */
    color: #000; /* Darker text color on hover */
}

/* Style for in-range dates (if applicable) */
.daterangepicker td.in-range {
    background-color: #b6e3a7; /* Light green background for dates within the selected range */
    color: #333;
}

/* Style for disabled in-range dates (if applicable) */
.daterangepicker td.off.disabled.in-range {
    background-color: #b6e3a7; /* Light green background for dates within the selected range */
    color: #333;
}

/* Optional: Style for today's date */
.daterangepicker td.today {
    background-color: #ffd966; /* Yellow background for today's date */
    color: #333;
    font-weight: bold; /* Make it stand out */
}

/* Optional: Style for selected start and end dates */
.daterangepicker td.start-date, 
.daterangepicker td.end-date {
    background-color: #4caf50; /* Darker green for start and end dates */
    color: #fff;
}







/* Guest Dropdown Styling */
.dropdown-menu.guest-dropdown {
    display: none; /* Hides the adults and children selection container */
}

/* Ensure guest dropdown is properly styled */
.guest-dropdown {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: none;
    padding: 10px;
}

/* Arrow for when the dropdown is below */
.show-dropdown-below::before,
.show-dropdown-above::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
}

.show-dropdown-below::before {
    top: -8px;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #fff transparent;
}

.show-dropdown-above::before {
    bottom: -8px;
    border-width: 8px 8px 0 8px;
    border-color: #fff transparent transparent transparent;
}

.show-dropdown-above::before {
    bottom: -8px;
    border-width: 8px 8px 0 8px;
    border-color: #fff transparent transparent transparent;
}

.show-dropdown-above::after {
    bottom: -9px;
    border-width: 9px 9px 0 9px;
    border-color: rgba(0, 0, 0, 0.1) transparent transparent transparent;
}

/* Style for the guest selector input field */
#guest_selector {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    color: var(--base-blue);
    background-color: #fff;
    cursor: pointer;
}

#guest_selector:hover, 
#guest_selector:focus {
    border: none;
    outline: none;
}

#guest_selector::placeholder {
    border: none;
    outline: none;
}

/* Guest Dropdown Content */
.guest-dropdown .dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

/* Ensure labels and input fields are vertically aligned */
.guest-dropdown .form-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    flex-basis: 80%; /* Label takes up 30% of the width */
    text-align: left;
}

.guest-dropdown .input-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: left;
    width: 20px !important;
}

/* Quantity Control Styling */
.quantity-control {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Ensure buttons and input stay together */
    gap: 10px;
    flex-basis: 20%; /* Quantity control takes up 10% of the width */
}

/* Set fixed width for input fields */
.quantity-control input {
    width: 60px; /* Adjust input width */
    text-align: center; /* Center the text */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    background-color: #fff;
    font-size: 14px;
}

/* Button Styling */
.quantity-decrease,
.quantity-increase {
    background-color: #007acc;
    color: #fff;
    border: none;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quantity-decrease:hover,
.quantity-increase:hover {
    background-color: #005fa3;
}

/* Extra specificity to make sure styling is applied */
.guest-dropdown .dropdown-item .quantity-control input {
    max-width: 35px;
    min-width: 35px;
    margin: 0 auto !important;
}





/* Media Queries voor verschillende schermgroottes */

@media (max-width: 992px) {
    /* Tablet */


    
}

@media (max-width: 768px) {
    /* Kleine tablets en grote smartphones */

    /* Make the calendar container full width */
    .daterangepicker {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto;
        max-width: 100%;
    }

    /* Ensure the calendar's internal elements fit the full width */
    .daterangepicker .drp-calendar {
        width: 100% !important;
    }

    /* Adjust the header to match the full width */
    .daterangepicker .custom-calendar-header {
        width: 100%;
        box-sizing: border-box;
    }

    /* Adjust the calendar grids to be responsive */
    .daterangepicker .drp-calendar .calendar-table {
        width: 100%;
    }

    /* Adjust the input boxes within the calendar */
    .daterangepicker input {
        width: calc(100% - 20px); /* Make the inputs responsive */
        margin: 5px 10px;
    }

    /* Adjust buttons if present in the calendar */
    .daterangepicker .ranges {
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
   
    
}

@media (max-width: 576px) {
    /* Kleine smartphones */
    
    /* Make the calendar container full width */
    .daterangepicker {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto;
        max-width: 100%;
    }

    /* Ensure the calendar's internal elements fit the full width */
    .daterangepicker .drp-calendar {
        width: 100% !important;
    }

    /* Adjust the header to match the full width */
    .daterangepicker .custom-calendar-header {
        width: 100%;
        box-sizing: border-box;
    }

    /* Adjust the calendar grids to be responsive */
    .daterangepicker .drp-calendar .calendar-table {
        width: 100%;
    }
    
    /* Adjust the input boxes within the calendar */
    .daterangepicker input {
        width: calc(100% - 20px); /* Make the inputs responsive */
        margin: 5px 10px;
    }

    /* Adjust buttons if present in the calendar */
    .daterangepicker .ranges {
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }

    /* Guest Dropdown Styling */
    /* Button Styling */
    .quantity-decrease,
    .quantity-increase {

        width: 25px;
        height: 25px;
        min-width: 25px;
        min-height: 25px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}