/* ══════════════════════════════════════════════════════════════════════════
   weather.css  —  Weather page specific styles
   .card/.section-label override shared.css. Dynamic sky-bg variants.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Weather page ── */

/* Dynamic sky background */
.sky-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; transition: background 2s ease; }
.sky-bg.clear-day    { background: radial-gradient(ellipse 900px 600px at 50% -5%, rgba(59,130,246,0.18) 0%, transparent 70%), radial-gradient(ellipse 700px 500px at 5% 10%, rgba(124,92,252,0.1) 0%, transparent 70%); }
.sky-bg.clear-night  { background: radial-gradient(ellipse 800px 600px at 5% 10%, rgba(124,92,252,0.14) 0%, transparent 70%), radial-gradient(ellipse 600px 500px at 92% 80%, rgba(46,196,255,0.09) 0%, transparent 70%); }
.sky-bg.cloudy       { background: radial-gradient(ellipse 900px 600px at 50% 0%, rgba(100,116,139,0.12) 0%, transparent 70%), radial-gradient(ellipse 700px 400px at 5% 10%, rgba(124,92,252,0.08) 0%, transparent 70%); }
.sky-bg.rainy        { background: radial-gradient(ellipse 900px 600px at 50% 0%, rgba(30,58,138,0.15) 0%, transparent 70%), radial-gradient(ellipse 600px 400px at 95% 10%, rgba(51,65,85,0.12) 0%, transparent 70%); }
.sky-bg.stormy       { background: radial-gradient(ellipse 900px 600px at 50% 0%, rgba(88,28,135,0.18) 0%, transparent 70%), radial-gradient(ellipse 600px 400px at 5% 50%, rgba(239,68,68,0.06) 0%, transparent 70%); }
.sky-bg.snowy        { background: radial-gradient(ellipse 900px 600px at 50% 0%, rgba(186,230,253,0.1) 0%, transparent 70%), radial-gradient(ellipse 700px 500px at 5% 10%, rgba(124,92,252,0.07) 0%, transparent 70%); }

/* Glass card override */
.card {
  background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 22px;
  padding: 1.4rem 1.6rem; margin-bottom: 1rem; position: relative; overflow: hidden;
  backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%);
  box-shadow: var(--shadow-card);
}
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); }
.card::after  { content:''; position:absolute; inset:0; background:var(--glass-shine); pointer-events:none; border-radius:22px; }

/* Section label plain style */
.section-label { font-size:0.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:1rem; position:relative; z-index:1; display:block; }

/* View tabs */
.view-tabs { display:flex; gap:0.3rem; background:rgba(0,0,0,0.25); border-radius:12px; padding:3px; margin-bottom:1rem; position:relative; z-index:1; width:fit-content; }
.view-tab { padding:0.35rem 0.9rem; border-radius:9px; font-size:0.8rem; font-weight:700; cursor:pointer; transition:all 0.15s; border:none; background:none; color:var(--text-dim); font-family:inherit; }
.view-tab:hover:not(.active) { color:var(--text); }
.view-tab.active { background:rgba(124,92,252,0.2); color:#a8b4ff; }

/* View panels */
.view-panel { display:none; }
.view-panel.active { display:block; }

/* Weather action bar */
.weather-action-bar { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1rem; }

/* Current conditions */
.current-grid { display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:start; position:relative; z-index:1; }
.current-temp { font-size:5rem; font-weight:800; color:var(--text); letter-spacing:-4px; line-height:1; font-family:'DM Mono',monospace; }
.current-feels { font-size:0.85rem; color:var(--text-dim); margin-top:0.2rem; }
.current-desc { font-size:1.3rem; font-weight:700; color:var(--text); margin-top:0.6rem; }
.current-location { font-size:0.82rem; color:var(--text-dim); margin-top:0.2rem; display:flex; align-items:center; gap:0.3rem; }
.current-icon { font-size:5rem; line-height:1; text-align:right; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }

.detail-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0.65rem; margin-top:1.25rem; position:relative; z-index:1; }
.detail-tile { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:0.75rem 0.85rem; }
.detail-tile .dt-label { font-size:0.66rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.3rem; }
.detail-tile .dt-val   { font-size:1.05rem; font-weight:700; color:var(--text); font-family:'DM Mono',monospace; }
.detail-tile .dt-sub   { font-size:0.7rem; color:var(--text-dim); margin-top:0.1rem; }

/* Hourly strip */
.hourly-strip { display:flex; gap:0.5rem; overflow-x:auto; padding-bottom:0.5rem; position:relative; z-index:1; scrollbar-width:thin; scrollbar-color:rgba(124,92,252,0.3) transparent; }
.hourly-strip::-webkit-scrollbar { height:4px; }
.hourly-strip::-webkit-scrollbar-thumb { background:rgba(124,92,252,0.3); border-radius:2px; }
.hour-card { flex-shrink:0; width:72px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:0.65rem 0.5rem; text-align:center; transition:all 0.15s; }
.hour-card.now { background:rgba(124,92,252,0.12); border-color:rgba(124,92,252,0.35); }
.hour-card .hc-time { font-size:0.7rem; font-weight:700; color:var(--text-dim); margin-bottom:0.3rem; }
.hour-card .hc-icon { font-size:1.4rem; margin-bottom:0.3rem; }
.hour-card .hc-temp { font-size:0.9rem; font-weight:700; color:var(--text); font-family:'DM Mono',monospace; }
.hour-card .hc-precip { font-size:0.68rem; color:#60a5fa; margin-top:0.2rem; }

/* 7-day forecast */
.forecast-list { display:flex; flex-direction:column; gap:0.4rem; position:relative; z-index:1; }
.forecast-row { display:flex; align-items:center; gap:0.75rem; padding:0.65rem 0.85rem; background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.05); border-radius:12px; transition:background 0.12s; }
.forecast-row:hover { background:rgba(255,255,255,0.04); }
.forecast-row.today { background:rgba(124,92,252,0.08); border-color:rgba(124,92,252,0.2); }
.fr-day   { font-weight:700; font-size:0.88rem; width:42px; flex-shrink:0; }
.fr-icon  { font-size:1.5rem; width:36px; text-align:center; flex-shrink:0; }
.fr-desc  { flex:1; font-size:0.8rem; color:var(--text-dim); }
.fr-precip { font-size:0.75rem; color:#60a5fa; width:48px; text-align:center; flex-shrink:0; }
.fr-range { display:flex; align-items:center; gap:0.4rem; flex-shrink:0; }
.fr-min   { font-size:0.82rem; color:var(--text-dim); font-family:'DM Mono',monospace; width:38px; text-align:right; }
.fr-bar-wrap { width:60px; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.fr-bar   { height:6px; border-radius:3px; background:linear-gradient(90deg,#60a5fa,#f87171); }
.fr-max   { font-size:0.82rem; color:var(--text); font-weight:700; font-family:'DM Mono',monospace; width:38px; }

/* UV / sun times */
.sun-row { display:flex; gap:0.75rem; position:relative; z-index:1; flex-wrap:wrap; }
.sun-tile { flex:1; min-width:100px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:0.75rem 0.9rem; }
.sun-tile .st-label { font-size:0.66rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.3rem; }
.sun-tile .st-val   { font-size:1rem; font-weight:700; color:var(--text); }

/* Location settings */
.loc-form { display:flex; gap:0.5rem; align-items:flex-end; flex-wrap:wrap; position:relative; z-index:1; }
.loc-field { display:flex; flex-direction:column; gap:0.25rem; }
.loc-field label { font-size:0.67rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); }
.loc-input { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:0.45rem 0.75rem; color:var(--text); font-size:0.85rem; font-family:inherit; outline:none; transition:border-color 0.2s; width:100%; }
.loc-input:focus { border-color:rgba(124,92,252,0.5); }
.loc-input::placeholder { color:var(--text-muted); }
.loc-preset-row { display:flex; gap:0.35rem; flex-wrap:wrap; margin-top:0.5rem; position:relative; z-index:1; }
.loc-preset { padding:0.2rem 0.65rem; border-radius:20px; font-size:0.72rem; font-weight:600; cursor:pointer; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:var(--text-dim); transition:all 0.15s; font-family:inherit; }
.loc-preset:hover { border-color:rgba(124,92,252,0.35); color:var(--accent2); background:rgba(124,92,252,0.08); }

/* Loading / error */
.weather-loading { display:flex; align-items:center; gap:0.75rem; padding:2rem; color:var(--text-dim); font-size:0.9rem; position:relative; z-index:1; }
.spinner { width:22px; height:22px; border:2.5px solid rgba(255,255,255,0.1); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.weather-error { padding:1.5rem; color:var(--red); font-size:0.85rem; background:rgba(248,113,113,0.06); border:1px solid rgba(248,113,113,0.2); border-radius:12px; position:relative; z-index:1; }

/* Update bar */
.update-bar { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; position:relative; z-index:1; flex-wrap:wrap; }
.update-time { font-size:0.72rem; color:var(--text-muted); }
.update-bar-spacer { flex:1; }

/* Weather maps */
.map-type-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:0.5rem; margin-bottom:1rem; position:relative; z-index:1; }
.map-type-btn  { padding:0.55rem 0.5rem; border-radius:10px; font-size:0.78rem; font-weight:600; cursor:pointer; transition:all 0.15s; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); color:var(--text-dim); font-family:inherit; text-align:center; }
.map-type-btn:hover  { border-color:rgba(124,92,252,0.35); color:var(--text); background:rgba(124,92,252,0.06); }
.map-type-btn.active { border-color:rgba(124,92,252,0.5); background:rgba(124,92,252,0.14); color:var(--accent2); }
#map-container { border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); height:380px; position:relative; z-index:1; }
#map-no-key { padding:1.5rem; text-align:center; color:var(--text-muted); font-size:0.84rem; }

@media(max-width:600px) {
  .current-grid { grid-template-columns:1fr; }
  .current-icon { text-align:left; font-size:3.5rem; }
  .detail-grid { grid-template-columns:1fr 1fr; }
  .current-temp { font-size:3.5rem; }
}
@media(max-width:540px){body{padding-left:0.65rem;padding-right:0.65rem;}.card,.glass-card{padding:1.1rem 1.1rem;}}