/* ========== Vreme — lagani, čisti stil za datum/vreme ========== */
.vreme-datetime {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  display: block;;
}

.vreme-date {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  color: #ffffff; /* bele slova */
}

.vreme-time {
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: #ffffff;
}

/* NE boji prvo slovo drugačije */
.vreme-time::first-letter {
  color: inherit;
}

/* Tamni režim – zadržavamo iste boje */
@media (prefers-color-scheme: dark) {
  .vreme-date, .vreme-time {
    color: #ffffff;
  }
  .vreme-time::first-letter {
    color: inherit;
  }
}

/* Dodatno: osnovni stilovi za widget i prognozu (ostaju kao do sada) */
.vreme-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#fff}
.vreme-badge img{width:36px;height:36px}
.vreme-badge-temp{font-weight:700}
.vreme-badge-city{font-size:.85rem;color:#555}

/* === Vreme danas — mini, bez bg === */
.vreme-today{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}

/* skloni naslov (Danas — Grad) */
.vreme-today-header{ display:none !important; }

/* red sa ikonicom i temperaturom */
.vreme-today-main{
  display:flex;
  align-items:center;
  gap: 6px;           /* manji razmak */
}

/* mala ikonica (po želji smanji/uvećaj) */
.vreme-today-main img{
  width: 16px;
  height: 16px;
}

/* velika ali čista temp u beloj boji */
.vreme-today-temp{
  font-size: 18px;    /* smanjeno */
  font-weight: 700;
  color: #fff;        /* bela */
  margin: 0;
  line-height: 1;
}

/* max/min ispod — belo i sitnije */
.vreme-today-minmax{
  margin-top: 2px;    /* mali razmak */
  color: #fff;        /* belo */
  font-size: 12px;
  line-height: 1.2;
}


.vreme-forecast{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin-top:.6rem}
.vreme-card{border:1px solid #e5e7eb;border-radius:.75rem;padding:.6rem;background:#fff;text-align:center}
.vreme-card-day{font-weight:600;margin-bottom:.25rem}
.vreme-card img{width:54px;height:54px}
.vreme-card-temps{display:flex;justify-content:center;gap:.5rem;margin-top:.1rem}
.vreme-card-temps .max{font-weight:700}
.vreme-card-temps .min{opacity:.8}
.vreme-card-desc{font-size:.85rem;color:#555;margin-top:.2rem}

.vreme-error{padding:.6rem;border:1px solid #fca5a5;background:#fef2f2;border-radius:.5rem;color:#991b1b}
.vreme-info{padding:.6rem;border:1px solid #93c5fd;background:#eff6ff;border-radius:.5rem;color:#1e3a8a}


/* ===== Widget: Trenutno gore + dani ispod ===== */
.vreme-widget-full{display:block}

/* Trenutno — label iznad, ispod ikonica + velika temp, pa Max/Min */
.vreme-current-stack{color:#000000; margin-bottom:10px; text-align:center;}
.vreme-current-label{font-size:15px; opacity:.9; margin-bottom:4px}
.vreme-current-row{display:block; align-items:center; gap:10px; margin-bottom:4px}
.vreme-current-icon{width:46px;height:46px}
.vreme-current-temp{font-size:70px; font-weight:600; line-height:1}
.vreme-current-minmax{display:block; gap:12px; font-size:13px; opacity:.95}
.vreme-current-minmax .max{font-weight:600}
.vreme-current-minmax .min{opacity:.95}

/* Grid dana */
.vreme-mini-forecast{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(96px,1fr));
  gap:8px;
}
.vreme-mini-card{
  text-align:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(0, 0, 0, 0.13);
  border-radius:10px;
  padding:8px 6px;
  color:#000000;
}
.vreme-mini-day{font-size:12px; margin-bottom:2px; opacity:.95}
.vreme-mini-card img{width:26px;height:26px; display:block; margin:0 auto 4px}

/* Max/Min u dva reda */
.vreme-mini-temps.v2{display:block; font-size:12px; line-height:1.2}
.vreme-mini-temps.v2 .row{margin:2px 0}
.vreme-mini-temps.v2 .max{font-weight:700}
.vreme-mini-temps.v2 .min{opacity:.9}

/* po želji na uskim ekranima 4 kolone */
@media (max-width: 420px){
  .vreme-mini-forecast{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Linija sa subjektivnim osećajem + opisom */
.vreme-current-extra{
  margin-top: 4px;
  font-size: 13px;
  color: #000;
  opacity: .95;
  text-align: center;
}
.vreme-current-extra .feel{font-weight:600}
.vreme-current-extra .dot{margin:0 6px; opacity:.6}
.vreme-current-extra .desc{text-transform:capitalize}