.wp-weather{
  --wpw-text: currentColor;
  --wpw-border: rgba(255,255,255,.18);
  --wpw-accent: currentColor;
  --wpw-icon: currentColor;

  /* icon size can be overridden inline on the widget:
     style="--wpw-icon-px:28px" */
  --wpw-icon-px: 18px;

  color: var(--wpw-text);
}

.wp-weather__now{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
}

.wp-weather__sep{ opacity:.5; }
.wp-weather__temp{ font-weight:700; color:var(--wpw-accent); }
.wp-weather__desc{ opacity:.9; }

.wp-weather__days{
  display:flex;
  gap:.75rem;
  margin-top:.4rem;
  flex-wrap:wrap;
}

.wp-weather__day{
  display:flex;
  gap:.35rem;
  align-items:center;
  padding:.15rem .35rem;
  border:1px solid var(--wpw-border);
  border-radius:.4rem;
}

.wp-weather__dayname{
  font-weight:700;
  min-width:2.2em;
}

.wp-weather__min{
  opacity:.75;
  margin-left:.25rem;
}

/* Place label wrapper */
.wp-weather__placeRow{ display:inline; }

/* Hide place (and its dot) */
.wp-weather--hide-place .wp-weather__placeRow{ display:none; }

/* Optional: put place on a new line */
.wp-weather--now-newline .wp-weather__placeRow{
  display:block;
  width:100%;
}

/* Icon wrappers: fixed box so SVG cannot grow due to theme rules */
.wp-weather__icon,
.wp-weather__dayicon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;

  width: var(--wpw-icon-px, 18px);
  height: var(--wpw-icon-px, 18px);
  flex: 0 0 auto;
}

/* Generic SVG baseline */
.wp-weather svg{
  display:block;
  stroke:var(--wpw-icon);
}

/*
  Hard guard against theme/global svg rules (e.g. svg{width:100%} or svg{height:auto})
  We let the wrapper define the size and force svg to fill the wrapper.
*/
.wp-weather__icon svg,
.wp-weather__dayicon svg{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  flex: 0 0 auto;
}

/* If a theme applies transforms to inline SVG icons, neutralize it inside our widget */
.wp-weather svg{
  transform: none !important;
}