/* =========================================================
   Kufner i sinovi — zajednički stil za sve stranice
   Boje, razmaci i fontovi su varijable na vrhu: promijeni ih
   ovdje i promjena vrijedi za cijelu stranicu.
   ========================================================= */

:root {
  /* Boje: svi crveni naglasci na stranici su bordo
     (svjetlija crvena #d93731 ostaje samo u logotipu) */
  --crvena: #a3283c;
  --crvena-tamna: #7f1d2e;
  --crvena-svijetla: #f8e9ec;
  --bordo: #a3283c;        /* svijetlo bordo: gumbi "Rezerviraj" i istaknuti okvir */
  --bordo-tamna: #7f1d2e;
  --tamna: #1d1f22;
  --tamna-2: #2b2e33;
  --tekst: #24262a;
  --tekst-blagi: #5b6068;
  --pozadina: #ffffff;
  --pozadina-siva: #f4f5f6;
  --rub: #e2e4e7;
  --zelena: #1f8a4c;

  /* Slova: sistemski fontovi, ništa se ne preuzima = brže */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 12px;
  --sirina: 1120px;
  --sjena: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .06);
  --visina-trake: 72px; /* donja mobilna traka */
}

/* ---------- Osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--pozadina);
  /* mjesto za donju mobilnu traku da ne prekrije sadržaj */
  padding-bottom: calc(var(--visina-trake) + env(safe-area-inset-bottom));
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--crvena); }
a:hover { color: var(--crvena-tamna); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; color: var(--tamna); }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.25rem); letter-spacing: -.01em; }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--crvena); outline-offset: 2px; }

.skriveno-vizualno {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.preskoci {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--tamna); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.preskoci:focus { top: 8px; }

.omot { width: 100%; max-width: var(--sirina); margin: 0 auto; padding: 0 16px; }

.sekcija { padding: 56px 0; }
.sekcija--siva { background: var(--pozadina-siva); }
.sekcija__uvod { max-width: 640px; margin-bottom: 32px; }
.sekcija__uvod p { color: var(--tekst-blagi); }

.nadnaslov {
  display: inline-block; margin-bottom: 8px;
  font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--crvena);
}

/* ---------- Gumbi ---------- */
.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px;
  font: inherit; font-weight: 700; text-decoration: none;
  border: 2px solid transparent; border-radius: 10px; cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.gumb svg { width: 22px; height: 22px; flex-shrink: 0; }
.gumb--crveni { background: var(--bordo); color: #fff; }
.gumb--crveni:hover { background: var(--bordo-tamna); color: #fff; }
.gumb--obrub { border-color: currentColor; color: var(--tamna); background: transparent; }
.gumb--obrub:hover { background: var(--tamna); border-color: var(--tamna); color: #fff; }
.gumb--svijetli { border-color: rgba(255,255,255,.7); color: #fff; }
.gumb--svijetli:hover { background: #fff; color: var(--tamna); border-color: #fff; }

/* ---------- Zaglavlje ---------- */
.zaglavlje {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--rub);
}
.zaglavlje__red { display: flex; align-items: center; gap: 16px; min-height: 64px; }

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tamna); margin-right: auto; }

.logo__slika { height: 52px; width: auto; flex-shrink: 0; }

.izbornik-gumb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: none; border: 0; border-radius: 8px; color: var(--tamna); cursor: pointer;
}
.izbornik-gumb svg { width: 28px; height: 28px; }
.izbornik-gumb .ikona-zatvori { display: none; }
.izbornik-gumb[aria-expanded="true"] .ikona-otvori { display: none; }
.izbornik-gumb[aria-expanded="true"] .ikona-zatvori { display: block; }

.navigacija { display: none; }
.navigacija.otvoreno {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--rub); box-shadow: var(--sjena);
}
.navigacija ul { list-style: none; margin: 0; padding: 8px 16px 16px; }
.navigacija a {
  display: block; padding: 14px 4px; border-bottom: 1px solid var(--rub);
  color: var(--tamna); text-decoration: none; font-weight: 600; font-size: 1.1rem;
}
.navigacija a[aria-current="page"] { color: var(--crvena); }

.zaglavlje__akcije { display: none; }

/* ---------- Donja mobilna traka (Nazovi / Rezerviraj) ---------- */
.mobilna-traka {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--rub);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
.mobilna-traka .gumb { min-height: 54px; padding: 10px 12px; font-size: 1.05rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(217,55,49,.45), transparent 55%),
    linear-gradient(160deg, var(--tamna-2), var(--tamna) 70%);
  padding: 48px 0 56px;
}
.hero h1 { color: #fff; }
/* godina "1947." u bordo boji, kao gumb Rezerviraj */
.hero h1 .istaknuto { color: var(--bordo); }
.hero__tekst { position: relative; z-index: 1; max-width: 640px; }
.hero__isticanje { font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: .5em; }
.hero__podnaslov { font-size: 1.05rem; color: rgba(255,255,255,.85); margin-bottom: 24px; }
.hero__podnaslov a { color: #fff; font-weight: 700; }
.hero__podnaslov a:hover { color: #fff; text-decoration-thickness: 2px; }
.hero__gumbi { display: flex; flex-direction: column; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.hero__napomena {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  font-size: .95rem; color: rgba(255,255,255,.9);
}
.hero__napomena strong { color: var(--bordo); }
.hero__napomena svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.hero__guma {
  position: absolute; right: -140px; bottom: -160px; width: 420px; opacity: .12;
  color: #fff; pointer-events: none;
}

/* oznaka "Sada otvoreno / zatvoreno" */
/* Oznaka otvoreno/zatvoreno kao baterija mobitela */
.status {
  display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 1px 6px; margin: 0 0 14px;
  padding: 5px 9px; border-radius: 9px; background: rgba(255,255,255,.08);
  font-size: .75rem; font-weight: 700; line-height: 1.1;
}
.status__natpis { grid-column: 1 / -1; text-transform: uppercase; letter-spacing: .08em; font-size: .65rem; }
.status--otvoreno .status__natpis { color: #5ee29a; }
.status--zatvoreno .status__natpis { color: #ff8a8a; }
.baterija {
  position: relative; display: block; width: 32px; height: 14px; padding: 2px;
  border: 1.5px solid currentColor; border-radius: 4px; opacity: .9;
}
.baterija::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 2.5px; height: 6px; transform: translateY(-50%);
  border-radius: 0 2px 2px 0; background: currentColor;
}
.baterija__punjenje { display: block; height: 100%; border-radius: 1.5px; background: #34d27b; transition: width .6s ease; }
.baterija--srednje .baterija__punjenje { background: #f5c542; }
.baterija--malo .baterija__punjenje { background: #ff6b6b; }
.status__postotak { font-variant-numeric: tabular-nums; }
.status--zatvoreno .baterija, .status--zatvoreno .status__postotak { opacity: .6; }
.status[hidden] { display: none; }

/* ---------- Vrh podstranica (O nama, Vulkanizacija...) ---------- */
.stranica-vrh {
  color: #fff; padding: 40px 0 44px;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(217,55,49,.4), transparent 55%),
    linear-gradient(160deg, var(--tamna-2), var(--tamna) 70%);
}
.stranica-vrh h1 { color: #fff; }
.stranica-vrh h1 .istaknuto { color: var(--bordo); }
.stranica-vrh p { color: rgba(255,255,255,.85); font-size: 1.1rem; max-width: 640px; margin: 0; }
.stranica-vrh .nadnaslov { color: rgba(255,255,255,.7); }
.stranica-vrh .status:not([hidden]) { display: grid; width: fit-content; }

/* ---------- O nama ---------- */
.o-nama__tekst { max-width: 760px; }
.o-nama__tekst p { font-size: 1.1rem; }
.o-nama__tekst h2 { font-size: 1.25rem; margin-top: 1.6em; }
.o-nama__tekst p:first-child::first-letter {
  float: left; font-size: 3.4em; line-height: .9; font-weight: 800; margin: 4px 10px 0 0; color: var(--bordo);
}

/* ---------- Cjenik ---------- */
.cjenik-pdv {
  display: inline-block; margin: 0 0 20px; padding: 8px 14px; border-radius: 8px;
  background: var(--bordo); color: #fff; font-weight: 700;
}
.stranica-vrh p strong { color: #fff; }
.cjenik-skok { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cjenik-skok a {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--rub); background: var(--pozadina-siva);
  color: var(--tamna); font-weight: 700; font-size: .95rem; text-decoration: none;
}
.cjenik-skok__naslov { margin: 0 0 8px; font-size: .9rem; font-weight: 700; color: var(--tekst-blagi); }
.cjenik-skok a:hover { border-color: var(--bordo); color: var(--bordo); }

.cjenik {
  width: 100%; margin: 0 0 40px; border-collapse: collapse;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--sjena);
  scroll-margin-top: 100px;
}
.cjenik caption {
  caption-side: top; padding: 14px 16px; text-align: left;
  background: var(--bordo); color: #fff; font-weight: 800; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .03em; border-radius: var(--radius) var(--radius) 0 0;
}
.cjenik th, .cjenik td { padding: 11px 16px; border-bottom: 1px solid var(--rub); text-align: left; vertical-align: top; }
.cjenik td { text-align: right; white-space: nowrap; font-weight: 700; color: var(--tamna); width: 1%; }
.cjenik th { font-weight: 500; }
.cjenik th small { display: block; color: var(--tekst-blagi); font-size: .85rem; }
.cjenik tbody tr:nth-child(even):not(.cjenik__skupina) { background: #fafafb; }
.cjenik .cjenik__skupina th {
  background: var(--pozadina-siva); font-weight: 700; color: var(--tamna); font-size: .95rem;
  border-top: 2px solid var(--rub);
}

/* ---------- Posebne usluge ispod vrha naslovne (Hotel za gume, Detailing balans) ---------- */
.posebno { padding: 32px 0; }
.posebno .omot > * { max-width: 760px; }
.posebno h2 {
  display: flex; align-items: center; gap: 12px;
  color: var(--bordo); text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.4rem, 4vw, 1.75rem); margin-bottom: .4em;
}
.posebno__ikona { width: 1.5em; height: 1.5em; flex-shrink: 0; }
.posebno p { font-size: 1.1rem; margin-bottom: .6em; }
.posebno p:last-child { margin-bottom: 0; }
.posebno + .posebno { padding-top: 0; }
.posebno h3 {
  margin: 1.4em 0 .6em; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tamna);
}
.posebno__popis { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 1.1rem; }
.posebno__popis li { position: relative; padding-left: 34px; }
.posebno__popis li::before {
  /* kvačica u bordo krugu */
  content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bordo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.posebno__poveznica { color: var(--bordo); font-weight: 700; }
.posebno__poveznica:hover { color: var(--bordo-tamna); }
.posebno .posebno__oznaka {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px;
  background: var(--bordo); color: #fff; font-size: .85rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Kartice usluga ---------- */
.kartice { display: grid; gap: 16px; }
.kartica {
  display: flex; flex-direction: column;
  padding: 24px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--rub);
  text-decoration: none; color: var(--tekst);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.kartica:hover { border-color: var(--crvena); box-shadow: var(--sjena); transform: translateY(-2px); color: var(--tekst); }
.kartica__ikona {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px;
  border-radius: 12px; background: var(--bordo); color: #fff;
}
.kartica__ikona svg { width: 28px; height: 28px; }
.kartica p { color: var(--tekst-blagi); margin-bottom: 16px; }
.kartica__vise { margin-top: auto; font-weight: 700; color: var(--crvena); }
.kartica__popis { margin: 0; padding-left: 1.1em; color: var(--tekst-blagi); display: grid; gap: 4px; }
.kartica__popis li::marker { color: var(--bordo); }
.poziv .poziv__napomena { margin: 20px auto 0; font-size: .95rem; font-weight: 700; color: var(--bordo); }

/* ---------- Akcija ---------- */
.akcija {
  display: grid; gap: 24px; align-items: center;
  padding: 32px 24px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--crvena), var(--crvena-tamna));
  color: #fff;
}
.akcija h2 { color: #fff; }
.akcija p { color: rgba(255,255,255,.9); }
.akcija__oznaka {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px;
  background: #fff; color: var(--crvena); font-weight: 800; font-size: .85rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.akcija__cijena { font-size: 2.5rem; font-weight: 800; line-height: 1; margin: 8px 0 4px; }
.akcija__cijena small { font-size: 1rem; font-weight: 600; opacity: .85; }
.akcija .gumb { background: #fff; color: var(--crvena); }
.akcija .gumb:hover { background: var(--tamna); color: #fff; }
.akcija__sitno { font-size: .85rem; opacity: .8; margin: 12px 0 0; }

/* ---------- Brendovi ---------- */
.brendovi {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.brendovi li {
  padding: 10px 18px; border-radius: 999px;
  background: var(--pozadina-siva); border: 1px solid var(--rub);
  font-weight: 700; color: var(--tekst-blagi); letter-spacing: .02em;
}

/* ---------- Lokacija ---------- */
.lokacija { display: grid; gap: 24px; }
.podaci { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }
.podaci li { display: flex; gap: 14px; align-items: flex-start; }
.podaci svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--crvena); margin-top: 2px; }
.podaci a { color: var(--tamna); font-weight: 700; text-decoration: none; }
.podaci a:hover { color: var(--crvena); }

.radno-vrijeme { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.radno-vrijeme th, .radno-vrijeme td { padding: 10px 0; border-bottom: 1px solid var(--rub); text-align: left; }
.radno-vrijeme td { text-align: right; font-weight: 700; }
.radno-vrijeme tr.danas th, .radno-vrijeme tr.danas td { color: var(--crvena); }

.lokacija__gumbi { display: flex; flex-wrap: wrap; gap: 12px; }

/* Karta se učitava tek na klik (brže učitavanje stranice) */
.karta {
  position: relative; min-height: 300px; border-radius: var(--radius); overflow: hidden;
  background:
    linear-gradient(rgba(29,31,34,.55), rgba(29,31,34,.55)),
    repeating-linear-gradient(0deg, #dfe3e6 0 2px, transparent 2px 48px),
    repeating-linear-gradient(90deg, #dfe3e6 0 2px, transparent 2px 48px),
    #eef0f2;
}
.karta iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karta__gumb {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
  text-align: center; padding: 16px;
}
.karta__gumb svg { width: 44px; height: 44px; }
.karta__gumb span { padding: 10px 18px; border-radius: 10px; background: var(--crvena); }
.karta__gumb small { font-weight: 400; opacity: .85; max-width: 280px; }

/* ---------- Završni poziv ---------- */
.poziv { text-align: center; }
.poziv p { color: var(--tekst-blagi); max-width: 560px; margin: 0 auto 24px; }
.poziv__gumbi { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 0 auto; }

/* ---------- Podnožje ---------- */
.podnozje { background: var(--tamna); color: rgba(255,255,255,.75); padding: 48px 0 24px; font-size: .95rem; }
.podnozje h2 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.podnozje a { color: #fff; text-decoration: none; }
.podnozje a:hover { text-decoration: underline; color: #fff; }
.podnozje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.podnozje__stupci { display: grid; gap: 32px; margin-bottom: 32px; }
.podnozje__dno { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: .85rem; }

/* =========================================================
   Veći ekrani
   ========================================================= */
@media (min-width: 640px) {
  .hero__gumbi, .poziv__gumbi { flex-direction: row; }
  .poziv__gumbi { max-width: none; justify-content: center; }
  .kartice { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .kartice--siroke { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .podnozje__stupci { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
  .sekcija { padding: 88px 0; }
  .hero { padding: 96px 0 104px; }
  .hero__guma { right: -60px; bottom: -120px; width: 560px; opacity: .14; }

  .akcija { grid-template-columns: 1.4fr 1fr; padding: 48px; }
  .lokacija { grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
  .stranica-vrh { padding: 72px 0 76px; }
  .posebno { padding: 56px 0; }
  .karta { min-height: 100%; height: 100%; }
}

/* Zaglavlje s punim izbornikom tek kad ima mjesta za sve stavke */
@media (min-width: 1180px) {
  body { padding-bottom: 0; }
  .mobilna-traka { display: none; }

  .izbornik-gumb { display: none; }
  .navigacija, .navigacija.otvoreno {
    display: block; position: static; box-shadow: none; border: 0; background: none;
  }
  .navigacija ul { display: flex; gap: 2px; padding: 0; }
  .navigacija a { border: 0; padding: 8px 10px; font-size: 1rem; border-radius: 8px; }
  .navigacija a:hover { background: var(--pozadina-siva); }

  .zaglavlje__red { min-height: 84px; max-width: 1320px; }
  .logo__slika { height: 64px; }
  .zaglavlje__akcije { display: flex; align-items: center; gap: 12px; }
  .zaglavlje__tel { font-weight: 700; color: var(--tamna); text-decoration: none; white-space: nowrap; }
  .zaglavlje__akcije .gumb { min-height: 44px; padding: 8px 18px; }
  .zaglavlje__tel { display: none; }
}

@media (min-width: 1360px) {
  .zaglavlje__tel { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* =========================================================
   REZERVACIJE (stranka i upravljačka ploča)
   ========================================================= */
:root { --zeleno: #1f8a4c; --zeleno-tamno: #166a39; --crveno-zauzeto: var(--bordo); }

.demo-traka {
  margin: 0 0 24px; padding: 12px 16px; border-radius: 10px;
  background: #fff7e0; border: 1px solid #f0d58a; color: #6b5200; font-size: .95rem;
}
.demo-traka strong { color: #4d3b00; }

.rez-korak { margin: 0 0 36px; }
.rez-korak > h2 { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; margin-bottom: 16px; }
.rez-korak__broj {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; background: var(--bordo); color: #fff; font-size: 1rem;
}
.rez-napomena { color: var(--tekst-blagi); margin: -6px 0 16px; }

/* Odabir usluga */
.rez-opcije { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 20px; }
.rez-opcija {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 2px solid var(--rub); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 600;
}
.rez-opcija input { width: 22px; height: 22px; accent-color: var(--bordo); flex-shrink: 0; }
.rez-opcija:has(input:checked) { border-color: var(--bordo); background: var(--crvena-svijetla); }
.rez-pitanje { padding: 16px; border-radius: 12px; background: var(--pozadina-siva); }
.rez-pitanje legend { float: left; width: 100%; font-weight: 700; padding: 0; margin-bottom: 10px; }
.rez-pitanje legend + * { clear: both; }
.rez-pitanje .rez-opcije { margin: 0; grid-template-columns: repeat(2, minmax(0, 160px)); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Dani */
.rez-dani { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.rez-dan {
  flex: 0 0 auto; min-width: 74px; padding: 10px 8px; border-radius: 12px; scroll-snap-align: start;
  border: 2px solid var(--rub); background: #fff; font: inherit; cursor: pointer; text-align: center; line-height: 1.2;
}
.rez-dan small { display: block; font-size: .8rem; color: var(--tekst-blagi); font-weight: 700; text-transform: uppercase; }
.rez-dan strong { font-size: 1.1rem; }
.rez-dan[aria-pressed="true"] { border-color: var(--bordo); background: var(--bordo); color: #fff; }
.rez-dan[aria-pressed="true"] small { color: rgba(255,255,255,.85); }
.rez-dan:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* Legenda i termini */
.rez-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 14px; font-size: .9rem; color: var(--tekst-blagi); }
.rez-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.rez-legenda svg { width: 26px; height: 18px; }
.rez-termini { display: grid; gap: 6px; }
.rez-termin { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--pozadina-siva); }
.rez-termin__vrijeme { width: 54px; flex-shrink: 0; font-weight: 800; font-size: 1.05rem; }
.rez-termin__auti { display: flex; flex-wrap: wrap; gap: 6px; }
.rez-prazno { padding: 18px; border-radius: 10px; background: var(--pozadina-siva); color: var(--tekst-blagi); }

/* Ikona autića */
.auto {
  display: inline-grid; place-items: center; width: 46px; height: 36px; padding: 0;
  border: 2px solid transparent; border-radius: 8px; background: #fff; cursor: pointer;
}
.auto svg { width: 34px; height: 22px; }
.auto--slobodno { color: var(--zeleno); }
.auto--slobodno:hover { border-color: var(--zeleno); }
.auto--zauzeto, .auto--blokirano { color: var(--crveno-zauzeto); cursor: not-allowed; }
.auto--odabrano { border-color: var(--zeleno-tamno); background: var(--zeleno); color: #fff; box-shadow: 0 0 0 3px rgba(31,138,76,.3); }
.auto:focus-visible { outline: 3px solid var(--bordo); outline-offset: 1px; }

/* Obrazac */
.rez-polja { display: grid; gap: 14px; }
.polje label { display: block; font-weight: 700; margin-bottom: 6px; }
.polje label small { font-weight: 400; color: var(--tekst-blagi); }
.polje input, .polje textarea, .polje select {
  width: 100%; min-height: 50px; padding: 10px 14px; border: 2px solid var(--rub); border-radius: 10px;
  font: inherit; background: #fff; color: var(--tekst);
}
.polje textarea { min-height: 90px; resize: vertical; }
.polje input:focus, .polje textarea:focus, .polje select:focus { outline: none; border-color: var(--bordo); }
.polje--skriveno { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rez-gdpr { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; font-size: .95rem; }
.rez-gdpr input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--bordo); flex-shrink: 0; }

.rez-sazetak { padding: 16px 18px; border-radius: 12px; border: 2px solid var(--bordo); background: var(--crvena-svijetla); margin-bottom: 16px; }
.rez-sazetak dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.rez-sazetak dt { font-weight: 700; }
.rez-sazetak dd { margin: 0; }
.rez-greska { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: #fdecea; color: #8e1c1c; font-weight: 600; }
.rez-greska:empty { display: none; }
.rez-uspjeh { text-align: center; padding: 32px 20px; border-radius: 16px; background: var(--pozadina-siva); }
.rez-uspjeh__ikona { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: var(--zeleno); color: #fff; }
.rez-uspjeh__ikona svg { width: 40px; height: 40px; }
.rez-uspjeh .rez-sazetak { text-align: left; max-width: 520px; margin: 20px auto; }
.gumb--siroki { width: 100%; }
.gumb[disabled] { opacity: .6; cursor: wait; }

@media (min-width: 720px) {
  .rez-polja { grid-template-columns: 1fr 1fr; }
  .polje--puno { grid-column: 1 / -1; }
}

/* ---------- Upravljačka ploča (admin.html) ---------- */
.admin { padding: 20px 0 60px; }
.admin-prijava { max-width: 420px; margin: 40px auto; padding: 28px; border-radius: 16px; background: #fff; box-shadow: var(--sjena); border: 1px solid var(--rub); }
.admin-prijava .polje { margin-bottom: 14px; }
.admin-traka { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.admin-traka h1 { font-size: 1.5rem; margin: 0 auto 0 0; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.admin-nav input[type=date] { min-height: 44px; padding: 6px 10px; border: 2px solid var(--rub); border-radius: 10px; font: inherit; }
.admin-nav .gumb { min-height: 44px; padding: 6px 14px; }
.admin-dan-naslov { font-size: 1.25rem; margin: 6px 0 12px; }
.admin-kartica { padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--rub); box-shadow: var(--sjena); margin-bottom: 18px; }
.admin-kapacitet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-kapacitet select, .admin-sat select { min-height: 40px; padding: 4px 8px; border: 2px solid var(--rub); border-radius: 8px; font: inherit; font-weight: 700; }
.admin-sati { display: grid; gap: 10px; }
.admin-sat { border: 1px solid var(--rub); border-radius: 12px; overflow: hidden; }
.admin-sat__glava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 8px 12px; background: var(--pozadina-siva); font-weight: 800; }
.admin-sat__blok { min-height: 36px; padding: 4px 10px; font-size: .85rem; }
.admin-sat__glava label { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.admin-sat .rez-termin { border-radius: 0; background: #fff; border-top: 1px solid var(--rub); }
.admin-sat .rez-termin__info { margin-left: auto; font-size: .85rem; color: var(--tekst-blagi); white-space: nowrap; }
/* Na ploči: blokirao moderator = sivi autić s lokotom,
   rezervirao preko telefona = crveni autić sa slušalicom (stranke sve vide kao crveno) */
.admin .auto { position: relative; }
.admin .auto--blokirano { color: #8a9099; background: #eceff2; }
.admin .auto--blokirano::after, .admin .auto--telefon::after {
  content: ""; position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #fff; background-size: 11px; background-repeat: no-repeat; background-position: center;
}
.admin .auto--blokirano::after {
  background-color: #5b6068;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
.admin .auto--telefon::after {
  background-color: var(--tamna);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}
.admin .auto--zauzeto, .admin .auto--blokirano { cursor: pointer; }
.admin .auto--zauzeto:hover { border-color: var(--crveno-zauzeto); }
.admin .auto--blokirano:hover { border-color: #5b6068; }
.admin-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--tekst-blagi); margin-bottom: 10px; }
.admin-legenda .auto { width: 32px; height: 24px; pointer-events: none; }
.admin-legenda .auto svg { width: 24px; height: 16px; }
.admin-legenda span { display: inline-flex; align-items: center; gap: 6px; }

.admin-popis { width: 100%; border-collapse: collapse; font-size: .95rem; }
.admin-popis th, .admin-popis td { padding: 8px 10px; border-bottom: 1px solid var(--rub); text-align: left; vertical-align: top; }
.admin-popis tr { cursor: pointer; }
.admin-popis tbody tr:hover { background: var(--pozadina-siva); }
.oznaka { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--pozadina-siva); }
.oznaka--hotel { background: #e8f1ff; color: #1d4f91; }
.oznaka--telefon { background: #fff4d6; color: #7a5800; }
.oznaka--status-dosao, .oznaka--status-gotovo { background: #e3f4ea; color: var(--zeleno-tamno); }
.oznaka--status-nije_dosao, .oznaka--status-otkazana { background: #fdecea; color: #8e1c1c; }

/* Bočni prozor (detalji, nova rezervacija) */
.admin-prozor { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; background: rgba(0,0,0,.35); }
.admin-prozor[hidden] { display: none; }
.admin-prozor__sadrzaj { width: min(520px, 100%); height: 100%; overflow-y: auto; background: #fff; padding: 20px 20px 40px; box-shadow: -4px 0 24px rgba(0,0,0,.2); }
.admin-prozor__glava { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.admin-prozor__glava h2 { margin: 0; font-size: 1.3rem; }
.admin-gumbi { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.admin-gumbi .gumb { min-height: 44px; padding: 6px 14px; font-size: .95rem; }
.admin-obavijest { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; padding: 12px 18px; border-radius: 10px; background: var(--tamna); color: #fff; font-weight: 600; box-shadow: var(--sjena); }
.admin-obavijest[hidden] { display: none; }
.admin-premjestanje { padding: 12px 14px; border-radius: 10px; background: #fff4d6; border: 1px solid #f0d58a; margin-bottom: 12px; font-weight: 600; }
.admin-premjestanje[hidden] { display: none; }
.admin-meni { position: absolute; z-index: 80; display: grid; gap: 4px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.2); border: 1px solid var(--rub); }
.admin-meni button { padding: 10px 14px; border: 0; border-radius: 8px; background: none; font: inherit; font-weight: 600; text-align: left; cursor: pointer; white-space: nowrap; }
.admin-meni button:hover { background: var(--pozadina-siva); }
@media (min-width: 960px) {
  .admin-raspored { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
}
.rez-uspjeh .gumb { white-space: normal; }

.admin-trazilica label { display: block; margin-bottom: 8px; }
.admin-trazilica input {
  width: 100%; min-height: 52px; padding: 10px 14px 10px 44px; border: 2px solid var(--rub); border-radius: 10px; font: inherit; font-size: 1.05rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6068' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center / 20px no-repeat;
}
.admin-trazilica input:focus { outline: none; border-color: var(--bordo); }
.admin-trazilica .admin-popis { margin-top: 8px; }

/* =========================================================
   RADIONICA (radnici na mobitelu) i evidencija rada
   ========================================================= */
.oznaka--status-u_radu { background: #fff4d6; color: #7a5800; }
.oznaka--status-aktivna { background: var(--pozadina-siva); color: var(--tekst-blagi); }
.oznaka--kasni { background: #fdecea; color: #8e1c1c; }

body.radionica { padding-bottom: env(safe-area-inset-bottom); background: var(--pozadina-siva); }
.rad-zaglavlje {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--rub);
}
.rad-zaglavlje__logo { width: 56px; height: auto; }
.rad-zaglavlje__tko { margin-left: auto; font-size: .9rem; text-align: right; }
.rad-zaglavlje__tko a, .rad-zaglavlje__tko button { color: var(--bordo); font: inherit; font-weight: 700; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.rad-sadrzaj { max-width: 640px; margin: 0 auto; padding: 16px 16px 40px; }

.rad-prijava { text-align: center; padding-top: 12px; }
.rad-prijava h1 { font-size: 1.5rem; }
.rad-pin { display: flex; justify-content: center; gap: 16px; margin: 20px 0 8px; }
.rad-pin span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tamna); }
.rad-pin span.puna { background: var(--tamna); }
.rad-tipkovnica { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 320px; margin: 20px auto 0; }
.rad-tipkovnica button {
  min-height: 68px; border: 1px solid var(--rub); border-radius: 14px; background: #fff;
  font: inherit; font-size: 1.6rem; font-weight: 700; color: var(--tamna); cursor: pointer; box-shadow: var(--sjena);
}
.rad-tipkovnica button:active { background: var(--crvena-svijetla); }

.rad-skeniraj { width: 100%; min-height: 76px; font-size: 1.25rem; border-radius: 16px; }
.rad-skeniraj svg { width: 32px; height: 32px; }
.rad-rucno { display: block; margin: 8px auto 16px; padding: 8px; border: 0; background: none; font: inherit; color: var(--bordo); font-weight: 700; text-decoration: underline; cursor: pointer; }

.rad-filteri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.rad-filteri button {
  min-height: 48px; padding: 4px; border: 2px solid var(--rub); border-radius: 10px; background: #fff;
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; line-height: 1.2;
}
.rad-filteri button b { display: block; font-size: 1.1rem; }
.rad-filteri button[aria-pressed="true"] { border-color: var(--bordo); background: var(--bordo); color: #fff; }

.rad-lista { display: grid; gap: 12px; }
.rad-auto { padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--rub); border-left: 6px solid var(--rub); box-shadow: var(--sjena); }
.rad-auto--dosao { border-left-color: var(--zeleno); }
.rad-auto--u_radu { border-left-color: #e0a800; }
.rad-auto--gotovo, .rad-auto--nije_dosao { opacity: .75; }
.rad-auto--gotovo { border-left-color: var(--zeleno-tamno); }
.rad-auto--nije_dosao { border-left-color: #8e1c1c; }
.rad-auto__vrh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.rad-auto__vrijeme { font-size: 1.3rem; font-weight: 800; margin-right: 4px; }
.rad-auto__vozilo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-weight: 600; }
.rad-auto p { margin: 6px 0 0; }
.rad-auto__usluge { color: var(--tekst-blagi); }
.rad-auto__hotel { display: inline-block; padding: 2px 10px; border-radius: 8px; background: #e8f1ff; color: #1d4f91; font-weight: 700; }
.rad-auto__opaska { font-style: italic; }
.rad-auto__rad { font-size: .95rem; }
.rad-auto__gumbi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rad-auto__gumbi .gumb { flex: 1 1 140px; min-height: 56px; font-size: 1.05rem; white-space: normal; }
.rad-auto__gumbi .rad-ponisti { flex: 0 0 auto; min-height: 56px; font-size: .9rem; }
.rad-gumb-gotovo { background: var(--zeleno); color: #fff; }
.rad-gumb-gotovo:hover { background: var(--zeleno-tamno); color: #fff; }

/* registracija nacrtana kao tablica */
.rad-tablica {
  display: inline-flex; align-items: stretch; border: 2px solid #111; border-radius: 6px; background: #fff; overflow: hidden;
  font-family: "DIN Alternate", "Arial Narrow", Arial, sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: .04em; color: #111;
  padding-right: 8px; white-space: nowrap;
}
.rad-tablica__drzava {
  display: grid; place-items: end center; min-width: 22px; margin-right: 8px; padding: 2px 3px;
  background: #1d4fb8; color: #fff; font-size: .62rem; letter-spacing: 0;
}

/* kamera */
.rad-skener { position: fixed; inset: 0; z-index: 100; background: #000; overflow: hidden; }
.rad-skener[hidden] { display: none; }
.rad-skener video { width: 100%; height: 100%; object-fit: cover; }
.rad-skener__okvir {
  position: absolute; left: 50%; top: 42%; width: min(86vw, 520px); aspect-ratio: 4.2 / 1; transform: translate(-50%, -50%);
  border: 3px solid #fff; border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.5);
}
.rad-skener__poruka { position: absolute; left: 16px; right: 16px; top: calc(42% + min(86vw, 520px) / 8.4 + 16px); margin: 0; text-align: center; color: #fff; font-weight: 700; font-size: 1.1rem; }
.rad-skener__gumbi { position: absolute; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.rad-skener__gumbi .gumb { flex: 1; min-height: 60px; }
.rad-skener__zatvori { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; cursor: pointer; }

/* prozor odozdo (mobitel) */
.rad-prozor { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.45); }
.rad-prozor[hidden] { display: none; }
.rad-prozor__sadrzaj { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 18px 18px 0 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .rad-prozor { align-items: center; } .rad-prozor__sadrzaj { border-radius: 18px; } }
.rad-unos-tablice { font-size: 1.5rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.rad-upozorenje { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff4d6; color: #6b5200; font-weight: 600; }
.rad-uspjeh { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: #e3f4ea; color: var(--zeleno-tamno); font-weight: 800; font-size: 1.1rem; }
.rad-sazetak { padding: 14px; border-radius: 12px; background: var(--pozadina-siva); margin-bottom: 12px; }
.rad-sazetak p { margin: 8px 0 0; }
.rad-povijest { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--rub); font-size: .95rem; }
.rad-izbor { display: grid; gap: 8px; }
.rad-izbor button { display: grid; gap: 2px; padding: 12px 14px; border: 2px solid var(--rub); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.rad-izbor button span { font-size: .9rem; color: var(--tekst-blagi); }
.rad-izbor button:hover { border-color: var(--bordo); }

/* evidencija rada (upravljačka ploča) */
.admin-evidencija select { min-height: 40px; padding: 4px 8px; border: 2px solid var(--rub); border-radius: 8px; font: inherit; font-weight: 700; }
.admin-evidencija .admin-popis tr { cursor: default; }
.admin-evidencija .admin-popis td:not(:first-child), .admin-evidencija .admin-popis th:not(:first-child) { text-align: right; white-space: nowrap; }
.admin-brojke { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.admin-brojke div { padding: 10px; border-radius: 10px; background: var(--pozadina-siva); text-align: center; font-size: .85rem; color: var(--tekst-blagi); }
.admin-brojke strong { display: block; font-size: 1.4rem; color: var(--tamna); }
.admin-radnici .admin-popis tr { cursor: default; }
.admin-radnici input, .admin-radnici select { min-height: 40px; padding: 4px 8px; border: 2px solid var(--rub); border-radius: 8px; font: inherit; width: 100%; }
.admin-radnici input[type=checkbox] { width: 22px; min-height: 22px; accent-color: var(--bordo); }
.rad-skener .gumb--svijetli { background: rgba(0,0,0,.55); }
.admin-radnici input[data-k="ime"] { min-width: 140px; }
.admin-radnici select { min-width: 96px; }
.admin-radnici__aktivan { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.admin-radnici__aktivan span { display: none; }
@media (max-width: 600px) {
  .admin-radnici thead { display: none; }
  .admin-radnici tr { display: grid; grid-template-columns: 1fr 90px; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rub); }
  .admin-radnici td { padding: 0; border: 0; }
  .admin-radnici td:nth-child(4) { display: flex; align-items: center; }
  .admin-radnici td:nth-child(5) { grid-column: 1 / -1; }
  .admin-radnici td:nth-child(5) .gumb { width: 100%; }
  .admin-radnici input[data-k="ime"] { min-width: 0; }
  .admin-radnici__aktivan span { display: inline; }
}
@media (max-width: 480px) {
  .admin-naslov { display: none; }
  .zaglavlje__red:has(#odjava) { gap: 8px; }
  .zaglavlje__red:has(#odjava) .logo__slika { width: 96px; }
}
.admin-gumbi .gumb { white-space: normal; text-align: center; }

/* ---------- Naplata u radionici ---------- */
.rad-naplata { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 8px; font-weight: 700; font-size: .9rem; }
.rad-naplata--ceka { background: #fff4d6; color: #7a5800; }
.rad-naplata--izdan { background: #e3f4ea; color: var(--zeleno-tamno); }
.rad-nap-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 700; }
.rad-nap-kat { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.rad-nap-kat button {
  flex: 0 0 auto; min-height: 46px; padding: 6px 14px; border: 2px solid var(--rub); border-radius: 999px; background: #fff;
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.rad-nap-kat button[aria-pressed="true"] { background: var(--bordo); border-color: var(--bordo); color: #fff; }
.rad-nap-kat button b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; border-radius: 999px; background: var(--zeleno); color: #fff; font-size: .8rem; }
.rad-nap-skupina { margin: 14px 0 6px; font-size: .95rem; color: var(--tekst-blagi); }
.rad-nap-stavke { display: grid; gap: 6px; }
.rad-nap-stavka {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px;
  border: 2px solid var(--rub); border-radius: 12px; background: #fff; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.rad-nap-stavka span:last-child { white-space: nowrap; }
.rad-nap-stavka.odabrana { border-color: var(--zeleno); background: #e3f4ea; }
.rad-nap-stavka.odabrana b { color: var(--zeleno-tamno); }
.rad-nap-kolicina { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 4px 0 8px; }
.rad-nap-kolicina button { min-height: 54px; border: 2px solid var(--tamna); border-radius: 12px; background: #fff; font: inherit; font-size: 1.3rem; font-weight: 800; cursor: pointer; }
.rad-nap-kolicina button.odabrana { background: var(--zeleno); border-color: var(--zeleno); color: #fff; }
.rad-nap-kolicina .rad-nap-ukloni { grid-column: 1 / -1; min-height: 44px; font-size: 1rem; border-color: #8e1c1c; color: #8e1c1c; }
.rad-nap-dno { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 2px solid var(--rub); box-shadow: 0 -6px 16px rgba(0,0,0,.06); }
.rad-nap-odabrano { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.rad-nap-odabrano li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--rub); }
.rad-nap-odabrano strong { white-space: nowrap; }
.rad-nap-dno textarea { min-height: 48px; }
.rad-nap-ukupno { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; font-size: 1.05rem; }
.rad-nap-ukupno strong { font-size: 1.5rem; }

/* ---------- Blagajna (upravljačka ploča) ---------- */
.admin-blagajna { border: 2px solid var(--bordo); }
.admin-blagajna__naslov { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; margin: 0 0 10px; }
.admin-blagajna__naslov .oznaka { font-size: .85rem; }
.admin-racun-kartica { padding: 12px 0; border-top: 1px solid var(--rub); }
.admin-racun-kartica:first-child { border-top: 0; padding-top: 0; }
.admin-racun-kartica__vrh { margin-bottom: 6px; }
.admin-racun { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-racun td { padding: 4px 6px; border-bottom: 1px solid var(--rub); vertical-align: top; }
.admin-racun td:first-child, .admin-racun td:nth-child(3), .admin-racun td:last-child { white-space: nowrap; text-align: right; }
.admin-racun td:nth-child(3) { color: var(--tekst-blagi); }
.admin-racun tfoot td { border: 0; padding-top: 8px; font-weight: 800; font-size: 1.05rem; text-align: right; }
.admin-racun-napomena { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff4d6; font-size: .92rem; }
.admin-izdani { margin-top: 12px; font-size: .92rem; }
.admin-izdani summary { cursor: pointer; font-weight: 700; color: var(--tekst-blagi); }
.admin-izdani ul { margin: 6px 0 0; padding-left: 18px; }
.admin-izdani button { border: 0; background: none; color: var(--bordo); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }
.admin-ispravak input { width: 100%; min-height: 38px; padding: 4px 6px; border: 2px solid var(--rub); border-radius: 8px; font: inherit; }
.admin-ispravak td:first-child input { width: 64px; }
.admin-ispravak td:last-child input { width: 96px; }
.admin-ispravak tr { cursor: default; }
@media (max-width: 600px) {
  .admin-racun, .admin-racun tbody, .admin-racun tfoot { display: block; }
  .admin-racun tr { display: grid; grid-template-columns: auto 1fr auto; gap: 0 8px; border-bottom: 1px solid var(--rub); }
  .admin-racun td { border: 0; padding: 4px 0; }
  .admin-racun td:nth-child(3) { display: none; }
  .admin-racun tfoot tr { grid-template-columns: 1fr auto; border: 0; }
}
.rad-nap-stavka.otvorena { border-color: var(--bordo); box-shadow: 0 0 0 3px var(--crvena-svijetla); }
.rad-auto__stavke { display: grid; gap: 2px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--pozadina-siva); font-size: .88rem; }
.rad-auto__stavke strong { margin-top: 4px; font-size: .95rem; }
.rad-bez-naplate { margin-top: 16px; }
.rad-bez-naplate summary { cursor: pointer; color: var(--tekst-blagi); font-weight: 600; margin-bottom: 10px; }
/* u radionici obavijest ide gore, da ne prekriva tipke */
body.radionica .admin-obavijest { top: calc(70px + env(safe-area-inset-top)); bottom: auto; width: max-content; max-width: calc(100% - 32px); text-align: center; }