<style>

.modalSecure {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; 
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
}

.modal-contentSecure {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px 12px 0 0;
    width: 80%;
    max-width: 500px;

    animation-fill-mode: forwards;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 100%); /* Start off-screen */

    animation: slideUp 0.35s ease-out forwards;
}

@keyframes slideUp {
    from {
        transform: translate(-50%, 100%); /* bottom hidden */
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0); /* final position */
        opacity: 1;
    }
}
@keyframes slideDown {
    from {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    to {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
}
.modal-header{
    padding: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-top: 8px;
}
.modal-body{
    padding: 15px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.modal-body p{
    text-align: justify-all;
    font-family: sans-serif;
}

.modal-footer{
    padding-bottom: 10px;
}

.modal-header2, .modal-footer2 {
    font-weight: bold;
}

.modal-footer2{
    /*border-top: 1px solid #ddd;*/
    display: flex;
    justify-content: space-between;
}

.closeBtn{
    width: 100%;
    margin-top: 10px;
}
.closeBtn button{
    width: 100%;
    padding: 10px;
    outline: none;
    border:none;
    border-radius: 10px;
    background: #0C7BF2;
    font-size: 17px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-family: sans-serif;
}
.closeBtn button:hover{
    background: ;

}

/* Icon styling */
.icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: #007bff20;
    color: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    animation: pulse 1.8s infinite;
}

/* Icon animation (soft breathing effect) */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
@media(max-width: 992px){
    .modal-contentSecure{
        width: 90%;
        margin-top:100px;
    }
    .modal-body p{
        font-size: 13px;
        text-align: justify;
    }
    .modal-body span{
        font-size: 14px;
    }
    .modal-footer2{
        display: flex;
        justify-content: space-between;
        gap:20px;
    }
    .modal-footer2 button{
        font-size: 14px;
    }
   
}

</style>
<div class="modalSecure" id="theModal">
    <div class="modal-contentSecure">
        <div class="modal-header">
            <div class="icon-wrapper">
                <div class="icon-circle">
                    <i class="fa fa-lock"></i>
                </div>
            </div>

            <h4 class="modal-title mt-4">Login Action Required</h4>
        </div>   
        <div class="modal-body">
            <p>
                You just selected <strong>“Remember Me”</strong>.  
                This means your account will stay logged in on this device for the next 
                <strong>30 days</strong>, even if the browser is closed.
                <br><br>
                Only enable this option if you <strong>trust this device</strong> 
                (your personal phone or laptop).  
                If this device is shared or public, kindly <strong>uncheck the box</strong> 
                for your security.
            </p>
        </div>
      <form action="" method="POST">
        <div class="modal-footer2">
            <div class="closeBtn">
                <button type="button" 
                    class=" " 
                    onclick="closeModalSecure()">
                    Okay, I understand
                </button>
            </div>
        </div>
      </form> 
    </div>
</div>



<script>

function checkAlert() {
    let checkbox = document.getElementById('loginRem');

    if (checkbox.checked) {
        // Show the modal ONLY when checkbox is checked
        openModal('theModal');
    }
}

function openModal(id) {
    let modalBox = document.querySelector('.modal-contentSecure');
    document.getElementById(id).style.display = "block";

    // Play slide-up animation when opening
    modalBox.style.animation = "slideUp 0.35s ease-out forwards";
}

function closeModalSecure(id) {
    let modalBox = document.querySelector('.modal-contentSecure');
    let modalBg  = document.getElementById('theModal');

    // Play slide-down animation
    modalBox.style.animation = "slideDown 0.35s ease-out forwards";

    // Wait for animation to finish before hiding background
    setTimeout(() => {
        modalBg.style.display = "none";
        modalBox.style.animation = ""; // reset for next open
    }, 350);
}
</script>
