/* A-Weather - Mobile-First Responsive Styles */

/* Reset and Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:16px;line-height:1.6;color:#333;background:#f5f5f5;min-height:100vh}
a{color:#007bff;text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;font-family:inherit}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:15px}
@media(min-width:768px){.container{padding:30px}}

/* Header */
header{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-bottom:20px}
header .container{display:flex;justify-content:space-between;align-items:center;padding:15px}
header h1{font-size:1.5rem;color:#007bff}
header nav a{margin-left:20px;color:#333}
@media(max-width:767px){header nav a{margin-left:10px;font-size:14px}}

/* Search Box */
.search-box{position:relative;margin-bottom:30px}
#citySearch{width:100%;padding:15px;font-size:16px;border:2px solid #ddd;border-radius:8px;outline:none}
#citySearch:focus{border-color:#007bff}
.search-results{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 8px 8px;max-height:300px;overflow-y:auto;display:none;z-index:100;box-shadow:0 4px 6px rgba(0,0,0,.1)}
.search-results.show{display:block}
.search-result-item{padding:12px 15px;border-bottom:1px solid #eee;cursor:pointer;transition:background .2s}
.search-result-item:hover{background:#f8f9fa}
.search-result-item:last-child{border-bottom:none}
.search-result-name{font-weight:500;color:#333}
.search-result-country{font-size:14px;color:#666;margin-top:2px}

/* Weather Current */
.weather-current{background:#fff;border-radius:12px;padding:30px 20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.1);margin-bottom:30px}
.city-name{font-size:2rem;font-weight:600;margin-bottom:5px;color:#333}
.country-name{font-size:1rem;color:#666;margin-bottom:20px}
.temp-main{margin:20px 0}
.temp-value{font-size:4rem;font-weight:300;color:#007bff}
.weather-desc{font-size:1.2rem;color:#666;margin-bottom:20px;text-transform:capitalize}
.weather-details{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin:20px 0}
@media(min-width:768px){.weather-details{grid-template-columns:repeat(4,1fr)}}
.detail{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px}
.detail .icon{font-size:20px}
.update-time{font-size:14px;color:#999;margin-top:20px}

/* Forecast 5-day */
.forecast-5day{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.1);margin-bottom:30px}
.forecast-5day h2{font-size:1.5rem;margin-bottom:20px;color:#333}
.forecast-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:767px){.forecast-grid{grid-template-columns:repeat(3,1fr)}}
.forecast-day{text-align:center;padding:15px 10px;background:#f8f9fa;border-radius:8px}
.day-name{font-size:14px;font-weight:500;color:#666;margin-bottom:8px;text-transform:uppercase}
.forecast-day .temp{font-size:1.5rem;font-weight:600;color:#007bff;margin:8px 0}
.forecast-day .icon{font-size:2rem}

/* Forecast Extended */
.forecast-extended{display:grid;gap:20px;margin-bottom:30px}
.forecast-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.forecast-header .forecast-date{font-size:1.3rem;color:#333;margin-bottom:15px}
.forecast-body .temp-range{font-size:2rem;font-weight:300;margin-bottom:10px}
.temp-max{color:#d32f2f}
.temp-min{color:#1976d2}
.temp-separator{color:#999;margin:0 5px}
.forecast-details{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:15px 0}
@media(min-width:768px){.forecast-details{grid-template-columns:repeat(4,1fr)}}

/* Hourly Forecast */
.hourly-forecast{margin-top:20px;padding-top:20px;border-top:1px solid #eee}
.hourly-forecast h4{font-size:1rem;margin-bottom:15px;color:#666}
.hourly-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(min-width:768px){.hourly-grid{grid-template-columns:repeat(8,1fr)}}
.hour-item{text-align:center;padding:10px;background:#f8f9fa;border-radius:6px}
.hour-time{font-size:12px;color:#666;margin-bottom:5px}
.hour-temp{font-size:16px;font-weight:600;color:#007bff;margin:5px 0}
.hour-icon{font-size:20px}

/* Forecast Links */
.forecast-links{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.forecast-links a{padding:12px 20px;background:#007bff;color:#fff;border-radius:8px;text-align:center;flex:1;min-width:140px}
.forecast-links a:hover{background:#0056b3;text-decoration:none}

/* Country Catalog */
.country-catalog{margin-bottom:30px}
.letter-group{margin-bottom:40px}
.letter-heading{font-size:2rem;color:#007bff;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #007bff}
.country-list{display:grid;gap:20px}
.country-item{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.country-item h3{font-size:1.3rem;color:#333;margin-bottom:15px}
.load-cities{width:100%;padding:12px;background:#007bff;color:#fff;border:none;border-radius:8px;font-size:16px;transition:background .2s}
.load-cities:hover{background:#0056b3}
.load-cities.loading{background:#6c757d}
.cities-list{margin-top:15px;display:grid;gap:8px}
.cities-list a{display:block;padding:10px;background:#f8f9fa;border-radius:6px;color:#333}
.cities-list a:hover{background:#e9ecef;text-decoration:none}

/* Breadcrumbs */
.breadcrumbs{font-size:14px;color:#666;margin-bottom:20px}
.breadcrumbs a{color:#007bff}
.breadcrumbs span{color:#333}

/* Links */
.catalog-link,.back-link{text-align:center;margin:30px 0}
.btn-link{display:inline-block;padding:12px 24px;background:#007bff;color:#fff;border-radius:8px;font-weight:500}
.btn-link:hover{background:#0056b3;text-decoration:none}
.back-link a{color:#007bff;font-size:14px}

/* Error Page */
.error-page{text-align:center;padding:60px 20px}
.error-page h1{font-size:6rem;color:#007bff;margin-bottom:20px}
.error-page p{font-size:1.5rem;color:#666;margin-bottom:30px}

/* Footer */
footer{background:#333;color:#fff;padding:30px 15px;margin-top:40px}
footer .container{text-align:center}
footer p{margin:5px 0;font-size:14px}
footer a{color:#fff}