/* HTXO Weather v2.2.1 — minimal, theme-safe */
:root{
  --panel:#141c24;--panel-2:#0f1821;--text:#eaf1f8;--muted:#a9b4c2;
  --brand:#0b5fff;--brand-2:#5fd1ff;--stroke:#223346;--chip:#1b2a3a;
}

/* Keep the page's original background — no override here */
.wx-wrap{color:var(--text);border-radius:16px;padding:1rem}

/* Layout */
.wx-header{display:grid;gap:.75rem}
.wx-title{margin:.25rem 0 0;font-size:1.6rem;color:#ffffff !important}     /* title: white */
.wx-sub{margin:0;color:var(--muted)}
.wx-controls{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between}
.wx-loc{display:flex;gap:.5rem;align-items:center;flex:1 1 520px}

/* Input: white text/caret; keep your original background */
.wx-loc input{
  flex:1;min-width:240px;padding:.7rem .8rem;border-radius:10px;
  border:1px solid var(--stroke);background:var(--panel-2);
  color:#ffffff !important;caret-color:#ffffff
}
.wx-loc input::placeholder{color:rgba(234,241,248,.75)}

.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .9rem;border-radius:10px;border:1px solid transparent;cursor:pointer;font-weight:600}
.btn.solid{background:var(--brand);color:#fff}
.btn.solid:hover{background:#0847c9}
.btn.ghost{background:transparent;color:#eaf1f8;border-color:var(--stroke)}
.btn.ghost:hover{background:#152435}
.btn.small{padding:.35rem .6rem;border-radius:8px;font-size:.9rem}
.btn.toggle{background:transparent;border-color:var(--stroke);color:#eaf1f8}
.btn.toggle.active{background:var(--chip);border-color:#2a4157}
.wx-toggles{display:flex;gap:.4rem}

.wx-favs{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{background:var(--chip);color:#eaf1f8;border:1px solid #29445b;border-radius:999px;padding:.35rem .6rem;cursor:pointer}
.chip:hover{background:#21364a}

/* Alerts */
.wx-alerts{display:grid;gap:.5rem}
.wx-alert{display:flex;gap:.6rem;align-items:flex-start;padding:.65rem .8rem;border-radius:10px;border:1px solid var(--stroke);background:var(--panel)}
.wx-alert .lbl{font-weight:800}
.wx-alert a{color:#9fe0ff;text-decoration:underline}

/* Meta row */
.wx-meta{display:flex;gap:.75rem;align-items:center;color:var(--muted);font-size:.95rem}
.wx-place{font-weight:700;color:#ffffff}

/* Loader */
.wx-loading{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;background:var(--panel);border:1px solid var(--stroke);border-radius:12px;margin-top:.25rem}
.wx-loading[aria-hidden="true"]{display:none !important}
.spinner{width:18px;height:18px;border:3px solid #2a3b50;border-top-color:var(--brand-2);border-radius:50%;animation:wxspin 1s linear infinite}
@keyframes wxspin{to{transform:rotate(360deg)}}

/* Errors */
.wx-error{margin-top:.5rem;background:#2a1417;border:1px solid #6a1c24;color:#ffd7db;padding:.8rem 1rem;border-radius:12px}

/* Days grid */
.wx-content{margin-top:1rem}
.wx-days{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:.8rem}
@media (max-width:980px){.wx-days{grid-template-columns:repeat(4,1fr)}}
@media (max-width:680px){.wx-days{grid-template-columns:repeat(2,1fr)}}

/* Card */
.wx-card{background:var(--panel);border:1px solid var(--stroke);border-radius:14px;padding:.9rem;display:grid;gap:.5rem;transition:transform .2s,background .2s;cursor:pointer}
.wx-card:hover{transform:translateY(-2px);background:#162433}
.wx-day{font-weight:700;color:#ffffff !important}                       /* day label white */
.wx-date{color:#ffffff !important;font-size:.9rem}                      /* date white */
.wx-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}

/* Fix huge SVG icons caused by theme rules */
svg.wx-icon{width:48px !important;height:48px !important;max-width:48px !important;max-height:48px !important;flex:0 0 auto;display:block}
.wx-wrap svg{max-width:none;width:auto;height:auto}                     /* neutralize global svg rules */

/* Temps + badges */
.wx-temps{display:flex;gap:.5rem;align-items:baseline}
.t-high{color:#ffffff;font-weight:800}
.t-low{color:#ffffff !important;font-weight:700;opacity:.9}
.wx-badges{display:flex;gap:.4rem;flex-wrap:wrap}
.badge{font-size:.85rem;background:var(--chip);border:1px solid #2a4157;padding:.25rem .45rem;border-radius:999px;color:#eaf1f8}

/* Detail section */
.wx-detail{margin-top:1rem;background:var(--panel);border:1px solid var(--stroke);border-radius:14px;padding:1rem}
.wx-detail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.wx-detail-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.wx-highlight{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.wx-hitem{background:var(--panel-2);border:1px solid var(--stroke);border-radius:12px;padding:.6rem .8rem}
.wx-hitem h3{margin:.1rem 0 .2rem;font-size:.95rem;color:var(--muted)}
.wx-hitem p{margin:0;font-weight:700;font-size:1.05rem;color:#ffffff}

/* Chart */
.wx-chart{background:var(--panel-2);border:1px solid var(--stroke);border-radius:12px;padding:.5rem;overflow:hidden}
.wx-chart svg{width:100% !important;height:auto !important}             /* chart should scale with container */
.wx-chart-caption{color:var(--muted);font-size:.85rem;margin:.25rem 0 0}

/* Utilities */
[hidden]{display:none !important}