/* =========================================
   REQUEST BOOKING – BASE WRAPPER
   ========================================= */

.info-card.rt-booking-form #request_booking_form_block {
    background: #F6FAFD;
    padding: 10px 0px 10px;
    border-radius: 6px;
}

.info-card.rt-booking-form #request_booking_form {
    background: transparent;
}

/* =========================================
   LABELS
   ========================================= */

.rt-booking-form #request_booking_form label {
    font-size: 16px;
    font-weight: 600;
    color: var(--tripfery-heading-color);
    margin-bottom: 6px;
    display: block;
}

/* =========================================
   INPUTS (TEXT / EMAIL / TEL / TEXTAREA)
   ========================================= */

.rt-booking-form #request_booking_form input[type="text"],
.rt-booking-form #request_booking_form input[type="email"],
.rt-booking-form #request_booking_form input[type="tel"],
.rt-booking-form #request_booking_form textarea,
.rt-booking-form #request_booking_form select {
    width: 100%;
    border: 1px solid var(--tripfery-border-color);
    border-radius: 5px;
    padding: 10px 14px;
    font-size: 16px;
    color: var(--tripfery-body-color);
    background: var(--tripfery-white-color);
    transition: border-color 0.3s ease;
}

.rt-booking-form #request_booking_form textarea {
    min-height: 110px;
    resize: vertical;
}

/* Focus state */
.rt-booking-form #request_booking_form input:focus,
.rt-booking-form #request_booking_form textarea:focus,
.rt-booking-form #request_booking_form select:focus {
    outline: none;
    border-color: var(--tripfery-primary-color);
}

/* =========================================
   DATE FIELD (ICON MATCH)
   ========================================= */

.rt-booking-form #request_booking_form .booking-date {
    position: relative;
}

.rt-booking-form #request_booking_form .booking-date i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tripfery-primary-color);
    font-size: 15px;
}

.rt-booking-form #request_booking_form .booking-date input {
    padding-left: 40px;
}

/* =========================================
   PHONE FIELD
   ========================================= */

.rt-booking-form .request_booking_phone_wrapper .phone_input_container {
    display: flex;
    gap: 10px;
}

.rt-booking-form .request_booking_phone_wrapper select {
    max-width: 160px;
}

/* =========================================
   COUNTRY CODE CUSTOM CSS
   ========================================= */

.iti {
    display: flex;
    align-items: center;
}

.iti__selected-flag {
    display: flex;
    align-items: center;
}

input#request_booking_phone {
    padding-left: 0px !important;
}

.iti__dropdown-content {
    max-width: 100%;
}
.iti__country {
    padding: 10px 14px;
}

i.fas.fa-envelope {
    margin-right:15px !important;
}

/* Limit intl-tel-input dropdown height */
.iti__country-list {
    max-height: 220px; /* ~5 items */
    overflow-y: auto;
}

/* =========================================
   PAX (TRAVELLERS) – SIMPLE, NATIVE LOOK
   ========================================= */

.rt-booking-form .request_booking_pax_wrapper {
    margin-top: 5px;
}

.rt-booking-form .pax_inputs_container {
    display: flex;
    gap: 15px;
}

.rt-booking-form .pax_field {
    border: 1px solid var(--tripfery-border-color);
    border-radius: 5px;
    padding: 12px;
    flex: 1;
    background: var(--tripfery-white-color);
}

.rt-booking-form .pax_label {
    font-weight: 600;
    color: var(--tripfery-heading-color);
    font-size: 14px;
}

.rt-booking-form .pax_age_note {
    font-size: 12px;
    color: var(--tripfery-body-color);
}

/* Counter buttons */
.rt-booking-form .pax_counter button {
    background: var(--tripfery-primary-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 34px;
    height: 34px;
    font-size: 18px;
    cursor: pointer;
}

.rt-booking-form .pax_counter input {
    width: 50px;
    border: 1px solid var(--tripfery-border-color);
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
}

/* =========================================
   SUBMIT BUTTON (MATCHES NORMAL BOOKING)
   ========================================= */

.single-to_book .rt-booking-form .request_booking_form_submit {
    width: 100%;
    background-color: var(--tripfery-primary-color);
    color: var(--tripfery-white-color);
    font-size: 18px;
    font-weight: 600;
    padding: 15px 20px 13px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.4s ease;
}

.single-to_book .rt-booking-form .request_booking_form_submit:hover {
    background-color: var(--tripfery-white-color);
    color: var(--tripfery-primary-color);
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {
    .rt-booking-form .pax_inputs_container {
        flex-direction: column;
    }

    .rt-booking-form .request_booking_phone_wrapper .phone_input_container {
        flex-direction: column;
    }

    .rt-booking-form .request_booking_phone_wrapper select {
        max-width: 100%;
    }
}

/* Select2 dropdown height + scroll */
.select2-container--default .select2-results__options {
    max-height: 180px; /* ~4–5 options */
    overflow-y: auto;
}

/* Prevent right overflow */
.select2-dropdown {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .select2-container--open .select2-dropdown {
        left: 0 !important;
        right: 0 !important;
    }
}


/* =========================================
   ADDITIONAL STYLES FOR COMPLETE FORM
   ========================================= */

/* Labels with icons */
.rt-booking-form #request_booking_form label i {
    margin-right: 8px;
    color: var(--tripfery-primary-color);
    width: 16px;
    text-align: center;
}

/* Required asterisk */
.rt-booking-form #request_booking_form .required {
    color: #e53e3e;
    font-weight: 700;
}

/* Date picker input */
.rt-booking-form #request_booking_form .booking-date-input {
    cursor: pointer;
    background-color: var(--tripfery-white-color) !important;
}

/* Field error state */
.rt-booking-form #request_booking_form .field-error {
    border-color: #e53e3e !important;
    background-color: #fff5f5 !important;
}

/* Shake animation for errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.4s ease-in-out;
}

/* Success/Error message box */
.request_booking_message_send {
    margin-top: 20px;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.request_booking_message_send.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.request_booking_message_send.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.request_booking_message_send i {
    font-size: 18px;
}

/* Submit button loading state */
.request_booking_form_submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.request_booking_form_submit .spin_f {
    margin-left: 0;
}

/* Focused state for input wrappers */
.request_booking_input.focused {
    /* Optional: add visual feedback when focused */
}

/* jQuery UI Datepicker customization */
.babe-custom-datepicker {
    font-family: inherit;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: none;
    padding: 10px;
}

.ui-datepicker-header {
    background: var(--tripfery-primary-color);
    border: none;
    border-radius: 6px 6px 0 0;
    padding: 10px;
}

.ui-datepicker-title {
    color: #fff;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    background-image: none !important;
    text-indent: 0 !important;
}

.ui-datepicker-prev:before {
    content: '❮';
    color: #fff;
}

.ui-datepicker-next:before {
    content: '❯';
    color: #fff;
}

.ui-datepicker td a {
    text-align: center;
    padding: 8px;
    border-radius: 4px;
}

.ui-datepicker td a:hover {
    background: var(--tripfery-primary-color);
    color: #fff;
}

.ui-datepicker td a.ui-state-active {
    background: var(--tripfery-primary-color);
    color: #fff;
}

/* Message field styling */
.request_booking_message_wrapper textarea {
    min-height: 100px;
}

/* Spacing adjustments */
.rt-booking-form #request_booking_form .input_group {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rt-booking-form #request_booking_form .submit_group {
    margin-top: 25px;
}

/* =========================================
   INTL-TEL-INPUT MOBILE FIX (UPDATED)
   ========================================= */

/* When dropdown is appended to body */
.iti__dropdown {
    z-index: 99999;
}

@media (max-width: 768px) {
    /* Bottom sheet style for mobile */
    .iti__dropdown-content {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 60vh !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.2) !important;
        transform: translateY(0) !important;
    }
    
    .iti__country-list {
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
    
    /* Optional: Add backdrop overlay */
    body.iti--container::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 99998;
        pointer-events: none;
    }
}


/* WhatsApp Button */
.whatsapp_inquiry_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background: #25D366; /* WhatsApp green */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    width: 100%;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}

.whatsapp_inquiry_btn:hover {
    background: #128C7E; /* Darker WhatsApp green */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.whatsapp_inquiry_btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.3);
}

.whatsapp_inquiry_btn i {
    font-size: 20px;
}