/*
 * Styles for the page loader and loading state.
 */

.page-is-loading header,
.page-is-loading main {
    visibility: hidden; /* Hide content but keep layout space to prevent reflow */
}

.content-is-loading #content-container {
    visibility: hidden;
}

.content-is-loading .content-loader-wrapper {
    /* Make the loader visible and start the fade-in transition. */
    opacity: 1;
    visibility: visible;
}

.page-loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color, white);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease-out;
}

.content-loader-wrapper {
    position: fixed;
    margin-top: var(--body-offset-top);
    margin-left: var(--header-border-padding);
    margin-right: var(--header-border-padding);
    top: 0;
    left: 0;
    width: calc(100% - 2 * var(--header-border-padding));
    height: 100%;
    background-color: var(--background-color, white);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease-out;
}

.loader {
    border: 4px solid var(--border-color, #f3f3f3);
    border-top: 4px solid var(--primary-color, #3d5afe);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*
 * Styles for status indicators (e.g., subscription loader)
 */
.status-indicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1010; /* Above most content, below modals/lightboxes */

    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;

    /* A semi-transparent, glassy background for a modern look */
    background-color: hsl(0, 20%, 96%);
    -webkit-backdrop-filter: blur(4px); /* For Safari */
    backdrop-filter: blur(4px);

    border: 1px solid hsl(0, 15%, 88%);
    color: var(--muted-color);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    font-size: 0.9rem;
    font-style: italic;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out;
}

.status-indicator.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Make the loader inside the indicator smaller */
.status-indicator .loader {
    width: 20px;
    height: 20px;
    border-width: 3px;
}