<div class="valorege-popup">
    <button class="open-popup-btn">Open Reservation Form</button>
    <div class="popup-wrapper">
        <div class="popup">
            <div class="popup-content">
                <div class="close-btn">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.16797 4.16699L15.8346 15.8337" stroke="#231F20" stroke-width="2" stroke-linecap="round"/>
                        <path d="M15.8333 4.16699L4.16667 15.8337" stroke="#231F20" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </div>
                <h3>Votre devis sous 24h</h3>
                <form class="reservation-form" action="">
                    <div class="form-row grid-col-3">
                        <div class="gird-col">
                            <div class="input-name">
                                <label for="first-name">First name</label>
                                <input type="text" name="first-name" id="first-name">
                            </div>
                            <div class="input-name">
                                <label for="last-name">Name</label>
                                <input type="text" name="last-name" id="last-name">
                            </div>
                        </div>
                        <div class="gird-col">
                            <label for="email">E-mail</label>
                            <input type="email" name="email" id="email">
                        </div>
                        <div class="gird-col">
                            <label for="tel">Phone</label>
                            <input type="tel" name="tel" id="tel">
                        </div>
                    </div>
                    <div class="form-row grid-col-3">
                        <div class="gird-col">
                            <label for="textarea">Your message</label>
                            <textarea name="message" rows="2" id="textarea"></textarea>
                        </div>
                        <div class="gird-col">
                            <label for="datepicker">Concert date *</label>
                            <input type="date" id="datepicker" placeholder="Select date">
                        </div>
                        <div class="gird-col">
                            <div class="info-box">
                                <div class="info-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" version="1.1" id="Capa_1" width="800px" height="800px" viewBox="0 0 416.979 416.979" xml:space="preserve" stroke="#ffffff">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0"/>
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
                                        <g id="SVGRepo_iconCarrier">
                                            <g>
                                                <path d="M356.004,61.156c-81.37-81.47-213.377-81.551-294.848-0.182c-81.47,81.371-81.552,213.379-0.181,294.85 c81.369,81.47,213.378,81.551,294.849,0.181C437.293,274.636,437.375,142.626,356.004,61.156z M237.6,340.786 c0,3.217-2.607,5.822-5.822,5.822h-46.576c-3.215,0-5.822-2.605-5.822-5.822V167.885c0-3.217,2.607-5.822,5.822-5.822h46.576 c3.215,0,5.822,2.604,5.822,5.822V340.786z M208.49,137.901c-18.618,0-33.766-15.146-33.766-33.765 c0-18.617,15.147-33.766,33.766-33.766c18.619,0,33.766,15.148,33.766,33.766C242.256,122.755,227.107,137.901,208.49,137.901z"/>
                                            </g>
                                        </g>
                                    </svg>
                                </div>
                                <small>Everything is supplied with cables and stored in flight cases. Equipment to be taken to Le Mans on the day of your gala and returned the following morning.</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-row grid-col-2">
                        <div class="gird-col checkbox-col">
                            <h2>Le Son</h2>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item01">
                                <label for="item01">ALL THE SOUND (with 11 microphones and sound tablet, available in flight cases: €250 excluding VAT)</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item02">
                                <label for="item02">Sound system: Alto TS 412/18S Basis Bundle</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item03">
                                <label for="item03">Mackie DL16S Dispatcher</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item04">
                                <label for="item04">Wifi mixing console tablet or Soundcraft mixing desk</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item05">
                                <label for="item05">Set of 7 Audix drum microphones + Tom mount</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item06">
                                <label for="item06">Multipair (8 XLR)</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item07">
                                <label for="item07">Shure SM58 vocal microphone</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item08">
                                <label for="item08">Shure PGA 5 Vocal Microphone!</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item09">
                                <label for="item09">Shure SM57 Microphone</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item10">
                                <label for="item10">3 vocal microphone stands</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item11">
                                <label for="item11">4 drum microphone stands</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item12">
                                <label for="item12">2 Alto foot bath returns</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="sound" id="item13">
                                <label for="item13">1 battery return + HF microphone</label>
                            </div>
                        </div>
                        <div class="gird-col checkbox-col">
                            <h2>La Lumière</h2>
                            <div class="checkbox">
                                <input type="checkbox" name="light" id="col2item01">
                                <label for="col2item01">ALL THE LIGHT (with DMX cables and power supplies, available in flight cases: €100 excluding VAT)</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="light" id="col2item02">
                                <label for="col2item02">Bluetooth DMX system</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="light" id="col2item03">
                                <label for="col2item03">4 folding tripods 3m</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="light" id="col2item04">
                                <label for="col2item04">6 Spoken</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="light" id="col2item05">
                                <label for="col2item05">4 Skybar</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="light" id="col2item06">
                                <label for="col2item06">2 Froggy Lyres</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="light" id="col2item07">
                                <label for="col2item07">2 Evolites maxbar 180 ground or tripod mounts</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="light" id="col2item08">
                                <label for="col2item08">1 smoke machine</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="light" id="col2item09">
                                <label for="col2item09">All DMX cables</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" name="light" id="col2item10">
                                <label for="col2item10">Bag for supporting 2 tablets (sound + light)</label>
                            </div>
                            <div class="submit-btn">
                                <input type="submit" value="Envoyer">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    .valorege-popup * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .valorege-popup {
        position: relative;
    }

    .valorege-popup .popup-wrapper {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 1000;
    }

    .valorege-popup .popup-wrapper.active {
        display: block;
    }

    .valorege-popup .popup-wrapper * {
        font-family: "Avenir LT 35 light", sans-serif;
    }

    .valorege-popup .popup-wrapper::-webkit-scrollbar {
        display: none;
    }

    .valorege-popup .popup {
        width: 100%;
        max-width: 1100px;
        margin: 50px auto;
        min-height: auto;
        background-color: #faf7e8;
        position: relative;
    }

    .valorege-popup .popup-content {
        max-width: 939px;
        margin: auto;
        padding: 30px 60px;
    }

    .valorege-popup .popup-content h3 {
        color: #fff;
        background-color: black;
        padding: 10px;
    }

    .valorege-popup .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
        width: 24px;
        height: 24px;
    }

    .valorege-popup .close-btn svg {
        width: 100%;
        height: 100%;
        fill: #000;
    }

    .valorege-popup .popup-content .reservation-form {
        width: 100%;
        display: flex;
        gap: 30px;
        margin-top: 40px;
        flex-direction: column;
    }

    .valorege-popup .form-row {
        display: grid;
        width: 100%;
        gap: 30px;
    }

    .valorege-popup .grid-col-3 {
        grid-template-columns: 1.6fr 1fr 1fr;
    }

    .valorege-popup .grid-col-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .valorege-popup .form-row .gird-col {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .valorege-popup .form-row:first-child .gird-col:first-child {
        flex-direction: row;
    }

    .valorege-popup .form-row:first-child .input-name {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .valorege-popup .form-row .gird-col input,
    .valorege-popup .form-row .gird-col textarea {
        width: 100%;
        min-height: 40px;
        padding: 10px;
        border: none;
    }

    .valorege-popup .checkbox-col {
        flex-direction: column;
    }

    .valorege-popup .form-row .checkbox-col input[type="checkbox"] {
        min-height: 16px !important;
        width: 100% !important;
        max-width: 16px;
        appearance: none;
        background-color: transparent !important;
        border: 1px solid black;
        cursor: pointer;
        position: relative;
    }

    .valorege-popup .form-row .checkbox-col input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        background: url("https://valorege.fr/wp-content/uploads/2025/09/checkmark-svgrepo-com.svg") no-repeat center center;
        background-size: contain;
        transform: translate(-55%, -50%);
    }

    .valorege-popup .form-row .checkbox-col .checkbox {
        gap: 20px;
        display: flex;
        align-items: flex-start;
        width: 100%;
    }

    .valorege-popup .info-box {
        background: black;
        color: #fff;
        padding: 25px 16px 16px 40px;
        position: relative;
    }

    .valorege-popup .info-box .info-icon {
        width: 15px;
        height: 17px;
        position: absolute;
        left: 15px;
        top: 15px;
    }

    .valorege-popup .info-box .info-icon svg {
        height: 100%;
        width: 100%;
    }

    .valorege-popup .checkbox-col h2 {
        padding: 10px;
        background-color: black;
        color: #fff;
        margin-bottom: 10px;
        font-size: 18px;
    }

    .valorege-popup .reservation-form input[type="submit"] {
        background-color: #000;
        padding: 10px 24px;
        border-radius: 0px;
        border: 2px solid #000;
        color: #fff;
        margin-top: 20px;
        min-width: 130px;
        font-size: 18px;
        cursor: pointer;
    }

    .valorege-popup .reservation-form input[type="submit"]:hover {
        background-color: transparent;
        color: #000;
    }

    .valorege-popup .open-popup-btn {
        background-color: #000;
        color: #fff;
        padding: 10px 20px;
        border: 2px solid #000;
        cursor: pointer;
        font-size: 18px;
        margin: 20px;
    }

    .valorege-popup .open-popup-btn:hover {
        background-color: transparent;
        color: #000;
    }

    /* Tablet devices (max-width: 991px) */
    @media (max-width: 991px) {
        .valorege-popup .popup {
            max-width: 100%;
            margin: 20px;
        }

        .valorege-popup .popup-content {
            padding: 20px 30px;
        }

        .valorege-popup .form-row.grid-col-3 {
            grid-template-columns: repeat(2, 1fr);
        }

        .valorege-popup .form-row.grid-col-2 {
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .valorege-popup .form-row .gird-col {
            gap: 8px;
        }

        .valorege-popup .checkbox-col h2 {
            font-size: 16px;
        }

        .valorege-popup .reservation-form input[type="submit"] {
            font-size: 16px;
            min-width: 120px;
        }
    }

    /* Mobile devices (max-width: 575px) */
    @media (max-width: 575px) {
        .valorege-popup .popup-content {
            padding: 15px 20px;
        }

        .valorege-popup .form-row.grid-col-3,
        .valorege-popup .form-row.grid-col-2 {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .valorege-popup .form-row:first-child .gird-col:first-child {
            flex-direction: column;
        }

        .valorege-popup .checkbox-col h2 {
            font-size: 15px;
            padding: 8px;
        }

        .valorege-popup .form-row .checkbox-col .checkbox {
            gap: 12px;
        }

        .valorege-popup .reservation-form input[type="submit"] {
            width: 100%;
            font-size: 16px;
        }

        .valorege-popup .reservation-form textarea,
        .valorege-popup .reservation-form input {
            font-size: 15px;
        }
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
jQuery(document).ready(function ($) {
    flatpickr(".valorege-popup #datepicker", {
        dateFormat: "d-m-Y",
        minDate: "today",
        defaultDate: "today",
        altInput: true,
        altFormat: "F j, Y"
    });

    const openBtn = $('.valorege-popup .open-popup-btn');
    const popupWrapper = $('.valorege-popup .popup-wrapper');
    const closeBtn = $('.valorege-popup .close-btn');

    openBtn.on('click', function () {
        alert("working");
        popupWrapper.addClass('active');
    });

    closeBtn.on('click', function () {
        popupWrapper.removeClass('active');
    });

    popupWrapper.on('click', function (e) {
        if (e.target === this) {
            popupWrapper.removeClass('active');
        }
    });
});
</script>