.elementor-722 .elementor-element.elementor-element-7cd0dbc{--display:flex;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-722 .elementor-element.elementor-element-1332202 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-722 .elementor-element.elementor-element-1332202 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-722 .elementor-element.elementor-element-1332202 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-722 .elementor-element.elementor-element-1332202 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-722 .elementor-element.elementor-element-1332202 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-722 .elementor-element.elementor-element-1332202 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-722 .elementor-element.elementor-element-1332202 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-722 .elementor-element.elementor-element-1332202 .elementor-field-type-html{padding-bottom:0px;}.elementor-722 .elementor-element.elementor-element-1332202 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-722 .elementor-element.elementor-element-1332202 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-722 .elementor-element.elementor-element-1332202 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-722 .elementor-element.elementor-element-1332202 .elementor-button[type="submit"]{color:#ffffff;}.elementor-722 .elementor-element.elementor-element-1332202 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-722 .elementor-element.elementor-element-1332202 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-722 .elementor-element.elementor-element-1332202 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-722 .elementor-element.elementor-element-1332202 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-722 .elementor-element.elementor-element-1332202 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-722 .elementor-element.elementor-element-1332202 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-722 .elementor-element.elementor-element-1332202{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}#elementor-popup-modal-722{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-722 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-722 .dialog-close-button{display:flex;}#elementor-popup-modal-722 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}/* Start custom CSS */<!-- Load International Flag Phone Picker Stylesheets & Engines -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

<script>
(function() {
    let iti;
    let currentActiveRoute = "Custom Route";
    let currentActiveDuration = "Custom Duration";

    // 1. Intercept which button was clicked on the main grid to steal its text values
    document.addEventListener('click', function(e) {
        const bookBtn = e.target.closest('.elementor-button');
        if (bookBtn && bookBtn.textContent.includes('Book Route')) {
            const parentCard = bookBtn.closest('.e-con, .elementor-widget-container');
            if (parentCard) {
                const titleEl = parentCard.querySelector('.route-title');
                const durationEl = parentCard.querySelector('.route-duration');
                
                currentActiveRoute = titleEl ? titleEl.textContent.trim() : "Custom Route";
                currentActiveDuration = durationEl ? durationEl.textContent.trim() : "Custom Duration";
            }
        }
    }, true);

    // 2. Initialize Flag Dropdown Picker when the Popup Renders
    jQuery(document).on('elementor/popup/show', function() {
        const phoneInput = document.querySelector('.elementor-popup-modal [name*="[phone]"]');
        if (phoneInput && !phoneInput.classList.contains('iti-bound')) {
            phoneInput.classList.add('iti-bound');
            iti = window.intlTelInput(phoneInput, {
                initialCountry: "sa", // Default to Saudi Arabia
                preferredCountries: ["sa", "ae", "pk", "gb", "us"],
                separateDialCode: true,
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
            });
        }
    });

    // 3. Handle Form Button Confirm Form Submission Interception
    document.addEventListener('click', function(e) {
        const button = e.target.closest('.elementor-form [type="submit"], .elementor-form button');
        
        if (button) {
            const form = button.closest('form');
            if (!form) return;
            
            e.preventDefault();
            e.stopPropagation();

            const whatsappNumber = "923166218392"; // Put your WhatsApp number here

            const getVal = (id) => {
                const el = form.querySelector(`#form-field-${id}`) || form.querySelector(`[name*="[${id}]"]`);
                return el ? el.value.trim() : '';
            };

            const car        = encodeURIComponent(getVal('car'));
            const passengers = encodeURIComponent(getVal('passengers'));
            const luggage    = encodeURIComponent(getVal('luggage'));
            const datetime   = encodeURIComponent(getVal('datetime'));
            const details    = encodeURIComponent(getVal('details'));
            
            // Get phone number alongside its matching country international dial code prefix flag
            let fullPhone = getVal('phone');
            if (iti) {
                fullPhone = iti.getNumber();
            }
            const phoneEncoded = encodeURIComponent(fullPhone);

            const routeEncoded = encodeURIComponent(currentActiveRoute);
            const durationEncoded = encodeURIComponent(currentActiveDuration);

            // Build the clean string formatting path text loop parameter block
            const message = `Assalamu%20Alaikum%2C%20I%20want%20to%20book%20a%20ride%21%0A%0A` +
                            `*Route:*%20${routeEncoded}%0A` +
                            `*Duration / Rate:*%20${durationEncoded}%0A%0A` +
                            `*Booking%20Details:*%0A` +
                            `*Car%20Preference:*%20${car}%0A` +
                            `*Passengers:*%20${passengers}%0A` +
                            `*Luggage:*%20${luggage}%0A` +
                            `*Date%20%26%20Time:*%20${datetime}%0A` +
                            `*Flight%20Details%20%2F%20Notes:*%20${details}%0A` +
                            `*Contact%20Number:*%20${phoneEncoded}`;

            const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${message}`;
            window.open(whatsappUrl, '_blank');
        }
    }, true);
})();
</script>

<style>
/* ==========================================
   GLOBAL POPUP COMPONENT INTERFACE STYLES
   ========================================== */

/* 1. Container Window Theme Setup */
.elementor-popup-modal .dialog-message {
    background-color: #0F0F12 !important;
    border: 2px solid transparent !important;
    border-radius: 24px !important;
    padding: 36px 32px 32px 32px !important;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.7) !important;
    background-image: linear-gradient(#0F0F12, #0F0F12), linear-gradient(135deg, #F5B640 0%, #B88022 50%, #875A11 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

.elementor-popup-modal .dialog-widget-content {
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. Text Label Styling Rules */
.elementor-popup-modal .elementor-field-group label {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    display: block !important;
}

/* 3. Inputs & International Flag Overrides Configuration */
.elementor-popup-modal .elementor-field-textual,
.elementor-popup-modal select.elementor-field-textual,
.elementor-popup-modal .iti {
    width: 100% !important;
}

.elementor-popup-modal .elementor-field-textual {
    background-color: #16161C !important;
    color: #FFFFFF !important;
    border: 1px solid #2A2A35 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.elementor-popup-modal .elementor-field-textual:focus {
    border-color: #F5B640 !important;
    box-shadow: 0 0 0 2px rgba(245, 182, 64, 0.15) !important;
    outline: none !important;
}

/* FIX OVERLAP: Explicitly push the number input to the right using the intl-tel wrapper */
.elementor-popup-modal .iti input.elementor-field-textual {
    padding-left: 95px !important;
}

/* Fix Flag dropdown styling list container background color constraints */
.elementor-popup-modal .iti__country-list {
    background-color: #16161C !important;
    border: 1px solid #2A2A35 !important;
    color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    z-index: 99999 !important;
}
.elementor-popup-modal .iti__country:hover,
.elementor-popup-modal .iti__country.iti__highlight {
    background-color: #2A2A35 !important;
}
.elementor-popup-modal .iti__selected-dial-code {
    color: #FFFFFF !important;
    padding-left: 6px !important;
}
.elementor-popup-modal .iti__flag-container {
    padding-left: 12px !important;
}

/* 4. Prominent, Clear & Highly Visible Cross Close Icon */
.elementor-popup-modal .dialog-close-button {
    color: #0F0F12 !important;
    background-color: #F5B640 !important; /* Bold prominent gold backplate */
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    top: -12px !important;
    right: -12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    opacity: 1 !important;
}
.elementor-popup-modal .dialog-close-button:hover {
    background-color: #FFFFFF !important;
    transform: scale(1.1);
}
.elementor-popup-modal .dialog-close-button i {
    font-size: 16px !important;
    font-weight: 900 !important;
}

/* 5. Submit Button Gradient Configuration styling block */
.elementor-popup-modal .elementor-button[type="submit"] {
    background: linear-gradient(135deg, #F5B640 0%, #B88022 50%, #875A11 100%) !important;
    border-radius: 14px !important;
    color: #0F0F12 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px 24px !important;
    border: none !important;
    box-shadow: 0px 4px 15px rgba(184, 128, 34, 0.3) !important;
    margin-top: 12px !important;
    width: 100% !important;
}

/* Desktop Grid Form Side-by-Side Splits Optimization layout maps */
@media (min-width: 768px) {
    .elementor-popup-modal .elementor-form {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    .elementor-popup-modal .elementor-field-group.elementor-field-type-select,
    .elementor-popup-modal .elementor-field-group.elementor-field-type-textarea,
    .elementor-popup-modal .elementor-field-group.elementor-field-type-submit {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .elementor-popup-modal .elementor-field-group.elementor-field-type-number,
    .elementor-popup-modal .elementor-field-group.elementor-field-type-date,
    .elementor-popup-modal .elementor-field-group.elementor-field-type-tel {
        flex: 1 1 calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
    }
}
</style>/* End custom CSS */