/* SafeSkies Custom Styles */

/* Smooth page load */
body {
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Search input focus glow */
#flight-number-input:focus,
#flight-number-input-bottom:focus {
    outline: none;
}

/* Score gauge animation */
#score-arc {
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Score bars animation */
.score-bar {
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Map styling */
#flight-map {
    border-radius: 0 0 1rem 1rem;
}

.leaflet-control-attribution {
    font-size: 10px !important;
    opacity: 0.6;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* PIREP marker popup */
.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.leaflet-popup-content {
    margin: 12px 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}