/* ===== Reset & Base ===== */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif; }
body { min-height:100vh; display:flex; justify-content:center; align-items:center; transition:0.5s; overflow-x:hidden; }

/* ===== Canvas ===== */
#weatherCanvas { position:fixed; top:0; left:0; z-index:-1; width:100vw; height:100vh; }

/* ===== Background ===== */
body.light-mode { background: linear-gradient(120deg,#a1c4fd,#c2e9fb); color:#222; }
body.dark-mode { background: linear-gradient(120deg,#232526,#414345); color:#f1f1f1; }
body::before { content:''; position:fixed; width:100%; height:100%; background:radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 70%); z-index:-2; }

/* ===== Container ===== */
.container { position:relative; z-index:1; max-width:1000px; width:100%; padding:40px; border-radius:25px; backdrop-filter:blur(20px); background:rgba(255,255,255,0.15); box-shadow:0 15px 35px rgba(0,0,0,0.2); }

/* ===== Header ===== */
header { text-align:center; margin-bottom:30px; position:relative; }
header h1 { font-size:2rem; margin-bottom:10px; }
header p { font-size:1rem; }
#themeToggle { position:absolute; top:10px; right:10px; padding:10px 12px; border-radius:12px; cursor:pointer; background:rgba(255,255,255,0.2); transition:0.3s; border:2px solid #ccc; }
#themeToggle:hover { background:rgba(255,255,255,0.4); transform:scale(1.05); }

/* ===== Inputs & Buttons ===== */
.input-group { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
#cityInput { flex:1; min-width:200px; padding:12px 16px; border-radius:12px; border:2px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.7); color:#222; transition:0.3s; }
#cityInput:focus { outline:none; border-color:#3498db; box-shadow:0 0 10px rgba(52,152,219,0.5); }
button { padding:12px 18px; border:none; border-radius:12px; cursor:pointer; font-weight:bold; transition:0.3s; }
#searchBtn { background:linear-gradient(135deg,#00b894,#00d2ff); color:#fff; }
#geoBtn { background:linear-gradient(135deg,#fdcb6e,#e17055); }
button:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 5px 15px rgba(0,0,0,0.25); }

/* ===== Coordinates Section ===== */
.coords-section { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:15px; margin-bottom:20px; position:relative; }
.coords-section::before { content:''; position:absolute; top:-5px; left:-5px; right:-5px; bottom:-5px; border-radius:15px; background: linear-gradient(120deg, #ff9a9e, #fad0c4); z-index:-1; filter: blur(15px); opacity:0.3; }
.coords-section input { flex:1; min-width:120px; padding:12px 16px; border-radius:12px; border:2px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.7); color:#222; transition:0.3s; }
.coords-section input:focus { outline:none; border-color:#3498db; box-shadow:0 0 12px rgba(52,152,219,0.5); }
.coords-section button { padding:12px 18px; border-radius:12px; border:none; cursor:pointer; font-weight:bold; background:linear-gradient(135deg,#fdcb6e,#e17055); color:#fff; transition:0.3s; }
.coords-section button:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 5px 15px rgba(0,0,0,0.25); }

/* ===== Loader & Error ===== */
.loading, .error { text-align:center; padding:10px; border-radius:10px; margin-top:10px; }
.loading.hidden, .error.hidden, .weather-section.hidden { display:none; }
.loading { color:#3498db; }
.error { color:#e74c3c; background:rgba(231,76,60,0.1); }

/* ===== Weather Section Spacing ===== */
.weather-section { margin-top:20px; } 

/* ===== Weather Card ===== */
.weather-card { text-align:center; padding:30px; border-radius:25px; backdrop-filter:blur(20px); background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); margin-bottom:30px; box-shadow:0 15px 35px rgba(0,0,0,0.2); transition:transform 0.3s, box-shadow 0.3s; }
.weather-card:hover { transform:translateY(-8px); box-shadow:0 25px 50px rgba(0,0,0,0.3); }
.city-name { font-size:2rem; font-weight:bold; margin-bottom:10px; }
.weather-icon { width:120px; height:120px; margin:20px 0; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }
.temperature { font-size:3rem; font-weight:bold; }
.description { font-size:1.2rem; text-transform:capitalize; margin-bottom:15px; }
.details-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:15px; margin-top:20px; }
.detail-item { padding:12px; border-radius:12px; background:rgba(255,255,255,0.2); transition:0.3s; }
.detail-icon { font-size:1.5rem; display:block; margin-bottom:5px; }

/* ===== Forecast ===== */
.forecast-title { font-size:1.5rem; margin-bottom:15px; text-align:center; }
.forecast-cards { display:flex; overflow-x:auto; gap:15px; padding-bottom:10px; scroll-behavior:smooth; }
.forecast-cards::-webkit-scrollbar { height:6px; }
.forecast-cards::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.3); border-radius:3px; }
.forecast-cards::-webkit-scrollbar-track { background:rgba(255,255,255,0.1); }
.forecast-card { min-width:120px; text-align:center; padding:20px; border-radius:20px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(15px); transition:transform 0.3s, background 0.3s; }
.forecast-card:hover { transform:translateY(-5px) scale(1.05); background:rgba(255,255,255,0.25); }
.forecast-card img { width:50px; height:50px; }

/* ===== Light/Dark Mode Colors ===== */
body.light-mode .container,
body.light-mode .weather-card,
body.light-mode .forecast-card,
body.light-mode .detail-item { color:#222; }

body.dark-mode .container { background:rgba(34,34,34,0.6); }
body.dark-mode .weather-card,
body.dark-mode .forecast-card,
body.dark-mode .detail-item { background:rgba(50,50,50,0.6); color:#fff; }

body.dark-mode #cityInput { background:#2c3e50; border-color:#555; color:#fff; }

/* ===== Responsive ===== */
@media(max-width:768px){ .forecast-cards{justify-content:center;} .temperature{font-size:2.5rem;} }
@media(max-width:480px){ .input-group, .coords-section{flex-direction:column;} button{width:100%;} }