/* Custom page CSS
-------------------------------------------------- */

body {
    background-color: #0a192f; /* Deep space blue background */
    /* Combine stars-bg.jpg with a deep space overlay and central nebula glow */
    background-image:
        radial-gradient(
            circle at 50% 50%,
            rgba(90, 26, 117, 0.15) 0%,
            rgba(10, 25, 47, 0.85) 70%,
            rgba(10, 25, 47, 0.95) 100%
        ),
        url("../img/stars-bg.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #cccccc; /* Light gray text for readability */
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol"; /* Standard sans-serif stack, similar to style guide */
}

body.light-mode {
    background-image: none !important;
    background-color: #ffffff;
}

main > .container {
    padding: 60px 15px 0;
}

.footer {
    background-color: #1a1a2e; /* Dark background for footer */
    color: #cccccc; /* Light text for footer */
}
.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

code {
    font-size: 80%;
}

.btn-social.btn-sm > :first-child {
    margin-top: 2px;
    font-size: 1.55em !important;
}

th {
    min-width: 50px;
}

.thumbnail a img {
    width: 100%;
}

/* Ensure social button text aligns better */
.btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-social > :first-child {
    margin-right: 0.5rem;
}

/* Custom modal sizing for extra-large modals */
.modal-xl {
    max-width: 90vw; /* Make extra-large modals 90% of the viewport width */
    width: 90%; /* Ensure width is also 90% to maintain proportion */
}

/* Login Page Specific Styles */
.login-container {
    padding-top: 5vh; /* Add some space from the top */
    padding-bottom: 5vh;
}

/* Ensure body takes full height if base template allows */
html,
body {
    height: 100%;
}

/* noUiSlider custom styles */
body .noUi-connect {
    background: #5a1a75 !important; /* Primary purple color */
}

.noUi-horizontal .noUi-handle {
    background: #4a1560; /* Darker purple for handles */
    border: 1px solid #5a1a75; /* Primary purple border */
    box-shadow: none; /* Remove default shadow */
}

.noUi-horizontal .noUi-handle:hover {
    background: #5a1a75; /* Primary purple on hover */
}

.noUi-tooltip {
    background: #1a1a2e; /* Dark background for tooltips */
    color: #cccccc; /* Light text for tooltips */
    border: 1px solid #3a3a5a; /* Darker border for tooltips */
}

/* Background images for sections */
.contribute-section {
    background-image: url("../img/night-sky.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.contribute-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(
        0,
        0,
        0,
        0.6
    ); /* Dark overlay for text readability */
    z-index: 1;
}

.contribute-section > .row {
    position: relative;
    z-index: 2; /* Ensure content is above the overlay */
}

.observation-section {
    background-image: url("../img/stars-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.observation-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(
        0,
        0,
        0,
        0.6
    ); /* Dark overlay for text readability */
    z-index: 1;
}

.observation-section > .row {
    position: relative;
    z-index: 2; /* Ensure content is above the overlay */
}

/* Cosmic Star Loading Spinner */
.loading-spinner {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #5a1a75; /* Brand purple */
    color: transparent;
    margin: 20px auto;
    position: relative;
    /* Create a 4-pointed star shape using clip-path */
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
    animation: star-pulse-rotate 1.5s ease-in-out infinite;
    content: "";
}

.loading-spinner.spinner-sm {
    width: 1rem;
    height: 1rem;
    margin: 0 5px;
    vertical-align: middle;
}

@keyframes star-pulse-rotate {
    0% {
        transform: rotate(0deg) scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: rotate(180deg) scale(1.2);
        opacity: 1;
        filter: drop-shadow(0 0 8px currentColor);
    }
    100% {
        transform: rotate(360deg) scale(0.8);
        opacity: 0.6;
    }
}