.weather-nav-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    color: var(--primary-color);
    font-weight: 600;
    line-height: 1;
    margin-left: 12px;
}

/* Add background and padding directly to the image */
.weather-nav-widget img {
    width: 34px;
    height: 34px;
    display: block;
    background-color: var(--button-bg); /* Soft background directly on the image */
    border-radius: 50%;                   /* Makes the background a circle */
    padding: 1px;                         /* Space between the icon and background edge */
    box-sizing: border-box;               /* Includes padding in sizing */
}

/* Responsive: hide widget on small screens */
@media (max-width: 1100px) {
    #weather-icon-widget {
        display: none !important;
    }
}