/* Svrljig Weather Pro – modern UI */

:root {
  --svwp-bg: #0b1220;
  --svwp-card: rgba(255,255,255,0.06);
  --svwp-card-border: rgba(255,255,255,0.12);
  --svwp-text: #e6eefb;
  --svwp-muted: #b8c1d9;
  --svwp-accent: #6aa5ff;
  --svwp-green: #89f0c2;
  --svwp-yellow: #ffe38a;
  --svwp-red: #ff9aa3;
}

.svwp-error{padding:12px;border:1px solid #ff6b6b;background:#391a1a;color:#ffd9d9;border-radius:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

.svwp-header-inline{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--svwp-text)
}
.svwp-ico{width:20px;height:20px;vertical-align:middle;fill:currentColor}
.svwp-temp{font-weight:800;font-size:1.05rem}
.svwp-minmax{margin-left:.35rem;opacity:.8;font-size:.85rem}

.svwp-widget{
  border-radius:18px;padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--svwp-card-border);
  color:var(--svwp-text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}

.svwp-today-top{display:flex;align-items:center;gap:14px}
.svwp-today .svwp-ico{width:56px;height:56px}
.svwp-today-temp{font-size:30px;font-weight:800}
.svwp-today-temp small{font-size:12px;opacity:.8;margin-left:.35rem}
.svwp-today-desc{font-size:14px;opacity:.9}
.svwp-today-hum{font-size:13px;opacity:.9;margin-top:2px}

.svwp-anim{animation: svwp-breathe 3s ease-in-out infinite}
@keyframes svwp-breathe{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}

.svwp-today-changes{display:flex;gap:8px;margin-top:10px;opacity:.9}
.svwp-today-changes .svwp-ico{width:22px;height:22px}

.svwp-nextdays{
  margin-top:12px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px
}
.svwp-day{
  border:1px solid var(--svwp-card-border);border-radius:14px;background:var(--svwp-card);padding:12px;text-align:center
}
.svwp-day-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--svwp-muted);font-weight:600}
.svwp-day .svwp-ico{width:28px;height:28px;margin:6px 0}
.svwp-day-minmax{font-size:14px}
.svwp-day-minmax span{opacity:.85}

.svwp-table-wrap{overflow:auto;margin-top:10px}
.svwp-table{
  border-collapse:separate;border-spacing:0;width:100%;
  color:var(--svwp-text);
  background:var(--svwp-card);border:1px solid var(--svwp-card-border);border-radius:14px;overflow:hidden
}
.svwp-table th,.svwp-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.08);text-align:left}
.svwp-table thead th{background:rgba(255,255,255,0.06);font-weight:700}
.svwp-cell-icon{display:flex;align-items:center;gap:10px}
.svwp-cell-icon .svwp-ico{width:22px;height:22px}

@media (max-width:720px){
  .svwp-nextdays{grid-template-columns:repeat(2,1fr)}
  .svwp-today .svwp-ico{width:48px;height:48px}
}

/* Optional boje po simbolu */
svg use[href="#wi-clear"]{color:var(--svwp-yellow)}
svg use[href="#wi-rain"], svg use[href="#wi-drizzle"]{color:var(--svwp-accent)}
svg use[href="#wi-snow"]{color:#bfe8ff}
svg use[href="#wi-thunder"]{color:var(--svwp-red)}
svg use[href="#wi-mist"]{color:#cbd5e1}

/* Chart iznad tabele */
.svwp-chart-wrap{padding:12px 12px 0;border-bottom:1px solid var(--w-border);background:#fff}
.svwp-chart{width:100%;max-height:280px}

/* Tabela (već imaš stilove; samo da bude čitko) */
.svwp-table-wrap{overflow:auto;margin-top:12px;border-radius:14px;border:1px solid var(--w-border);background:#fff}
.svwp-table{width:100%;border-collapse:separate;border-spacing:0;color:#101114}
.svwp-table thead th{position:sticky;top:0;background:#fafbfc;font-weight:800;padding:12px 14px;border-bottom:1px solid #e6e6e6}
.svwp-table td{padding:12px 14px;border-bottom:1px solid #efefef}
.svwp-table tbody tr:nth-child(odd){background:#fcfdff}
.svwp-table tbody tr:hover{background:#f4f7ff}
.svwp-cell-icon{display:flex;align-items:center;gap:10px}
.svwp-cell-icon .svwp-ico{width:22px;height:22px}
.svwp-wdesc{font-weight:600}
.svwp-chip{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef3ff;border:1px solid #d9e4ff;color:#264aa5;font-size:12px;font-weight:700}

/* === 7 DANA TABELA — LEPSI DESKTOP === */
.svwp-table-wrap{
  overflow:auto;
  margin-top:12px;
  border:1px solid var(--w-border);
  border-radius:14px;
  background:#fff;
}
.svwp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:#101114;
  font-family:var(--w-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}
.svwp-table thead th{
  position:sticky; top:0; z-index:1;
  background:#fafbfc;
  padding:12px 14px;
  font-weight:800;
  border-bottom:1px solid #e6e6e6;
  text-align:left;
}
.svwp-table td{
  padding:12px 14px;
  border-bottom:1px solid #efefef;
  text-align:left;
  vertical-align:middle;
}
.svwp-table tbody tr:nth-child(odd){ background:#fcfdff; }
.svwp-table tbody tr:hover{ background:#f4f7ff; }
.svwp-cell-icon{ display:flex; align-items:center; gap:10px; }
.svwp-cell-icon .svwp-ico{ width:22px; height:22px; color:var(--w-accent,#3b82f6); }
.svwp-wdesc{ font-weight:600; }
.svwp-chip{ display:inline-block; padding:4px 8px; border-radius:999px; background:#eef3ff; border:1px solid #d9e4ff; color:#264aa5; font-size:12px; font-weight:700; }

/* === MOBILNI PRIKAZ (≤ 640px) — CARD LAYOUT === */
@media (max-width:640px){

  /* sakrij zaglavlje, svaka vrsta je “kartica” */
  .svwp-table thead{ display:none; }

  .svwp-table tbody tr{
    display:grid;
    grid-template-columns: 1fr 1fr;   /* dve kolone na mobilu */
    gap:8px 12px;
    padding:12px 10px;
    border-bottom:1px solid #eaeaea;
    background:#fff;
  }
  .svwp-table tbody tr:nth-child(odd){ background:#fff; } /* bez zebra na karticama */
  .svwp-table td{
    border:0;
    padding:0;
  }

  /* Lepe značke za “Dan” i “Datum” kao header bloka */
  .svwp-table td:nth-child(1){ 
    grid-column:1 / 2;
    font-weight:800;
    font-size:15px;
  }
  .svwp-table td:nth-child(2){
    grid-column:2 / 3;
    justify-self:end;
    color:#5a6270;
    font-size:13px;
  }

  /* “Vreme” na ceo red: ikonica + opis */
  .svwp-table td:nth-child(3){
    grid-column:1 / -1;
    margin-top:2px;
  }

  /* Min / Max u dva mala čipa */
  .svwp-table td:nth-child(4),
  .svwp-table td:nth-child(5){
    display:inline-flex; align-items:center; gap:6px;
    background:#f6f8ff;
    border:1px solid #e2e8ff;
    border-radius:10px;
    padding:6px 10px;
    font-weight:700;
    justify-self:start;
  }

  /* Vlažnost i Vetar kao dve ćelije ispod */
  .svwp-table td:nth-child(6),
  .svwp-table td:nth-child(7){
    color:#3a3d45; font-size:13px;
  }

  /* Padavine uvek kao čip i preko cele širine poslednje linije */
  .svwp-table td:nth-child(8){
    grid-column:1 / -1;
    justify-self:start;
    margin-top:2px;
  }

  /* Dodaj labelu ispred vrednosti putem ::before (bez menjanja HTML-a) */
  .svwp-table td:nth-child(3)::before{ content:"Vreme"; display:block; color:#7a808d; font-size:12px; margin-bottom:4px; }
  .svwp-table td:nth-child(4)::before{ content:"Min"; color:#7a808d; font-size:12px; font-weight:600; }
  .svwp-table td:nth-child(5)::before{ content:"Max"; color:#7a808d; font-size:12px; font-weight:600; }
  .svwp-table td:nth-child(6)::before{ content:"Vlažnost"; display:block; color:#7a808d; font-size:12px; margin-bottom:2px; }
  .svwp-table td:nth-child(7)::before{ content:"Vetar"; display:block; color:#7a808d; font-size:12px; margin-bottom:2px; }
  .svwp-table td:nth-child(8)::before{ content:"Padavine"; display:block; color:#7a808d; font-size:12px; margin-bottom:6px; }

  /* malo više “air” oko ikone i opisa */
  .svwp-cell-icon{ gap:8px; }
  .svwp-wdesc{ font-weight:700; }
}