/* Overlay Backgrounds */
.overlay-service-overlay,
.overlay-service-alert-overlay {
    position: fixed;
    /* Fixed position to cover viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Semi-transparent black */
    opacity: 0;
    /* Start hidden for fade-in */
    visibility: hidden;
    /* Use visibility for accessibility and to prevent interaction when hidden */
    z-index: 1000;
    /* Base z-index for main overlay */

    /* Basic transition for fade effect - vendor prefixes for older browsers */
    -webkit-transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Hide visibility instantly after fade out */
    -moz-transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    -o-transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Standard syntax */
}

/* Alert overlay specific styles */
.overlay-service-alert-overlay {
    z-index: 1050;
    /* Higher z-index ensures alerts are on top of main overlays */
    /* Optional: Slightly different background for alerts */
    /* background-color: rgba(0, 0, 0, 0.4); */
}

/* Styles for when overlays/alerts are visible */
.overlay-service-overlay.visible,
.overlay-service-alert-overlay.visible {
    opacity: 1;
    visibility: visible;
    /* Adjust transition delay for visibility when becoming visible */
    -webkit-transition-delay: 0s;
    /* Apply visibility change immediately when fading in */
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    /* Standard syntax */
}

/* Wrapper for positioning content */
/* Using table display for vertical centering in older browsers that don't support flexbox */
.overlay-service-wrapper,
.overlay-service-alert-wrapper {
    display: table;
    /* Treat the wrapper like a table */
    width: 100%;
    height: 100%;
    /* Note: This technique might have issues if content is taller than viewport */
}

/* Container acting as table-cell for vertical alignment */
.overlay-service-container,
.overlay-service-alert-container {
    display: table-cell;
    /* Treat the container like a table cell */
    vertical-align: middle;
    /* Vertically center the content within the wrapper */
    text-align: center;
    /* Center the inline-block modal box horizontally */
    /* Clicks directly on this element (the cell) won't close the overlay, */
    /* only clicks on the wrapper (background) will, if enabled. */
}

/* Style the actual modal box (the element directly inside the container) */
/* This targets the first child div often used to wrap content, or the container itself if not wrapped */
.overlay-service-container>div:first-child,
.overlay-service-alert-container {
    background-color: rgba(3, 3, 3, 0.05);
    backdrop-filter: blur(2px);
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

    position: relative;
    margin: 0 auto;
}

/* Specific styles for the alert box */
.overlay-service-alert-container {
    min-width: 200px;
    /* Minimum width for alerts */
    max-width: 400px;
    /* Maximum width for alerts */
    padding: 25px;
    /* Slightly more padding for alerts */
    text-align: center;
    /* Center the text and button within the alert box */
}

/* Alert message styling */
.overlay-service-alert-message {
    margin: 0 0 20px 0;
    /* Space below the message text */
    font-size: 1em;
    /* Adjust as needed */
    line-height: 1.4;
    /* Improve readability */
    color: #333333;
    /* Dark grey text color */

    background-color: rgb(34, 43, 50);
    border-radius: 1rem;
    font-size: 1.375rem;
    color: #f2f2f2;
    padding: 1.5rem;
    width: 30rem;
    /* height: 20rem; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
}

/* Container for alert buttons */
.overlay-service-alert-buttons {
    margin-top: 15px;
    /* Space above the button(s) */
}

/* Alert OK button styling */
.overlay-service-alert-ok-button {
    padding: 8px 20px;
    /* Button padding */
    background-color: #eeeeee;
    /* Light grey background */
    color: #333333;
    /* Dark text */
    border: 1px solid #cccccc;
    /* Grey border */
    /* Basic rounded corners if supported */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    /* Pointer cursor on hover */
    font-size: 0.9em;
    /* Slightly smaller font size */
    font-weight: bold;
    /* Basic hover/focus styles for feedback */
    outline: none;
    /* Remove default browser outline */
}

.overlay-service-alert-ok-button:hover,
.overlay-service-alert-ok-button:focus {
    background-color: #dddddd;
    /* Slightly darker grey on hover/focus */
    border-color: #bbbbbb;
}

/* Close button styling (for main overlay) */
.overlay-service-close-button {
    position: absolute;
    /* Position relative to the container */
    top: 8px;
    right: 10px;
    background: none;
    /* No background */
    border: none;
    /* No border */
    font-size: 1.8em;
    /* Large 'x' */
    line-height: 1;
    /* Prevent extra spacing */
    color: #888888;
    /* Grey color */
    cursor: pointer;
    /* Pointer cursor */
    padding: 0;
    font-weight: bold;
    text-decoration: none;
}

.overlay-service-close-button:hover {
    color: #333333;
    /* Darker on hover */
}

/* Basic focus visibility for accessibility */
.overlay-service-container:focus,
.overlay-service-alert-container:focus,
.overlay-service-alert-ok-button:focus,
.overlay-service-close-button:focus {
    outline: 2px solid #005bff;
    /* Example focus outline */
    outline-offset: 2px;
}

.overlay-close-button{
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    background: none;
    font-size: 4em;
    line-height: 0.1em;
    color: #888888;
    cursor: pointer;
    padding: 0;
    font-weight: bold;
    text-decoration: none;
    z-index: 2;
}