/* Container principale */
.f7b-banner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 0px;
  background-image: var(--f7b-bg);
  background-position: var(--f7b-bg-pos, center);
  background-size: var(--f7b-bg-size, cover);
  color: var(--f7b-text);

  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  border-radius: 0;
  box-shadow: none;

  text-shadow: none;
}

.f7b-wrapper {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 0px;
  height: 100%;
    width: 100%;
}
/* Text shadow: dipende dal colore del testo (impostato da PHP in --f7b-textshadow) */
.f7b-banner{
  text-shadow: 0 0 5px var(--f7b-textshadow, #3c3c3c);
}
/* Colonna sinistra */
.f7b-left {
  width: 250px;
  flex: 0 0 auto;
  line-height: 1.05;
  padding-left: 12px;
}
.f7b-city {
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f7b-sub {
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.95;
}

/* Area now */
.f7b-now {
  flex: 0 1 auto;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
}
.f7b-now-temp {
  font-weight: 400;
  font-size: 35px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}
.f7b-now-sum {
  margin-top: 3px;
  font-size: 13px;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  text-transform: lowercase;
  text-align: center;
}

/* Giorni */
.f7b-days {
  flex: 1 1 auto;
  display: flex;
  height: 100%;
  overflow: hidden;
}

.f7b-day {
  flex: 1 1 0;
  width: auto;
  height: 100%;
  text-align: center;
  padding: 10px 6px 6px;
  box-sizing: border-box;
}
.f7b-day-alt {
  background: var(--f7b-accent);
}
.f7b-day-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f7b-day-temps {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.f7b-min { opacity: 0.85; }

/* --- SVG ICONS --- */
.f7b-now-icon,
.f7b-day-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}

.f7b-now-icon svg { width: 44px; height: 44px; }
.f7b-day-icon svg { width: 22px; height: 22px; margin-top: 4px; }

.f7b-svg path,
.f7b-svg rect,
.f7b-svg circle {
  fill: currentColor;
}

/* Le icone vento usano stroke */
.f7b-banner svg .air,
.f7b-banner svg .air path {
  fill: var(--f7b-cloudcolor); /* oppure --f7b-windcolor se lo aggiungi */
  stroke: none;
}

/* Preview grid */
.f7b-preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Debug */
.f7b-debug {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  opacity: 0.85;
  margin-top: 4px;
}

.f7b-error {
  background: #400;
  color: #fff;
  padding: 8px 10px;
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
}


/* =========================================================
   Colori Iconvault “per-weather” (arrivano da CSS variables)
   ========================================================= */

/* fallback se qualche variabile è vuota */
.f7b-banner {
  --f7b-suncolor: currentColor;
  --f7b-mooncolor: currentColor;
  --f7b-raincolor: currentColor;
  --f7b-snowcolor: currentColor;
  --f7b-cloudcolor: currentColor;
  --f7b-cloudfill: currentColor;
}

/* SOLE */
.f7b-banner svg .sun,
.f7b-banner svg .sun path,
.f7b-banner svg .sunRays,
.f7b-banner svg .sunRays path {
  fill: var(--f7b-suncolor);
}

/* LUNA (solo partly-cloudy-night ha .moon, clear-night è un path senza classe) */
.f7b-banner svg .moon,
.f7b-banner svg .moon path {
  fill: var(--f7b-mooncolor);
}

/* PIOGGIA */
.f7b-banner svg .drizzle,
.f7b-banner svg .drizzle path {
  fill: var(--f7b-raincolor);
}

/* NEVE */
.f7b-banner svg .flake,
.f7b-banner svg .flake path {
  fill: var(--f7b-snowcolor);
}

/* GRANDINE (sleet usa .hail) */
.f7b-banner svg .hail {
  fill: var(--f7b-raincolor);
}

/* NUVOLE: su rain/snow/partly/sleet è .cloud */
.f7b-banner svg .cloud,
.f7b-banner svg .cloud path {
  fill: var(--f7b-cloudfill);
}

/* FOG: linee nebbia */
.f7b-banner svg .fogLine,
.f7b-banner svg .fogLine path {
  fill: var(--f7b-cloudcolor);
}

/* WIND: nel tuo SVG c’è <g class="air"> */
.f7b-banner svg .air,
.f7b-banner svg .air path {
  fill: var(--f7b-cloudcolor);
  stroke: none;
}