/*
Theme Name: Astra Child
Theme URI: https://cleanjax.com/astra-child/
Description: Astra Child Theme
Author: Marcus Dandrea
Author URI: https://cleanjax.com
Template: astra
Version: 1.0.0
*/

/* Modal background */
.modal {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 1000; /* High z-index to ensure it's on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Semi-transparent background */
}

/* Modal content box */
.modal-content {
    background: #fff;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border-radius: 5px;
    width: 80%; /* Responsive width */
    max-width: 500px; /* Maximum width */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Box shadow for 3D effect */
    position: relative; /* For positioning close button */
}

/* Modal text and link */
.modal h2, .modal p {
    margin: 0 0 20px; /* Spacing between elements */
}

.modal p .modal-link {
    color: #007bff; /* Link color */
    text-decoration: underline; /* Underline link */
}

/* Close button */
.close-btn {
    background-color: #f44336; /* Red color for close button */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px; /* Position the close button */
}

.close-btn:hover {
    background-color: #d32f2f; /* Darker shade on hover */
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
    .modal-content {
        margin: 20% auto; /* More top margin on small screens */
        width: 90%; /* Take up more width on small screens */
    }
}