/*  BOOKING BAR */
.booking-wrapper-floating { 
    position: absolute; 
    width: 100%; 
    z-index: 100; 
    bottom: 120px !important;

}
.booking-card { 
    background: rgba(0, 0, 0, 0.6) !important; 
    padding: 12px 20px; 
    border-radius: 12px; 
}
.custom-label { 
    font-size: 14px !important; 
    font-weight: 700 !important; 
    color: white; 
    margin-bottom: 6px; 
    display: block; 
}
.booking-input, .selected-option { 
    background-color: #f1f1f1 !important; 
    color: #444 !important; 
    font-weight: 13px !important; 
    height: 35px !important; 
    border-radius: 4px; 
    padding: 0 12px; 
    cursor: pointer; 
    border:none; 
    display:flex; 
    align-items:center; 
}

/*DROPDOWN STYLING  */
.custom-dropdown { position: relative; width: 100%; }

.selected-option::after { 
    content: '\F282'; 
    font-family: 'bootstrap-icons'; 
    position: absolute; 
    right: 12px; 
    font-size: 12px; 
    color: #444; 
}

.options-list { 
    position: absolute; 
    top: 105%; 
    left: 0; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.9) !important; 
    list-style: none; 
    padding: 8px 5px; 
    margin: 0; 
    border-radius: 8px; 
    display: none; 
    z-index: 999; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
}

.options-list li { 
    padding: 10px 15px; 
    color: #ffffff; 
    cursor: pointer; 
    font-weight: 600; 
    transition: all 0.2s ease; 
    margin-bottom: 2px;
}

.options-list li:hover { 
    background-color: #d4af37 !important; 
    color: #000 !important; 
    border-radius: 50px !important; 
}

/*  CALENDAR  */
.custom-golden-calendar { 
    background: rgba(0, 0, 0, 0.7) !important; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.7) !important; 
    width: 307px !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    margin-bottom: 15px !important; 
}

.custom-golden-calendar .flatpickr-months { 
    background: #013220 !important; 
    padding: 12px 0 !important; 
    border-radius: 4px 4px 0 0; 
}

.flatpickr-monthDropdown-months {
    background: transparent !important; 
    color: white !important;
    border: none !important;
    font-weight: 950 !important;
    font-size: 19px !important;
}

.custom-golden-calendar .cur-month,
.custom-golden-calendar .cur-year,
.custom-golden-calendar .flatpickr-current-month {
    color: #ffffff !important;
    font-weight: 950 !important;
}
.custom-golden-calendar .flatpickr-weekday { 
    color: #ffffff !important;
    font-weight: 700 !important; 
    display: inline-block;
}

.custom-golden-calendar .flatpickr-day { 
    color: #ffffff !important; 
    font-weight: 700 !important; 
}

.custom-golden-calendar .flatpickr-day:hover,
.custom-golden-calendar .flatpickr-day.selected { 
    background: #013220 !important;
    color: #ffffff !important;
}

.flatpickr-calendar.arrowTop:before, 
.flatpickr-calendar.arrowTop:after { display: none !important; }

/*  PRICING & BUTTON */
.booking-card .btn-gold, .booking-card button {
    background-color: #d4af37 !important; 
    color: #ffffff !important; 
    border: none !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 9px !important; 
    padding: 10px 45px !important; 
    transition: all 0.3s ease !important;
}

.booking-card .form-control.booking-input {
    background-color: #f8f9fa !important;
    border: 1px solid transparent !important;
    transition: all 0.3s ease;
}

.booking-card .form-control.booking-input:focus {
    border: 1px solid #d4af37 !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3) !important;
}

 /* --- BUTTON --- */
.px-lg-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

.selected-option::after { 
    content: '\F282' !important; 
    font-family: 'bootstrap-icons' !important; 
    position: absolute !important; 
    right: 12px !important; 
    display: block !important; 
}

.input-group-text {
    display: flex !important; 
}


.booking-wrapper-floating { 
    position: absolute; 
    width: 100%; 
    z-index: 100; 
    bottom: 10px !important; 
}


@media screen and (max-width: 425px) {
    .flatpickr-calendar.open {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999999 !important;
    }
}