/* Modern responsive styling for Meteo widget */
.meteo-widget{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    max-width:100%;
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,.12);
    padding:24px;
    color:#1a1a1a;
    margin:20px 0;
}

/* Current weather section */
.meteo-current{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:24px;
    align-items:center;
    padding:24px;
    background:linear-gradient(135deg,#ba1d41 0%,#9a1535 100%);
    border-radius:10px;
    margin-bottom:20px;
    color:#fff;
    position:relative;
    overflow:hidden;
    background-size:200% 200%;
    animation:gradientShift 12s ease-in-out infinite;
}

.meteo-current::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-30%;
    width:60%;
    height:200%;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 60%);
    transform:rotate(25deg);
    animation:sheenMove 10s ease-in-out infinite;
    pointer-events:none;
}

.meteo-current-left{
    display:flex;
    align-items:center;
    gap:16px;
}
.meteo-current-icon{
    width:80px;
    height:80px;
    object-fit:contain;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
    animation:float 4s ease-in-out infinite;
}

.meteo-current-temp{
    font-size:52px;
    font-weight:700;
    line-height:1;
    animation:tempPop 600ms ease both;
}
.meteo-unit{
    font-size:22px;
    margin-left:4px;
    opacity:.9;
}

.meteo-current-right{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.meteo-location{
    font-size:22px;
    font-weight:600;
}
.meteo-updated{
    font-size:12px;
    opacity:.8;
}
.meteo-feels{
    font-size:15px;
    opacity:.95;
}
.meteo-desc{
    font-size:16px;
    opacity:.95;
    margin:6px 0;
}

/* Extra info grid */
.meteo-extra{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;
    margin-top:14px;
}
.meteo-extra-item{
    background:rgba(255,255,255,.15);
    padding:10px 12px;
    border-radius:6px;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:6px;
    transition:background .2s ease;
    opacity:0;
    transform:translateY(12px);
    animation:slideInUp 500ms ease forwards;
}
.meteo-extra-item:hover{
    background:rgba(255,255,255,.25);
}

/* Map section */
.meteo-map{
    margin:20px 0;
    height:380px;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,.1);
}
.meteo-map iframe{
    border:0;
    width:100%;
    height:100%;
}

/* Forecast cards section */
.meteo-forecast-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:14px;
    padding:4px;
}

.meteo-card{
    background:#fff;
    border-radius:10px;
    padding:18px;
    text-align:center;
    cursor:pointer;
    transition:all .25s ease;
    border:2px solid #f0f0f0;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.meteo-card:hover{
    transform:translateY(-4px);
    box-shadow:0 6px 20px rgba(186,29,65,.15);
    border-color:#ba1d41;
}

.meteo-card-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}
.meteo-card-day{
    font-weight:700;
    font-size:15px;
    color:#ba1d41;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.meteo-card-icon{
    width:56px;
    height:56px;
    object-fit:contain;
}
.meteo-card-temps{
    font-weight:700;
    font-size:19px;
    color:#1a1a1a;
}

.meteo-card-desc{
    font-size:13px;
    color:#666;
    margin:8px 0;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.meteo-card-more{
    margin-top:14px;
    font-size:12px;
    color:#555;
    text-align:left;
    line-height:1.7;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:all .3s ease;
}
.meteo-card.active .meteo-card-more{
    max-height:280px;
    opacity:1;
}
.meteo-more-item{
    padding:6px 10px;
    display:flex;
    align-items:center;
    gap:8px;
    background:#f9f9f9;
    border-radius:5px;
    margin-bottom:5px;
}
.meteo-more-item:last-child{
    margin-bottom:0;
}
.meteo-label{
    font-weight:600;
    color:#ba1d41;
}

.meteo-card.active{
    background:linear-gradient(135deg,#ba1d41 0%,#9a1535 100%);
    color:#fff;
    border-color:#ba1d41;
    transform:scale(1.04);
    box-shadow:0 8px 24px rgba(186,29,65,.25);
}
.meteo-card.active .meteo-card-day,
.meteo-card.active .meteo-card-temps,
.meteo-card.active .meteo-card-desc,
.meteo-card.active .meteo-card-more{
    color:#fff;
}
.meteo-card.active .meteo-more-item{
    background:rgba(255,255,255,.15);
}
.meteo-card.active .meteo-label{
    color:#fff;
}

/* Responsive design */
@media (max-width:1200px){
    .meteo-current{
        grid-template-columns:1fr;
        text-align:center;
    }
    .meteo-current-left{
        justify-content:center;
    }
    .meteo-current-right{
        align-items:center;
    }
}

@media (max-width:768px){
    .meteo-widget{
        padding:18px;
    }
    .meteo-current{
        padding:20px;
    }
    .meteo-current-temp{
        font-size:42px;
    }
    .meteo-location{
        font-size:20px;
    }
    .meteo-extra{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }
    .meteo-map{
        height:280px;
    }
    .meteo-forecast-cards{
        grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
        gap:12px;
    }
}

@media (max-width:480px){
    .meteo-widget{
        padding:14px;
    }
    .meteo-current{
        padding:16px;
    }
    .meteo-current-temp{
        font-size:36px;
    }
    .meteo-current-icon{
        width:64px;
        height:64px;
    }
    .meteo-extra{
        grid-template-columns:1fr;
    }
    .meteo-map{
        height:240px;
    }
    .meteo-forecast-cards{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
    .meteo-card{
        padding:14px;
    }
    .meteo-card-icon{
        width:48px;
        height:48px;
    }
}

/* Animations */
@keyframes gradientShift{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}

@keyframes sheenMove{
    0%{ transform: rotate(25deg) translateX(0); opacity:.6; }
    50%{ transform: rotate(25deg) translateX(40%); opacity:.3; }
    100%{ transform: rotate(25deg) translateX(0); opacity:.6; }
}

@keyframes float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
}

@keyframes tempPop{
    0%{ opacity:0; transform: translateY(6px) scale(.98); }
    60%{ opacity:1; transform: translateY(0) scale(1.04); }
    100%{ opacity:1; transform: translateY(0) scale(1); }
}

@keyframes slideInUp{
    0%{ opacity:0; transform:translateY(12px); }
    100%{ opacity:1; transform:translateY(0); }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
    .meteo-current,
    .meteo-current::before,
    .meteo-current-icon,
    .meteo-current-temp,
    .meteo-extra-item{
        animation:none !important;
        transition:none !important;
    }
}