/* General styles */
html {
    scroll-behavior: smooth;
}

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

/* Default spinner */
.spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    width: 1rem;
    height: 1rem;
    animation: spin 1s linear infinite;
}

/* Spinner for POI search button */
.spinner-poi {
    width: 1.25rem;
    height: 1.25rem;
    border: 4px solid white;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}


/* Favorite button style from astrotime.html */
.favorite-btn.saved svg {
    color: #f39c12; /* gold */
}

/* Checkbox style from poi_search2.html */
input[type="checkbox"] {
    filter: invert(1) hue-rotate(180deg);
}

/* Compass styles */
#compass-rose {
    /* This is now a static background */
}

.marker-north {
    width: 1rem;
    height: 1rem;
    background-color: #ef4444; /* red-500 */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-5rem);
}

#bearing-marker .marker {
    width: 1rem;
    height: 1rem;
    background-color: #facc15; /* yellow-400 */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    /* Center the marker, then move it up by 5rem to place it on the compass edge */
    transform: translate(-50%, -50%) translateY(-5rem);
}