/* ============================================================
   Vremenska prognoza — redizajn (single-grad + archive-grad).
   Radi u svetlom i tamnom režimu (body.dark-mode).
   ============================================================ */

.oko-weather{
  --ow-radius:18px;
  --ow-accent:#D7162F;
  --card:#fff;
  --ink:#16202c;
  --muted:#6b7886;
  --line:rgba(16,32,44,.08);
  --tile:#f4f6f9;
  color:var(--ink);
  max-width:560px;
  margin:0 0 10px;
}
body.dark-mode .oko-weather{
  --card:#1e2128;
  --ink:#eef2f7;
  --muted:#9aa6b4;
  --line:rgba(255,255,255,.09);
  --tile:#262a33;
}

.oko-weather__current{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--ow-radius);
  overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(16,32,44,.45);
}

.oko-weather__hero{
  position:relative;
  padding:26px 26px 22px;
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg,#1f3a93 0%,#2f6bd4 55%,#4aa0e6 100%);
  color:#fff;
}
.oko-weather__place{font-size:15px;font-weight:600;letter-spacing:.02em;opacity:.92}
.oko-weather__row{display:flex;align-items:center;gap:18px;margin-top:6px}
.oko-weather__temp{font-size:64px;line-height:1;font-weight:800;letter-spacing:-.03em}
.oko-weather__icon{flex:0 0 auto;width:84px;height:84px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.oko-weather__icon svg{width:100%;height:100%}
.oko-weather__cond{margin-left:auto;text-align:right}
.oko-weather__desc{font-size:18px;font-weight:600;text-transform:capitalize}
.oko-weather__feels{font-size:13px;opacity:.85;margin-top:2px}

.oko-weather__details{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:18px;background:var(--card);
}
.oko-weather__tile{
  background:var(--tile);border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:3px;
}
.oko-weather__tile .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.oko-weather__tile .val{font-size:17px;font-weight:700}

.oko-weather__forecast{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  padding:16px 18px 20px;background:var(--card);border-top:1px solid var(--line);
}
.oko-weather__day{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 4px;border-radius:12px}
.oko-weather__day:hover{background:var(--tile)}
.oko-weather__day .dow{font-size:13px;font-weight:700;color:var(--muted)}
.oko-weather__day .ic{width:38px;height:38px}
.oko-weather__day .ic svg{width:100%;height:100%}
.oko-weather__day .hi{font-size:16px;font-weight:800}
.oko-weather__day .lo{font-size:13px;color:var(--muted);font-weight:600}

.oko-weather__unavailable{
  max-width:560px;background:var(--tile,#f4f6f9);border:1px solid var(--line,rgba(16,32,44,.08));
  border-radius:14px;padding:18px 20px;color:#6b7886;
}

/* ============ Lista gradova — žive mini kartice ============ */
.oko-cities{margin:34px 0 10px}
.oko-cities__title{font-size:24px;margin:0 0 16px}
.oko-citygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.oko-citycard{
  --card:#fff;--ink:#16202c;--muted:#6b7886;--line:rgba(16,32,44,.08);
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;color:var(--ink);text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.dark-mode .oko-citycard{--card:#1e2128;--ink:#eef2f7;--muted:#9aa6b4;--line:rgba(255,255,255,.09)}
.oko-citycard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(16,32,44,.5);border-color:#D7162F}
.oko-citycard__ic{width:40px;height:40px;flex:0 0 auto}
.oko-citycard__ic svg{width:100%;height:100%}
.oko-citycard__body{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.oko-citycard__name{font-weight:700;font-size:15px}
.oko-citycard__desc{font-size:12px;color:var(--muted);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oko-citycard__temp{margin-left:auto;font-size:24px;font-weight:800;letter-spacing:-.02em}

@media(max-width:1024px){
  .oko-citygrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .oko-weather__details{grid-template-columns:repeat(2,1fr)}
  .oko-weather__forecast{grid-template-columns:repeat(3,1fr)}
  .oko-citygrid{grid-template-columns:1fr}
  .oko-weather__temp{font-size:52px}
  .oko-weather__icon{width:68px;height:68px}
}