/* Fix modal size (desktop & mobile responsive) */
#contactPopupModal .modal-dialog {
    max-width: 500px;
    width: 90%;
    margin: 20px auto;      /* Add spacing on mobile */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Modal box styling */
#contactPopupModal .popup-modal-box {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 15px;
    border: 2px solid black;
    box-shadow: inset 0 0 0 2px #dfa667;
    padding: 20px;         
}

/* Backdrop */
.modal-backdrop.show {
    background: rgba(128, 128, 128, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Inputs */
#contactPopupModal .popup-input {
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid black !important;
    border-radius: 10px;
    color: #000;
    padding: 10px 12px;
    width: 100%;             /* Ensures full width on mobile */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

/* Input focus */
#contactPopupModal .popup-input:focus {
    background: rgba(255, 255, 255, 0.55);
    outline: none;
    box-shadow: inset 0 0 0 2px #dfa667,
                0 0 8px rgba(223, 166, 103, 0.8);
}

/* Submit button */
#contactPopupModal .modal-footer .btn-primary {
    border: 2px solid black !important;
    width: 100%;     /* Full width button on mobile */
    padding: 10px;
}

/* Label */
#contactPopupModal .popup-label {
    color: black !important;
}
#contactPopupModal .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: black;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}


/* -----------------------------------
   MOBILE RESPONSIVE ADJUSTMENTS
------------------------------------ */
@media (max-width: 576px) {

    /* Slightly reduce blur for better visibility on mobiles */
    #contactPopupModal .popup-modal-box {
        padding: 15px;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    /* Smaller heading */
    #contactPopupModal .popup-title {
        font-size: 18px;
    }

    /* Smaller logo */
    #contactPopupModal .popup-logo {
        width: 80px;
        height: auto;
    }

    /* Reduce padding for body */
    #contactPopupModal .modal-body {
        padding: 10px 5px;
    }

    /* Inputs look cleaner on mobile */
    #contactPopupModal .popup-input {
        padding: 8px 10px;
    }
}