/* Weather overlay – sits inside player container (whatever ID) */

.pw-weather {
    position: absolute;
    z-index: 40;
    top: 10px;
    left: 10px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2;
    color: #ffffff;
}

.pw-row {
    display: flex;
    margin-bottom: 4px;
}

.pw-row:last-child {
    margin-bottom: 0;
}

.pw-box {
    background: rgba(0, 0, 0, 0.65);
    border-radius: 6px;
    padding: 4px 10px 4px 8px;
    margin-right: 6px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.pw-row .pw-box:last-child {
    margin-right: 0;
}

.pw-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/* You can point these to your real icons or delete them if you want text only */
.pw-icon-temp     { background-image: url("//live.panoramika.eu/panoplayer/img/weather/temp.svg"); }
.pw-icon-humidity { background-image: url("//live.panoramika.eu/panoplayer/img/weather/humidity.svg"); }
.pw-icon-pressure { background-image: url("//live.panoramika.eu/panoplayer/img/weather/pressure.svg"); }
.pw-icon-wind     { background-image: url("//live.panoramika.eu/panoplayer/img/weather/wind.svg"); }
.pw-icon-dir      { background-image: url("//live.panoramika.eu/panoplayer/img/weather/direction.svg"); }

.pw-box-message {
    min-width: 150px;
    justify-content: center;
}

@media screen and (max-width: 767px) {
    .pw-weather {
        display: none;
    }
}