.weather-widget{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;margin:0 auto;max-width:550px}.weather-widget.horizontal{max-width:100%}.weather-widget.horizontal .weather-container{padding:32px}.weather-widget.horizontal .weather-display{display:flex;flex-direction:column;gap:24px}.weather-widget.horizontal .weather-main{align-items:center;display:flex;flex:1;flex-direction:row;margin-bottom:0;padding:0}.weather-widget.horizontal .weather-details{display:flex;flex-direction:row;gap:12px;justify-content:space-around;margin-left:0;margin-top:1rem;width:100%}.weather-widget.horizontal .detail-item{flex-grow:1;padding:12px 16px;text-align:left}.weather-widget.horizontal .detail-label{font-size:11px;margin-bottom:2px}.weather-widget.horizontal .detail-value{font-size:14px}.weather-widget.horizontal .weather-header{flex-shrink:1;margin-bottom:0;text-align:left;width:auto}.weather-widget.horizontal .city-name{font-family:Meutas,sans-serif;font-size:28px;margin-bottom:4px}.weather-widget.horizontal .weather-date{font-size:13px}.weather-widget.horizontal .temperature{font-size:56px;text-align:left}.weather-widget.horizontal .weather-description{font-size:18px;text-align:left}.weather-widget.horizontal .temperature-section{margin-top:0}.weather-widget.horizontal .weather-icon{font-size:6rem;height:100px;width:100px}.weather-widget.horizontal .weather-forecast{margin-top:32px}.weather-widget.horizontal .forecast-container{gap:16px}.weather-widget.horizontal .forecast-day{padding:20px 16px}.weather-widget.horizontal .forecast-date{font-size:13px}.weather-widget.horizontal .forecast-icon{font-size:2.5rem;height:40px}.weather-widget.horizontal .forecast-temp{font-size:18px}.weather-widget.horizontal .forecast-desc{font-size:12px}.weather-container{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,.1);color:#fff;overflow:hidden;padding:24px;position:relative}.weather-container:before{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.1);border-radius:20px;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.location-section{display:flex;gap:12px;position:relative;z-index:1}.location-input{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.2);border:none;border-radius:12px;color:#fff;flex:1;font-size:16px;padding:12px 16px;transition:all .3s ease}.location-input::placeholder{color:hsla(0,0%,100%,.7)}.location-input:focus{background:hsla(0,0%,100%,.3);box-shadow:0 0 0 3px hsla(0,0%,100%,.2);outline:none}.search-btn{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.2);border:none;border-radius:12px;color:#fff;cursor:pointer;padding:12px;transition:all .3s ease}.search-btn:hover{background:hsla(0,0%,100%,.3);transform:translateY(-2px)}.weather-display{position:relative;z-index:1}.weather-header{flex-shrink:0;margin-bottom:20px;text-align:center;width:100%}.city-name{font-size:24px;font-weight:600;margin:0 0 8px}.weather-date{font-size:14px;margin:0;opacity:.8}.weather-main{display:flex;flex-direction:column;flex-flow:wrap;padding:20px 0}.temperature-section{align-items:center;display:flex;flex:1;flex-flow:column;justify-content:space-between;margin-top:16px;text-align:center}.temperature{font-size:48px;font-weight:900;line-height:1;margin-bottom:5px}.weather-description{font-size:16px;opacity:.9;text-transform:capitalize}.weather-icon{align-items:center;display:flex;flex:1;font-size:5rem;height:80px;justify-content:center;width:80px}.weather-details{display:grid;gap:16px;grid-template-columns:1fr 1fr 1fr 1fr;position:relative;z-index:1}.detail-item{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.1);border-radius:12px;padding:16px;text-align:center;transition:transform .3s ease}.detail-item:hover{transform:translateY(-2px)}.detail-label{display:block;font-size:12px;letter-spacing:.5px;margin-bottom:4px;opacity:.7;text-transform:uppercase}.detail-value{display:block;font-size:16px;font-weight:600}.weather-forecast{margin-top:24px;position:relative;z-index:1}.forecast-title{font-size:18px;font-weight:600;margin:0 0 16px;opacity:.9;text-align:center}.forecast-container{display:grid;gap:12px;grid-template-columns:repeat(5,1fr)}.forecast-day{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.1);border-radius:12px;padding:16px 12px;text-align:center;transition:transform .3s ease}.forecast-day:hover{transform:translateY(-2px)}.forecast-date{font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:8px;opacity:.8;text-transform:uppercase}.forecast-icon{align-items:center;display:flex;font-size:2rem;height:32px;justify-content:center;margin-bottom:8px}.forecast-temp{font-size:16px;font-weight:700;margin-bottom:4px}.forecast-desc{font-size:11px;line-height:1.2;opacity:.8;text-transform:capitalize}.loading-state{padding:40px 20px;position:relative;text-align:center;z-index:1}.spinner{animation:spin 1s linear infinite;border:3px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;height:40px;margin:0 auto 16px;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-state p{margin:0;opacity:.8}.error-state{padding:40px 20px;position:relative;text-align:center;z-index:1}.error-icon{font-size:48px;margin-bottom:16px}.error-message{margin:0;opacity:.8}@media (max-width:480px){.weather-container{border-radius:16px;padding:20px}.temperature{font-size:36px}.weather-icon{font-size:48px;height:60px;width:60px}.weather-details{gap:12px;grid-template-columns:1fr}.weather-widget.horizontal{max-width:100%}.weather-widget.horizontal .weather-container{padding:20px}.weather-widget.horizontal .weather-display{flex-direction:column;gap:16px}.weather-widget.horizontal .weather-main{flex-direction:column;gap:16px;text-align:center}.weather-widget.horizontal .weather-details{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-left:0;width:100%}.weather-widget.horizontal .detail-item{padding:12px;text-align:center}.weather-widget.horizontal .weather-header{text-align:center}.weather-widget.horizontal .temperature{font-size:42px;text-align:center}.weather-widget.horizontal .weather-description{font-size:16px;text-align:center}.weather-widget.horizontal .temperature-section{margin-top:8px}.weather-widget.horizontal .weather-icon{font-size:5rem;height:80px;width:80px}.forecast-container{gap:8px;grid-template-columns:repeat(3,1fr)}.forecast-day{padding:12px 8px}.forecast-date{font-size:10px}.forecast-icon{font-size:1.5rem;height:24px}.forecast-temp{font-size:14px}.forecast-desc{font-size:10px}.weather-widget.horizontal .forecast-container{gap:8px;grid-template-columns:repeat(3,1fr)}.weather-widget.horizontal .forecast-day{padding:12px 8px}.weather-widget.horizontal .forecast-date{font-size:10px}.weather-widget.horizontal .forecast-icon{font-size:1.5rem;height:24px}.weather-widget.horizontal .forecast-temp{font-size:14px}.weather-widget.horizontal .forecast-desc{font-size:10px}}.weather-display{animation:fadeInUp .6s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.weather-widget[data-weather=clear] .weather-container{background:#a01d21;color:#ffefd6}.weather-widget[data-weather=clear] .location-input::placeholder{color:rgba(51,51,51,.7)}.weather-widget[data-weather=clear] .detail-item,.weather-widget[data-weather=clear] .location-input,.weather-widget[data-weather=clear] .search-btn{background:hsla(0,0%,100%,.1);color:#ffefd6}.weather-widget[data-weather=clouds] .weather-container{background:#d7d8da;color:#333}.weather-widget[data-weather=clouds] .location-input::placeholder{color:rgba(51,51,51,.7)}.weather-widget[data-weather=clouds] .detail-item,.weather-widget[data-weather=clouds] .location-input,.weather-widget[data-weather=clouds] .search-btn{background:hsla(0,0%,100%,.3);color:#333}.weather-widget[data-weather=rain] .weather-container{background:#669bbb;color:#333}.weather-widget[data-weather=rain] .location-input::placeholder{color:rgba(51,51,51,.7)}.weather-widget[data-weather=rain] .detail-item,.weather-widget[data-weather=rain] .location-input,.weather-widget[data-weather=rain] .search-btn{background:hsla(0,0%,100%,.3);color:#333}.weather-widget[data-weather=snow] .weather-container{background:#d3e6f7;color:#333}.weather-widget[data-weather=snow] .location-input::placeholder{color:rgba(51,51,51,.7)}.weather-widget[data-weather=snow] .detail-item,.weather-widget[data-weather=snow] .location-input,.weather-widget[data-weather=snow] .search-btn{background:hsla(0,0%,100%,.3);color:#333}.weather-widget[data-weather=thunderstorm] .weather-container{background:#333;color:#ffefd6}.weather-widget[data-weather=thunderstorm] .location-input::placeholder{color:#ffefd6}.weather-widget[data-weather=thunderstorm] .location-input,.weather-widget[data-weather=thunderstorm] .search-btn{background:hsla(0,0%,100%,.2);color:#ffefd6}.weather-widget[data-weather=thunderstorm] .detail-item{background:hsla(0,0%,100%,.1);color:#ffefd6}.weather-widget[data-weather=mist] .weather-container{background:linear-gradient(135deg,#e6e9f0,#eef1f5);color:#333}.weather-widget[data-weather=mist] .location-input::placeholder{color:rgba(51,51,51,.7)}.weather-widget[data-weather=mist] .detail-item,.weather-widget[data-weather=mist] .location-input,.weather-widget[data-weather=mist] .search-btn{background:hsla(0,0%,100%,.3);color:#333}