.modal-overlay {
    display: none; 
    position: fixed; 
    z-index: 10000; 
    left: 0; 
    top: 0;
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.8); 
    backdrop-filter: blur(5px);
    /* FIX: Enable scrolling on the overlay */
    overflow-y: auto; 
    padding: 20px 0; /* Space at top/bottom when scrolling */
}
.modal-content {
    background: #fff; 
    margin: 2% auto; /* Reduced top margin */
    padding: 40px; 
    border-radius: 4px;
    width: 90%; 
    max-width: 700px; 
    position: relative; 
    font-family: 'Outfit', sans-serif;
    /* FIX: Ensure the box itself doesn't cause weird cut-offs */
    height: auto;
    max-height: none; 
}
.submit-btn{
    justify-content: center;
}
.close-modal { position: absolute; right: 20px; top: 15px; font-size: 30px; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
.form-group label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px; border: 1px solid #eee; font-family: 'Outfit', sans-serif;
}
.full-width { grid-column: span 2; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } .full-width { grid-column: span 1; } }

/* --- Tablet / Large Phone (768px and up) --- */
@media (min-width: 768px) {
    .modal-content {
        width: 80%;
        max-width: 700px;
        margin: 30px auto;
        padding: 30px;
    }
    .form-grid { 
        grid-template-columns: 1fr 1fr; /* Switch to 2 columns */
    }
}

/* --- Tablets & Small Laptops (991px to 1239px) --- */
/* We use max-width 991 to target the specific transition point */
@media (max-width: 991px) {
    .modal-content {
        padding: 25px;
    }
    /* Optional: slightly smaller text for smaller laptops */
    .form-group label { font-size: 10px; } 
}

/* --- Standard Desktop (1240px and up) --- */
@media (min-width: 1240px) {
    .modal-content {
        max-width: 800px; /* Slightly wider for better grid spacing */
        padding: 40px;
        margin: 5% auto;
    }
    .form-grid {
        gap: 30px; /* More "breathing room" for luxury design */
    }
}

/* --- Large Desktop / Ultra-Wide (1440px and up) --- */
@media (min-width: 1440px) {
    .modal-content {
        max-width: 900px; /* Expands to utilize the screen real estate */
        padding: 50px;
        border-radius: 8px; /* Slightly softer corners on large screens */
    }
    .form-group input, .form-group select, .form-group textarea {
        padding: 15px; /* Larger hit targets for a premium feel */
    }
}