/* --- Global Styles --- */
* { 
    box-sizing: border-box; 
    font-family: 'Roboto', sans-serif; 
}

body { 
    background-color: #f1f3f4; 
    display: flex; 
    justify-content: center; 
    padding: 20px; 
    margin: 0; 
}

/* --- Main Card --- */
.weather-card {
    background: white; 
    width: 100%; 
    max-width: 650px;
    border-radius: 8px; 
    box-shadow: 0 1px 6px rgba(32,33,36,0.28); 
    padding: 24px;
}

/* --- New Header Section --- */
.app-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.main-logo {
    width: 40px;
    height: 40px;
}

.app-header h1 {
    font-size: 24px;
    margin: 0;
    color: #1a73e8; /* สีน้ำเงินสไตล์ Google */
    font-weight: 500;
}

/* --- Search Section --- */
.search-section { 
    display: flex; 
    margin-bottom: 20px; 
    border-bottom: 1px solid #dfe1e5; 
    padding-bottom: 10px; 
    gap: 10px; 
}

#search-input { 
    flex: 1; 
    border: none; 
    outline: none; 
    font-size: 16px; 
    padding: 10px; 
}

#search-btn, #gps-btn { 
    background: none; 
    border: none; 
    cursor: pointer; 
    font-size: 20px; 
    padding: 8px; 
    border-radius: 50%; 
    transition: 0.2s; 
}

#search-btn:hover, #gps-btn:hover { 
    background-color: #f8f9fa; 
}

/* --- Current Weather Display --- */
.current-main { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
}

#current-temp { 
    font-size: 48px; 
    color: #202124; 
}

.unit { 
    font-size: 24px; 
    color: #70757a; 
    vertical-align: top; 
}

/* --- Weather Icon Effects --- */
.red-sun {
    /* ทำให้พระอาทิตย์ดูแดงส้ม โดยไม่กระทบเมฆขาว */
    filter: saturate(200%) drop-shadow(0 0 8px #ff0000);
}

.weather-icon {
    width: 64px;
    height: 64px;
}

/* --- Stats Section --- */
.stats { 
    display: flex; 
    gap: 20px; 
    margin: 15px 0; 
    font-size: 14px; 
    color: #70757a; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 15px; 
}

/* --- Tab Control --- */
.tabs { 
    display: flex; 
    border-bottom: 1px solid #dfe1e5; 
}

.tab-link { 
    background: none; 
    border: none; 
    padding: 12px 20px; 
    cursor: pointer; 
    color: #70757a; 
    font-size: 14px; 
    position: relative; 
    outline: none; 
}

.tab-link.active { 
    color: #202124; 
    font-weight: 500; 
}

.tab-link.active::after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 3px; 
    background: #fbbc04; 
}

/* --- Chart Box --- */
.chart-box { 
    height: 220px; 
    margin: 30px 0 10px 0; 
}

/* --- Forecast Row --- */
.forecast-row { 
    display: flex; 
    justify-content: space-between; 
    overflow-x: auto; 
    padding: 15px 0; 
    border-bottom: 1px solid #eee; 
    gap: 5px; 
}

.forecast-item { 
    text-align: center; 
    min-width: 78px; 
    font-size: 13px; 
    cursor: pointer; 
    padding: 10px 5px; 
    border-radius: 8px; 
    transition: 0.2s; 
    border: 1px solid transparent;
}

.forecast-item:hover { 
    background-color: #f8f9fa; 
}

.forecast-item.selected { 
    background-color: #fff9e6; 
    border: 1px solid #fbbc04; 
}

.temp-max { font-weight: bold; color: #202124; }
.temp-min { color: #70757a; }
.temp-slash { color: #ccc; margin: 0 2px; }

/* --- Map --- */
#map { 
    height: 300px; 
    width: 100%; 
    margin-top: 20px; 
    border-radius: 12px; 
    border: 1px solid #dfe1e5; 
    z-index: 1; 
    display: block; 
}

/* --- Loader --- */
#loader { 
    text-align: center; 
    padding: 40px; 
    color: #70757a; 
}

/* --- Footer Credit Section --- */
.footer-credit {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    text-align: right;
    font-size: 12px;
    color: #70757a;
}

.footer-credit strong {
    color: #202124;
}

/* Responsive Adjustment */
@media (max-width: 480px) {
    .current-main { flex-direction: column; align-items: flex-start; gap: 10px; }
    .stats { flex-wrap: wrap; }
    .forecast-row { justify-content: flex-start; }
}