/* 
 * Styles for the Railway Weather Forecast display
 * Enhanced to match Morocco Dam Water Stats design
 */
.railway-weather-forecast-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border: none;
    border-radius: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    max-width: 100%;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
    margin-bottom: 30px;
}

.railway-weather-forecast-container h4,
.weather-forecast-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arabic UI Text', 'Noto Sans Arabic', Arial, sans-serif;
}

.weather-forecast-title {
    direction: rtl;
}

.weather-days {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
    justify-content: center;
    align-items: center;
}

.weather-days::-webkit-scrollbar {
    height: 6px;
}

.weather-days::-webkit-scrollbar-track {
    background: transparent;
}

.weather-days::-webkit-scrollbar-thumb {
    background-color: rgba(59, 130, 246, 0.3);
    border-radius: 3px;
}

.weather-days::-webkit-scrollbar-thumb:hover {
    background-color: rgba(59, 130, 246, 0.5);
}

.weather-day {
    flex: 0 0 140px;
    padding: 0;
    border: 5px solid #ffffff;
    border-radius: 50%;
    text-align: center;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
    min-width: 0;
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.weather-day:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.weather-date {
    font-weight: 600;
    font-size: 0.75rem;
    color: #1e293b;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.weather-date[dir="rtl"] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arabic UI Text', 'Noto Sans Arabic', Arial, sans-serif;
}

.weather-icon-element {
    width: 50px;
    height: 27px;
    margin: 0 auto 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CSS-based weather icons - Pure CSS, no images, excellent performance */
/* Clear/Sunny (code 0, 1) */
.weather-day[data-weather-code="0"] .weather-icon-element::before,
.weather-day[data-weather-code="1"] .weather-icon-element::before {
    content: '☀️';
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.3));
}

/* Partially Cloudy (code 2) */
.weather-day[data-weather-code="2"] .weather-icon-element::before {
    content: '⛅';
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Cloudy/Overcast (code 3) */
.weather-day[data-weather-code="3"] .weather-icon-element::before {
    content: '☁️';
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Fog (code 45, 48) */
.weather-day[data-weather-code="45"] .weather-icon-element::before,
.weather-day[data-weather-code="48"] .weather-icon-element::before {
    content: '🌫️';
    font-size: 36px;
    line-height: 1;
    opacity: 0.8;
}

/* Light Rain/Drizzle (code 51, 53, 55, 56, 57, 61, 66, 80) */
.weather-day[data-weather-code="51"] .weather-icon-element::before,
.weather-day[data-weather-code="53"] .weather-icon-element::before,
.weather-day[data-weather-code="55"] .weather-icon-element::before,
.weather-day[data-weather-code="56"] .weather-icon-element::before,
.weather-day[data-weather-code="57"] .weather-icon-element::before,
.weather-day[data-weather-code="61"] .weather-icon-element::before,
.weather-day[data-weather-code="66"] .weather-icon-element::before,
.weather-day[data-weather-code="80"] .weather-icon-element::before {
    content: '🌦️';
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(33, 150, 243, 0.3));
}

/* Moderate/Heavy Rain (code 63, 65, 67, 81, 82) */
.weather-day[data-weather-code="63"] .weather-icon-element::before,
.weather-day[data-weather-code="65"] .weather-icon-element::before,
.weather-day[data-weather-code="67"] .weather-icon-element::before,
.weather-day[data-weather-code="81"] .weather-icon-element::before,
.weather-day[data-weather-code="82"] .weather-icon-element::before {
    content: '🌧️';
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(33, 150, 243, 0.4));
}

/* Snow (code 71, 73, 75, 77, 85, 86) */
.weather-day[data-weather-code="71"] .weather-icon-element::before,
.weather-day[data-weather-code="73"] .weather-icon-element::before,
.weather-day[data-weather-code="75"] .weather-icon-element::before,
.weather-day[data-weather-code="77"] .weather-icon-element::before,
.weather-day[data-weather-code="85"] .weather-icon-element::before,
.weather-day[data-weather-code="86"] .weather-icon-element::before {
    content: '❄️';
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.5));
}

/* Thunderstorm (code 95, 96, 99) */
.weather-day[data-weather-code="95"] .weather-icon-element::before,
.weather-day[data-weather-code="96"] .weather-icon-element::before,
.weather-day[data-weather-code="99"] .weather-icon-element::before {
    content: '⛈️';
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(156, 39, 176, 0.4));
    animation: weather-thunder 2s ease-in-out infinite;
}

@keyframes weather-thunder {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Fallback for unknown codes */
.weather-icon-element::before {
    content: '🌤️';
    font-size: 36px;
    line-height: 1;
}

.weather-temp {
    font-size: 1rem;
    margin: 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-direction: row;
}

.weather-temp .temp-max {
    font-weight: 700;
    color: #1e293b;
    font-size: 1.2rem;
    line-height: 1;
}

.weather-temp .temp-min {
    color: #64748b;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
}

.weather-temp .temp-separator {
    color: #94a3b8;
    margin: 0 2px;
    font-size: 1rem;
}

.weather-description {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: none;
    line-height: 1.3;
    margin-top: 4px;
    padding: 0 8px;
}

.weather-description[dir="rtl"] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arabic UI Text', 'Noto Sans Arabic', Arial, sans-serif;
}

.weather-error {
    border: 2px solid #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    padding: 16px 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: 500;
}

/* Weather section wrapper styling when used with dams */
.dams-weather-section {
    margin-bottom: 30px;
}

.dams-weather-section .railway-weather-forecast-container {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .railway-weather-forecast-container {
        padding: 20px 16px;
        border-radius: 16px;
    }
    
    .weather-day {
        flex: 0 0 120px;
        width: 120px;
        height: 120px;
    }
    
    .weather-date {
        font-size: 0.7rem;
        margin-bottom: 4px;
    }
    
    .weather-temp {
        font-size: 0.9rem;
        margin: 4px 0;
        gap: 4px;
    }
    
    .weather-temp .temp-max {
        font-size: 1rem;
    }
    
    .weather-temp .temp-min {
        font-size: 0.9rem;
    }
    
    .weather-temp .temp-separator {
        font-size: 0.9rem;
        margin: 0 1px;
    }
    
    .weather-description {
        font-size: 0.65rem;
        margin-top: 2px;
        padding: 0 6px;
    }
}