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

body {
    background-color: #0a192f; /* Deep space blue background */
    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 */
}

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;
}


/* Login Page Specific Styles */
.login-container {
    padding-top: 5vh; /* Add some space from the top */
    padding-bottom: 5vh;
    /* Login container could have a slightly different background if needed */
    /* background-color: #101020; */
}

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

/* If login is not part of the main block, center it vertically */
/* This might depend on your base template structure */
/* body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f8f9fa; /* Optional: light background */
}
*/


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

/* 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 */
}