<!-- PopUp Modal Start Here -->
<div class="modal fade" id="ageGroup" tabindex="-1" aria-labelledby="staticBackdropLabelAgeGroup" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                    fdprocessedid="0122n">
                    <i class="fa fa-times" aria-hidden="true"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="mod-step-one" id="mod-step-on">
                    <h2>Select your age group & testing window</h2>
                    <div class="select-age-dv">
                        <div class="select-age-inner">
                            <div class="select-head">
                                <h4>Kids Speed Challenge</h4>
                                <p>(Ages 7-12)</p>
                            </div>
                            <div class="select-time">
                                <p>10:00 AM - 11:00 AM</p>
                            </div>
                            <div class="select-btn">
                                <a href="javascript:void(0);" class="register-btn">Register</a>
                            </div>
                        </div>
                        <div class="select-age-inner">
                            <div class="select-head">
                                <h4>Teen Speed Challenge</h4>
                                <p>(Ages 7-12)</p>
                            </div>
                            <div class="select-time">
                                <p>11:00 AM - 12:00 PM</p>
                            </div>
                            <div class="select-btn">
                                <a href="javascript:void(0);" class="register-btn">Register</a>
                            </div>
                        </div>
                        <div class="select-age-inner">
                            <div class="select-head">
                                <h4>Adults Speed Challenge</h4>
                                <p>(Ages 7-12)</p>
                            </div>
                            <div class="select-time">
                                <p>12:00 PM - 1:00 PM</p>
                            </div>
                            <div class="select-btn">
                                <a href="javascript:void(0);" class="register-btn">Register</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mod-step-two" id="mod-step-two" style="display:none;">
                    <h2>Step 2 of 3</h2>
                    <h4 id="checkoutTitle">Checkout: Teen Speed Challenge (Age 13 18)</h4>
                    <div class="step-two-head">
                        <h3 id="eventDateTime"></h3>
                        <h4 id="eventLocation"></h4>
                    </div>
                    <div class="mod-form-fill">
                        <h4>Enter your Details</h4>
                        <form action="">
                            <input type="text" name="name" placeholder="First Name*" required>
                            <input type="text" name="last-name" placeholder="Last Name*" required>
                            <input type="email" name="email" placeholder="Email Address*" required>
                            <input type="date" placeholder="Date of Birth">
                            <input type="text" name="school" placeholder="School">
                            <input type="number" id="qty" name="qty" min="1" max="10" placeholder="Quantity" required
                                oninput="if(this.value > 10) this.value = 10;">
                            <p>Entry Fee: <span id="entryFee">$0</span></p>
                            <button type="submit">Continue To Payment</button>
                        </form>
                    </div>
                </div>
                <div class="mod-step-three" id="mod-step-three" style="display:none;">
                    <h2>Step 3 of 3</h2>
                    <h4>Finalize Your Registration</h4>
                    <div class="pricing-summary">
                        <h3>Pricing Summary</h3>
                        <div class="price-list">
                            <h5>Number of Tickets:</h5>
                            <p id="ticketCount">0</p>
                        </div>
                        <div class="price-list">
                            <h5>Entry Fee:</h5>
                            <p><span class="entryFee">$0</span> X <span class="ticketCount">0</span> = <span
                                    id="totalAmount">$0</span></p>
                        </div>
                        <div class="price-list">
                            <h5>Total</h5>
                            <p class="totalAmount">$0</p>
                        </div>
                    </div>
                    <div class="pricing-summary">
                        <h3>Pricing Summary</h3>
                        <div class="price-list">
                            <h5>Number of Tickets:</h5>
                            <p class="ticketCount">0</p>
                        </div>
                        <div class="price-list">
                            <h5>Entry Fee:</h5>
                            <p class="entryFee">-$0</p>
                        </div>
                        <div class="price-list">
                            <h5>Discount</h5>
                            <p class="totalAmount">$0</p>
                        </div>
                    </div>
                    <div class="pricing-summary">
                        <div class="pay-with">
                            <h3>Pay with Debit/Credit Card</h3>
                            <img src="assets/images/card-image.png" alt="image" class="img-fluid">
                        </div>
                        <div id="cardDetailsFields" class="row">
                            <form id="orderForm">
                                <div id="card-element"></div>
                                <div class="col-12">
                                    <div class="form-btn">
                                        <p>Payments are non-refundable within 48 hours of event start time.</p>
                                        <button type="submit" class="btn-pay" id="SubmitOrder">Request Invoice</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="mod-step-four" id="mod-step-four" style="display:none;">
                    <h4>Thank you For Purchasing Tickets</h4>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe(
    'pk_test_51TC4TjL1qy8feMVjSOWB4s0l06YxNHh77ZAgbDjM2dHq94ASwiKFAHYUU1WREMbkcxpSPvqweVM881oegbOmKx7H00J5uxd3Wf');

let cardElementMounted = false;
let card;
const style = {
  base: {
    color: "#ffffff",
    fontSize: "16px",
    fontFamily: "Arial, sans-serif",
    "::placeholder": {
      color: "#999999"
    }
  },
  invalid: {
    color: "#ff4d4f"
  }
};

// =============================
// INIT STRIPE (ONLY ON STEP 3)
// =============================
function initStripeCard() {
    if (cardElementMounted) return;

    const elements = stripe.elements();
    card = elements.create('card' , { style: style });
    card.mount('#card-element');

    cardElementMounted = true;
}

let userData = {};

// =============================
// STEP 2 → STEP 3
// =============================
document.querySelector('#mod-step-two form').addEventListener('submit', function(e) {
    e.preventDefault();

    let form = this;

    let qty = document.getElementById('qty').value || 0;
    let price = selectedEvent.price || 0;

    // ✅ SAVE USER DATA
    userData.email = form.querySelector('input[name="email"]').value;
    userData.name = form.querySelector('input[name="name"]').value;

    console.log("User Data:", userData); // 🔍 DEBUG

    let total = qty * price;

    document.getElementById('totalAmount').innerText = `$${total}`;
    document.querySelectorAll('.totalAmount').forEach(el => el.innerText = `$${total}`);
    document.querySelectorAll('.ticketCount').forEach(el => el.innerText = qty);

    document.getElementById('mod-step-two').style.display = 'none';
    document.getElementById('mod-step-three').style.display = 'block';

    initStripeCard();
});


// =============================
// PAYMENT SUBMIT
// =============================
document.getElementById('orderForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    let totalText = document.getElementById('totalAmount').innerText.replace('$', '');
    let amount = parseFloat(totalText);

    if (!amount || amount <= 0) {
        alert("Invalid amount");
        return;
    }

    try {
        // 🔹 Create PaymentIntent
        const res = await fetch('create_payment_intent.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                amount: amount
            })
        });

        const data = await res.json();

        if (!data.clientSecret) {
            alert("Payment initialization failed");
            console.error(data);
            return;
        }

        // 🔹 Confirm Payment
        const {
            error,
            paymentIntent
        } = await stripe.confirmCardPayment(data.clientSecret, {
            payment_method: {
                card: card
            }
        });

        if (error) {
            alert(error.message);
            return;
        }

        if (paymentIntent.status === 'succeeded') {

            // 🔥 EMAIL SEND
            const mailRes = await fetch('sendmail.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    email: userData.email,
                    name: userData.name,
                    amount: totalText,
                    event: selectedEvent.type,
                    date: selectedEvent.date
                })
            });

            // 🔥 PEHLE TEXT LO (SAFE WAY)
            const rawResponse = await mailRes.text();
            console.log("RAW RESPONSE:", rawResponse);

            // 🔥 PHIR JSON PARSE KARO
            let mailData;
            try {
                mailData = JSON.parse(rawResponse);
            } catch (e) {
                alert("Invalid JSON from server");
                return;
            }

            console.log("Email Response:", mailData);

            if (mailData.status !== 'success') {
                alert("Email failed: " + mailData.message);
            }

            // ✅ SHOW STEP 4
            document.getElementById('mod-step-three').style.display = 'none';
            document.getElementById('mod-step-four').style.display = 'block';
        }

    } catch (err) {
        console.error("Main Error:", err);
        alert("Something went wrong");
    }
});
</script>


<script>
// =============================
// GLOBAL EVENT STORE
// =============================
let selectedEvent = {};


// =============================
// EVENT BUTTON CLICK (STEP 1)
// =============================
document.querySelectorAll('.event-btn button').forEach(function(btn) {
    btn.addEventListener('click', function() {

        let parent = this.closest('.brand-dv');

        let date = parent.querySelector('.date-time p:nth-child(1)').innerText;
        let time = parent.querySelector('.date-time p:nth-child(2)').innerText;
        let type = this.innerText;
        let price = this.getAttribute('data-price');

        selectedEvent = {
            date: date,
            time: time,
            type: type,
            price: price
        };

        console.log("Selected Event:", selectedEvent);
    });
});


// =============================
// REGISTER BUTTON (STEP 1 → STEP 2)
// =============================
document.querySelectorAll('.register-btn').forEach(function(btn) {
    btn.addEventListener('click', function(e) {
        e.preventDefault();

        if (!selectedEvent.price) {
            alert("Please select event first");
            return;
        }

        let parent = this.closest('.select-age-inner');

        let title = parent.querySelector('.select-head h4').innerText;
        let age = parent.querySelector('.select-head p').innerText;
        let slotTime = parent.querySelector('.select-time p').innerText;

        document.getElementById('checkoutTitle').innerText =
            `Checkout: ${title} ${age}`;

        document.getElementById('eventDateTime').innerText =
            `${selectedEvent.date} ${slotTime}`;

        document.getElementById('eventLocation').innerHTML =
            `Location: Gately Park Turf Field <span>${selectedEvent.type}</span>`;

        // Step 2 Entry Fee
        document.getElementById('entryFee').innerText =
            `$${selectedEvent.price}`;

        // Step 3 Entry Fee (multiple places)
        document.querySelectorAll('.entryFee').forEach(function(el) {
            el.innerText = `$${selectedEvent.price}`;
        });

        document.getElementById('mod-step-on').style.display = 'none';
        document.getElementById('mod-step-two').style.display = 'block';
    });
});


// =============================
// STEP 2 → STEP 3
// =============================
document.querySelector('#mod-step-two form').addEventListener('submit', function(e) {
    e.preventDefault();

    let qty = document.getElementById('qty').value || 0;
    let price = selectedEvent.price || 0;

    // Quantity show
    document.getElementById('ticketCount').innerText = qty;
    document.querySelectorAll('.ticketCount').forEach(function(el) {
        el.innerText = qty;
    });
    // document.getElementById('ticketCount2').innerText = qty;
    // document.getElementById('ticketCount3').innerText = qty;

    // Total calculate
    let total = qty * price;
    document.getElementById('totalAmount').innerText = `$${total}`;
    document.querySelectorAll('.totalAmount').forEach(function(el) {
        el.innerText = `$${total}`;
    });

    document.getElementById('mod-step-two').style.display = 'none';
    document.getElementById('mod-step-three').style.display = 'block';
});


// =============================
// MODAL RESET
// =============================
document.getElementById('ageGroup').addEventListener('hidden.bs.modal', function() {

    document.getElementById('mod-step-on').style.display = 'block';
    document.getElementById('mod-step-two').style.display = 'none';
    document.getElementById('mod-step-three').style.display = 'none';

    selectedEvent = {};

    document.getElementById('checkoutTitle').innerText = 'Checkout:';
    document.getElementById('eventDateTime').innerText = '';
    document.getElementById('eventLocation').innerText = '';
    document.getElementById('entryFee').innerText = '$0';

    document.querySelectorAll('.entryFee').forEach(el => el.innerText = '$0');

    let form = document.querySelector('#mod-step-two form');
    if (form) form.reset();

    console.log("Modal Reset Done ✅");
});
</script>

<!-- PopUp Modal End Here -->

<style>
/* PopUp Modal Css Start Here */
.modaL_order {}

#ageGroup .modal-content {
    background: transparent;
    border-radius: 15px;
    border: none;
    position: relative;
    z-index: 1;
}

#ageGroup .modal-content .btn-close {
    position: absolute;
    right: -10px;
    top: -12px;
    background: #1a1917;
    width: 25px;
    height: 25px;
    line-height: 16px;
    border: #001d35;
    border-radius: 100px;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    z-index: 4;
    opacity: 1;
}

#ageGroup .modal-content .btn-close i {
    color: #fff;
    font-weight: 600;
}

#ageGroup .modal-dialog {
    max-width: 800px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0px auto;
}

#ageGroup .modal-header {
    padding: 0px;
    border-bottom: none;
}

#ageGroup .modal-body {
    padding: 35px 20px;
    /* background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%); */
    background: #1a1917;
    border-radius: 15px;
    /* height: 100%;
    min-height: 900px;
    max-height: 900px;
    overflow-x: auto; */
}

#ageGroup .modal-body h2 {
    text-align: center;
    color: transparent;
    font-size: 25px;
    line-height: 32px;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 25px;
}

#ageGroup .modal-body .select-age-dv {
    border: 2px solid #E0A92D;
    padding: 0px 0px 15px 0px;
    border-radius: 10px;
}

#ageGroup .modal-body .select-age-dv .select-head {}

#ageGroup .modal-body .select-age-dv .select-head h4 {
    font-size: 21px;
    line-height: 28px;
    color: transparent;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ageGroup .modal-body .select-age-dv .select-age-inner {
    display: flex;
    justify-content: space-between;
    padding: 15px 15px;
    border-bottom: 2px solid #E0A92D;
}

#ageGroup .modal-body .select-age-dv .select-head p {
    color: white;
}

#ageGroup .modal-body .select-age-dv .select-age-inner .select-time {}

#ageGroup .modal-body .select-age-dv .select-age-inner .select-time p {
    color: transparent;
    font-size: 21px;
    line-height: 31px;
    font-weight: 500;
    margin-bottom: 0px;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ageGroup .modal-body .select-age-dv .select-age-inner .select-btn {}

#ageGroup .modal-body .select-age-dv .select-age-inner .select-btn a {
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    border: 1px solid #E0A92D;
    color: white;
    padding: 7px 10px;
    border-radius: 7px;
    width: 130px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 600;
    transition: .4s all ease-in;
}

#ageGroup .modal-body .select-age-dv .select-age-inner .select-btn a:hover {
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ageGroup .modal-body .select-age-dv .select-age-inner:nth-last-child(1) {
    border-bottom: 0px;
    padding-bottom: 0px;
}

#ageGroup .modal-body .mod-step-two {}

#ageGroup .modal-body .mod-step-two h2,
#ageGroup .modal-body .mod-step-three h2 {
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
}

#ageGroup .modal-body .mod-step-two h4,
#ageGroup .modal-body .mod-step-three h4 {
    text-align: center;
    font-size: 22px;
    line-height: 32px;
    color: transparent;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ageGroup .modal-body .mod-step-two .step-two-head {
    background: transparent;
    border: 2px solid #E0A92D;
    padding: 10px 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}

#ageGroup .modal-body .mod-step-two .step-two-head h3 {
    font-size: 24px;
    line-height: 31px;
    font-weight: 500;
    color: transparent;
    margin-bottom: 15px;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ageGroup .modal-body .mod-step-two .step-two-head h4 {
    text-align: left;
    font-size: 17px;
    line-height: 24px;
    color: white;
    background: inherit;
    -webkit-text-fill-color: white;
}

#ageGroup .modal-body .mod-step-two .step-two-head h4 span {
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    color: white;
    padding: 5px 8px;
    border-radius: 6px;
    margin-left: 5px;
    cursor: pointer;
}

#ageGroup .modal-body .mod-step-two .mod-form-fill {}

#ageGroup .modal-body .mod-step-two .mod-form-fill form {}

#ageGroup .modal-body .mod-step-two .mod-form-fill form input {
    width: 100%;
    height: 47px;
    margin-bottom: 10px;
    border: 2px solid #E0A92D;
    background: white;
    border-radius: 5px;
    padding: 10px;
}

#ageGroup .modal-body .mod-step-two .mod-form-fill form p {
    color: transparent;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ageGroup .modal-body .mod-step-two .mod-form-fill form button {
    width: 100%;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    border: 2px solid #E0A92D;
    color: white;
    font-size: 21px;
    line-height: 30px;
    padding: 10px 0px;
    border-radius: 7px;
    transition: .3s all ease-in;
}

#ageGroup .modal-body .mod-step-two .mod-form-fill form button:hover {
    background: transparent;
}

#ageGroup .modal-body .mod-step-three .pricing-summary {
    background: transparent;
    border: 2px solid #E0A92D;
    padding: 15px 20px;
    border-radius: 7px;
    margin-bottom: 12px;
}

#ageGroup .modal-body .mod-step-three .pricing-summary .pay-with {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
}

#ageGroup .modal-body .mod-step-three .pricing-summary .pay-with img {
    width: 22%;
}

#ageGroup .modal-body .mod-step-three .pricing-summary h3 {
    font-size: 31px;
    line-height: 38px;
    color: transparent;
    font-weight: 600;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ageGroup .modal-body .mod-step-three .pricing-summary .price-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E0A92D;
    padding: 13px 0px;
}

#ageGroup .modal-body .mod-step-three .pricing-summary .price-list h5 {
    margin-bottom: 0px;
    font-size: 20px;
    line-height: 27px;
    color: white;
    font-weight: 400;
}

#ageGroup .modal-body .mod-step-three .pricing-summary .price-list p {
    color: transparent;
    margin-bottom: 0;
    font-size: 26px;
    line-height: 32px;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ageGroup .modal-body .mod-step-three .pricing-summary .price-list:nth-last-child(1) {
    border-bottom: none;
    padding-bottom: 0px;
}

#ageGroup .modal-body .mod-step-three .pricing-summary .price-list:nth-last-child(1) p {
    font-size: 37px;
    line-height: 44px;
    font-weight: 500;
}

#ageGroup .modal-body .mod-step-three .pricing-summary #cardDetailsFields {}

#ageGroup .modal-body .mod-step-three .pricing-summary #cardDetailsFields .form-group {
    margin-bottom: 10px;
}

#ageGroup .modal-body .mod-step-three .pricing-summary #cardDetailsFields .form-group label {
    color: transparent;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 17px;
    line-height: 27px;
    margin-bottom: 6px;
    font-weight: 500;
}

#ageGroup .modal-body .mod-step-three .pricing-summary #cardDetailsFields .form-group input {
    width: 100%;
    height: 45px;
    border: 2px solid #E0A92D;
    border-radius: 5px;
    font-size: 17px;
    line-height: 27px;
    color: black;
}

#ageGroup .modal-body .mod-step-three .pricing-summary #cardDetailsFields .form-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}

#ageGroup .modal-body .mod-step-three .pricing-summary #cardDetailsFields .form-btn p {
    color: white;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0px;
}

#ageGroup .modal-body .mod-step-three .pricing-summary #cardDetailsFields .form-btn button.btn-pay {
    font-size: 18px;
    font-weight: 600;
    width: 200px;
    border: 1px solid #E0A92D;
    height: 40px;
    border-radius: 10px 10px;
    padding: 10px 10px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    background: linear-gradient(to bottom, #c4851e 0%, #ecc75c 50%, #c4851e 100%);
    color: #1a1917;
    text-align: center;
    margin: 0 auto;
}

.modal.show {
    padding-right: 0px !important;
}

#ageGroup .modal-body #mod-step-four {}

#ageGroup .modal-body #mod-step-four h4 {
    text-align: center;
    font-size: 22px;
    line-height: 32px;
    color: transparent;
    background: linear-gradient(to bottom, #F5C542 0%, #E0A92D 50%, #B97A1B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* PopUp Modal Css End Here */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    /* PopUp Modal Responsive Css Start Here */

    #ageGroup .modal-content .btn-close {
        right: -4px;
        top: -33px;
        border-radius: 5px 5px 0px 0px;
    }

    /* PopUp Modal Responsive Css End Here */
}

@media only screen and (min-width: 521px) and (max-width: 767px) {

    /* PopUp Modal Responsive Css Start Here */
    #ageGroup .modal-dialog {
        max-width: 500px !important;
        margin: 100px auto 0;
    }

    #ageGroup .modal-content .btn-close {
        right: -4px;
        top: -33px;
        border-radius: 5px 5px 0px 0px;
    }

    /* PopUp Modal Responsive Css End Here */
}

@media only screen and (min-width: 300px) and (max-width: 520px) {

    /* PopUp Modal Responsive Css Start Here */
    #ageGroup .modal-dialog {
        max-width: 100% !important;
        margin: 100px 20px 0;
    }

    #ageGroup .modal-content .btn-close {
        right: -4px;
        top: -33px;
        border-radius: 5px 5px 0px 0px;
    }

    /* PopUp Modal Responsive Css End Here */
}
</style>