/* General Modal Styles */
.vanilla-modal {
    position: fixed;
    top: 0;
    left: 0;
    display: none; /* Still hidden by default */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Keep horizontal overflow hidden */
    outline: 0;
    transition: opacity 0.15s linear;
    opacity: 0;
    /* Ensure clicks pass through when hidden */
    pointer-events: none;
    backdrop-filter: blur(16px); /* Background blur effect */
}

/* Style for when the modal is shown */
.vanilla-modal.show {
    opacity: 1;
    /* Enable clicks on backdrop when shown */
    pointer-events: auto;
}

/* Prevent body scrolling when modal is open */
.vanilla-modal-open {
    overflow: hidden;
}

/* Modal Dialog positioning and sizing */
.vanilla-modal-dialog {
    position: relative;
    width: 600px;
    /* Let flexbox handle centering, add some margin for spacing */
    margin: 16px; /* Add some margin around the dialog (1rem -> 16px) */
    pointer-events: none; /* Allow clicks on backdrop initially */
    transition: opacity 0.15s linear; /* Use opacity transition */
    opacity: 0; /* Start transparent for fade-in */
    /* Set max-height to prevent overly tall modals from breaking layout */
    max-height: calc(100vh - 32px); /* Max height considering margin (2rem -> 32px) */
    display: flex; /* Make dialog a flex container for content */
    flex-direction: column; /* Stack header/body/footer vertically */
}

.vanilla-modal-dialog.vanilla-modal-sm {
    width: 480px;
}

.vanilla-modal-dialog.vanilla-modal-md {
    width: 640px;
}

.vanilla-modal-dialog.vanilla-modal-lg {
    width: 800px;
}

.vanilla-modal-dialog.vanilla-modal-xl {
    width: 1000px;
}

.vanilla-modal.show .vanilla-modal-dialog {
    opacity: 1; /* Fade in */
    pointer-events: auto; /* Enable interaction with dialog */
}

/* Modal Content Box */
.vanilla-modal-content {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    pointer-events: auto; /* Re-enable pointer events for content */
    background-clip: padding-box;
    padding: 32px; /* Padding applied here */
    border-radius: 32px;
    outline: 0;
    /* Let header/body handle overflow and scrolling, but hide overflow of content box itself */
    overflow: hidden;
    max-height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}



/* Modal Header */
.vanilla-modal-header {
    display: flex;
    align-items: flex-start; /* Align items to top */
    justify-content: space-between;
    padding: 0 0 24px 0; /* Padding bottom for spacing */
    flex-shrink: 0; /* Prevent header from shrinking */
}

.vanilla-modal-title {
    margin-right: auto;
}

.vanilla-modal-title h3 {
    font-size: 32px;
    font-weight: 700;
}

/* Modal Body */
.vanilla-modal-body {
    position: relative;
    flex: 1 1 auto; /* Allow body to grow and shrink */
    padding: 0; /* Reset padding, rely on .vanilla-modal-content padding and header padding-bottom */
    /* overflow-y: auto; */
}


.vanilla-modal-content button:not(.vanilla-modal-close):hover,
.vanilla-modal-content button:not(.vanilla-modal-close):focus {
    text-decoration: none;
    outline: 0;
}

/* --- Close Button Styles (Adapted from VanillaAlert) --- */
.vanilla-modal-close {
    background: none;
    border: none;
    font-size: 24px; /* Icon size (adjust if needed, 1.5rem -> 24px) */
    width: 32px; /* Fixed width from alert */
    height: 32px; /* Fixed height from alert */
    line-height: 1;
    /* Color is set by theme */
    opacity: 0.8;
    cursor: pointer;
    padding: 0; /* No padding needed with fixed size and flex centering */
    margin: 0; /* Reset margin, positioning handled by flex */
    /* Align self to the start of the flex container (header) */
    align-self: flex-start; 
    /* Use flex for centering SVG */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Transition from alert */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.15s ease-in-out;
    flex-shrink: 0; /* Prevent shrinking */
    border-radius: 50%; /* Make it round */
     /* Remove text shadow */
     text-shadow: none;
}

.vanilla-modal-close svg {
    display: block; /* Remove extra space under SVG */
    /* fill is handled by themes or currentColor */
}

/* Close button hover/focus from alert + background */
.vanilla-modal-close:hover,
.vanilla-modal-close:focus {
    opacity: 1;
    outline: none;
    transform: scale(1.2); /* Enlarge icon on hover */
}

/* Dark Theme Input Styles */
.vanilla-modal-theme-dark input[type="text"],
.vanilla-modal-theme-light input[type="text"] {
    display: block;
    width: 100%;
    height: 64px;
    padding: 8px 24px;
    font-size: 20px;
    line-height: 1.4;
    background-clip: padding-box;
    border-radius: 32px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.vanilla-modal-theme-dark input[type="text"]:focus,
.vanilla-modal-theme-light input[type="text"]:focus {
    outline: 0;
}