@charset "UTF-8";*{box-sizing:border-box}body{font-family:Poppins,sans-serif;margin:0;padding:0;background-color:#f2f2f7;color:#1c1c1e;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{color:#2f3080;font-size:2.5rem;font-weight:700;margin-bottom:1.5rem}h2,h3{color:#1c1c1e;font-weight:600}p{color:#8e8e93;margin:.5rem 0}.app-container{display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;text-align:center;min-height:100vh;max-width:1200px;margin:0 auto;background:linear-gradient(135deg,#e0eafc,#cfdef3)}.search-container{position:relative;width:100%;margin-bottom:2rem;display:flex;flex-direction:column;gap:10px}.search-container input{padding:14px 20px;border:1px solid #E0E0E0;border-radius:12px;font-size:1rem;width:100%;background-color:#ffffffe6;color:#1c1c1e;box-shadow:inset 0 1px 3px #0000000d;transition:border-color .2s ease,box-shadow .2s ease}.search-container input:focus{outline:none;border-color:#007aff;box-shadow:0 0 0 3px #007aff33}.search-container button{padding:14px 25px;background-color:#007aff;color:#fff;border:none;border-radius:12px;cursor:pointer;font-size:1rem;font-weight:600;transition:background-color .2s ease,transform .1s ease}.search-container button:hover{background-color:#0066d6;transform:translateY(-1px)}.search-container button:active{transform:translateY(0)}.suggestions-list{position:absolute;top:calc(100% + 5px);left:0;right:0;list-style:none;padding:0;margin:0;background-color:#ffffffe6;border:1px solid #E0E0E0;border-radius:8px;box-shadow:0 4px 12px #00000014;max-height:200px;overflow-y:auto;z-index:1000;text-align:left}.suggestions-list li{padding:12px 18px;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.05)}.suggestions-list li:hover{background-color:#007aff1a}.weather-and-forecast-container{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.weather-display,.forecast-display{background-color:#ffffffe6;padding:2rem;border-radius:15px;box-shadow:0 4px 12px #00000014;width:90%;max-width:500px}.weather-icon-container svg{font-size:6rem;filter:drop-shadow(0 2px 5px rgba(0,0,0,.1))}.icon-sun{color:gold}.icon-cloud-partial,.icon-cloud-overcast{color:#a9a9a9}.icon-rain,.icon-drizzle{color:#4682b4}.icon-snow{color:#add8e6}.icon-bolt{color:gold}.icon-atmosphere{color:#b0c4de}.forecast-item .forecast-icon-container svg{font-size:2rem}.forecast-list{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;margin-top:1rem}.forecast-item{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:transparent;padding:1rem;border-radius:12px;flex-basis:120px;flex-grow:1;max-width:140px;box-shadow:none;transition:transform .2s ease-in-out;cursor:pointer;background-color:#8383830e}.forecast-item:hover{transform:translateY(-5px);background-color:#68686817}.forecast-item .forecast-date,.forecast-item .forecast-temp,.forecast-item .forecast-description,.forecast-item .forecast-humidity,.forecast-item .forecast-wind{margin:0;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.forecast-item p{font-size:.9rem;margin:.2rem 0}@media (min-width: 768px){.search-container{flex-direction:row;width:auto}.weather-and-forecast-container{flex-direction:row;align-items:flex-start;gap:30px}.weather-display,.forecast-display{flex-grow:1}}