weather-widget {

    .weather-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        cursor: pointer;
        overflow: hidden;
        margin-bottom: 12px;
    }

    /* COLLAPSED */
    .weather-collapsed {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px 16px;
    }

    .weather-main {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 1;
    }

    .weather-temp {
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 1;
    }

    .weather-feels {
        font-size: 0.75rem;
        color: #6b7280;
    }

    .weather-meta {
        font-size: 0.85rem;
    }

    .weather-condition {
        text-transform: capitalize;
    }

    .weather-updated {
        font-size: 0.7rem;
        color: #9ca3af;
    }

    .weather-stats {
        text-align: right;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .weather-toggle {
        font-size: 1.2rem;
        color: #6b7280;
        transition: transform 0.2s ease;
    }

    .weather-section {
        margin-top: 12px;
    }

    .section-title {
        font-size: 0.75rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
    }

    .hourly-strip {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .hour-chip {
        min-width: 64px;
        background: #fff;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        padding: 6px 6px 8px;
        text-align: center;
        font-size: 0.7rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .hour-time {
        font-size: 0.65rem;
        color: #6b7280;
        margin-bottom: 2px;
    }

    .hour-icon {
        font-size: 1rem;
        line-height: 1.1;
    }

    .hour-temp {
        font-weight: 600;
        font-size: 0.85rem;
    }

    .hour-wind,
    .hour-snow {
        font-size: 0.65rem;
        color: #4b5563;
    }


    /* EXPANDED */
    .weather-expanded {
        display: none;
        border-top: 1px solid #e5e7eb;
        padding: 12px 16px;
        background: #f9fafb;
    }

    /* STATE */
    .weather-card.expanded .weather-expanded {
        display: block;
    }

    .weather-card.expanded .weather-toggle {
        transform: rotate(180deg);
    }

    .weather-attribution {
        margin-top: 8px;
        font-size: 0.7rem;
        opacity: 0.65;
        text-align: right;
    }

    .weather-attribution a {
        color: inherit;
        text-decoration: underline;
    }
}