/*! (c) 2025 @meteobezana - Bezana Explorer · Meteo Widget */

#mw-wrap { display: flex; align-items: center; flex-shrink: 0; margin-left: auto; }

/* ── Toggle button (hidden on desktop) ── */
#mw-toggle-btn {
  display: none; align-items: center; gap: 5px;
  background: rgba(15,23,42,0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59,125,216,0.35); border-radius: 9999px;
  padding: 5px 11px 5px 8px; font-size: 12.5px; font-weight: 600; color: #94a3b8;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  white-space: nowrap; transition: border-color .2s, background .2s; font-family: inherit;
}
#mw-toggle-btn .mw-toggle-ic   { font-size: 18px; color: #3b7dd8; }
#mw-toggle-btn .mw-toggle-temp { color: #e2e8f0; font-weight: 700; }
#mw-toggle-btn .mw-toggle-chevron { font-size: 16px; color: #64748b; transition: transform .25s ease; }
#mw-toggle-btn.open .mw-toggle-chevron { transform: rotate(180deg); }

/* ── Widget pill (desktop inline) ── */
.tb-meteo-widget {
  display: flex; align-items: center; gap: 14px;
  background: rgba(15,23,42,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(59,125,216,0.25); border-radius: 9999px;
  padding: 6px 16px; font-size: 13.5px; color: #94a3b8;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3); margin-left: 12px;
}
.mw-item       { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.mw-ic         { font-size: 18px; color: #3b7dd8; }
.mw-val        { font-weight: 700; color: #e2e8f0; min-width: 28px; text-align: right; }
.mw-unit       { font-size: 10.5px; opacity: .65; font-weight: 400; }
.mw-sep        { width: 1px; height: 16px; background: rgba(148,163,184,.2); flex-shrink: 0; }
.mw-wind-arrow { font-size: 18px; color: #3b7dd8; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.mw-wind-dir   { font-size: 10.5px; font-weight: 700; color: #94a3b8; letter-spacing: .04em; min-width: 24px; text-align: center; }
.mw-update     { font-size: 10.5px; padding-left: 10px; border-left: 1px solid rgba(148,163,184,.2); white-space: nowrap; color: #64748b; }

/* ── Mobile + Tablet: toggle visible, widget as fixed overlay ── */
@media (max-width: 1024px) {
  #mw-toggle-btn { display: flex; }
  .tb-meteo-widget {
    display: none; position: fixed;
    top: 60px; right: 8px; left: auto; /* top overridden by JS */
    max-width: 360px; margin: 0;
    border-radius: 16px; padding: 10px 10px 8px; gap: 0;
    flex-wrap: wrap; row-gap: 6px; column-gap: 6px;
    z-index: 9500; box-shadow: 0 12px 48px rgba(0,0,0,0.60);
    border-color: rgba(59,125,216,0.4);
    animation: mwDropIn .22s cubic-bezier(.34,1.2,.64,1);
  }
  /* En móvil pequeño sí ocupa todo el ancho */
  @media (max-width: 480px) {
    .tb-meteo-widget { left: 8px; max-width: none; }
  }
  .tb-meteo-widget.mw-open { display: flex; }
  .tb-meteo-widget .mw-station {
    flex: 0 0 100%; display: flex; align-items: center; gap: 6px;
    padding: 2px 4px 7px; border-bottom: 1px solid rgba(148,163,184,.12);
    font-size: 12px; color: #64748b;
  }
  .tb-meteo-widget .mw-sep--station { display: none; }
  .tb-meteo-widget .mw-item {
    flex: 1 1 calc(50% - 3px); min-width: 0; max-width: calc(50% - 3px);
    justify-content: flex-start; padding: 8px 10px;
    background: rgba(255,255,255,.045); border-radius: 10px;
    gap: 7px; box-sizing: border-box; overflow: hidden;
  }
  .tb-meteo-widget .mw-sep  { display: none; }
  .tb-meteo-widget .mw-val  { font-size: 15px; min-width: 28px; }
  .tb-meteo-widget .mw-unit { font-size: 11px; }
  .tb-meteo-widget .mw-ic,
  .tb-meteo-widget .mw-wind-arrow { font-size: 20px; flex-shrink: 0; }
  .tb-meteo-widget .mw-wind-dir   { font-size: 11px; min-width: 22px; }
  .tb-meteo-widget .mw-update {
    flex: 0 0 100%; text-align: center; border-left: none;
    border-top: 1px solid rgba(148,163,184,.12);
    padding: 6px 0 2px; margin-top: 2px; font-size: 11px;
  }
  @keyframes mwDropIn {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
  }
}