/* SnoopyWap – kalkulator datuma */
.dtm { max-width: 600px; margin: 0 auto; display: grid; gap: 14px; }
.dtm [hidden] { display: none !important; }

/* kartice (tabovi) */
.dtm-kartice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dtm-jezicak { min-height: 52px; padding: 6px 8px; border: 2px solid var(--ivica); border-radius: 14px; background: var(--kartica); color: var(--tekst); font: 700 15px/1.25 var(--sans); cursor: pointer; }
.dtm-jezicak[aria-selected="true"] { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcentu); }
.dtm-jezicak:focus-visible, .dtm-cip:focus-visible, .dtm-kal:focus-within, .dtm-smer-polje:focus-visible + .dtm-smer-natpis { outline: 3px solid var(--akcent3-t); outline-offset: 2px; }

.dtm-ploca { display: grid; gap: 18px; min-width: 0; }
.dtm-unosi { display: grid; gap: 14px; align-content: start; min-width: 0; }
.dtm-desno { min-width: 0; }

/* polje za datum */
.dtm-datum { margin: 0; padding: 0; border: 0; min-width: 0; }
.dtm-oznaka { display: block; padding: 0; margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--slabo); }
.dtm-polja { display: flex; gap: 6px; }
.dtm-polja .dtm-dan { flex: 0 0 62px; }
.dtm-polja .dtm-mesec { flex: 1 1 0; }
.dtm-polja .dtm-godina { flex: 0 0 84px; }
.dtm-unos { box-sizing: border-box; width: 100%; min-width: 0; min-height: 50px; padding: 0 10px; border-radius: 14px; border: 2px solid var(--ivica); background: var(--polje); color: var(--tekst); font: 17px var(--sans); }
.dtm-unos:focus { outline: none; border-color: var(--akcent3); }
.dtm-unos[aria-invalid="true"] { border-color: var(--akcent2); }
.dtm-unos::placeholder { color: var(--slabo); opacity: 1; font-size: 15px; }
.dtm-dan, .dtm-godina, .dtm-koliko { text-align: center; }
.dtm-brzo, .dtm-precice { display: flex; flex-wrap: wrap; gap: 8px; }
.dtm-brzo { margin-top: 8px; }
.dtm-cip { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--ivica); background: var(--kartica2); color: var(--tekst); font: 700 15px var(--sans); cursor: pointer; overflow: hidden; }
/* ugrađeni birač datuma leži nevidljiv preko dugmeta "Kalendar" */
.dtm-kal-polje { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.dtm-greska { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--akcent2); background: var(--kartica2); color: var(--tekst); font-size: 15px; overflow-wrap: anywhere; }

/* izbor "uračunaj i poslednji dan" */
.dtm-izbor { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.dtm-kvacica { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--akcent3-t); }

/* dodaj / oduzmi */
.dtm-smer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dtm-smer-izbor { position: relative; display: block; cursor: pointer; }
.dtm-smer-polje { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dtm-smer-natpis { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 999px; border: 2px solid var(--ivica); background: var(--kartica2); color: var(--tekst); font: 700 16px var(--sans); }
.dtm-smer-polje:checked + .dtm-smer-natpis { background: var(--akcent3); border-color: var(--akcent3); color: var(--na-akcentu); }
.dtm-kolicina { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px; }

/* rezultat */
.dtm-izlaz { min-width: 0; }
.dtm-savet { margin: 0; padding: 14px; border-radius: 12px; background: var(--kartica2); color: var(--slabo); font-size: 15px; }
.dtm-natpis { margin: 0; color: var(--slabo); font-size: 15px; font-weight: 700; }
.dtm-glavno { margin: 2px 0 12px; font-size: 24px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.dtm-vest { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--zuta); color: var(--na-akcentu); font-weight: 700; }
.dtm-redovi { margin: 0; display: grid; gap: 6px; }
.dtm-red { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 9px 12px; border-radius: 12px; background: var(--kartica2); }
.dtm-red dt { color: var(--slabo); font-size: 15px; }
.dtm-red dd { margin: 0 0 0 auto; font-weight: 700; font-size: 16px; text-align: right; overflow-wrap: anywhere; }
.dtm-napomena { margin: 10px 0 0; color: var(--slabo); font-size: 15px; }

/* živi časovnik */
.dtm-sat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.dtm-sat-polje { display: grid; justify-items: center; padding: 10px 2px; border-radius: 12px; border: 2px solid var(--ivica); min-width: 0; }
.dtm-sat-broj { font: 800 24px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.dtm-sat-oznaka { color: var(--slabo); font-size: 15px; }

.dtm-podnozje { margin: 0; color: var(--slabo); font-size: 15px; text-align: center; }

@media (min-width: 800px) {
  .dtm { max-width: 880px; }
  .dtm-kartice { grid-template-columns: repeat(4, 1fr); }
  .dtm-ploca { grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
}