/* Modal Container */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position to stay in the viewport */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset to perfectly center */
    width: 90%; /* Responsive width */
    max-width: 400px; /* Maximum width */
    background-color: white; /* Modal background */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Add shadow for better visibility */
    z-index: 1001; /* Ensure it appears above other elements */
    padding: 20px; /* Internal spacing */
    text-align: center; /* Center the text */
}

/* Display the modal when not hidden */
.modal:not(.hidden) {
    display: block;
}

/* Modal Content */
.modal-content {
    position: relative; /* Relative positioning for close button */
}

.modal .close {
    position: absolute;
    top: -36px; /* Moves the button higher above the modal content */
    right: -16px; /* Moves the button further to the right outside the modal content */
    font-size: 20px; /* Makes the button slightly larger for better visibility */
    font-weight: bold;
    color: #333; /* Default color for the close button */
    cursor: pointer; /* Shows a pointer to indicate it's clickable */
    background-color: white; /* Optional: Adds a background to the button */
    border: 1px solid #ccc; /* Optional: Adds a border for better visibility */
    border-radius: 50%; /* Makes the button circular */
    width: 30px; /* Adjusts the size of the button */
    height: 30px; /* Ensures the button is a perfect circle */
    text-align: center; /* Centers the 'X' inside the button */
    line-height: 30px; /* Aligns the 'X' vertically */
    transition: color 0.2s ease, background-color 0.2s ease; /* Smooth hover effect */
}

.modal .close:hover {
    color: red; /* Highlights the button when hovered */
    background-color: #f2f2f2; /* Optional: Changes the background on hover */
}


/* Responsive Styles */
@media (max-width: 600px) {
    .modal {
        width: 95%; /* Ensure modal fits small screens */
        max-width: 90%; /* Allow modal to shrink */
        padding: 15px; /* Adjust padding */
    }

    .modal .close {
        font-size: 16px; /* Slightly smaller close button for mobile */
    }
}