.current-weather-block {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.125rem 0.625rem 0.625rem;
    border-radius: 12px;
    background: var(--wp--preset--color--cream-dark, #f1e1ce);
}

.current-weather__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    /* flex-basis stays "auto" (not a fixed px) so the width/height above —
       and any inline override from the Icon Size field — actually take effect. */
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(160deg, #2c3e6b 0%, #445d8f 100%);
    color: #ffffff;
}

.current-weather__icon svg {
    /* Relative to the icon box so it scales automatically with the Icon Size field. */
    width: 65%;
    height: 65%;
}

.current-weather__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.current-weather__summary {
    margin: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.current-weather__time {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.current-weather-block--empty {
    display: block;
    padding: 1rem;
    color: #757575;
    font-size: 0.875rem;
}

/* ── Icon reference grid (block settings panel only — not front-end) ── */
.cariboo-weather-icon-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 4px;
}

.cariboo-weather-icon-preview__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
}

.cariboo-weather-icon-preview__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(160deg, #2c3e6b 0%, #445d8f 100%);
    color: #ffffff;
}

.cariboo-weather-icon-preview__badge svg {
    width: 65%;
    height: 65%;
}

.cariboo-weather-icon-preview__label {
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    color: #757575;
}