/* Light theme */
:root[data-theme="light"] .preloader {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
}

    :root[data-theme="light"] .preloader .spinner-border {
        border-width: 0.25em;
        border-style: solid;
        border-color: #dee2e6; /* light gray base */
        border-top-color: #0d6efd; /* blue spinner */
    }

    :root[data-theme="light"] .preloader .loading-text {
        color: #0d6efd;
        font-weight: bold;
        margin-top: 0.5rem;
    }

/* Dark theme */
:root[data-theme="dark"] .preloader {
    background-color: rgba(30, 30, 30, 0.8);
    color: #fff;
}

    :root[data-theme="dark"] .preloader .spinner-border {
        border-width: 0.25em;
        border-style: solid;
        border-color: #555; /* dark gray base */
        border-top-color: #0dcaf0; /* light blue spinner */
    }

    :root[data-theme="dark"] .preloader .loading-text {
        color: #0dcaf0;
        font-weight: bold;
        margin-top: 0.5rem;
    }

/* Preloader overlay */
.preloader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
    z-index: 9999;
    text-align: center;
}

/* Inner wrapper keeps content centered */
.preloader-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Spinner wrapper for logo + spinner */
.spinner-wrapper {
    position: relative;
    width: 120px; /* spinner size */
    height: 120px;
}

/* Spinner ring around logo */
.spinner-around-logo {
    width: 100%;
    height: 100%;
    border-width: 0.3rem;
    border-top-color: #0d6efd; /* spinner color */
    border-right-color: #dee2e6;
    border-bottom-color: #dee2e6;
    border-left-color: #dee2e6;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

/* Logo in center of spinner */
.spinner-logo {
    width: 60px; /* adjust logo size */
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Loading text */
.loading-text {
    font-weight: bold;
    font-size: 1rem;
}

/* Spinner animation */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .spinner-wrapper {
        width: 90px;
        height: 90px;
    }

    .spinner-logo {
        width: 45px;
    }

    .spinner-around-logo {
        border-width: 0.2rem;
    }

    .loading-text {
        font-size: 0.9rem;
    }
}