:root {
  color-scheme: light;

  --navy: #052857;
  --navy-dark: #041c3f;

  --blue: #1677ff;
  --blue-bright: #2b8cff;
  --blue-soft: #eaf4ff;

  --line: #d8e4f2;
  --line-strong: #bfd3e8;

  --text: #08234d;
  --muted: #58708e;

  --surface: #ffffff;
  --surface-soft: #f6faff;

  --shadow: 0 14px 42px rgba(26, 75, 128, 0.10);

  --radius: 14px;
  --page: 1480px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #f5f9fe;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(69, 148, 255, 0.10),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #f7fbff 0%,
      #ffffff 58%,
      #f4f9ff 100%
    );

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.45;
}

button,
select,
input {
  font: inherit;
}

button,
select {
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: #0867d9;
}

/* =========================================================
   INTESTAZIONE
   ========================================================= */

.topbar {
  background:
    linear-gradient(
      90deg,
      var(--navy-dark),
      #07336e 55%,
      #052653
    );

  color: #ffffff;

  box-shadow:
    0 4px 18px rgba(1, 25, 60, 0.18);
}

.topbar-inner {
  display: grid;

  grid-template-columns:
    minmax(240px, 0.7fr)
    minmax(300px, 0.72fr)
    minmax(540px, 1.3fr);

  align-items: center;
  gap: 28px;

  width: min(calc(100% - 56px), var(--page));
  min-height: 102px;

  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  color: #ffffff;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;

  border:
    1px solid rgba(255, 255, 255, 0.18);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(43, 140, 255, 0.32),
      rgba(255, 255, 255, 0.05)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.brand-mark svg {
  width: 42px;
  height: 42px;

  overflow: visible;
  fill: #ffffff;
}

.brand-mark .sun-rays {
  fill: none;

  stroke: #ffd34f;
  stroke-linecap: round;
  stroke-width: 3;
}

.brand-copy strong,
.brand-copy small {
  display: block;
}

.brand-copy strong {
  font-size: 1.65rem;
  line-height: 1;

  letter-spacing: -0.04em;
}

.brand-copy strong span {
  color: #4c9cff;
}

.brand-copy small {
  margin-top: 6px;

  color: #d4e6fb;

  font-size: 0.76rem;
}

.control-block {
  padding-left: 28px;

  border-left:
    1px solid rgba(255, 255, 255, 0.25);
}

.control-label {
  display: block;

  margin-bottom: 9px;

  color: #ffffff;

  font-size: 0.74rem;
  font-weight: 800;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =========================================================
   SELETTORE GRANULARITÀ
   ========================================================= */

.segmented {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  min-width: 280px;

  overflow: hidden;

  border: 1px solid #1d7cf3;
  border-radius: 11px;
}

.segment {
  min-height: 45px;

  padding: 9px 18px;

  border: 0;

  background: transparent;
  color: #ffffff;

  font-weight: 700;
}

.segment:hover {
  background:
    rgba(255, 255, 255, 0.08);
}

.segment.active {
  background:
    linear-gradient(
      135deg,
      #1681ff,
      #2476eb
    );

  box-shadow:
    0 7px 18px rgba(0, 111, 255, 0.23);
}

/* =========================================================
   MODALITÀ LOCALITÀ
   ========================================================= */

.mode-buttons {
  display: grid;

  grid-template-columns:
    0.85fr
    1fr
    1.55fr
    1.1fr;

  gap: 12px;
}

.mode-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 45px;

  padding: 8px 13px;

  border: 1px solid #2889ff;
  border-radius: 11px;

  background: transparent;
  color: #ffffff;

  font-size: 0.86rem;
  font-weight: 750;

  white-space: nowrap;
}

.mode-button:hover {
  background:
    rgba(255, 255, 255, 0.08);
}

.mode-button span {
  color: #a9d3ff;

  font-size: 1.15rem;
}

.mode-button.active {
  background:
    linear-gradient(
      135deg,
      #1681ff,
      #2476eb
    );
}

.mode-button.active span {
  color: #ffffff;
}

/* =========================================================
   CONTENITORE PRINCIPALE
   ========================================================= */

.page-shell,
.source-footer {
  width: min(calc(100% - 56px), var(--page));

  margin-inline: auto;
}

/* =========================================================
   SELETTORE LOCALITÀ
   ========================================================= */

.location-bar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding: 14px 0 12px;
}

.location-picker {
  position: relative;

  display: flex;
  align-items: center;

  width: min(540px, 100%);
}

.location-picker .pin {
  position: absolute;
  z-index: 1;

  left: 18px;

  color: var(--blue);

  font-size: 1.35rem;

  pointer-events: none;
}

.location-picker select {
  width: 100%;
  min-height: 52px;

  appearance: none;

  padding:
    11px
    52px
    11px
    54px;

  border: 1px solid var(--line-strong);
  border-radius: 12px;

  outline: none;

  background:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--text) 50%
    )
    calc(100% - 23px)
    22px
    / 7px 7px
    no-repeat,

    linear-gradient(
      135deg,
      var(--text) 50%,
      transparent 50%
    )
    calc(100% - 16px)
    22px
    / 7px 7px
    no-repeat,

    #ffffff;

  color: var(--text);

  font-weight: 750;

  box-shadow:
    0 5px 16px rgba(32, 79, 128, 0.06);
}

.location-picker select:focus,
.coordinate-form input:focus {
  border-color: var(--blue);

  box-shadow:
    0 0 0 4px rgba(22, 119, 255, 0.11);
}

/* =========================================================
   COORDINATE
   ========================================================= */

.coordinate-form {
  display: flex;

  align-items: end;

  gap: 10px;

  width: min(650px, 100%);
}

.coordinate-form label {
  flex: 1;
}

.coordinate-form label span {
  display: block;

  margin:
    0
    0
    4px
    3px;

  color: var(--muted);

  font-size: 0.70rem;
  font-weight: 700;
}

.coordinate-form input {
  width: 100%;
  min-height: 48px;

  padding: 10px 13px;

  border: 1px solid var(--line-strong);
  border-radius: 10px;

  outline: none;

  background: #ffffff;
}

.coordinate-submit {
  min-height: 48px;

  padding: 9px 18px;

  border: 0;
  border-radius: 10px;

  background: var(--blue);
  color: #ffffff;

  font-weight: 800;
}

.coordinate-submit:hover {
  background: #0868dd;
}

/* =========================================================
   STATO AGGIORNAMENTO
   ========================================================= */

.update-status {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  color: var(--text);

  font-size: 0.80rem;
  font-weight: 650;
}

.refresh-button {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  border: 0;
  border-radius: 50%;

  background: transparent;
  color: var(--navy);

  font-size: 1.20rem;
}

.refresh-button:hover {
  background: var(--blue-soft);
}

.refresh-button:disabled {
  opacity: 0.45;
  cursor: wait;
}

/* =========================================================
   AVVISI
   ========================================================= */

.alert {
  margin-bottom: 12px;

  padding: 12px 15px;

  border: 1px solid #e9a8a8;
  border-radius: 10px;

  background: #fff1f1;
  color: #8e2020;

  font-size: 0.86rem;
}

/* =========================================================
   RIEPILOGO
   ========================================================= */

.summary-grid {
  display: grid;

  grid-template-columns:
    minmax(450px, 1.7fr)
    repeat(4, minmax(170px, 0.66fr));

  gap: 12px;

  transition:
    opacity 180ms ease;
}

.summary-grid[aria-busy="true"] {
  opacity: 0.56;
}

.current-card {
  display: flex;

  align-items: center;

  min-height: 150px;

  padding: 18px 26px;

  overflow: hidden;

  border-radius: var(--radius);

  background:
    radial-gradient(
      circle at 83% 22%,
      rgba(255, 255, 255, 0.25),
      transparent 23%
    ),
    linear-gradient(
      135deg,
      #0564e7,
      #5799ec 72%,
      #a7caff
    );

  color: #ffffff;

  box-shadow: var(--shadow);
}

.weather-visual {
  flex: 0 0 175px;

  text-align: center;

  font-size: 6.20rem;
  line-height: 1;

  filter:
    drop-shadow(
      0 10px 10px rgba(2, 47, 111, 0.18)
    );
}

.current-copy {
  min-width: 0;
}

.temperature-line {
  display: flex;

  align-items: start;

  line-height: 0.95;
}

.temperature-line strong {
  font-size:
    clamp(
      3.8rem,
      5vw,
      5.3rem
    );

  font-weight: 500;

  letter-spacing: -0.07em;
}

.temperature-line span {
  margin:
    4px
    0
    0
    8px;

  font-size: 1.70rem;
  font-weight: 750;
}

.condition {
  margin:
    5px
    0
    12px;

  font-size: 1rem;
  font-weight: 700;
}

.current-metrics {
  display: flex;
  flex-wrap: wrap;

  gap:
    7px
    18px;
}

.current-metrics span {
  min-width: 76px;
}

.current-metrics small,
.current-metrics b {
  display: block;
}

.current-metrics small {
  color: #dcecff;

  font-size: 0.68rem;
}

.current-metrics b {
  margin-top: 1px;

  font-size: 0.78rem;
}

.summary-card {
  display: flex;

  align-items: center;

  gap: 15px;

  min-height: 132px;

  padding: 20px;

  border: 1px solid var(--line);
  border-radius: var(--radius);

  background:
    rgba(255, 255, 255, 0.91);

  box-shadow:
    0 9px 26px rgba(28, 73, 120, 0.07);
}

.summary-icon {
  display: grid;
  place-items: center;

  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  border-radius: 13px;

  font-size: 2rem;
}

.summary-icon.red {
  color: #f0473e;
  background: #fff0ee;
}

.summary-icon.blue {
  color: #2489f5;
  background: #e9f4ff;
}

.summary-icon.green {
  color: #21ad66;
  background: #eaf9f1;
}

.summary-icon.violet {
  color: #884ee7;
  background: #f3ecff;
}

.summary-card small,
.summary-card strong {
  display: block;
}

.summary-card small {
  color: var(--text);

  font-size: 0.75rem;
  font-weight: 700;
}

.summary-card strong {
  margin-top: 7px;

  font-size: 1.18rem;

  white-space: nowrap;
}

/* =========================================================
   TAB DEI GIORNI
   ========================================================= */

.day-tabs-wrap {
  display: grid;

  grid-template-columns:
    36px
    1fr
    36px;

  align-items: center;

  gap: 5px;

  margin-top: 24px;
}

.day-tabs {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(160px, 1fr));

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 12px 12px 0 0;

  background: #ffffff;
}

.day-tab {
  display: grid;

  grid-template-columns:
    1fr
    auto;

  align-items: center;

  min-height: 66px;

  padding: 10px 23px;

  border: 0;
  border-right: 1px solid var(--line);

  background: #ffffff;

  text-align: left;
}

.day-tab:last-child {
  border-right: 0;
}

.day-tab:hover {
  background: #f1f7ff;
}

.day-tab strong,
.day-tab small {
  display: block;
}

.day-tab strong {
  font-size: 0.88rem;

  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.day-tab small {
  margin-top: 2px;

  color: var(--muted);

  font-size: 0.68rem;
  font-weight: 700;

  text-transform: uppercase;
}

.day-tab .tab-icon {
  font-size: 2rem;
}

.day-tab.active {
  background:
    linear-gradient(
      135deg,
      #0d73f2,
      #287ff1
    );

  color: #ffffff;
}

.day-tab.active small {
  color: #e4efff;
}

.tab-arrow {
  width: 34px;
  height: 34px;

  border: 1px solid var(--line);
  border-radius: 50%;

  background: #ffffff;
  color: var(--blue);

  font-size: 1.75rem;
  line-height: 1;

  box-shadow:
    0 4px 12px rgba(32, 78, 124, 0.08);
}

.tab-arrow:hover:not(:disabled) {
  background: var(--blue-soft);
}

.tab-arrow:disabled {
  opacity: 0.35;

  cursor: default;
}

/* =========================================================
   PANNELLO PREVISIONI
   ========================================================= */

.forecast-panel {
  overflow: hidden;

  border: 1px solid var(--line);
  border-radius:
    0
    0
    var(--radius)
    var(--radius);

  background:
    rgba(255, 255, 255, 0.94);

  box-shadow: var(--shadow);
}

.forecast-heading {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 22px;

  padding:
    17px
    26px
    10px;

  border-bottom:
    1px solid #edf3f9;
}

.forecast-kicker {
  margin: 0;

  color: var(--blue);

  font-size: 0.65rem;
  font-weight: 800;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.forecast-heading h1 {
  margin:
    2px
    0
    0;

  font-size: 1.23rem;
}

.forecast-heading > p:last-child {
  margin: 0;

  color: var(--muted);

  font-size: 0.72rem;
}

/* =========================================================
   TABELLA
   ========================================================= */

.table-scroll {
  overflow-x: auto;
}

.forecast-table {
  width: 100%;
  min-width: 1020px;

  border-collapse: separate;
  border-spacing: 0;

  font-size: 0.79rem;
}

.forecast-table th {
  padding:
    13px
    15px
    10px;

  border-bottom:
    1px solid var(--line);

  color: var(--text);

  font-size: 0.69rem;

  letter-spacing: 0.02em;

  text-align: center;
  text-transform: uppercase;

  white-space: nowrap;
}

.forecast-table th:nth-child(2) {
  text-align: left;
}

.forecast-table th small {
  display: block;

  margin-top: 2px;

  color: #37658f;

  font-size: 0.62rem;
  font-weight: 650;

  text-transform: none;
}

.forecast-table td {
  height: 43px;

  padding:
    7px
    15px;

  border-bottom:
    1px solid #edf2f7;

  text-align: center;

  white-space: nowrap;
}

.forecast-table tbody tr:nth-child(odd) {
  background: #fbfdff;
}

.forecast-table tbody tr:hover {
  background: #edf6ff;
}

.forecast-table tbody tr.past-row {
  opacity: 0.58;
}

.forecast-table td:nth-child(2) {
  text-align: left;
}

.sky-cell {
  display: flex;

  align-items: center;

  gap: 13px;
}

.sky-icon {
  display: inline-grid;
  place-items: center;

  width: 38px;

  font-size: 1.55rem;
}

.wind-cell {
  display: inline-grid;

  grid-template-columns:
    28px
    auto;

  align-items: center;

  gap: 6px;

  text-align: left;
}

.wind-arrow {
  display: inline-block;

  color: var(--navy);

  font-size: 1.18rem;

  transform:
    rotate(
      var(--wind-angle, 0deg)
    );
}

.wind-cell small {
  display: block;

  color: var(--muted);
}

.loading-cell,
.empty-cell {
  height: 180px !important;

  color: var(--muted);

  text-align: center !important;
}

/* =========================================================
   PIÈ DI PAGINA
   ========================================================= */

.source-footer {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: space-between;

  gap: 28px;

  margin-top: 16px;
  margin-bottom: 30px;

  padding: 15px 24px;

  border: 1px solid #bdd8f6;
  border-radius: 12px;

  background: #f0f7ff;
  color: #275f9e;

  font-size: 0.72rem;
}

.source-footer p {
  margin: 0;
}

.source-signature {
  display: flex;

  align-items: center;

  gap: 9px;

  color: var(--navy);
}

.source-signature > span {
  color: #f5ae17;

  font-size: 1.85rem;
}

.source-signature small,
.source-signature strong {
  display: block;
}

.source-signature small {
  font-size: 0.61rem;
}

.source-signature strong {
  font-size: 0.98rem;
}


/* SCHIARO_METEO_INFO_FOOTER_LINK_V1 */

.footer-info-row {
  display: flex;

  flex: 0 0 100%;

  align-items: center;
  justify-content: center;

  margin-top: 2px;
}

.footer-info-link {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 34px;

  padding: 7px 16px;

  border: 1px solid #a8cbed;
  border-radius: 999px;

  background: #ffffff;
  color: #075fca;

  box-shadow:
    0 4px 12px rgba(25, 91, 164, 0.08);

  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.footer-info-link:hover {
  border-color: #69a9e8;

  box-shadow:
    0 6px 16px rgba(25, 91, 164, 0.14);

  transform: translateY(-1px);
}

.footer-info-link:focus-visible {
  outline: 3px solid rgba(22, 119, 255, 0.26);
  outline-offset: 3px;
}

/* /SCHIARO_METEO_INFO_FOOTER_LINK_V1 */


/* =========================================================
   UTILITÀ
   ========================================================= */

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

.noscript {
  padding: 20px;

  text-align: center;
}

/* =========================================================
   ACCESSIBILITÀ
   ========================================================= */

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline:
    3px solid rgba(22, 119, 255, 0.35);

  outline-offset: 3px;
}

/* =========================================================
   TABLET E SCHERMI MEDI
   ========================================================= */

@media (max-width: 1220px) {

  .topbar-inner {
    grid-template-columns:
      250px
      1fr;

    padding: 18px 0;
  }

  .location-modes {
    grid-column:
      1
      /
      -1;
  }

  .summary-grid {
    grid-template-columns:
      repeat(4, 1fr);
  }

  .current-card {
    grid-column:
      1
      /
      -1;
  }
}

/* =========================================================
   TABLET VERTICALE
   ========================================================= */

@media (max-width: 900px) {

  .topbar-inner,
  .page-shell,
  .source-footer {
    width:
      min(
        calc(100% - 28px),
        var(--page)
      );
  }

  .topbar-inner {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .control-block,
  .location-modes {
    grid-column: auto;

    padding: 0;

    border-left: 0;
  }

  .mode-buttons {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .location-bar {
    align-items: stretch;

    flex-direction: column;
  }

  .location-picker,
  .coordinate-form {
    width: 100%;
  }

  .update-status {
    justify-content: flex-start;
  }

  .summary-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .current-card {
    grid-column:
      1
      /
      -1;
  }

  .day-tabs-wrap {
    grid-template-columns: 1fr;
  }

  .tab-arrow {
    display: none;
  }

  .day-tabs {
    grid-template-columns:
      repeat(5, minmax(145px, 1fr));

    overflow-x: auto;

    border-radius:
      12px
      12px
      0
      0;
  }

  .forecast-heading {
    align-items: flex-start;

    flex-direction: column;
  }
}

/* =========================================================
   TELEFONI
   ========================================================= */

@media (max-width: 620px) {

  .brand-mark {
    width: 49px;
    height: 49px;
  }

  .brand-copy strong {
    font-size: 1.40rem;
  }

  .segmented {
    min-width: 0;
    width: 100%;
  }

  .mode-buttons {
    grid-template-columns:
      1fr
      1fr;
  }

  .mode-button {
    min-width: 0;

    font-size: 0.78rem;
  }

  .coordinate-form {
    align-items: stretch;

    flex-direction: column;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .current-card {
    padding: 18px;
  }

  .weather-visual {
    flex-basis: 112px;

    font-size: 4.35rem;
  }

  .temperature-line strong {
    font-size: 3.70rem;
  }

  .current-metrics {
    gap:
      7px
      12px;
  }

  .summary-card {
    min-height: 92px;
  }

  .source-footer {
    align-items: flex-start;

    flex-direction: column;
  }
}

/* =========================================================
   RIDUZIONE ANIMAZIONI
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  * {
    scroll-behavior: auto !important;

    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   RICERCA PER INDIRIZZO
   ========================================================= */

.location-bar {
  flex-wrap: wrap;
}

.address-form {
  display: grid;

  grid-template-columns:
    minmax(190px, 1fr)
    minmax(260px, 1.5fr)
    minmax(100px, 0.45fr)
    auto;

  align-items: end;

  flex:
    1
    1
    940px;

  gap: 10px;
}

.address-form label {
  min-width: 0;
}

.address-form label span {
  display: block;

  margin:
    0
    0
    4px
    3px;

  color: var(--muted);

  font-size: 0.70rem;
  font-weight: 700;
}

.address-form input {
  width: 100%;
  min-height: 48px;

  padding: 10px 13px;

  border:
    1px solid var(--line-strong);

  border-radius: 10px;

  outline: none;

  background: #ffffff;
  color: var(--text);

  box-shadow:
    0 4px 14px rgba(32, 79, 128, 0.05);
}

.address-form input:focus {
  border-color: var(--blue);

  box-shadow:
    0 0 0 4px rgba(22, 119, 255, 0.11);
}

.address-form input::placeholder {
  color: #8ca0b7;
}

.address-submit {
  min-height: 48px;

  padding:
    9px
    18px;

  border: 0;
  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      #1681ff,
      #176edc
    );

  color: #ffffff;

  font-weight: 800;

  white-space: nowrap;

  box-shadow:
    0 8px 20px rgba(22, 119, 255, 0.18);
}

.address-submit:hover {
  background:
    linear-gradient(
      135deg,
      #086fe7,
      #075fc8
    );
}

.address-submit:disabled {
  opacity: 0.58;

  cursor: wait;
}


/* =========================================================
   RISULTATI DELLA GEOCODIFICA
   ========================================================= */

.address-results {
  flex:
    1
    0
    100%;

  order: 3;

  padding: 14px;

  border:
    1px solid var(--line);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 9px 28px rgba(28, 73, 120, 0.08);
}

.address-results-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 10px;
}

.address-results-header strong {
  color: var(--text);

  font-size: 0.88rem;
}

.address-results-header small {
  color: var(--muted);

  font-size: 0.70rem;
}

.address-result-list {
  display: grid;

  gap: 8px;
}

.address-result-button {
  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 12px;

  width: 100%;

  padding:
    11px
    13px;

  border:
    1px solid #dce8f4;

  border-radius: 10px;

  background: #ffffff;
  color: var(--text);

  text-align: left;
}

.address-result-button:hover {
  border-color: #7db6f5;

  background: #eff7ff;
}

.address-result-pin {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  border-radius: 10px;

  background: var(--blue-soft);
  color: var(--blue);

  font-size: 1.15rem;
}

.address-result-copy {
  min-width: 0;
}

.address-result-main {
  display: block;

  overflow: hidden;

  font-size: 0.83rem;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-result-meta {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  color: var(--muted);

  font-size: 0.69rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-result-action {
  color: var(--blue);

  font-size: 0.72rem;
  font-weight: 800;

  white-space: nowrap;
}

.address-loading,
.address-empty {
  padding: 13px;

  border-radius: 9px;

  background: var(--surface-soft);
  color: var(--muted);

  font-size: 0.80rem;
  text-align: center;
}


/* =========================================================
   ATTRIBUZIONE OPENSTREETMAP
   ========================================================= */

.geocode-credit {
  flex: 0 1 auto;

  color: #496f9c;

  font-size: 0.67rem;
}

.geocode-credit a {
  white-space: nowrap;
}


/* =========================================================
   RESPONSIVE — MODULO INDIRIZZO
   ========================================================= */

@media (max-width: 1180px) {

  .address-form {
    grid-template-columns:
      minmax(190px, 1fr)
      minmax(260px, 1.4fr)
      minmax(100px, 0.45fr);
  }

  .address-submit {
    grid-column:
      1
      /
      -1;
  }
}


@media (max-width: 760px) {

  .address-form {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(100px, 0.55fr);
  }

  .address-city {
    grid-column:
      1
      /
      -1;
  }

  .address-submit {
    grid-column:
      1
      /
      -1;
  }

  .address-result-button {
    grid-template-columns:
      36px
      minmax(0, 1fr);
  }

  .address-result-action {
    display: none;
  }

  .address-result-main,
  .address-result-meta {
    white-space: normal;
  }
}


@media (max-width: 480px) {

  .address-form {
    grid-template-columns: 1fr;
  }

  .address-city,
  .address-street,
  .address-number,
  .address-submit {
    grid-column: 1;
  }

  .address-results {
    padding: 10px;
  }
}



/* =========================================================
   LAYOUT COMPATTO — NASCONDI RIEPILOGO CENTRALE
   ========================================================= */

/*
 * Le card rimangono nel DOM perché app.js continua ad
 * aggiornarle, ma vengono eliminate dalla visualizzazione.
 */

#summaryGrid {
  display: none !important;
}


/*
 * I tab delle giornate salgono immediatamente sotto
 * il blocco di selezione della località.
 */

.day-tabs-wrap {
  margin-top: 14px;
}


/*
 * Riduce leggermente lo spazio verticale superiore
 * della sezione con il dettaglio orario.
 */

.forecast-section {
  margin-top: 0;
}


@media (max-width: 760px) {

  .day-tabs-wrap {
    margin-top: 10px;
  }
}



/* =========================================================
   FASCIA ORARIA ATTUALE — STILE HOVER PERMANENTE
   ========================================================= */

/*
 * La prima fascia visibile della giornata corrente
 * mantiene lo stesso aspetto del passaggio del mouse.
 */

.forecast-table tbody tr.current-row {
background: #edf6ff;
}



/* =========================================================
   POPUP GRANULARITÀ GEOGRAFICA
   ========================================================= */

.area-notice {
  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 1000;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    32px;

  align-items: start;

  gap: 12px;

  width: min(520px, calc(100vw - 32px));

  padding: 16px;

  border:
    1px solid rgba(22, 119, 255, 0.25);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.98);

  color: var(--text);

  box-shadow:
    0 18px 52px rgba(5, 40, 87, 0.22);

  backdrop-filter: blur(12px);

  animation:
    area-notice-enter
    220ms
    ease-out;
}

.area-notice.hidden {
  display: none !important;
}

.area-notice-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: var(--blue-soft);
  color: var(--blue);

  font-size: 1rem;
  font-weight: 900;
}

.area-notice-content {
  min-width: 0;
}

.area-notice-content strong {
  display: block;

  margin-bottom: 5px;

  color: var(--navy);

  font-size: 0.88rem;
}

.area-notice-content p {
  margin: 0;

  color: #395779;

  font-size: 0.76rem;
  line-height: 1.48;
}

.area-notice-content small {
  display: block;

  margin-top: 7px;

  color: var(--muted);

  font-size: 0.67rem;
  font-weight: 700;
}

.area-notice-close {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: #66809d;

  font-size: 1.35rem;
  line-height: 1;
}

.area-notice-close:hover {
  background: var(--blue-soft);
  color: var(--blue);
}

.area-notice-close:focus-visible {
  outline:
    3px solid rgba(22, 119, 255, 0.25);

  outline-offset: 2px;
}

@keyframes area-notice-enter {

  from {
    opacity: 0;

    transform:
      translateY(12px)
      scale(0.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


@media (max-width: 600px) {

  .area-notice {
    right: 12px;
    bottom: 12px;

    grid-template-columns:
      34px
      minmax(0, 1fr)
      28px;

    width: calc(100vw - 24px);

    padding: 13px;

    gap: 9px;
  }

  .area-notice-icon {
    width: 34px;
    height: 34px;
  }

  .area-notice-content p {
    font-size: 0.73rem;
  }
}



/* =========================================================
   POPUP GIALLO — PREVISIONE ODIERNA
   ========================================================= */

.area-notice {
  border-color: #d8b83d;

  background:
    linear-gradient(
      135deg,
      rgba(255, 250, 204, 0.99),
      rgba(255, 239, 148, 0.99)
    );

  box-shadow:
    0 18px 52px rgba(91, 70, 0, 0.24);
}

.area-notice-icon {
  background: #ffdc61;
  color: #674900;

  font-size: 1.10rem;
}

.area-notice-content strong {
  color: #4f3b00;

  font-size: 0.98rem;
  line-height: 1.30;
}

.area-notice-content p {
  color: #574817;

  font-size: 0.84rem;
  line-height: 1.55;
}

.area-notice-content small {
  color: #69571b;

  font-size: 0.74rem;
  line-height: 1.40;
}

.area-notice-close {
  color: #69571b;
}

.area-notice-close:hover {
  background: rgba(255, 211, 54, 0.42);
  color: #3f3000;
}


@media (max-width: 600px) {

  .area-notice-content strong {
    font-size: 0.92rem;
  }

  .area-notice-content p {
    font-size: 0.80rem;
  }

  .area-notice-content small {
    font-size: 0.71rem;
  }
}



/* =========================================================
   MODALE DISAMBIGUAZIONE INDIRIZZO
   ========================================================= */

.address-results {
  position: fixed;

  inset: 0;

  z-index: 2200;

  display: flex;

  flex: none;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  width: auto;
  min-width: 0;
  height: auto;

  margin: 0;
  padding: 24px;

  border: 0;
  border-radius: 0;

  order: initial;

  background:
    rgba(3, 25, 55, 0.58);

  box-shadow: none;

  overflow:
    hidden
    auto;

  overscroll-behavior: contain;

  backdrop-filter:
    blur(5px);

  animation:
    address-backdrop-enter
    180ms
    ease-out;
}

.address-results.hidden {
  display: none !important;
}


/* Intestazione della finestra */

.address-results-header {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    38px;

  align-items: start;

  gap:
    4px
    16px;

  width:
    min(
      720px,
      100%
    );

  margin: 0;
  padding:
    20px
    20px
    16px;

  border:
    1px solid
    var(--line);

  border-bottom: 0;

  border-radius:
    16px
    16px
    0
    0;

  background: #ffffff;

  box-shadow:
    0 -3px 32px rgba(3, 30, 67, 0.12);

  animation:
    address-dialog-enter
    210ms
    ease-out;
}

.address-results-header strong {
  grid-column: 1;
  grid-row: 1;

  color: var(--navy);

  font-size: 1rem;
  line-height: 1.35;
}

.address-results-header small {
  grid-column: 1;
  grid-row: 2;

  overflow: hidden;

  color: var(--muted);

  font-size: 0.75rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-results-close {
  grid-column: 2;
  grid-row:
    1
    /
    3;

  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  padding: 0;

  border: 0;
  border-radius: 10px;

  background: var(--surface-soft);
  color: #647d99;

  font-size: 1.5rem;
  line-height: 1;
}

.address-results-close:hover {
  background: var(--blue-soft);
  color: var(--blue);
}

.address-results-close:focus-visible {
  outline:
    3px solid rgba(22, 119, 255, 0.24);

  outline-offset: 2px;
}


/* Elenco dei possibili indirizzi */

.address-result-list {
  width:
    min(
      720px,
      100%
    );

  max-height:
    min(
      58vh,
      520px
    );

  padding:
    0
    20px
    20px;

  border:
    1px solid
    var(--line);

  border-top: 0;

  border-radius:
    0
    0
    16px
    16px;

  background: #ffffff;

  overflow-y: auto;

  box-shadow:
    0 24px 60px rgba(3, 30, 67, 0.24);

  animation:
    address-dialog-enter
    210ms
    ease-out;
}


/* Messaggio senza risultati */

.address-results > .address-empty {
  width:
    min(
      720px,
      100%
    );

  margin: 0;
  padding:
    4px
    20px
    22px;

  border:
    1px solid
    var(--line);

  border-top: 0;

  border-radius:
    0
    0
    16px
    16px;

  background: #ffffff;

  box-shadow:
    0 24px 60px rgba(3, 30, 67, 0.24);
}


/* Stato durante la ricerca */

.address-results > .address-loading {
  width:
    min(
      520px,
      100%
    );

  margin: 0;
  padding: 26px;

  border:
    1px solid
    var(--line);

  border-radius: 16px;

  background: #ffffff;

  color: var(--navy);

  box-shadow:
    0 24px 60px rgba(3, 30, 67, 0.24);

  font-size: 0.88rem;
  font-weight: 700;

  animation:
    address-dialog-enter
    210ms
    ease-out;
}


/* Risultati singoli */

.address-result-button {
  min-height: 68px;

  padding:
    12px
    14px;
}

.address-result-main {
  font-size: 0.88rem;
}

.address-result-meta {
  font-size: 0.72rem;
  line-height: 1.4;
}


/* Animazioni */

@keyframes address-backdrop-enter {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes address-dialog-enter {

  from {
    opacity: 0;

    transform:
      translateY(14px)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* Telefoni */

@media (max-width: 600px) {

  .address-results {
    justify-content: flex-start;

    padding:
      58px
      12px
      18px;
  }

  .address-results-header {
    padding:
      16px
      14px
      13px;

    border-radius:
      13px
      13px
      0
      0;
  }

  .address-result-list {
    max-height:
      calc(100vh - 180px);

    padding:
      0
      12px
      14px;

    border-radius:
      0
      0
      13px
      13px;
  }

  .address-results > .address-empty {
    padding:
      4px
      14px
      18px;

    border-radius:
      0
      0
      13px
      13px;
  }

  .address-results-header small {
    white-space: normal;
  }

  .address-result-button {
    min-height: 62px;
  }
}



/* =========================================================
   POPUP GEOLOCALIZZAZIONE
   ========================================================= */

.gps-notice {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 2800;

  display: grid;

  grid-template-columns:
    30px
    minmax(0, 1fr)
    28px;

  align-items: center;

  gap: 9px;

  width: min(330px, calc(100vw - 24px));

  padding:
    11px
    11px
    11px
    12px;

  border:
    1px solid #e6a6a6;

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #fff7f7,
      #ffe9e9
    );

  color: #713030;

  box-shadow:
    0 13px 34px rgba(66, 20, 20, 0.22);

  animation:
    gps-notice-enter
    180ms
    ease-out;
}

.gps-notice.hidden {
  display: none !important;
}

.gps-notice::before {
  content: "";

  position: absolute;

  top: -7px;
  left: 50%;

  width: 13px;
  height: 13px;

  border:
    1px solid #e6a6a6;

  border-right: 0;
  border-bottom: 0;

  background: #fff2f2;

  transform:
    translateX(-50%)
    rotate(45deg);
}

.gps-notice-icon {
  display: grid;
  place-items: center;

  width: 28px;
  height: 28px;

  border-radius: 50%;

  background: #d84a4a;
  color: #ffffff;

  font-size: 0.88rem;
  font-weight: 900;
}

.gps-notice-text {
  min-width: 0;

  font-size: 0.79rem;
  font-weight: 750;
  line-height: 1.35;
}

.gps-notice-close {
  display: grid;
  place-items: center;

  width: 27px;
  height: 27px;

  padding: 0;

  border: 0;
  border-radius: 7px;

  background: transparent;
  color: #8b4b4b;

  font-size: 1.2rem;
  line-height: 1;
}

.gps-notice-close:hover {
  background: rgba(190, 62, 62, 0.12);
  color: #672424;
}

.gps-notice-close:focus-visible {
  outline:
    3px solid rgba(207, 67, 67, 0.20);

  outline-offset: 2px;
}

@keyframes gps-notice-enter {

  from {
    opacity: 0;

    transform:
      translateY(-7px)
      scale(0.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


@media (max-width: 600px) {

  .gps-notice {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      26px;

    padding: 10px;

    gap: 8px;
  }

  .gps-notice-text {
    font-size: 0.76rem;
  }
}



/* =========================================================
   MOBILE — CONTROLLI RIDOTTI
   ========================================================= */

@media (max-width: 760px) {

  /*
   * Sul telefono la granularità è sempre fissata
   * a due ore tramite JavaScript.
   */

  #granularityControls {
    display: none !important;
  }


  /*
   * Nella selezione della località rimangono
   * soltanto Città e La mia posizione.
   */

  #locationModes [data-mode="region"],
  #locationModes [data-mode="address"] {
    display: none !important;
  }


  #locationModes {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    width: 100%;
  }


  #locationModes .mode-button {
    justify-content: center;

    min-width: 0;

    padding-inline: 12px;
  }
}



/* =========================================================
   MOBILE — NASCONDI STATO AGGIORNAMENTO
   ========================================================= */

@media (max-width: 760px) {

  /*
   * Il pulsante manuale e la data di aggiornamento
   * non occupano spazio nell'impaginazione mobile.
   *
   * I dati vengono aggiornati automaticamente tramite
   * JavaScript ogni 15 minuti e al ritorno in primo piano.
   */

  .update-status {
    display: none !important;
  }
}



/* =========================================================
   MOBILE — INTESTAZIONE COMPATTA V2
   ========================================================= */

@media (max-width: 760px) {

  /*
   * La granularità è già fissata a due ore e il relativo
   * selettore è nascosto: anche l'etichetta viene rimossa.
   */

  .mobile-hide-granularity-label {
    display: none !important;
  }


  /*
   * Centra maggiormente l'intero marchio SCHIARO Meteo
   * senza modificare l'impaginazione desktop.
   */

  .mobile-centered-brand {
    width: fit-content;
    max-width: calc(100% - 24px);

    margin-left: auto !important;
    margin-right: auto !important;

    justify-self: center !important;
    align-self: center !important;

    text-align: center !important;
  }
}



/* =========================================================
   MOBILE — RIFINITURA TITOLO E FOOTER
   ========================================================= */

@media (max-width: 760px) {

  /*
   * Il marchio occupa una riga completa e viene centrato
   * rispetto all'intera larghezza della pagina.
   */

  .mobile-centered-brand {
    grid-column:
      1
      /
      -1 !important;

    flex:
      0
      0
      100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 0.32rem !important;

    width: 100% !important;
    max-width: none !important;

    margin:
      0
      auto !important;

    padding:
      3px
      0
      8px !important;

    position: static !important;

    transform: none !important;

    text-align: center !important;

    line-height: 1.05;
  }


  .mobile-centered-brand > * {
    margin: 0 !important;

    line-height: 1.05 !important;
  }


  /*
   * Footer disposto verticalmente, centrato e senza
   * elementi che sembrano appartenere a colonne diverse.
   */

  .source-footer {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    align-items: center !important;
    justify-items: center !important;

    gap: 7px !important;

    width: 100%;

    padding:
      15px
      16px
      17px !important;

    text-align: center !important;
  }


  .source-footer > * {
    width: 100%;
    max-width: 38rem;

    margin: 0 !important;
  }


  /*
   * Firma e informazioni sulla fonte su righe compatte,
   * con allineamento coerente.
   */

  .source-signature {
    display: flex !important;

    flex-wrap: wrap;

    align-items: center !important;
    justify-content: center !important;

    gap:
      4px
      8px !important;

    text-align: center !important;
  }


  .source-signature > * {
    margin: 0 !important;
  }


  .geocode-credit {
    color: #58708e;

    font-size: 0.72rem !important;
    line-height: 1.42;

    text-align: center !important;
  }


  .source-footer p,
  .source-footer small {
    margin: 0 !important;

    font-size: 0.72rem;
    line-height: 1.42;

    text-align: center !important;
  }


  .source-footer a {
    display: inline;

    white-space: normal;
  }
}


@media (max-width: 420px) {

  .mobile-centered-brand {
    gap: 0.25rem !important;

    padding-bottom: 6px !important;
  }


  .source-footer {
    padding:
      13px
      12px
      15px !important;

    gap: 6px !important;
  }


  .source-footer p,
  .source-footer small,
  .geocode-credit {
    font-size: 0.69rem !important;
  }
}



/* =========================================================
   MOBILE — HEADER DEFINITIVO
   ========================================================= */

@media (max-width: 760px) {

  /*
   * L'header desktop utilizza tre colonne.
   * Sul telefono diventa una singola colonna centrata.
   */

  .topbar {
    padding:
      0
      0
      13px;
  }


  .topbar-inner {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    align-items: center !important;
    justify-items: stretch !important;

    gap: 11px !important;

    width:
      min(
        calc(100% - 24px),
        620px
      ) !important;

    min-height: 0 !important;

    margin:
      0
      auto !important;

    padding:
      12px
      0
      0 !important;
  }


  /*
   * Elimina l'intero blocco della granularità,
   * non soltanto l'etichetta e i pulsanti.
   * In questo modo non rimane una colonna vuota.
   */

  .topbar-inner
  > .control-block:not(.location-modes) {
    display: none !important;
  }


  /*
   * Marchio compatto e realmente centrato rispetto
   * all'intera larghezza disponibile.
   */

  .topbar-inner > .brand,
  .topbar-inner > .brand.mobile-centered-brand {
    grid-column:
      1 !important;

    justify-self:
      center !important;

    display: grid !important;

    grid-template-columns:
      46px
      auto !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      10px !important;

    flex:
      none !important;

    width:
      auto !important;

    max-width:
      100% !important;

    margin:
      0
      auto !important;

    padding:
      0 !important;

    position:
      static !important;

    transform:
      none !important;

    text-align:
      left !important;
  }


  .topbar-inner .brand-mark {
    width:
      46px !important;

    height:
      46px !important;

    border-radius:
      13px !important;
  }


  .topbar-inner .brand-mark svg {
    width:
      34px !important;

    height:
      34px !important;
  }


  .topbar-inner .brand-copy {
    display:
      block !important;

    min-width:
      0;

    margin:
      0 !important;
  }


  .topbar-inner .brand-copy strong {
    display:
      block !important;

    margin:
      0 !important;

    font-size:
      1.58rem !important;

    line-height:
      1 !important;

    letter-spacing:
      -0.045em !important;

    white-space:
      nowrap;
  }


  .topbar-inner .brand-copy strong span {
    margin-left:
      0.08em;
  }


  /*
   * Il sottotitolo non aggiunge informazioni essenziali
   * nella versione compatta.
   */

  .topbar-inner .brand-copy small {
    display:
      none !important;
  }


  /*
   * La scelta della località occupa una riga autonoma
   * immediatamente sotto il marchio.
   */

  .topbar-inner > .location-modes {
    grid-column:
      1 !important;

    width:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;
  }


  .topbar-inner
  > .location-modes
  > .control-label {
    display:
      block;

    margin:
      0
      0
      7px !important;

    text-align:
      center;

    font-size:
      0.68rem;

    letter-spacing:
      0.055em;
  }


  #locationModes {
    width:
      100% !important;

    margin:
      0 !important;
  }
}


@media (max-width: 420px) {

  .topbar-inner {
    width:
      calc(100% - 18px) !important;

    gap:
      9px !important;

    padding-top:
      10px !important;
  }


  .topbar-inner > .brand,
  .topbar-inner > .brand.mobile-centered-brand {
    grid-template-columns:
      42px
      auto !important;

    gap:
      8px !important;
  }


  .topbar-inner .brand-mark {
    width:
      42px !important;

    height:
      42px !important;

    border-radius:
      12px !important;
  }


  .topbar-inner .brand-mark svg {
    width:
      31px !important;

    height:
      31px !important;
  }


  .topbar-inner .brand-copy strong {
    font-size:
      1.46rem !important;
  }
}


/* =========================================================
   MOBILE — RIPRISTINO SOTTOTITOLO DEL MARCHIO
   ========================================================= */

@media (max-width: 760px) {

  .topbar-inner .brand-copy {
    text-align: left !important;
  }

  .topbar-inner .brand-copy small {
    display: block !important;

    margin:
      4px
      0
      0 !important;

    color: #d4e6fb;

    font-size: 0.72rem !important;
    font-weight: 500;

    line-height: 1.15 !important;

    letter-spacing: 0.01em;

    white-space: nowrap;
  }
}


@media (max-width: 420px) {

  .topbar-inner .brand-copy small {
    margin-top: 3px !important;

    font-size: 0.68rem !important;
  }
}



/* =========================================================
   RIFINITURA — SFONDO ESTERNO CELESTE
   ========================================================= */

:root {
  --page-sky-top: #eaf5ff;
  --page-sky-mid: #e3f1ff;
  --page-sky-bottom: #edf7ff;
}


/*
 * Schiarisce in azzurro il fondo generale della pagina,
 * lasciando invariati i pannelli principali, le tabelle
 * e le aree dati già bianche.
 */

html {
  background: var(--page-sky-top) !important;
}

body {
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(69, 148, 255, 0.14),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(120, 190, 255, 0.10),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      var(--page-sky-top) 0%,
      var(--page-sky-mid) 52%,
      var(--page-sky-bottom) 100%
    ) !important;
}


/*
 * Un leggero azzurro anche dietro il contenuto principale,
 * per evitare l'effetto "foglio bianco" negli spazi vuoti.
 */

main,
.page-shell,
.page-main,
.app-shell {
  background-color: transparent;
}



/* =========================================================
   MOBILE PROFESSIONALE — MASTER OVERRIDE V1
   ========================================================= */

@media (max-width: 760px) {

  /* -------------------------------------------------------
     STRUTTURA GENERALE
     ------------------------------------------------------- */

  body {
    min-width: 320px;

    font-size: 15px;
  }


  .page-shell {
    width: 100% !important;

    margin: 0 !important;

    padding:
      12px
      12px
      26px !important;
  }


  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .topbar {
    padding:
      0
      0
      11px !important;

    box-shadow:
      0 5px 20px
      rgba(3, 31, 67, 0.18);
  }


  .topbar-inner {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    align-items: center !important;
    justify-items: stretch !important;

    gap: 10px !important;

    width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding:
      12px
      14px
      0 !important;
  }


  /*
   * Elimina completamente il blocco della granularità.
   */

  .topbar-inner
  > .control-block:not(.location-modes) {
    display: none !important;
  }


  /*
   * Marchio pulito, senza pannello decorativo.
   */

  .topbar-inner > .brand,
  .topbar-inner > .brand.mobile-centered-brand {
    display: grid !important;

    grid-template-columns:
      43px
      auto !important;

    align-items: center !important;
    justify-content: center !important;

    justify-self: center !important;

    gap: 10px !important;

    width: auto !important;
    max-width: calc(100vw - 28px) !important;

    margin: 0 auto !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;

    text-align: left !important;
  }


  .topbar-inner .brand-mark {
    width: 43px !important;
    height: 43px !important;

    border-radius: 13px !important;
  }


  .topbar-inner .brand-mark svg {
    width: 32px !important;
    height: 32px !important;
  }


  .topbar-inner .brand-copy {
    display: grid !important;

    grid-template-rows:
      auto
      auto;

    align-content: center;

    gap: 4px;

    margin: 0 !important;

    text-align: left !important;
  }


  .topbar-inner .brand-copy strong {
    display: flex !important;

    align-items: baseline;

    gap: 0.08em;

    margin: 0 !important;

    font-size: 1.38rem !important;
    font-weight: 800;

    line-height: 1 !important;

    letter-spacing: -0.038em !important;

    white-space: nowrap;
  }


  .topbar-inner .brand-copy strong span {
    margin: 0 !important;

    font-weight: 720;
  }


  .topbar-inner .brand-copy small {
    display: block !important;

    margin: 0 !important;

    color:
      rgba(220, 236, 255, 0.90);

    font-size: 0.68rem !important;
    font-weight: 520;

    line-height: 1.15 !important;

    letter-spacing: 0.012em;

    white-space: nowrap;
  }


  /* -------------------------------------------------------
     SCELTA LOCALITÀ NELL'HEADER
     ------------------------------------------------------- */

  .topbar-inner > .location-modes {
    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;
  }


  .topbar-inner
  > .location-modes
  > .control-label {
    display: none !important;
  }


  #locationModes {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 0 !important;
  }


  #locationModes .mode-button {
    min-width: 0 !important;
    min-height: 42px !important;

    padding:
      8px
      10px !important;

    border-radius: 12px !important;

    gap: 7px !important;

    font-size: 0.85rem !important;
    font-weight: 750;
  }


  /* -------------------------------------------------------
     SELETTORE DELLA CITTÀ
     ------------------------------------------------------- */

  .location-bar {
    display: block !important;

    width: 100% !important;

    margin:
      0
      0
      12px !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  .location-picker {
    width: 100% !important;
    min-height: 52px !important;

    padding:
      0
      14px !important;

    border:
      1px solid
      rgba(129, 169, 207, 0.55) !important;

    border-radius: 14px !important;

    background:
      rgba(255, 255, 255, 0.96) !important;

    box-shadow:
      0 8px 24px
      rgba(26, 75, 128, 0.08) !important;
  }


  .location-picker select {
    min-height: 50px !important;

    font-size: 1rem !important;
    font-weight: 750;
  }


  .update-status {
    display: none !important;
  }


  /* -------------------------------------------------------
     TAB DEI GIORNI
     ------------------------------------------------------- */

  .day-tabs-wrap {
    display: block !important;

    width: 100% !important;

    margin:
      0
      0
      8px !important;
  }


  #previousTab,
  #nextTab {
    display: none !important;
  }


  .day-tabs {
    display: flex !important;

    grid-template-columns: none !important;

    gap: 8px !important;

    width: 100% !important;

    padding:
      2px
      2px
      8px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type:
      x
      mandatory;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
  }


  .day-tabs::-webkit-scrollbar {
    display: none;
  }


  .day-tab {
    flex:
      0
      0
      138px !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    min-width: 138px !important;
    min-height: 66px !important;

    padding:
      10px
      11px !important;

    border:
      1px solid
      rgba(150, 180, 211, 0.52) !important;

    border-radius: 14px !important;

    background:
      rgba(255, 255, 255, 0.94) !important;

    box-shadow:
      0 6px 18px
      rgba(34, 76, 122, 0.07);

    scroll-snap-align: start;
  }


  .day-tab.active {
    border-color:
      transparent !important;

    background:
      linear-gradient(
        135deg,
        #147cf3,
        #2d8cff
      ) !important;

    color: #ffffff !important;

    box-shadow:
      0 9px 22px
      rgba(22, 119, 255, 0.22);
  }


  .day-tab strong {
    font-size: 0.82rem !important;
  }


  .day-tab small {
    margin-top: 3px;

    font-size: 0.67rem !important;
  }


  .day-tab .tab-icon {
    font-size: 1.65rem !important;
  }


  /* -------------------------------------------------------
     INTESTAZIONE DEL DETTAGLIO
     ------------------------------------------------------- */

  .forecast-section {
    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  #forecastTitle {
    margin: 0 !important;

    font-size: 1.03rem !important;
    line-height: 1.28 !important;

    letter-spacing: -0.015em;
  }


  #resolutionNote {
    display: none !important;
  }


  /* -------------------------------------------------------
     TABELLA TRASFORMATA IN SCHEDE
     ------------------------------------------------------- */

  table:has(#forecastBody) {
    display: block !important;

    width: 100% !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  table:has(#forecastBody) thead {
    display: none !important;
  }


  #forecastBody {
    display: grid !important;

    gap: 10px !important;

    width: 100% !important;

    padding:
      10px
      0
      0 !important;
  }


  #forecastBody tr {
    display: grid !important;

    grid-template-columns:
      64px
      minmax(0, 1fr)
      62px !important;

    grid-template-areas:
      "time sky temperature"
      "feels humidity rain"
      "wind wind pressure";

    column-gap: 10px !important;
    row-gap: 0 !important;

    width: 100% !important;

    padding:
      12px
      12px
      11px !important;

    border:
      1px solid
      rgba(149, 181, 212, 0.45) !important;

    border-radius: 15px !important;

    background:
      rgba(255, 255, 255, 0.97) !important;

    box-shadow:
      0 8px 22px
      rgba(31, 73, 117, 0.075);

    overflow: hidden;
  }


  #forecastBody tr.current-row {
    border-color:
      rgba(22, 119, 255, 0.72) !important;

    background:
      linear-gradient(
        135deg,
        #f4f9ff,
        #e9f4ff
      ) !important;

    box-shadow:
      0 9px 26px
      rgba(22, 119, 255, 0.14);
  }


  #forecastBody tr.past-row {
    opacity: 0.72;
  }


  #forecastBody td {
    min-width: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    text-align: left !important;
  }


  #forecastBody td:nth-child(1) {
    grid-area: time;

    align-self: center;

    font-size: 1rem;
    font-weight: 850;
  }


  #forecastBody td:nth-child(2) {
    grid-area: sky;

    align-self: center;
  }


  #forecastBody td:nth-child(3) {
    grid-area: temperature;

    align-self: center;

    text-align: right !important;

    font-size: 1.35rem;
    font-weight: 850;
  }


  #forecastBody td:nth-child(4) {
    grid-area: feels;
  }


  #forecastBody td:nth-child(5) {
    grid-area: humidity;
  }


  #forecastBody td:nth-child(6) {
    grid-area: rain;
  }


  #forecastBody td:nth-child(7) {
    grid-area: wind;
  }


  #forecastBody td:nth-child(8) {
    grid-area: pressure;
  }


  #forecastBody td:nth-child(n+4) {
    display: flex !important;

    flex-direction: column;

    justify-content: center;

    min-height: 46px;

    margin-top: 10px;

    padding-top: 8px !important;

    border-top:
      1px solid
      rgba(167, 192, 218, 0.34) !important;

    color: #24476d;

    font-size: 0.78rem;
    font-weight: 750;
  }


  #forecastBody td:nth-child(n+4)::before {
    display: block;

    margin-bottom: 3px;

    color: #7188a2;

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.045em;

    line-height: 1;

    text-transform: uppercase;
  }


  #forecastBody td:nth-child(4)::before {
    content: "Percepita";
  }


  #forecastBody td:nth-child(5)::before {
    content: "Umidità";
  }


  #forecastBody td:nth-child(6)::before {
    content: "Pioggia";
  }


  #forecastBody td:nth-child(7)::before {
    content: "Vento";
  }


  #forecastBody td:nth-child(8)::before {
    content: "Pressione";
  }


  #forecastBody td:nth-child(8) {
    text-align: right !important;
  }


  #forecastBody .sky-cell {
    display: flex !important;

    align-items: center;

    gap: 8px !important;

    min-width: 0;
  }


  #forecastBody .sky-icon {
    flex: 0 0 auto;

    font-size: 1.45rem !important;
  }


  #forecastBody .sky-cell > span:last-child {
    overflow: hidden;

    font-size: 0.78rem;

    text-overflow: ellipsis;
    white-space: nowrap;
  }


  #forecastBody .wind-cell {
    display: flex !important;

    align-items: center;

    gap: 8px !important;
  }


  /*
   * Stati di caricamento o assenza dati.
   */

  #forecastBody tr:has(.loading-cell),
  #forecastBody tr:has(.empty-cell) {
    display: block !important;

    padding:
      28px
      18px !important;

    text-align: center;
  }


  #forecastBody .loading-cell,
  #forecastBody .empty-cell {
    display: block !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    text-align: center !important;
  }
}


@media (max-width: 390px) {

  .page-shell {
    padding-inline: 9px !important;
  }


  .topbar-inner {
    padding-inline: 10px !important;
  }


  .topbar-inner .brand-copy strong {
    font-size: 1.28rem !important;
  }


  .topbar-inner .brand-copy small {
    font-size: 0.64rem !important;
  }


  .day-tab {
    flex-basis: 128px !important;

    min-width: 128px !important;
  }


  #forecastBody tr {
    grid-template-columns:
      58px
      minmax(0, 1fr)
      56px !important;

    padding:
      11px
      10px
      10px !important;
  }


  #forecastBody td:nth-child(3) {
    font-size: 1.22rem;
  }
}



/* =========================================================
   RIGHE METEO ALTERNATE E MOBILE COMPATTO V1
   ========================================================= */

/*
 * Alternanza cromatica valida anche sul desktop.
 * Le tonalità restano molto leggere per non compromettere
 * la leggibilità dei valori.
 */

#forecastBody tr:nth-child(odd) {
  background:
    rgba(255, 255, 255, 0.98);
}

#forecastBody tr:nth-child(even) {
  background:
    rgba(226, 241, 255, 0.82);
}


/*
 * La fascia attuale mantiene una priorità visiva maggiore
 * rispetto all'alternanza pari/dispari.
 */

#forecastBody tr.current-row {
  background:
    linear-gradient(
      90deg,
      #dceeff,
      #eef7ff
    ) !important;

  box-shadow:
    inset 4px 0 0 #1677ff;
}


/*
 * Anche il passaggio del mouse deve risultare evidente
 * indipendentemente dal colore alternato della riga.
 */

#forecastBody tr:hover {
  background:
    #d9ecff !important;
}


/* =========================================================
   MOBILE — UNA SOLA RIGA ESSENZIALE
   ========================================================= */

@media (max-width: 760px) {

  /*
   * Ogni previsione contiene soltanto:
   * ora, stato atmosferico e temperatura.
   */

  #forecastBody tr {
    display: grid !important;

    grid-template-columns:
      58px
      minmax(0, 1fr)
      52px !important;

    grid-template-areas:
      "time sky temperature" !important;

    align-items: center !important;

    column-gap: 10px !important;
    row-gap: 0 !important;

    min-height: 62px !important;

    padding:
      10px
      12px !important;

    border:
      1px solid
      rgba(130, 168, 205, 0.44) !important;

    border-radius:
      13px !important;

    box-shadow:
      0 5px 15px
      rgba(30, 72, 116, 0.065) !important;
  }


  /*
   * Alternanza più percepibile sulle schede mobili.
   */

  #forecastBody tr:nth-child(odd) {
    background:
      rgba(255, 255, 255, 0.98) !important;
  }


  #forecastBody tr:nth-child(even) {
    background:
      rgba(218, 238, 255, 0.96) !important;
  }


  #forecastBody tr.current-row {
    border-color:
      rgba(22, 119, 255, 0.68) !important;

    background:
      linear-gradient(
        90deg,
        #cfe7ff,
        #e8f4ff
      ) !important;

    box-shadow:
      inset 4px 0 0 #1677ff,
      0 7px 19px
      rgba(22, 119, 255, 0.12) !important;
  }


  /*
   * Nasconde tutte le informazioni secondarie.
   */

  #forecastBody td:nth-child(4),
  #forecastBody td:nth-child(5),
  #forecastBody td:nth-child(6),
  #forecastBody td:nth-child(7),
  #forecastBody td:nth-child(8) {
    display: none !important;
  }


  /*
   * Ora.
   */

  #forecastBody td:nth-child(1) {
    grid-area: time !important;

    align-self: center !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    color: var(--navy);

    font-size: 0.94rem !important;
    font-weight: 850 !important;

    line-height: 1 !important;
  }


  /*
   * Stato atmosferico.
   */

  #forecastBody td:nth-child(2) {
    grid-area: sky !important;

    align-self: center !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
  }


  #forecastBody .sky-cell {
    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    min-width: 0 !important;
  }


  #forecastBody .sky-icon {
    flex:
      0
      0
      auto;

    font-size:
      1.45rem !important;

    line-height: 1 !important;
  }


  #forecastBody .sky-cell > span:last-child {
    display: block;

    min-width: 0;

    overflow: hidden;

    color: #163a63;

    font-size: 0.82rem !important;
    font-weight: 700;

    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
  }


  /*
   * Temperatura prevista.
   */

  #forecastBody td:nth-child(3) {
    grid-area: temperature !important;

    align-self: center !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    color: var(--navy);

    font-size: 1.22rem !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    text-align: right !important;
  }


  /*
   * Rimuove eventuali separatori introdotti dal precedente
   * layout mobile a più righe.
   */

  #forecastBody td {
    border-top: 0 !important;
  }


  /*
   * Stati di caricamento o assenza dati restano centrati.
   */

  #forecastBody tr:has(.loading-cell),
  #forecastBody tr:has(.empty-cell) {
    display: block !important;

    padding:
      24px
      16px !important;

    background:
      rgba(255, 255, 255, 0.96) !important;
  }
}


@media (max-width: 390px) {

  #forecastBody tr {
    grid-template-columns:
      53px
      minmax(0, 1fr)
      47px !important;

    column-gap:
      8px !important;

    min-height:
      58px !important;

    padding:
      9px
      10px !important;
  }


  #forecastBody td:nth-child(1) {
    font-size:
      0.88rem !important;
  }


  #forecastBody .sky-icon {
    font-size:
      1.32rem !important;
  }


  #forecastBody .sky-cell > span:last-child {
    font-size:
      0.76rem !important;
  }


  #forecastBody td:nth-child(3) {
    font-size:
      1.14rem !important;
  }
}



/* =========================================================
   PALETTE RIGHE E INTERVALLO ATTUALE V2
   ========================================================= */

:root {
  --page-sky-top: #c8dced;
  --page-sky-mid: #bad2e7;
  --page-sky-bottom: #d4e5f2;

  --forecast-row-blue: #e2f0fb;
  --forecast-row-white: #ffffff;

  --forecast-current: #fff2bd;
  --forecast-current-hover: #ffeb9f;
  --forecast-current-border: #d59b00;
}


/* ---------------------------------------------------------
   SFONDO ESTERNO PIÙ SCURO
   --------------------------------------------------------- */

html {
  background:
    var(--page-sky-mid) !important;
}


body {
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(71, 137, 199, 0.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(95, 159, 218, 0.14),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      var(--page-sky-top) 0%,
      var(--page-sky-mid) 54%,
      var(--page-sky-bottom) 100%
    ) !important;
}


/* ---------------------------------------------------------
   ALTERNANZA DELLE FASCE NORMALI

   La prima riga è celeste.
   La seconda riga è bianca.
   L'intervallo attuale viene escluso dall'alternanza.
   --------------------------------------------------------- */

#forecastBody
tr:not(.current-row):nth-child(odd) {
  background:
    var(--forecast-row-blue) !important;
}


#forecastBody
tr:not(.current-row):nth-child(even) {
  background:
    var(--forecast-row-white) !important;
}


/*
 * Le celle restano trasparenti e lasciano vedere
 * il colore assegnato all'intera riga.
 */

#forecastBody
tr:not(.current-row)
> td {
  background:
    transparent !important;
}


/* ---------------------------------------------------------
   INTERVALLO ATTUALE
   --------------------------------------------------------- */

#forecastBody tr.current-row {
  border-color:
    rgba(213, 155, 0, 0.72) !important;

  background:
    linear-gradient(
      90deg,
      var(--forecast-current),
      #fff8dc
    ) !important;

  box-shadow:
    inset 4px 0 0
    var(--forecast-current-border),
    0 7px 19px
    rgba(132, 94, 0, 0.11) !important;
}


#forecastBody
tr.current-row
> td {
  background:
    transparent !important;

  color:
    #263c52;
}


/*
 * Il passaggio del mouse non deve trasformare
 * la fascia attuale nuovamente in azzurro.
 */

#forecastBody tr.current-row:hover {
  background:
    linear-gradient(
      90deg,
      var(--forecast-current-hover),
      #fff4c3
    ) !important;

  box-shadow:
    inset 4px 0 0
    var(--forecast-current-border),
    0 8px 21px
    rgba(132, 94, 0, 0.15) !important;
}


/* ---------------------------------------------------------
   HOVER DELLE ALTRE RIGHE
   --------------------------------------------------------- */

#forecastBody
tr:not(.current-row):hover {
  background:
    #d3e9fa !important;
}


/* ---------------------------------------------------------
   STATI DI SERVIZIO
   --------------------------------------------------------- */

#forecastBody
tr:has(.loading-cell),
#forecastBody
tr:has(.empty-cell) {
  background:
    rgba(255, 255, 255, 0.96) !important;

  box-shadow:
    none !important;
}


/* ---------------------------------------------------------
   REGOLAZIONI MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

  /*
   * La differenza tra la pagina e le schede viene
   * ulteriormente rafforzata sullo schermo piccolo.
   */

  #forecastBody
  tr:not(.current-row):nth-child(odd) {
    border-color:
      rgba(111, 157, 199, 0.50) !important;

    background:
      var(--forecast-row-blue) !important;
  }


  #forecastBody
  tr:not(.current-row):nth-child(even) {
    border-color:
      rgba(151, 179, 205, 0.48) !important;

    background:
      var(--forecast-row-white) !important;
  }


  #forecastBody tr.current-row {
    border-color:
      rgba(213, 155, 0, 0.78) !important;

    background:
      linear-gradient(
        90deg,
        var(--forecast-current),
        #fff8dc
      ) !important;

    box-shadow:
      inset 4px 0 0
      var(--forecast-current-border),
      0 8px 21px
      rgba(119, 85, 0, 0.13) !important;
  }


  #forecastBody tr.current-row:hover {
    background:
      linear-gradient(
        90deg,
        var(--forecast-current-hover),
        #fff4c3
      ) !important;
  }
}



/* =========================================================
   MOBILE — RIGHE ORARIE ALLINEATE V2
   ========================================================= */

@media (max-width: 760px) {

  /*
   * Impedisce alla larghezza desktop della tabella
   * di generare scorrimento orizzontale sul telefono.
   */

  html,
  body {
    max-width: 100% !important;

    overflow-x: hidden !important;
  }


  .page-shell,
  .forecast-section {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  /*
   * La tabella e il corpo delle previsioni devono seguire
   * la larghezza effettiva del contenitore mobile.
   */

  table:has(#forecastBody) {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 auto !important;

    table-layout: fixed !important;

    overflow: visible !important;
  }


  table:has(#forecastBody) * {
    box-sizing: border-box;
  }


  #forecastBody {
    display: grid !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 auto !important;

    overflow: visible !important;
  }


  /*
   * Struttura fissa e simmetrica:
   *
   * ora          58 px
   * stato cielo  spazio rimanente
   * temperatura  60 px
   */

  #forecastBody tr {
    display: grid !important;

    grid-template-columns:
      58px
      minmax(0, 1fr)
      60px !important;

    grid-template-areas:
      "time sky temperature" !important;

    align-items: stretch !important;

    column-gap: 0 !important;
    row-gap: 0 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin:
      0
      auto !important;

    padding:
      9px
      8px !important;

    overflow: hidden !important;
  }


  /*
   * Impostazioni comuni alle tre colonne visibili.
   */

  #forecastBody td:nth-child(1),
  #forecastBody td:nth-child(2),
  #forecastBody td:nth-child(3) {
    display: flex !important;

    align-items: center !important;

    min-width: 0 !important;
    min-height: 42px !important;

    margin: 0 !important;

    border-top: 0 !important;

    background: transparent !important;
  }


  /*
   * Ora: centrata nella prima colonna.
   */

  #forecastBody td:nth-child(1) {
    grid-area: time !important;

    justify-content: center !important;

    padding:
      0
      8px
      0
      2px !important;

    border-right:
      1px solid
      rgba(78, 116, 151, 0.27) !important;

    text-align: center !important;

    white-space: nowrap;
  }


  /*
   * Stato atmosferico: occupa solamente lo spazio
   * disponibile e non può spingere la temperatura
   * fuori dallo schermo.
   */

  #forecastBody td:nth-child(2) {
    grid-area: sky !important;

    justify-content: flex-start !important;

    padding:
      0
      10px !important;

    border-right:
      1px solid
      rgba(78, 116, 151, 0.27) !important;

    overflow: hidden !important;
  }


  #forecastBody .sky-cell {
    display: flex !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    gap: 8px !important;

    overflow: hidden !important;
  }


  #forecastBody .sky-icon {
    flex:
      0
      0
      auto !important;
  }


  #forecastBody .sky-cell > span:last-child {
    display: block !important;

    flex:
      1
      1
      auto !important;

    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /*
   * Temperatura: sempre visibile e centrata
   * nell'ultima colonna.
   */

  #forecastBody td:nth-child(3) {
    grid-area: temperature !important;

    justify-content: center !important;

    padding:
      0
      2px
      0
      8px !important;

    text-align: center !important;

    white-space: nowrap !important;
  }


  /*
   * Conferma la rimozione delle colonne secondarie.
   */

  #forecastBody td:nth-child(4),
  #forecastBody td:nth-child(5),
  #forecastBody td:nth-child(6),
  #forecastBody td:nth-child(7),
  #forecastBody td:nth-child(8) {
    display: none !important;
  }


  /*
   * Le linee verticali restano leggermente visibili
   * anche sulla fascia oraria evidenziata in giallo.
   */

  #forecastBody tr.current-row td:nth-child(1),
  #forecastBody tr.current-row td:nth-child(2) {
    border-right-color:
      rgba(137, 103, 12, 0.25) !important;
  }


  /*
   * Stati di caricamento e assenza dati non vengono
   * suddivisi nelle tre colonne.
   */

  #forecastBody tr:has(.loading-cell),
  #forecastBody tr:has(.empty-cell) {
    display: block !important;

    width: 100% !important;

    padding:
      24px
      16px !important;
  }


  #forecastBody .loading-cell,
  #forecastBody .empty-cell {
    display: block !important;

    width: 100% !important;
    min-height: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    text-align: center !important;
  }
}


@media (max-width: 390px) {

  /*
   * Sui telefoni più stretti riduce leggermente
   * le colonne laterali senza sacrificare i dati.
   */

  #forecastBody tr {
    grid-template-columns:
      54px
      minmax(0, 1fr)
      56px !important;

    padding:
      8px
      6px !important;
  }


  #forecastBody td:nth-child(1) {
    padding-right:
      6px !important;
  }


  #forecastBody td:nth-child(2) {
    padding:
      0
      8px !important;
  }


  #forecastBody td:nth-child(3) {
    padding-left:
      6px !important;
  }


  #forecastBody .sky-cell {
    gap:
      6px !important;
  }
}



/* =========================================================
   DESKTOP — SEPARATORI VERTICALI COLONNE V1
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Separatori nell'intestazione della tabella.
   */

  table:has(#forecastBody)
  thead
  th:not(:last-child) {
    border-right:
      1px solid
      rgba(74, 108, 143, 0.24) !important;
  }


  /*
   * Separatori tra i valori delle singole fasce orarie.
   */

  #forecastBody
  td:not(:last-child) {
    border-right:
      1px solid
      rgba(78, 116, 151, 0.22) !important;
  }


  /*
   * Separatore leggermente più caldo nella fascia attuale,
   * evidenziata con lo sfondo giallo.
   */

  #forecastBody
  tr.current-row
  td:not(:last-child) {
    border-right-color:
      rgba(137, 103, 12, 0.24) !important;
  }


  /*
   * Mantiene un po' di spazio tra il contenuto
   * e le linee verticali.
   */

  table:has(#forecastBody)
  th,
  #forecastBody td {
    padding-left:
      13px !important;

    padding-right:
      13px !important;
  }
}



/* =========================================================
   DESKTOP — HOVER RIGHE MOLTO LEGGERO V1
   ========================================================= */

@media
  (min-width: 761px)
  and (hover: hover)
  and (pointer: fine) {

  /*
   * Transizione molto breve e discreta.
   */

  #forecastBody tr {
    transition:
      background-color 110ms ease,
      box-shadow 110ms ease;
  }


  /*
   * Riga celeste: variazione quasi impercettibile.
   */

  #forecastBody
  tr:not(.current-row):nth-child(odd):hover {
    background:
      #deedf8 !important;

    box-shadow:
      inset 0 0 0 1px
      rgba(67, 112, 151, 0.06) !important;
  }


  /*
   * Riga bianca: leggerissimo riflesso azzurro.
   */

  #forecastBody
  tr:not(.current-row):nth-child(even):hover {
    background:
      #f8fbfe !important;

    box-shadow:
      inset 0 0 0 1px
      rgba(67, 112, 151, 0.06) !important;
  }


  /*
   * L'intervallo attuale resta giallo anche al passaggio
   * del mouse, senza diventare più acceso.
   */

  #forecastBody
  tr.current-row:hover {
    background:
      linear-gradient(
        90deg,
        var(--forecast-current),
        #fff8dc
      ) !important;

    box-shadow:
      inset 4px 0 0
      var(--forecast-current-border),
      0 7px 19px
      rgba(132, 94, 0, 0.11) !important;
  }
}



/* =========================================================
   DESKTOP — DATI PRINCIPALI IN GRASSETTO V1
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Ora della previsione.
   */

  #forecastBody td:nth-child(1) {
    font-weight: 800 !important;
  }


  /*
   * Testo dello stato atmosferico.
   * L'icona mantiene il proprio aspetto originale.
   */

  #forecastBody
  td:nth-child(2)
  .sky-cell
  > span:last-child {
    font-weight: 800 !important;
  }


  /*
   * Temperatura prevista.
   */

  #forecastBody td:nth-child(3) {
    font-weight: 800 !important;
  }
}



/* =========================================================
   DESKTOP — STATO DEL CIELO PESO NORMALE V1
   ========================================================= */

@media (min-width: 761px) {

  #forecastBody
  td:nth-child(2)
  .sky-cell
  > span:last-child {
    font-weight:
      500 !important;
  }
}



/* =========================================================
   DESKTOP — LARGHEZZA COLONNE STABILE V1
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Evita che la larghezza delle colonne cambi passando
   * da un giorno all'altro in base alla lunghezza dei testi.
   */

  .forecast-table {
    width: 100% !important;

    table-layout: fixed !important;
  }


  /*
   * Proporzioni delle otto colonne.
   */

  .forecast-table th:nth-child(1),
  .forecast-table td:nth-child(1) {
    width: 8%;
  }


  .forecast-table th:nth-child(2),
  .forecast-table td:nth-child(2) {
    width: 20%;
  }


  .forecast-table th:nth-child(3),
  .forecast-table td:nth-child(3) {
    width: 11%;
  }


  .forecast-table th:nth-child(4),
  .forecast-table td:nth-child(4) {
    width: 10%;
  }


  .forecast-table th:nth-child(5),
  .forecast-table td:nth-child(5) {
    width: 10%;
  }


  .forecast-table th:nth-child(6),
  .forecast-table td:nth-child(6) {
    width: 14%;
  }


  .forecast-table th:nth-child(7),
  .forecast-table td:nth-child(7) {
    width: 15%;
  }


  .forecast-table th:nth-child(8),
  .forecast-table td:nth-child(8) {
    width: 12%;
  }


  /*
   * Lo stato atmosferico rimane ordinato anche quando
   * la descrizione è più lunga.
   */

  .forecast-table td:nth-child(2) {
    min-width: 0;

    overflow: hidden;
  }


  .forecast-table td:nth-child(2) .sky-cell {
    display: flex;

    align-items: center;

    width: 100%;
    min-width: 0;

    gap: 9px;
  }


  .forecast-table
  td:nth-child(2)
  .sky-cell
  > span:last-child {
    min-width: 0;

    line-height: 1.25;

    white-space: normal;
  }
}



/* =========================================================
   TIPOGRAFIA PARAMETRI PRINCIPALI V2
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 761px) {

  /*
   * Leggero incremento delle intestazioni delle prime
   * tre colonne, senza alterare le altre.
   */

  .forecast-table
  thead
  th:nth-child(1),

  .forecast-table
  thead
  th:nth-child(2),

  .forecast-table
  thead
  th:nth-child(3) {
    font-size:
      1.035em !important;
  }


  /*
   * Ora.
   */

  #forecastBody td:nth-child(1) {
    font-size:
      1.03rem !important;
  }


  /*
   * Descrizione dello stato atmosferico.
   * Mantiene il peso normale già scelto.
   */

  #forecastBody
  td:nth-child(2)
  .sky-cell
  > span:last-child {
    font-size:
      0.94rem !important;

    font-weight:
      500 !important;
  }


  /*
   * Temperatura prevista.
   */

  #forecastBody td:nth-child(3) {
    font-size:
      1.05rem !important;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

  /*
   * Le due colonne laterali diventano leggermente più
   * ampie, riducendo con discrezione lo spazio assegnato
   * alla descrizione dello stato del cielo.
   */

  #forecastBody tr {
    grid-template-columns:
      64px
      minmax(0, 1fr)
      64px !important;
  }


  /*
   * Ora e temperatura utilizzano esattamente
   * la stessa dimensione tipografica.
   */

  #forecastBody td:nth-child(1),
  #forecastBody td:nth-child(3) {
    font-size:
      0.96rem !important;

    line-height:
      1 !important;
  }


  /*
   * La descrizione resta leggibile ma leggermente
   * più compatta nella colonna centrale.
   */

  #forecastBody
  .sky-cell
  > span:last-child {
    font-size:
      0.80rem !important;
  }
}


@media (max-width: 390px) {

  /*
   * Regolazione dedicata ai telefoni più stretti.
   */

  #forecastBody tr {
    grid-template-columns:
      58px
      minmax(0, 1fr)
      58px !important;
  }


  #forecastBody td:nth-child(1),
  #forecastBody td:nth-child(3) {
    font-size:
      0.90rem !important;
  }


  #forecastBody
  .sky-cell
  > span:last-child {
    font-size:
      0.75rem !important;
  }
}



/* =========================================================
   MOBILE — CIELO PIU STRETTO E SFONDO V3
   ========================================================= */

/*
 * Sfondo esterno leggermente più scuro.
 * Pannelli, tabella e schede mantengono i propri colori.
 */

:root {
  --page-sky-top: #bbd2e5;
  --page-sky-mid: #aec9df;
  --page-sky-bottom: #c8dde9;
}


html {
  background:
    var(--page-sky-mid) !important;
}


body {
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(53, 118, 180, 0.20),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(76, 143, 201, 0.16),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      var(--page-sky-top) 0%,
      var(--page-sky-mid) 54%,
      var(--page-sky-bottom) 100%
    ) !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

  /*
   * Ora e temperatura guadagnano 4 px ciascuna.
   * La colonna centrale dello stato del cielo si restringe
   * complessivamente di 8 px.
   */

  #forecastBody tr {
    grid-template-columns:
      68px
      minmax(0, 1fr)
      68px !important;
  }


  /*
   * Riduce leggermente anche il margine interno
   * della colonna centrale.
   */

  #forecastBody td:nth-child(2) {
    padding:
      0
      8px !important;
  }


  #forecastBody .sky-cell {
    gap:
      7px !important;
  }
}


@media (max-width: 390px) {

  #forecastBody tr {
    grid-template-columns:
      62px
      minmax(0, 1fr)
      62px !important;
  }


  #forecastBody td:nth-child(2) {
    padding:
      0
      7px !important;
  }


  #forecastBody .sky-cell {
    gap:
      6px !important;
  }
}



/* =========================================================
   TIPOGRAFIA — ORA E TEMPERATURA PESO NORMALE V1
   ========================================================= */

/*
 * L'HTML contiene elementi <strong>, quindi il peso viene
 * corretto sia sulla cella sia sull'elemento interno.
 * Regola valida per desktop e mobile.
 */

#forecastBody td:nth-child(1),
#forecastBody td:nth-child(1) strong,
#forecastBody td:nth-child(3),
#forecastBody td:nth-child(3) strong {
  font-weight: 500 !important;
}



/* =========================================================
   DESKTOP — SEPARATORE TEMPERATURA UMIDITA DOPPIO V1
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Raddoppia il separatore posto dopo la colonna
   * Temperatura, distinguendo maggiormente i dati
   * termici dalle informazioni successive.
   */

  .forecast-table
  thead
  th:nth-child(3),

  #forecastBody
  td:nth-child(3) {
    border-right-width:
      2px !important;

    border-right-style:
      solid !important;

    border-right-color:
      rgba(62, 102, 141, 0.34) !important;
  }


  /*
   * Sulla fascia attuale gialla il separatore assume
   * la stessa tonalità calda degli altri bordi.
   */

  #forecastBody
  tr.current-row
  td:nth-child(3) {
    border-right-color:
      rgba(137, 103, 12, 0.38) !important;
  }
}



/* =========================================================
   DESKTOP — SFONDO TENUE COLONNE SECONDARIE V1
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Dalla colonna Umidità in poi viene applicata
   * una versione più chiara dello sfondo della riga.
   */

  #forecastBody
  tr:not(.current-row):nth-child(odd)
  > td:nth-child(n+4) {
    background:
      #f1f7fc !important;
  }


  #forecastBody
  tr:not(.current-row):nth-child(even)
  > td:nth-child(n+4) {
    background:
      #fafcfe !important;
  }


  /*
   * Nella fascia attuale il lato destro assume
   * una tonalità giallo crema più tenue.
   */

  #forecastBody
  tr.current-row
  > td:nth-child(n+4) {
    background:
      #fff9df !important;
  }


  /*
   * Mantiene la differenza anche durante il passaggio
   * del mouse, senza introdurre un hover evidente.
   */

  #forecastBody
  tr:not(.current-row):nth-child(odd):hover
  > td:nth-child(n+4) {
    background:
      #eef5fa !important;
  }


  #forecastBody
  tr:not(.current-row):nth-child(even):hover
  > td:nth-child(n+4) {
    background:
      #f7fafc !important;
  }


  #forecastBody
  tr.current-row:hover
  > td:nth-child(n+4) {
    background:
      #fff7d7 !important;
  }
}



/* =========================================================
   DESKTOP — RIGHE BIANCHE UNIFORMI V1
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Nelle righe bianche, le colonne a destra della
   * doppia linea mantengono esattamente lo stesso
   * sfondo del lato sinistro.
   */

  #forecastBody
  tr:not(.current-row):nth-child(even)
  > td:nth-child(n+4) {
    background:
      transparent !important;
  }


  /*
   * Anche durante l'hover il lato destro eredita
   * lo stesso colore applicato all'intera riga.
   */

  #forecastBody
  tr:not(.current-row):nth-child(even):hover
  > td:nth-child(n+4) {
    background:
      transparent !important;
  }
}



/* =========================================================
   DESKTOP — SEPARATORE TEMPERATURA UMIDITA NORMALE V1
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Riporta a 1 px il separatore tra Temperatura
   * e Umidità, mantenendo la tonalità esistente.
   */

  .forecast-table
  thead
  th:nth-child(3),

  #forecastBody
  td:nth-child(3) {
    border-right-width:
      1px !important;
  }
}



/* =========================================================
   DESKTOP — RACCORDO CURVO COLONNA UMIDITA V1
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Riga celeste:
   * la cella Umidità collega la tonalità principale
   * della parte sinistra con quella più tenue a destra.
   *
   * Il gradiente ellittico produce linee di transizione
   * curve, più morbide di una sfumatura lineare.
   */

  #forecastBody
  tr:not(.current-row):nth-child(odd)
  > td:nth-child(4) {
    background:
      radial-gradient(
        ellipse 185% 145%
        at -32% 50%,

        var(--forecast-row-blue) 0%,
        var(--forecast-row-blue) 38%,
        #e7f2fa 62%,
        #edf6fb 82%,
        #f1f7fc 100%
      ) !important;
  }


  /*
   * Intervallo attuale:
   * raccordo equivalente nella gamma giallo-crema.
   */

  #forecastBody
  tr.current-row
  > td:nth-child(4) {
    background:
      radial-gradient(
        ellipse 185% 145%
        at -32% 50%,

        #fff3c2 0%,
        #fff3c2 38%,
        #fff5cb 62%,
        #fff7d5 82%,
        #fff9df 100%
      ) !important;
  }


  /*
   * Durante l'hover la sfumatura segue le tonalità
   * leggermente modificate della riga.
   */

  #forecastBody
  tr:not(.current-row):nth-child(odd):hover
  > td:nth-child(4) {
    background:
      radial-gradient(
        ellipse 185% 145%
        at -32% 50%,

        #deedf8 0%,
        #deedf8 38%,
        #e4f0f8 62%,
        #eaf3f9 82%,
        #eef5fa 100%
      ) !important;
  }


  #forecastBody
  tr.current-row:hover
  > td:nth-child(4) {
    background:
      radial-gradient(
        ellipse 185% 145%
        at -32% 50%,

        #ffedaa 0%,
        #ffedaa 38%,
        #fff0b8 62%,
        #fff3c7 82%,
        #fff7d7 100%
      ) !important;
  }


  /*
   * Le righe bianche restano uniformi:
   * non occorre alcun raccordo cromatico.
   */

  #forecastBody
  tr:not(.current-row):nth-child(even)
  > td:nth-child(4),

  #forecastBody
  tr:not(.current-row):nth-child(even):hover
  > td:nth-child(4) {
    background:
      transparent !important;
  }
}



/* =========================================================
   DESKTOP — RACCORDO UMIDITA CONCENTRATO A SINISTRA V2
   ========================================================= */

@media (min-width: 761px) {

  /*
   * La maggior parte della variazione cromatica avviene
   * nel primo terzo della cella Umidità.
   *
   * L'ellisse conserva un andamento curvo, mentre la parte
   * destra raggiunge rapidamente la tonalità più tenue.
   */


  /* Riga celeste */

  #forecastBody
  tr:not(.current-row):nth-child(odd)
  > td:nth-child(4) {
    background:
      radial-gradient(
        ellipse 62% 165%
        at -4% 50%,

        var(--forecast-row-blue) 0%,
        var(--forecast-row-blue) 10%,
        #e6f1f9 24%,
        #ebf4fa 40%,
        #f0f7fc 57%,
        #f1f7fc 68%,
        #f1f7fc 100%
      ) !important;
  }


  /* Intervallo attuale giallo */

  #forecastBody
  tr.current-row
  > td:nth-child(4) {
    background:
      radial-gradient(
        ellipse 62% 165%
        at -4% 50%,

        #fff3c2 0%,
        #fff3c2 10%,
        #fff5cc 24%,
        #fff7d6 40%,
        #fff9de 57%,
        #fff9df 68%,
        #fff9df 100%
      ) !important;
  }


  /* Hover molto leggero della riga celeste */

  #forecastBody
  tr:not(.current-row):nth-child(odd):hover
  > td:nth-child(4) {
    background:
      radial-gradient(
        ellipse 62% 165%
        at -4% 50%,

        #deedf8 0%,
        #deedf8 10%,
        #e3eff7 24%,
        #e8f2f8 40%,
        #edf5fa 57%,
        #eef5fa 68%,
        #eef5fa 100%
      ) !important;
  }


  /* Hover della fascia attuale */

  #forecastBody
  tr.current-row:hover
  > td:nth-child(4) {
    background:
      radial-gradient(
        ellipse 62% 165%
        at -4% 50%,

        #ffedaa 0%,
        #ffedaa 10%,
        #fff0b9 24%,
        #fff3c8 40%,
        #fff6d4 57%,
        #fff7d7 68%,
        #fff7d7 100%
      ) !important;
  }


  /*
   * Le righe bianche continuano a essere uniformi.
   */

  #forecastBody
  tr:not(.current-row):nth-child(even)
  > td:nth-child(4),

  #forecastBody
  tr:not(.current-row):nth-child(even):hover
  > td:nth-child(4) {
    background:
      transparent !important;
  }
}



/* =========================================================
   SFONDO PAGINA — ORIZZONTALE E DIAGONALE V4
   ========================================================= */

:root {
  --page-sky-left: #9fbed6;
  --page-sky-center: #b3cee1;
  --page-sky-right: #c7ddea;
}


/*
 * Colore di riserva durante il caricamento iniziale.
 */

html {
  background:
    var(--page-sky-center) !important;
}


/*
 * Primo livello:
 * lieve variazione diagonale dall'alto a sinistra
 * verso il basso a destra.
 *
 * Secondo livello:
 * variazione principale orizzontale, più scura
 * a sinistra e più luminosa verso destra.
 */

body {
  background-color:
    var(--page-sky-center) !important;

  background-image:

    linear-gradient(
      135deg,

      rgba(48, 107, 158, 0.18) 0%,
      rgba(73, 130, 178, 0.09) 24%,
      rgba(255, 255, 255, 0.02) 49%,
      rgba(227, 241, 250, 0.13) 73%,
      rgba(245, 250, 253, 0.20) 100%
    ),

    linear-gradient(
      90deg,

      var(--page-sky-left) 0%,
      #a8c5dc 24%,
      var(--page-sky-center) 51%,
      #bfd6e6 76%,
      var(--page-sky-right) 100%
    ) !important;

  background-repeat:
    no-repeat !important;

  background-size:
    100% 100%,
    100% 100% !important;

  background-attachment:
    scroll !important;
}


/*
 * I contenitori strutturali rimangono trasparenti,
 * lasciando visibile la variazione dello sfondo.
 */

main,
.page-shell,
.forecast-section,
.app-shell {
  background:
    transparent !important;
}



/* =========================================================
   SFONDO PAGINA — ORIZZONTALE DIAGONALE SCURO V5
   ========================================================= */

:root {
  --page-sky-left: #86a6bf;
  --page-sky-center: #9bb7cc;
  --page-sky-right: #b1c8d8;
}


html {
  background:
    var(--page-sky-center) !important;
}


body {
  background-color:
    var(--page-sky-center) !important;

  background-image:

    /*
     * Variazione diagonale più profonda e con una
     * componente luminosa sensibilmente ridotta.
     */

    linear-gradient(
      135deg,

      rgba(32, 80, 122, 0.25) 0%,
      rgba(48, 99, 141, 0.15) 25%,
      rgba(93, 136, 170, 0.04) 50%,
      rgba(190, 213, 229, 0.08) 74%,
      rgba(220, 233, 241, 0.12) 100%
    ),

    /*
     * Gradiente orizzontale: il lato destro resta più
     * chiaro, ma senza raggiungere tonalità troppo accese.
     */

    linear-gradient(
      90deg,

      var(--page-sky-left) 0%,
      #8eacc3 24%,
      var(--page-sky-center) 51%,
      #a6bfd1 76%,
      var(--page-sky-right) 100%
    ) !important;

  background-repeat:
    no-repeat !important;

  background-size:
    100% 100%,
    100% 100% !important;

  background-attachment:
    scroll !important;
}


/*
 * Mantiene visibile il gradiente negli spazi esterni
 * alle tabelle e ai pannelli.
 */

main,
.page-shell,
.forecast-section,
.app-shell {
  background:
    transparent !important;
}



/* =========================================================
   CAMPI LOCALITA — COLORE SFONDO E FOCUS BIANCO V1
   ========================================================= */

:root {
  --field-sky-background:
    var(--page-sky-center, #9bb7cc);

  --field-sky-border:
    rgba(42, 83, 119, 0.38);

  --field-sky-text:
    #102f4c;
}


/* ---------------------------------------------------------
   MENU CITTÀ / REGIONI
   --------------------------------------------------------- */

/*
 * Anche il contenitore del menu assume la tonalità
 * dello sfondo, così non rimane un pannello bianco attorno
 * al selettore.
 */

.location-picker {
  background:
    var(--field-sky-background) !important;

  border-color:
    var(--field-sky-border) !important;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}


/*
 * Il select rimane trasparente rispetto al suo contenitore.
 */

.location-picker select,
#locationSelect {
  background-color:
    transparent !important;

  color:
    var(--field-sky-text) !important;

  border-color:
    transparent !important;

  transition:
    background-color 140ms ease,
    color 140ms ease;
}


/*
 * Quando si clicca o si naviga con la tastiera,
 * l'intero controllo diventa bianco.
 */

.location-picker:focus-within {
  background:
    #ffffff !important;

  border-color:
    rgba(22, 119, 255, 0.68) !important;

  box-shadow:
    0 0 0 3px
    rgba(22, 119, 255, 0.14),
    0 8px 24px
    rgba(25, 66, 108, 0.10) !important;
}


.location-picker select:focus,
.location-picker select:focus-visible,
#locationSelect:focus,
#locationSelect:focus-visible {
  background-color:
    #ffffff !important;

  color:
    #102f4c !important;

  outline:
    none !important;
}


/* ---------------------------------------------------------
   CAMPI DELL'INDIRIZZO
   --------------------------------------------------------- */

.address-form input,
.address-form select,
.address-form textarea,

#addressCityInput,
#addressPostcodeInput,
#addressStreetInput,
#addressNumberInput {
  background:
    var(--field-sky-background) !important;

  color:
    var(--field-sky-text) !important;

  border-color:
    var(--field-sky-border) !important;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}


/*
 * Al focus il singolo campo diventa bianco.
 */

.address-form input:focus,
.address-form input:focus-visible,
.address-form select:focus,
.address-form select:focus-visible,
.address-form textarea:focus,
.address-form textarea:focus-visible,

#addressCityInput:focus,
#addressCityInput:focus-visible,
#addressPostcodeInput:focus,
#addressPostcodeInput:focus-visible,
#addressStreetInput:focus,
#addressStreetInput:focus-visible,
#addressNumberInput:focus,
#addressNumberInput:focus-visible {
  background:
    #ffffff !important;

  color:
    #102f4c !important;

  border-color:
    rgba(22, 119, 255, 0.72) !important;

  box-shadow:
    0 0 0 3px
    rgba(22, 119, 255, 0.14) !important;

  outline:
    none !important;
}


/*
 * Testo segnaposto sufficientemente scuro
 * anche sullo sfondo azzurro.
 */

.address-form input::placeholder,
.address-form textarea::placeholder {
  color:
    rgba(16, 47, 76, 0.68) !important;

  opacity:
    1;
}


/*
 * Le opzioni aperte dal menu nativo rimangono bianche
 * per garantire la massima leggibilità.
 */

.location-picker option,
.address-form option,
#locationSelect option {
  background:
    #ffffff;

  color:
    #102f4c;
}



/* =========================================================
   CAMPI LOCALITA — SFONDO PAGINA REALE V2
   ========================================================= */

/*
 * I contenitori diventano trasparenti: in questo modo
 * non viene simulato il colore dello sfondo, ma rimane
 * realmente visibile il gradiente applicato al body.
 */

.location-bar,
.location-picker,
#addressForm,
.address-form {
  background-color:
    transparent !important;

  background-image:
    none !important;
}


/*
 * Rimuove eventuali fondi bianchi dai contenitori interni
 * del modulo indirizzo.
 */

#addressForm
:where(
  div,
  fieldset,
  label
) {
  background-color:
    transparent !important;

  background-image:
    none !important;
}


/* ---------------------------------------------------------
   MENU CITTÀ E REGIONI
   --------------------------------------------------------- */

.location-picker {
  border-color:
    rgba(31, 70, 103, 0.42) !important;

  box-shadow:
    0 5px 16px
    rgba(24, 57, 87, 0.08) !important;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}


.location-picker select,
#locationSelect {
  background-color:
    transparent !important;

  color:
    #102f4c !important;

  border-color:
    transparent !important;

  box-shadow:
    none !important;
}


/*
 * Al clic diventa bianco l'intero controllo,
 * compresa l'area attorno al menu.
 */

.location-picker:focus-within {
  background-color:
    #ffffff !important;

  background-image:
    none !important;

  border-color:
    rgba(22, 119, 255, 0.70) !important;

  box-shadow:
    0 0 0 3px
    rgba(22, 119, 255, 0.14),
    0 8px 22px
    rgba(24, 57, 87, 0.11) !important;
}


.location-picker:focus-within select,
#locationSelect:focus,
#locationSelect:focus-visible {
  background-color:
    transparent !important;

  color:
    #102f4c !important;

  outline:
    none !important;
}


/* ---------------------------------------------------------
   CAMPI DELL'INDIRIZZO
   --------------------------------------------------------- */

#addressForm input,
#addressForm select,
#addressForm textarea,

.address-form input,
.address-form select,
.address-form textarea,

#addressCityInput,
#addressPostcodeInput,
#addressStreetInput,
#addressNumberInput {
  background-color:
    transparent !important;

  background-image:
    none !important;

  color:
    #102f4c !important;

  border-color:
    rgba(31, 70, 103, 0.42) !important;

  box-shadow:
    none !important;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}


/*
 * Soltanto il campo attivo diventa bianco.
 */

#addressForm input:focus,
#addressForm input:focus-visible,
#addressForm select:focus,
#addressForm select:focus-visible,
#addressForm textarea:focus,
#addressForm textarea:focus-visible,

#addressCityInput:focus,
#addressCityInput:focus-visible,
#addressPostcodeInput:focus,
#addressPostcodeInput:focus-visible,
#addressStreetInput:focus,
#addressStreetInput:focus-visible,
#addressNumberInput:focus,
#addressNumberInput:focus-visible {
  background-color:
    #ffffff !important;

  background-image:
    none !important;

  color:
    #102f4c !important;

  border-color:
    rgba(22, 119, 255, 0.72) !important;

  box-shadow:
    0 0 0 3px
    rgba(22, 119, 255, 0.14) !important;

  outline:
    none !important;
}


/*
 * Placeholder leggibile sul gradiente scuro.
 */

#addressForm input::placeholder,
#addressForm textarea::placeholder,
.address-form input::placeholder,
.address-form textarea::placeholder {
  color:
    rgba(10, 40, 67, 0.72) !important;

  opacity:
    1 !important;
}


/*
 * Le opzioni del menu aperto sono gestite dal browser
 * e rimangono bianche per garantire leggibilità.
 */

#locationSelect option,
#addressForm option,
.address-form option {
  background-color:
    #ffffff;

  color:
    #102f4c;
}



/* =========================================================
   CAMPI LOCALITA — VETRO CHIARO V3
   ========================================================= */

/*
 * Il bianco semitrasparente conserva il gradiente
 * sottostante, ma aumenta leggermente la luminosità
 * e la leggibilità dei controlli.
 */

.location-picker {
  background-color:
    rgba(255, 255, 255, 0.18) !important;

  background-image:
    none !important;

  border-color:
    rgba(35, 72, 104, 0.46) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.26),
    0 5px 16px
    rgba(20, 51, 80, 0.08) !important;

  -webkit-backdrop-filter:
    brightness(1.06)
    saturate(0.96);

  backdrop-filter:
    brightness(1.06)
    saturate(0.96);
}


.location-picker select,
#locationSelect {
  background-color:
    transparent !important;

  color:
    #0c2f4d !important;
}


/* ---------------------------------------------------------
   CAMPI INDIRIZZO
   --------------------------------------------------------- */

#addressForm input,
#addressForm select,
#addressForm textarea,

.address-form input,
.address-form select,
.address-form textarea,

#addressCityInput,
#addressPostcodeInput,
#addressStreetInput,
#addressNumberInput {
  background-color:
    rgba(255, 255, 255, 0.18) !important;

  background-image:
    none !important;

  color:
    #0c2f4d !important;

  border-color:
    rgba(35, 72, 104, 0.46) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.24),
    0 4px 13px
    rgba(20, 51, 80, 0.06) !important;

  -webkit-backdrop-filter:
    brightness(1.06)
    saturate(0.96);

  backdrop-filter:
    brightness(1.06)
    saturate(0.96);
}


/*
 * Al focus il controllo diventa completamente bianco.
 */

.location-picker:focus-within {
  background-color:
    #ffffff !important;

  border-color:
    rgba(22, 119, 255, 0.72) !important;
}


#addressForm input:focus,
#addressForm input:focus-visible,
#addressForm select:focus,
#addressForm select:focus-visible,
#addressForm textarea:focus,
#addressForm textarea:focus-visible,

#addressCityInput:focus,
#addressCityInput:focus-visible,
#addressPostcodeInput:focus,
#addressPostcodeInput:focus-visible,
#addressStreetInput:focus,
#addressStreetInput:focus-visible,
#addressNumberInput:focus,
#addressNumberInput:focus-visible {
  background-color:
    #ffffff !important;

  border-color:
    rgba(22, 119, 255, 0.72) !important;
}


/*
 * Placeholder leggermente più scuro.
 */

#addressForm input::placeholder,
#addressForm textarea::placeholder,
.address-form input::placeholder,
.address-form textarea::placeholder {
  color:
    rgba(8, 39, 65, 0.76) !important;
}



/* =========================================================
   CAMPI LOCALITA — VETRO SCURO V4
   ========================================================= */

:root {
  --field-glass-dark:
    rgba(20, 53, 82, 0.11);

  --field-glass-dark-border:
    rgba(25, 60, 91, 0.52);

  --field-glass-dark-text:
    #082b48;
}


/*
 * Il gradiente della pagina rimane visibile,
 * ma viene leggermente scurito dentro al controllo.
 */

.location-picker {
  background-color:
    var(--field-glass-dark) !important;

  background-image:
    none !important;

  border-color:
    var(--field-glass-dark-border) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.10),
    0 5px 16px
    rgba(15, 43, 69, 0.10) !important;

  -webkit-backdrop-filter:
    brightness(0.96)
    saturate(1.02);

  backdrop-filter:
    brightness(0.96)
    saturate(1.02);
}


.location-picker select,
#locationSelect {
  background-color:
    transparent !important;

  color:
    var(--field-glass-dark-text) !important;
}


/* ---------------------------------------------------------
   CAMPI DELL'INDIRIZZO
   --------------------------------------------------------- */

#addressForm input,
#addressForm select,
#addressForm textarea,

.address-form input,
.address-form select,
.address-form textarea,

#addressCityInput,
#addressPostcodeInput,
#addressStreetInput,
#addressNumberInput {
  background-color:
    var(--field-glass-dark) !important;

  background-image:
    none !important;

  color:
    var(--field-glass-dark-text) !important;

  border-color:
    var(--field-glass-dark-border) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.08),
    0 4px 13px
    rgba(15, 43, 69, 0.08) !important;

  -webkit-backdrop-filter:
    brightness(0.96)
    saturate(1.02);

  backdrop-filter:
    brightness(0.96)
    saturate(1.02);
}


/*
 * Al focus il campo diventa bianco pieno.
 */

.location-picker:focus-within {
  background-color:
    #ffffff !important;

  border-color:
    rgba(22, 119, 255, 0.72) !important;

  -webkit-backdrop-filter:
    none;

  backdrop-filter:
    none;
}


#addressForm input:focus,
#addressForm input:focus-visible,
#addressForm select:focus,
#addressForm select:focus-visible,
#addressForm textarea:focus,
#addressForm textarea:focus-visible,

#addressCityInput:focus,
#addressCityInput:focus-visible,
#addressPostcodeInput:focus,
#addressPostcodeInput:focus-visible,
#addressStreetInput:focus,
#addressStreetInput:focus-visible,
#addressNumberInput:focus,
#addressNumberInput:focus-visible {
  background-color:
    #ffffff !important;

  color:
    #102f4c !important;

  border-color:
    rgba(22, 119, 255, 0.72) !important;

  box-shadow:
    0 0 0 3px
    rgba(22, 119, 255, 0.14) !important;

  -webkit-backdrop-filter:
    none;

  backdrop-filter:
    none;
}


/*
 * Placeholder più leggibile sulla velatura scura.
 */

#addressForm input::placeholder,
#addressForm textarea::placeholder,
.address-form input::placeholder,
.address-form textarea::placeholder {
  color:
    rgba(6, 37, 62, 0.78) !important;

  opacity:
    1 !important;
}



/* =========================================================
   CAMPI LOCALITA — VETRO PIU SCURO V5
   ========================================================= */

:root {
  --field-glass-dark:
    rgba(15, 47, 76, 0.15);

  --field-glass-dark-border:
    rgba(20, 53, 83, 0.58);
}


.location-picker,

#addressForm input,
#addressForm select,
#addressForm textarea,

.address-form input,
.address-form select,
.address-form textarea,

#addressCityInput,
#addressPostcodeInput,
#addressStreetInput,
#addressNumberInput {
  background-color:
    var(--field-glass-dark) !important;

  border-color:
    var(--field-glass-dark-border) !important;

  -webkit-backdrop-filter:
    brightness(0.94)
    saturate(1.03);

  backdrop-filter:
    brightness(0.94)
    saturate(1.03);
}


/*
 * Al focus i controlli continuano a diventare bianchi.
 */

.location-picker:focus-within,

#addressForm input:focus,
#addressForm input:focus-visible,
#addressForm select:focus,
#addressForm select:focus-visible,
#addressForm textarea:focus,
#addressForm textarea:focus-visible,

#addressCityInput:focus,
#addressCityInput:focus-visible,
#addressPostcodeInput:focus,
#addressPostcodeInput:focus-visible,
#addressStreetInput:focus,
#addressStreetInput:focus-visible,
#addressNumberInput:focus,
#addressNumberInput:focus-visible {
  background-color:
    #ffffff !important;

  -webkit-backdrop-filter:
    none;

  backdrop-filter:
    none;
}



/* =========================================================
   CAMPI LOCALITA — TRASPARENTI CON BORDO LUMINOSO V6
   ========================================================= */

:root {
  --field-light-border:
    rgba(225, 241, 252, 0.72);

  --field-light-outline:
    rgba(210, 235, 252, 0.24);

  --field-light-glow:
    rgba(202, 232, 252, 0.25);
}


/*
 * I controlli mostrano esattamente lo sfondo della pagina.
 * La loro forma viene evidenziata soltanto da un bordo
 * chiaro e da una luminosità esterna molto contenuta.
 */

.location-picker,

#addressForm input,
#addressForm select,
#addressForm textarea,

.address-form input,
.address-form select,
.address-form textarea,

#addressCityInput,
#addressPostcodeInput,
#addressStreetInput,
#addressNumberInput {
  background-color:
    transparent !important;

  background-image:
    none !important;

  color:
    #092e4c !important;

  border:
    1px solid
    var(--field-light-border) !important;

  box-shadow:
    0 0 0 1px
    var(--field-light-outline),

    0 0 7px
    var(--field-light-glow),

    inset 0 1px 0
    rgba(255, 255, 255, 0.16) !important;

  -webkit-backdrop-filter:
    none !important;

  backdrop-filter:
    none !important;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}


/*
 * Il menu interno rimane trasparente rispetto
 * al contenitore esterno.
 */

.location-picker select,
#locationSelect {
  background-color:
    transparent !important;

  background-image:
    none !important;

  color:
    #092e4c !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


/*
 * Focus: bianco pieno e bordo azzurro più netto.
 */

.location-picker:focus-within {
  background-color:
    #ffffff !important;

  border-color:
    rgba(22, 119, 255, 0.76) !important;

  box-shadow:
    0 0 0 3px
    rgba(22, 119, 255, 0.15),

    0 7px 20px
    rgba(18, 56, 91, 0.10) !important;
}


#addressForm input:focus,
#addressForm input:focus-visible,
#addressForm select:focus,
#addressForm select:focus-visible,
#addressForm textarea:focus,
#addressForm textarea:focus-visible,

.address-form input:focus,
.address-form input:focus-visible,
.address-form select:focus,
.address-form select:focus-visible,
.address-form textarea:focus,
.address-form textarea:focus-visible,

#addressCityInput:focus,
#addressCityInput:focus-visible,
#addressPostcodeInput:focus,
#addressPostcodeInput:focus-visible,
#addressStreetInput:focus,
#addressStreetInput:focus-visible,
#addressNumberInput:focus,
#addressNumberInput:focus-visible {
  background-color:
    #ffffff !important;

  color:
    #102f4c !important;

  border-color:
    rgba(22, 119, 255, 0.76) !important;

  box-shadow:
    0 0 0 3px
    rgba(22, 119, 255, 0.15),

    0 7px 20px
    rgba(18, 56, 91, 0.10) !important;

  outline:
    none !important;
}


/*
 * Placeholder leggibile sullo sfondo della pagina.
 */

#addressForm input::placeholder,
#addressForm textarea::placeholder,
.address-form input::placeholder,
.address-form textarea::placeholder {
  color:
    rgba(6, 39, 66, 0.76) !important;

  opacity:
    1 !important;
}



/* =========================================================
   SELETTORE LOCALITA — LARGHEZZA ADATTIVA V1
   ========================================================= */

/*
 * Stato chiuso:
 * sfondo reale della pagina, contorno luminoso
 * e testo bianco.
 */

.location-picker:not(:focus-within) {
  color:
    #ffffff !important;
}


.location-picker:not(:focus-within) .pin {
  color:
    #ffffff !important;

  text-shadow:
    0 1px 2px
    rgba(5, 29, 52, 0.35);
}


.location-picker:not(:focus-within)
#locationSelect {
  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;

  text-shadow:
    0 1px 2px
    rgba(5, 29, 52, 0.38);
}


/*
 * Durante il focus il controllo diventa bianco,
 * quindi testo e icona tornano scuri.
 */

.location-picker:focus-within .pin {
  color:
    #116cca !important;

  text-shadow:
    none;
}


.location-picker:focus-within
#locationSelect {
  color:
    #102f4c !important;

  -webkit-text-fill-color:
    #102f4c !important;

  text-shadow:
    none;
}


/*
 * Le opzioni dell'elenco aperto devono mantenere
 * testo scuro su sfondo bianco.
 */

#locationSelect option {
  background:
    #ffffff !important;

  color:
    #102f4c !important;

  -webkit-text-fill-color:
    #102f4c !important;

  text-shadow:
    none;
}


/* ---------------------------------------------------------
   DESKTOP — LARGHEZZA BASATA SUL NOME SELEZIONATO
   --------------------------------------------------------- */

@media (min-width: 761px) {

  .location-picker {
    flex:
      0
      0
      auto !important;

    width:
      max-content !important;

    min-width:
      0 !important;

    max-width:
      calc(100vw - 80px) !important;
  }


  #locationSelect {
    flex:
      0
      0
      auto !important;

    width:
      var(
        --location-select-width,
        180px
      ) !important;

    min-width:
      0 !important;

    max-width:
      min(
        440px,
        calc(100vw - 150px)
      ) !important;

    box-sizing:
      border-box !important;
  }
}


/* ---------------------------------------------------------
   MOBILE — LARGHEZZA STABILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .location-picker {
    width:
      100% !important;

    max-width:
      100% !important;
  }


  #locationSelect {
    flex:
      1
      1
      auto !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;
  }
}



/* =========================================================
   SELETTORE LOCALITA — OVERRIDE ADATTIVO V2
   ========================================================= */

@media (min-width: 761px) {

  .location-picker {
    display:
      inline-flex !important;

    flex:
      0
      0
      auto !important;

    width:
      max-content !important;

    min-width:
      0 !important;

    max-width:
      calc(100vw - 80px) !important;
  }


  #locationSelect {
    flex:
      0
      0
      auto !important;

    min-width:
      0 !important;

    max-width:
      min(
        440px,
        calc(100vw - 150px)
      ) !important;

    field-sizing:
      content;
  }
}


@media (max-width: 760px) {

  .location-picker,
  #locationSelect {
    width:
      100% !important;

    max-width:
      100% !important;
  }
}



/* =========================================================
   SELETTORE LOCALITA — TESTO COMPLETO V3
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Impedisce al contenitore e al menu di comprimersi
   * dopo il calcolo JavaScript della larghezza.
   */

  .location-picker {
    flex-shrink:
      0 !important;

    min-width:
      max-content !important;
  }


  #locationSelect {
    flex:
      0
      0
      auto !important;

    flex-shrink:
      0 !important;

    min-width:
      170px !important;

    max-width:
      min(
        520px,
        calc(100vw - 170px)
      ) !important;

    /*
     * Evita che field-sizing: content di Chrome
     * prevalga sulla larghezza calcolata via JavaScript.
     */

    field-sizing:
      fixed !important;

    white-space:
      nowrap !important;

    text-overflow:
      clip !important;
  }
}



/* =========================================================
   SELETTORE LOCALITA — TESTO VISIVO COMPLETO V5
   ========================================================= */

/*
 * Il contenitore si dimensiona in base alla normale
 * etichetta HTML, non più in base all'area interna
 * imprevedibile del select nativo.
 */

.location-picker {
  position:
    relative !important;

  display:
    inline-grid !important;

  grid-template-columns:
    auto
    max-content
    12px !important;

  align-items:
    center !important;

  column-gap:
    10px !important;

  width:
    max-content !important;

  min-width:
    0 !important;

  max-width:
    calc(100vw - 80px) !important;

  padding:
    0
    15px !important;

  overflow:
    hidden !important;
}


/*
 * Etichetta realmente visibile.
 */

.location-selected-label {
  display:
    block;

  grid-column:
    2;

  min-width:
    0;

  color:
    #ffffff;

  font: inherit;

  font-size:
    inherit;

  font-weight:
    750;

  line-height:
    1.2;

  letter-spacing:
    inherit;

  text-shadow:
    0 1px 2px
    rgba(5, 29, 52, 0.38);

  white-space:
    nowrap;

  pointer-events:
    none;
}


/*
 * Freccia completamente controllata.
 */

.location-picker::after {
  content:
    "";

  display:
    block !important;

  grid-column:
    3;

  position:
    static !important;

  width:
    7px;

  height:
    7px;

  margin:
    -4px
    0
    0
    1px;

  border-right:
    2px solid
    rgba(255, 255, 255, 0.92);

  border-bottom:
    2px solid
    rgba(255, 255, 255, 0.92);

  transform:
    rotate(45deg);

  filter:
    drop-shadow(
      0 1px 1px
      rgba(3, 31, 56, 0.35)
    );

  pointer-events:
    none;
}


/*
 * Il select nativo rimane sopra l'intera card:
 * continua quindi a ricevere clic, touch e tastiera,
 * ma il suo testo chiuso non viene più visualizzato.
 */

.location-picker #locationSelect {
  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    2;

  width:
    100% !important;

  height:
    100% !important;

  min-width:
    0 !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  opacity:
    0.001 !important;

  cursor:
    pointer;

  appearance:
    auto !important;

  -webkit-appearance:
    menulist !important;
}


/*
 * Il simbolo della località resta visibile sopra
 * il selettore trasparente.
 */

.location-picker .pin {
  grid-column:
    1;

  position:
    relative;

  z-index:
    3;

  color:
    #ffffff !important;

  text-shadow:
    0 1px 2px
    rgba(5, 29, 52, 0.35);

  pointer-events:
    none;
}


/*
 * Stato attivo: fondo bianco, testo e freccia scuri.
 */

.location-picker:focus-within
.location-selected-label {
  color:
    #102f4c;

  text-shadow:
    none;
}


.location-picker:focus-within
.pin {
  color:
    #116cca !important;

  text-shadow:
    none;
}


.location-picker:focus-within::after {
  border-right-color:
    #145c9f;

  border-bottom-color:
    #145c9f;

  filter:
    none;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .location-picker {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      12px !important;

    width:
      100% !important;

    max-width:
      100% !important;
  }


  .location-selected-label {
    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }
}



/* =========================================================
   SELETTORE LOCALITA — DISTANZA ICONA TESTO V6
   ========================================================= */

/*
 * Riserva uno spazio preciso all'icona e impedisce
 * che il nome della località possa sovrapporsi.
 */

.location-picker {
  grid-template-columns:
    24px
    max-content
    12px !important;

  column-gap:
    12px !important;
}


/*
 * Neutralizza eventuali posizionamenti precedenti
 * applicati all'icona della località.
 */

.location-picker .pin {
  grid-column:
    1 !important;

  position:
    static !important;

  inset:
    auto !important;

  display:
    grid !important;

  place-items:
    center !important;

  width:
    24px !important;

  min-width:
    24px !important;

  height:
    24px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  transform:
    none !important;

  line-height:
    1 !important;
}


/*
 * Il testo inizia sempre dopo la colonna dell'icona.
 */

.location-selected-label {
  grid-column:
    2 !important;

  position:
    static !important;

  margin:
    0 !important;

  padding:
    0
    2px
    0
    0 !important;

  transform:
    none !important;
}


/*
 * Mantiene la stessa separazione sui telefoni,
 * lasciando al testo tutto lo spazio restante.
 */

@media (max-width: 760px) {

  .location-picker {
    grid-template-columns:
      24px
      minmax(0, 1fr)
      12px !important;

    column-gap:
      11px !important;
  }
}



/* =========================================================
   SELETTORE LOCALITA — CONTORNO PIU AMPIO V7
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Rende il controllo leggermente più abbondante,
   * mantenendo la larghezza adattiva al nome selezionato.
   */

  .location-picker {
    min-height:
      52px !important;

    padding:
      0
      20px !important;

    border-width:
      2px !important;

    border-style:
      solid !important;

    border-color:
      rgba(229, 244, 255, 0.78) !important;

    border-radius:
      13px !important;

    box-shadow:
      0 0 0 1px
      rgba(206, 234, 252, 0.22),

      0 0 8px
      rgba(202, 232, 252, 0.24),

      inset 0 1px 0
      rgba(255, 255, 255, 0.18) !important;
  }


  /*
   * Icona e testo restano centrati verticalmente
   * nel controllo più alto.
   */

  .location-picker .pin,
  .location-selected-label {
    align-self:
      center !important;
  }


  /*
   * Anche nello stato attivo il bordo mantiene
   * lo stesso spessore.
   */

  .location-picker:focus-within {
    border-width:
      2px !important;

    border-color:
      rgba(22, 119, 255, 0.78) !important;

    box-shadow:
      0 0 0 3px
      rgba(22, 119, 255, 0.15),

      0 8px 22px
      rgba(18, 56, 91, 0.11) !important;
  }
}


/* =========================================================
   INDEX2 — BLOCCO CENTRALE E COLONNE COMPATTE V1
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Non vengono modificati font, altezza delle righe,
   * pulsanti o proporzioni verticali.
   *
   * Si riduce esclusivamente la larghezza massima
   * dell'area centrale.
   */

  html.compact-columns-preview {
    --compact-content-width:
      1360px;
  }


  html.compact-columns-preview
  .page-shell {
    width:
      min(
        calc(100% - 72px),
        var(--compact-content-width)
      ) !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;
  }


  /*
   * Tutte le sezioni interne seguono la nuova larghezza.
   */

  html.compact-columns-preview
  .location-bar,

  html.compact-columns-preview
  .day-tabs-wrap,

  html.compact-columns-preview
  .forecast-panel {
    width:
      100% !important;

    max-width:
      100% !important;
  }


  /*
   * Layout fisso: i contenuti non possono modificare
   * autonomamente la larghezza delle colonne.
   */

  html.compact-columns-preview
  .forecast-table {
    width:
      100% !important;

    table-layout:
      fixed !important;
  }


  /* -------------------------------------------------------
     COLONNE PRINCIPALI
     ------------------------------------------------------- */

  /*
   * Ora
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(1) {
    width:
      8% !important;
  }


  /*
   * Stato del cielo
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(2) {
    width:
      27% !important;
  }


  /*
   * Temperatura
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(3) {
    width:
      11% !important;
  }


  /* -------------------------------------------------------
     COLONNE SECONDARIE PIÙ STRETTE
     ------------------------------------------------------- */

  /*
   * Umidità
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(4) {
    width:
      7% !important;
  }


  /*
   * Temperatura percepita
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(5) {
    width:
      9% !important;
  }


  /*
   * Precipitazioni
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(6) {
    width:
      10% !important;
  }


  /*
   * Vento
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(7) {
    width:
      17% !important;
  }


  /*
   * Pressione
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(8) {
    width:
      11% !important;
  }


  /*
   * Nelle colonne secondarie diminuisce soltanto
   * lo spazio orizzontale interno.
   * La dimensione del testo rimane quella originale.
   */

  html.compact-columns-preview
  .forecast-table
  th:nth-child(n+4),

  html.compact-columns-preview
  #forecastBody
  td:nth-child(n+4) {
    padding-left:
      7px !important;

    padding-right:
      7px !important;
  }


  /*
   * Le intestazioni lunghe possono andare correttamente
   * su due righe senza allargare la tabella.
   */

  html.compact-columns-preview
  .forecast-table
  th:nth-child(n+4) {
    line-height:
      1.16 !important;

    overflow-wrap:
      normal;

    word-break:
      normal;

    white-space:
      normal;
  }


  /*
   * Evita che valori o testi lunghi deformino
   * le colonne secondarie.
   */

  html.compact-columns-preview
  #forecastBody
  td:nth-child(n+4) {
    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /*
   * La colonna dello stato del cielo conserva
   * spazio sufficiente per descrizioni lunghe.
   */

  html.compact-columns-preview
  #forecastBody
  td:nth-child(2)
  .sky-cell {
    min-width:
      0;
  }


  html.compact-columns-preview
  #forecastBody
  td:nth-child(2)
  .sky-cell
  > span:last-child {
    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }
}


/*
 * Mobile identico alla pagina originale.
 */

@media (max-width: 760px) {

  html.compact-columns-preview
  .page-shell {
    width:
      100% !important;
  }
}



/* =========================================================
   INDEX2 — PRESSIONE PRIMA DI VENTO V1
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Il blocco centrale viene leggermente compattato ancora.
   */

  html.compact-columns-preview {
    --compact-content-width:
      1320px;
  }


  /*
   * Distribuzione aggiornata:
   *
   * Ora              8%
   * Stato cielo     28%
   * Temperatura     11%
   * Umidità          7%
   * Temp percepita   9%
   * Precipitazioni  10%
   * Pressione        8%
   * Vento           19%
   *
   * Totale: 100%
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(1) {
    width:
      8% !important;
  }

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(2) {
    width:
      28% !important;
  }

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(3) {
    width:
      11% !important;
  }

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(4) {
    width:
      7% !important;
  }

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(5) {
    width:
      9% !important;
  }

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(6) {
    width:
      10% !important;
  }

  /*
   * Dopo l'inversione JS:
   * colonna 7 = Pressione
   * colonna 8 = Vento
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(7) {
    width:
      8% !important;
  }

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(8) {
    width:
      19% !important;
  }


  /*
   * Colonne secondarie un po' più serrate.
   */

  html.compact-columns-preview
  .forecast-table
  th:nth-child(n+4),

  html.compact-columns-preview
  #forecastBody
  td:nth-child(n+4) {
    padding-left:
      6px !important;

    padding-right:
      6px !important;
  }
}



/* =========================================================
   INDEX2 — BLOCCO 1120 E FOOTER TRASPARENTE V2
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Riduzione da 1320px a 1120px:
   * circa il 15% in meno.
   */

  html.compact-columns-preview {
    --compact-content-width:
      1120px;
  }


  html.compact-columns-preview
  .page-shell {
    width:
      min(
        calc(100% - 64px),
        var(--compact-content-width)
      ) !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;
  }


  /*
   * Nuova distribuzione delle colonne:
   *
   *  1 Ora               8%
   *  2 Stato cielo      25%
   *  3 Temperatura      12%
   *  4 Umidità           8%
   *  5 Temp. percepita  11%
   *  6 Precipitazioni   12%
   *  7 Pressione        10%
   *  8 Vento            14%
   *
   * Totale: 100%
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(1) {
    width:
      8% !important;
  }


  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(2) {
    width:
      25% !important;
  }


  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(3) {
    width:
      12% !important;
  }


  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(4) {
    width:
      8% !important;
  }


  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(5) {
    width:
      11% !important;
  }


  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(6) {
    width:
      12% !important;
  }


  /*
   * Dopo l'inversione:
   * 7 = Pressione
   * 8 = Vento
   */

  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(7) {
    width:
      10% !important;
  }


  html.compact-columns-preview
  .forecast-table
  :is(th, td):nth-child(8) {
    width:
      14% !important;
  }


  /*
   * Riduzione dello spazio interno delle celle.
   */

  html.compact-columns-preview
  .forecast-table
  th,

  html.compact-columns-preview
  #forecastBody
  td {
    padding-left:
      7px !important;

    padding-right:
      7px !important;
  }


  /*
   * Stato del cielo più raccolto.
   */

  html.compact-columns-preview
  #forecastBody
  td:nth-child(2)
  .sky-cell {
    gap:
      8px !important;

    min-width:
      0;
  }


  html.compact-columns-preview
  #forecastBody
  td:nth-child(2)
  .sky-cell
  > span:last-child {
    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /*
   * Vento più compatto.
   */

  html.compact-columns-preview
  #forecastBody
  td:nth-child(8) {
    padding-left:
      4px !important;

    padding-right:
      4px !important;
  }


  /*
   * FOOTER:
   * nessuna area grafica dedicata.
   * Restano soltanto le scritte sullo sfondo.
   */

  html.compact-columns-preview
  .source-footer {
    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      5px
      0
      0 !important;

    padding:
      8px
      2px
      3px !important;

    background:
      transparent !important;

    background-color:
      transparent !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    color:
      rgba(255, 255, 255, 0.92) !important;

    text-shadow:
      0
      1px
      2px
      rgba(0, 20, 50, 0.65);
  }


  html.compact-columns-preview
  .source-footer::before,

  html.compact-columns-preview
  .source-footer::after {
    display:
      none !important;
  }


  html.compact-columns-preview
  .source-footer
  a {
    color:
      #ffffff !important;

    text-decoration-color:
      rgba(255, 255, 255, 0.55);
  }


  html.compact-columns-preview
  .source-footer
  > * {
    background:
      transparent !important;

    border:
      0 !important;

    box-shadow:
      none !important;
  }
}



/* =========================================================
   INDEX2 — NOTE FOOTER CENTRATE E IMPILATE V3
   ========================================================= */

@media (min-width: 761px) {

  /*
   * Le note restano direttamente sullo sfondo:
   * nessun pannello, bordo o area grafica dedicata.
   */

  html.compact-columns-preview
  .source-footer {
    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      2px !important;

    width:
      100% !important;

    margin:
      6px
      auto
      0 !important;

    padding:
      5px
      0
      2px !important;

    text-align:
      center !important;

    line-height:
      1.24 !important;

    background:
      transparent !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;
  }


  /*
   * Ogni elemento diretto forma una riga distinta.
   */

  html.compact-columns-preview
  .source-footer
  > * {
    display:
      block !important;

    width:
      auto !important;

    max-width:
      100% !important;

    margin:
      0
      auto !important;

    padding:
      0 !important;

    text-align:
      center !important;

    background:
      transparent !important;

    border:
      0 !important;

    box-shadow:
      none !important;
  }


  /*
   * Gerarchia decrescente:
   * prima nota più evidente, successive più discrete.
   */

  html.compact-columns-preview
  .source-footer
  > :nth-child(1) {
    font-size:
      0.78rem !important;

    opacity:
      1;
  }


  html.compact-columns-preview
  .source-footer
  > :nth-child(2) {
    font-size:
      0.74rem !important;

    opacity:
      0.90;
  }


  html.compact-columns-preview
  .source-footer
  > :nth-child(3) {
    font-size:
      0.70rem !important;

    opacity:
      0.82;
  }


  html.compact-columns-preview
  .source-footer
  > :nth-child(n+4) {
    font-size:
      0.67rem !important;

    opacity:
      0.76;
  }


  html.compact-columns-preview
  .source-footer
  a {
    display:
      inline !important;

    color:
      #ffffff !important;

    text-align:
      center !important;

    text-decoration-color:
      rgba(255, 255, 255, 0.50);
  }


  /*
   * Elimina eventuali separatori grafici laterali.
   */

  html.compact-columns-preview
  .source-footer
  > *
  + * {
    border-left:
      0 !important;

    margin-left:
      0 !important;

    padding-left:
      0 !important;
  }
}



/* =========================================================
   INDEX2 — FOOTER UNIFICATO E CENTRATO V4
   ========================================================= */

@media (min-width: 761px) {

  html.compact-columns-preview
  .source-footer.index2-unified-footer {
    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      3px !important;

    width:
      100% !important;

    margin:
      7px
      auto
      0 !important;

    padding:
      3px
      0
      5px !important;

    text-align:
      center !important;

    background:
      transparent !important;

    border:
      0 !important;

    box-shadow:
      none !important;
  }


  html.compact-columns-preview
  .source-footer.index2-unified-footer
  > .index2-footer-line {
    position:
      static !important;

    inset:
      auto !important;

    display:
      block !important;

    float:
      none !important;

    clear:
      both !important;

    width:
      auto !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    height:
      auto !important;

    margin:
      0
      auto !important;

    padding:
      0 !important;

    transform:
      none !important;

    text-align:
      center !important;

    background:
      transparent !important;

    border:
      0 !important;

    box-shadow:
      none !important;
  }


  /*
   * Prima nota.
   */

  html.compact-columns-preview
  .source-footer
  > .index2-footer-line-1 {
    font-size:
      0.78rem !important;

    opacity:
      1;
  }


  /*
   * Attribuzione OpenStreetMap.
   */

  html.compact-columns-preview
  .source-footer
  > .index2-footer-line-2 {
    font-size:
      0.72rem !important;

    opacity:
      0.88;
  }


  /*
   * Logo e dicitura MeteoAM.
   */

  html.compact-columns-preview
  .source-footer
  > .index2-footer-line-3 {
    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      1px !important;

    font-size:
      0.67rem !important;

    opacity:
      0.80;
  }


  html.compact-columns-preview
  .source-footer
  > .index2-footer-line-3
  img {
    display:
      block !important;

    position:
      static !important;

    float:
      none !important;

    width:
      auto !important;

    max-width:
      82px !important;

    height:
      auto !important;

    margin:
      1px
      auto
      0 !important;

    transform:
      none !important;
  }


  html.compact-columns-preview
  .source-footer
  a {
    display:
      inline !important;

    margin:
      0 !important;

    color:
      #ffffff !important;

    text-align:
      center !important;
  }
}



/* =========================================================
   INDEX2 — FOOTER MOBILE TRASPARENTE V5
   ========================================================= */

@media (max-width: 760px) {

  html.compact-columns-preview
  .source-footer {
    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      3px !important;

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      7px
      auto
      0 !important;

    padding:
      5px
      12px
      8px !important;

    text-align:
      center !important;

    background:
      transparent !important;

    background-color:
      transparent !important;

    background-image:
      none !important;

    border:
      0 !important;

    outline:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    backdrop-filter:
      none !important;

    -webkit-backdrop-filter:
      none !important;

    color:
      rgba(255, 255, 255, 0.94) !important;

    text-shadow:
      0
      1px
      2px
      rgba(0, 25, 55, 0.60);
  }


  html.compact-columns-preview
  .source-footer::before,

  html.compact-columns-preview
  .source-footer::after {
    display:
      none !important;

    content:
      none !important;
  }


  html.compact-columns-preview
  .source-footer
  > * {
    position:
      static !important;

    display:
      block !important;

    float:
      none !important;

    width:
      auto !important;

    max-width:
      100% !important;

    margin:
      0
      auto !important;

    padding:
      0 !important;

    text-align:
      center !important;

    background:
      transparent !important;

    background-color:
      transparent !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    transform:
      none !important;
  }


  html.compact-columns-preview
  .source-footer
  a {
    color:
      #ffffff !important;

    text-align:
      center !important;
  }


  html.compact-columns-preview
  .source-footer
  img {
    display:
      block !important;

    float:
      none !important;

    width:
      auto !important;

    max-width:
      74px !important;

    height:
      auto !important;

    margin:
      2px
      auto
      0 !important;
  }
}



/* =========================================================
   INDEX2 — CONTENITORE ORARI MOBILE TRASPARENTE V6
   ========================================================= */

@media (max-width: 760px) {

  /*
   * Il contenitore generale delle previsioni non disegna
   * più un pannello proprio: lascia vedere direttamente
   * lo sfondo della pagina.
   *
   * Le singole righe orarie non vengono modificate.
   */

  html.compact-columns-preview
  .forecast-panel,

  html.compact-columns-preview
  .forecast-table-wrap,

  html.compact-columns-preview
  .forecast-table-wrapper,

  html.compact-columns-preview
  .forecast-table-container,

  html.compact-columns-preview
  .forecast-table-shell,

  html.compact-columns-preview
  .table-wrap,

  html.compact-columns-preview
  .table-wrapper,

  html.compact-columns-preview
  .table-scroll,

  html.compact-columns-preview
  .forecast-scroll {
    background:
      transparent !important;

    background-color:
      transparent !important;

    background-image:
      none !important;

    border:
      0 !important;

    outline:
      0 !important;

    box-shadow:
      none !important;

    backdrop-filter:
      none !important;

    -webkit-backdrop-filter:
      none !important;
  }


  /*
   * Il pannello non deve ritagliare bordi o ombre
   * delle singole schede orarie.
   */

  html.compact-columns-preview
  .forecast-panel {
    overflow:
      visible !important;
  }


  /*
   * Anche la superficie della tabella e del tbody
   * diventa trasparente.
   *
   * Non vengono selezionati tr e td, quindi i colori
   * delle singole righe restano invariati.
   */

  html.compact-columns-preview
  .forecast-table,

  html.compact-columns-preview
  #forecastBody {
    background:
      transparent !important;

    background-color:
      transparent !important;

    background-image:
      none !important;

    box-shadow:
      none !important;
  }


  /*
   * Elimina eventuali elementi grafici decorativi
   * appartenenti esclusivamente al pannello esterno.
   */

  html.compact-columns-preview
  .forecast-panel::before,

  html.compact-columns-preview
  .forecast-panel::after {
    display:
      none !important;

    content:
      none !important;
  }
}


/* =========================================================
   SCHIARO_METEO_LOCATION_PICKER_HIDDEN_FIX_V1
   Il display inline-grid del selettore non deve prevalere
   quando syncControls() applica la classe hidden.
   ========================================================= */

.location-picker.hidden {
  display: none !important;
}


/* =========================================================
   SCHIARO_METEO_CURRENT_ROW_NEUTRAL_PULSE_V1

   L'intervallo corrente mantiene la normale tonalità
   pari/dispari della tabella. L'attenzione viene richiamata
   esclusivamente da una lenta pulsazione luminosa neutra.
   ========================================================= */

@keyframes schiaro-current-row-neutral-pulse-v1 {

  0%,
  100% {
    box-shadow:
      inset 0 0 0 999px
      rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow:
      inset 0 0 0 999px
      rgba(255, 255, 255, 0.075);
  }
}


/* Riga dispari: stessa tonalità celeste ordinaria. */

#forecastBody
tr.current-row:nth-child(odd),

#forecastBody
tr.current-row:nth-child(odd):hover {
  background:
    var(--forecast-row-blue) !important;
}


/* Riga pari: stesso sfondo bianco ordinario. */

#forecastBody
tr.current-row:nth-child(even),

#forecastBody
tr.current-row:nth-child(even):hover {
  background:
    var(--forecast-row-white) !important;
}


/*
 * Elimina le tonalità calde precedenti.
 * La pulsazione viene applicata alle singole celle,
 * così rimangono intatti fondi e raccordi strutturali.
 */

#forecastBody
tr.current-row
> td {
  color:
    var(--text) !important;

  animation:
    schiaro-current-row-neutral-pulse-v1
    6s
    ease-in-out
    infinite;
}


/* Separatori nuovamente nella tonalità ordinaria. */

#forecastBody
tr.current-row
td:not(:last-child) {
  border-right-color:
    rgba(78, 116, 151, 0.22) !important;
}


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 761px) {

  #forecastBody
  tr.current-row {
    border-color:
      transparent !important;

    box-shadow:
      none !important;
  }


  /*
   * Riga celeste:
   * le colonne secondarie conservano il normale fondo tenue.
   */

  #forecastBody
  tr.current-row:nth-child(odd)
  > td:nth-child(n+4),

  #forecastBody
  tr.current-row:nth-child(odd):hover
  > td:nth-child(n+4) {
    background:
      #f1f7fc !important;
  }


  /*
   * Normale raccordo curvo della colonna Umidità.
   */

  #forecastBody
  tr.current-row:nth-child(odd)
  > td:nth-child(4),

  #forecastBody
  tr.current-row:nth-child(odd):hover
  > td:nth-child(4) {
    background:
      radial-gradient(
        ellipse 62% 165%
        at -4% 50%,

        var(--forecast-row-blue) 0%,
        var(--forecast-row-blue) 10%,
        #e6f1f9 24%,
        #ebf4fa 40%,
        #f0f7fc 57%,
        #f1f7fc 68%,
        #f1f7fc 100%
      ) !important;
  }


  /*
   * Riga bianca:
   * tutte le celle mantengono lo sfondo uniforme.
   */

  #forecastBody
  tr.current-row:nth-child(even)
  > td:nth-child(n+4),

  #forecastBody
  tr.current-row:nth-child(even):hover
  > td:nth-child(n+4) {
    background:
      transparent !important;
  }


  #forecastBody
  tr.current-row
  td:nth-child(3) {
    border-right-color:
      rgba(62, 102, 141, 0.34) !important;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

  #forecastBody
  tr.current-row {
    box-shadow:
      0 8px 22px
      rgba(31, 73, 117, 0.075) !important;
  }


  #forecastBody
  tr.current-row:nth-child(odd) {
    border-color:
      rgba(111, 157, 199, 0.50) !important;
  }


  #forecastBody
  tr.current-row:nth-child(even) {
    border-color:
      rgba(151, 179, 205, 0.48) !important;
  }
}


/* Accessibilità: nessun movimento quando richiesto. */

@media (prefers-reduced-motion: reduce) {

  #forecastBody
  tr.current-row
  > td {
    animation:
      none !important;
  }
}


/* =========================================================
   SCHIARO_METEO_CURRENT_ROW_NEUTRAL_PULSE_V2

   La velatura bianca della V1 poteva risultare invisibile
   sulle righe già bianche. La V2 usa una luminosità azzurra
   neutra e coerente con la normale palette della tabella.
   ========================================================= */

/* SCHIARO_METEO_CURRENT_ROW_BLUE_WHITE_PULSE_V3 */

/* SCHIARO_METEO_CURRENT_ROW_DARK_BLUE_WHITE_3S_V5 */

@keyframes schiaro-current-row-neutral-pulse-v2 {

  0%,
  100% {
    box-shadow:
      inset 0 0 0 999px
      rgba(10, 72, 128, 0.08);
  }

  50% {
    box-shadow:
      inset 0 0 0 999px
      rgba(255, 255, 255, 1);
  }
}


/* SCHIARO_METEO_CURRENT_ROW_BLUE_WHITE_PULSE_3S_V4 */

#forecastBody
tr.current-row
> td {
  animation:
    schiaro-current-row-neutral-pulse-v2
    3s
    ease-in-out
    infinite !important;
}


/*
 * Chi richiede la riduzione del movimento conserva
 * lo sfondo ordinario senza animazione.
 */

@media (prefers-reduced-motion: reduce) {

  #forecastBody
  tr.current-row
  > td {
    animation:
      none !important;
  }
}

/* =========================================================
   SCHIARO_METEO_INFO_FOOTER_VISUAL_V3

   Stato canonico chiaro dei link footer.
   Nessuna transizione cromatica:
   evita stati intermedi scuri durante hover/focus.
   ========================================================= */

html.compact-columns-preview
.source-footer.index2-unified-footer {
  color:
    #173f63 !important;

  text-shadow:
    none !important;
}


html.compact-columns-preview
.source-footer.index2-unified-footer
> .index2-footer-line {
  color:
    #173f63 !important;

  opacity:
    0.94 !important;

  text-shadow:
    none !important;
}


html.compact-columns-preview
.source-footer.index2-unified-footer
a:not(.footer-info-link) {
  color:
    #0d4f84 !important;

  text-decoration-color:
    rgba(13, 79, 132, 0.48) !important;

  text-shadow:
    none !important;
}


html.compact-columns-preview
.source-footer.index2-unified-footer
> .footer-info-row.index2-footer-line {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    auto !important;

  max-width:
    none !important;

  margin:
    7px auto 0 !important;

  padding:
    0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;

  opacity:
    1 !important;
}


html.compact-columns-preview
.source-footer.index2-unified-footer
.footer-info-link {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    auto !important;

  min-width:
    0 !important;

  min-height:
    28px !important;

  margin:
    0 !important;

  padding:
    5px 12px !important;

  border:
    1px solid
    rgba(120, 145, 165, 0.30) !important;

  border-radius:
    999px !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fafc 100%
    ) !important;

  color:
    #315570 !important;

  box-shadow:
    0 1px 0
      rgba(255, 255, 255, 1)
      inset,
    0 7px 18px
      rgba(48, 85, 117, 0.10) !important;

  font-size:
    0.68rem !important;

  font-weight:
    650 !important;

  line-height:
    1 !important;

  text-align:
    center !important;

  text-decoration:
    none !important;

  text-shadow:
    none !important;

  opacity:
    1 !important;

  transform:
    none !important;

  /*
   * Nessuna interpolazione cromatica.
   */
  transition:
    none !important;
}


html.compact-columns-preview
.source-footer.index2-unified-footer
.footer-info-link:hover,
html.compact-columns-preview
.source-footer.index2-unified-footer
.footer-info-link:active {
  border-color:
    rgba(105, 135, 160, 0.42) !important;

  background:
    #ffffff !important;

  color:
    #254b68 !important;

  box-shadow:
    0 1px 0
      rgba(255, 255, 255, 1)
      inset,
    0 9px 22px
      rgba(48, 85, 117, 0.13) !important;

  transform:
    none !important;
}


html.compact-columns-preview
.source-footer.index2-unified-footer
.footer-info-link:focus-visible {
  outline:
    2px solid
    rgba(105, 135, 160, 0.32) !important;

  outline-offset:
    3px !important;
}


@media (max-width: 760px) {

  html.compact-columns-preview
  .source-footer.index2-unified-footer
  > .footer-info-row.index2-footer-line {
    margin-top:
      8px !important;
  }


  html.compact-columns-preview
  .source-footer.index2-unified-footer
  .footer-info-link {
    min-height:
      30px !important;

    padding:
      6px 13px !important;

    font-size:
      0.70rem !important;
  }
}

/* /SCHIARO_METEO_INFO_FOOTER_VISUAL_V3 */