/* Klizna karta — zajednički izgled za gosta i za osoblje (`OPS-19`).
 *
 * Pravila su doslovno ona koja su do `OPS-19` stajala u `izlog.css`, i svako
 * je nastalo iz kvara: blijed križić dok pin nije dirnut (`K55`), pločice kao
 * apsolutne slike, `touch-action: none` da povlačenje pomiče kartu a ne
 * stranicu.
 *
 * Stoje u svojoj datoteci jer ih od ovog kruga traže dva ekrana, a dva spisa s
 * istim pravilima razišla bi se prvim ispravkom — i to tako da se razlika vidi
 * samo na jednom od njih.
 *
 * Imena varijabli (`--rub`, `--ploha`, `--boja`, `--slabo`) postoje u oba
 * spisa koja ovu datoteku uključuju, pa karta u oba slučaja poprima boje
 * ekrana na kojem stoji, uključujući tamnu temu.
 */

/* `hidden` mora držati i ovdje (`CORE-14`). Ovaj list postavlja `display` na
 * `.zumiranje` i `.pin-uputa`, a uključuje se **poslije** `izlog.css` odnosno
 * `osoblje.css` — pa bi bez ovog pravila njihov `[hidden]` bio pregažen upravo
 * na elementima koje karta gasi i pali. Ista specifičnost, odlučuje redoslijed.
 *
 *   > **Pravilo koje vrijedi u dva lista, a stoji u jednom, vrijedi do
 *   > trenutka kad treći dođe poslije.** */
[hidden] { display: none !important; }

/* ── Karta ─────────────────────────────────────────────────────────────── */
.karta-omot { position: relative; margin-bottom: .5rem; }
.karta {
  position: relative; overflow: hidden;
  height: 190px; border-radius: var(--radijus);
  background: #dcd8ce;
  border: 1px solid var(--rub);
  touch-action: none;            /* povlačenje pomiče kartu, ne stranicu */
  cursor: grab;
}
.karta.vuce { cursor: grabbing; }
.karta img { position: absolute; width: 256px; height: 256px; user-select: none; -webkit-user-drag: none; }

/* Križić je pin: karta se pomiče ispod njega. Jednostavnije od povlačenja
   markera i točnije prstom, jer prst ne zaklanja cilj. */
.krizic {
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -26px 0 0 -13px;
  pointer-events: none;
  background: var(--boja);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* Dok gost nije dirnuo kartu, pin **nije postavljen** (poglavlje K55) — pa ne
   smije izgledati kao da jest. Prazan i blijed križić je prijedlog, puni je
   odluka; do K55 je puni stajao na adresi restorana i izgledao kao gostova. */
.karta-omot.bez-pina .krizic {
  background: transparent;
  border-color: var(--slabo);
  box-shadow: none;
  opacity: .65;
}
.karta-omot.bez-pina .pin-uputa {
  position: absolute; left: 50%; bottom: 1.9rem; transform: translateX(-50%);
  background: var(--ploha); color: var(--tekst);
  border: 1px solid var(--rub); border-radius: 999px;
  padding: .3rem .7rem; font-size: .78rem; white-space: nowrap;
  pointer-events: none; box-shadow: var(--sjena);
}
.karta-omot:not(.bez-pina) .pin-uputa { display: none; }

.lokacija, .zumiranje button {
  position: absolute; width: 36px; height: 36px;
  border: 1px solid var(--rub); border-radius: 8px;
  background: var(--ploha); color: var(--tekst);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.lokacija { right: .5rem; bottom: .5rem; }
.zumiranje { position: absolute; right: .5rem; top: .5rem; display: grid; gap: .25rem; }
.zumiranje button { position: static; }

.pripis {
  position: absolute; left: .4rem; bottom: .3rem;
  font-size: .65rem; color: #333; background: rgba(255, 255, 255, .75);
  padding: 0 .25rem; border-radius: 4px;
}


/* ── Prstenovi dostave nad kartom (`DLV-05`) ───────────────────────────────
   Sloj ne prima dodir: karta se povlači kroz njega, jer se ispod njega
   namješta pin. Krug bez ispune, jer je pitanje **dokle seže**, a ne što je
   unutra — ispunjen krug preko pločica skriva upravo ono zbog čega se gleda. */
.prsten-sloj {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.prsten-krug { fill: none; stroke-width: 2; }
/* Vrsta se vidi i bez boje — crtkanjem: tko boje ne razlikuje mora dobiti
   isti podatak (`UI-13`). */
.prsten-free { stroke: #1f7a3f; }
.prsten-paid { stroke: #8a6508; stroke-dasharray: 7 4; }
.prsten-pickup_only { stroke: #a3221c; stroke-dasharray: 2 4; }
.prsten-natpis {
  text-anchor: middle; font-size: 12px; font-weight: 600;
  fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px;
}
@media (prefers-color-scheme: dark) {
  .prsten-natpis { fill: #f2f2f2; stroke: #15141a; }
  .prsten-free { stroke: #5fd08a; }
  .prsten-paid { stroke: #f0c65a; }
  .prsten-pickup_only { stroke: #ff9a91; }
}