/*
  CJENIK — popup. Stilovi su namjerno neutralni i vezani uz `--ap-cj-*` varijable, pa ih tema
  smije prebojati bez diranja ovog filea (core se ne uređuje po siteu).
*/

.ap-cj-btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--ap-cj-line, #d8d8d8);
  background: var(--ap-cj-btn-bg, #fff);
  color: inherit;
  border-radius: var(--ap-cj-radius, .4rem);
  padding: .55rem 1.1rem;
  transition: background .15s, border-color .15s;
}
.ap-cj-btn:hover { background: var(--ap-cj-btn-hover, #f4f4f4); }
.ap-cj-btn--primary {
  background: var(--ap-cj-accent, #1f6feb);
  border-color: var(--ap-cj-accent, #1f6feb);
  color: #fff;
  font-weight: 600;
}
.ap-cj-btn--primary:hover { background: var(--ap-cj-accent-dark, var(--ap-cj-accent, #1a5fd0)); filter: brightness(.95); }

/* ---------- okvir ---------- */

.ap-cj-back {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem; overflow: hidden;
}
/* Kutija je flex kolona s FIKSNIM zaglavljem: skrola se SAMO tijelo. Sticky u vanjskom scroll
   containeru je odbačen — sadržaj se pri skrolanju vidio iznad zaglavlja. */
.ap-cj {
  background: var(--ap-cj-bg, #fff);
  color: var(--ap-cj-fg, #1b1b1b);
  border-radius: var(--ap-cj-radius, .5rem);
  width: 100%; max-width: 54rem;
  max-height: 100%;
  display: flex; flex-direction: column;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .3);
  font-size: .95rem;
}
.ap-cj__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--ap-cj-line, #e6e6e6);
}
.ap-cj__head h2 { margin: 0; font-size: 1.15rem; }
.ap-cj__x {
  border: 0; background: none; font-size: 1.6rem; line-height: 1;
  cursor: pointer; color: inherit; padding: 0 .3rem; opacity: .7;
}
.ap-cj__x:hover { opacity: 1; }
/* `minmax(0, 1fr)`, ne zatečeni `auto`: implicitna kolona grida raste do MAX-CONTENTA najšireg
   djeteta, pa je na uskom ekranu tablica cijene razvlačila CIJELO tijelo — svaka sekcija (i s
   njom forma) postajala je šira od popupa i tijelo se vodoravno skrolalo. Ovako kolona nikad ne
   prelazi širinu okvira, a sadržaj koji se stvarno ne da stisnuti skrola u SVOM okviru. */
.ap-cj__body {
  flex: 1 1 auto; overflow: auto; padding: 1.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; align-content: start;
}
.ap-cj__section > h3, .ap-cj-calhead h3 {
  margin: 0 0 .7rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .6;
}

/* ---------- forma ---------- */

.ap-cj-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.ap-cj-field { display: grid; gap: .3rem; }
.ap-cj-field > span { font-size: .78rem; opacity: .7; }
.ap-cj-field input, .ap-cj-field select, .ap-cj-field textarea {
  font: inherit; padding: .5rem .65rem;
  border: 1px solid var(--ap-cj-line, #d8d8d8); border-radius: .35rem;
  background: var(--ap-cj-bg, #fff); color: inherit;
}
.ap-cj-field input:focus, .ap-cj-field select:focus, .ap-cj-field textarea:focus {
  outline: 2px solid var(--ap-cj-accent, #1f6feb); outline-offset: 1px;
}
.ap-cj-field input[type=number] { width: 5.5rem; }
.ap-cj-field--unit { flex: 1 1 100%; }
.ap-cj-field--unit select { width: 100%; }

/* Glavni red forme: dolazak | odlazak | odraslih | djeca — sve u jednoj liniji; na mobitelu se
   lomi u dva reda (datumi, pa odrasli + djeca) — vidi media blok na dnu. */
.ap-cj-row--main {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem;
  align-items: end;
}
.ap-cj-row--main .ap-cj-field input,
.ap-cj-row--main .ap-cj-field select { width: 100%; min-width: 0; }

/* ---------- odabir djece (kids.js — dijeli ga i kontakt forma teme) ---------- */

.ap-kids-input { cursor: pointer; }
.ap-kids-pop {
  position: absolute; left: 0; top: 100%; z-index: 9500;
  min-width: 16rem; max-width: 22rem; max-height: 20rem; overflow: auto;
  margin-top: .3rem; padding: .6rem;
  background: var(--ap-cj-bg, #fff); color: var(--ap-cj-fg, #1b1b1b);
  border: 1px solid var(--ap-cj-line, #d8d8d8); border-radius: .4rem;
  box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .18);
  display: grid; gap: .55rem;
  font-size: .85rem;
}
/* Sidrenje uz DESNI rub polja — bira ga `alignPop()` (kids.js) kad bi lijevo sidrenje popup
   izbacilo izvan okvira koji ga reže (tijelo cjenik popupa). */
.ap-kids-pop--right { left: auto; right: 0; }
.ap-kids-list { display: grid; gap: .25rem; }
.ap-kids-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .25rem .5rem; border-radius: .3rem;
  background: var(--ap-cj-past, #f4f4f4);
}
.ap-kids-x {
  border: 0; background: none; cursor: pointer; color: inherit;
  font-size: 1rem; line-height: 1; opacity: .6; padding: .1rem .25rem;
}
.ap-kids-x:hover { opacity: 1; }
.ap-kids-clear {
  font: inherit; font-size: .8rem; cursor: pointer;
  border: 1px solid var(--ap-cj-line, #d8d8d8); border-radius: .3rem;
  background: none; color: inherit; padding: .3rem .6rem;
}
.ap-kids-clear:hover { background: var(--ap-cj-btn-hover, #f4f4f4); }
.ap-kids-add { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.ap-kids-addbtn {
  font: inherit; font-size: .78rem; text-align: left; cursor: pointer;
  border: 0; border-radius: .3rem; background: none; color: inherit;
  padding: .3rem .5rem;
}
.ap-kids-addbtn:hover { background: var(--ap-cj-btn-hover, #f0f4ff); color: var(--ap-cj-accent, #1f6feb); }

/* ---------- kalendar ---------- */

.ap-cj-calhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ap-cj-calnav { display: flex; gap: .4rem; }
.ap-cj-mnav {
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--ap-cj-line, #d8d8d8); border-radius: 50%;
  background: var(--ap-cj-bg, #fff); color: inherit;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ap-cj-mnav:hover:not(:disabled) {
  background: var(--ap-cj-accent, #1f6feb); border-color: var(--ap-cj-accent, #1f6feb); color: #fff;
}
.ap-cj-mnav:disabled { opacity: .35; cursor: default; }

/* Dva vidljiva mjeseca; `align-items: start` ih drži poravnate na vrhu, jer im se visina
   razlikuje (mjesec zna imati 5 ili 6 tjednih redova). */
.ap-cj-cal {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.4rem; align-items: start;
  touch-action: pan-y; /* horizontalni potez je swipe za listanje mjeseci */
}
.ap-cj-month { min-width: 0; }
.ap-cj-month__name { font-weight: 600; margin-bottom: .45rem; font-size: .9rem; text-align: center; }
.ap-cj-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.ap-cj-dow { text-align: center; font-size: .68rem; opacity: .55; padding: .2rem 0; }
.ap-cj-day {
  min-height: 2.7rem; border-radius: .3rem; padding: .15rem .1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ap-cj-free, #eef7ee); font-size: .7rem; line-height: 1.15;
  /* ćelija je uska (sedmina mjeseca) — iznos se NE smije preliti na susjedni dan */
  min-width: 0; overflow: hidden;
}
.ap-cj-day--empty { background: none; }
.ap-cj-day--past { background: var(--ap-cj-past, #f2f2f2); opacity: .5; }
.ap-cj-day--busy { background: var(--ap-cj-busy, #f7dede); }
/* POLU-DAN (PROTOCOL.md §5): vrijeme u ćeliji teče gore-lijevo → dolje-desno, pa dijagonala nosi
   crvenu polovicu na ZAUZETOJ strani — ista konvencija kao kalendar zauzeća teme.
   #DRY #halfday7q3wk9mx */
.ap-cj-day--half-pm {
  /* dolazak: jutro slobodno, popodne zauzeto → crveno DOLJE-DESNO */
  background: linear-gradient(to bottom right, var(--ap-cj-free, #eef7ee) 49.5%, var(--ap-cj-busy, #f7dede) 50.5%);
}
.ap-cj-day--half-am {
  /* odlazak: jutro zauzeto, popodne slobodno → crveno GORE-LIJEVO */
  background: linear-gradient(to bottom right, var(--ap-cj-busy, #f7dede) 49.5%, var(--ap-cj-free, #eef7ee) 50.5%);
}
.ap-cj-day__n { font-weight: 600; font-size: .78rem; }
.ap-cj-day__p { opacity: .8; font-size: .62rem; white-space: nowrap; }
.ap-cj-day__lm { color: var(--ap-cj-accent, #1f6feb); font-weight: 600; font-size: .6rem; }

.ap-cj-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .75rem; opacity: .8; margin-top: .7rem; }
.ap-cj-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ap-cj-legend i { width: .8rem; height: .8rem; border-radius: .15rem; display: inline-block; }

/* ---------- report ---------- */

/* Široka tablica skrola u sebi, ne razvlači tijelo popupa (vidi `.ap-cj__body`). */
.ap-cj-tablewrap { overflow-x: auto; }
.ap-cj-table { width: 100%; border-collapse: collapse; }
.ap-cj-table th, .ap-cj-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--ap-cj-line, #ededed); text-align: left; }
.ap-cj-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; font-weight: 600; }
.ap-cj-table tbody tr:nth-child(even) td { background: var(--ap-cj-past, #fafafa); }
.ap-cj-table td.num, .ap-cj-table th.num { text-align: right; white-space: nowrap; }
.ap-cj-table tr.deal td { color: var(--ap-cj-deal, #1a7f37); }
.ap-cj-table tfoot td { font-weight: 700; border-top: 2px solid var(--ap-cj-line, #ddd); border-bottom: 0; font-size: 1.05rem; }
.ap-cj-item__note { display: block; font-size: .75rem; opacity: .65; }

.ap-cj-opts { display: grid; gap: .4rem; }
.ap-cj-opt { display: flex; gap: .5rem; align-items: flex-start; }
.ap-cj-opt input { margin-top: .25rem; }
.ap-cj-opt__price { margin-left: auto; white-space: nowrap; opacity: .8; }

.ap-cj-note {
  background: var(--ap-cj-note-bg, #fff8e5);
  border: 1px solid var(--ap-cj-note-line, #f0e0b0);
  border-radius: .3rem; padding: .5rem .7rem; font-size: .85rem;
}
.ap-cj-deposit { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; opacity: .8; padding-top: .5rem; }
.ap-cj-empty { opacity: .7; font-style: italic; }

/* Last minute napomena — ODMAH ispod totala, ali izvan tablice: kurziv i boja popusta je čitaju
   kao napomenu uz cijenu, a ne kao stavku koju još treba dodati ili oduzeti. Donji razmak je
   veći od gornjeg, pa napomena vizualno pripada cijeni IZNAD sebe, a ne sekciji ispod. */
.ap-cj-lmnote {
  margin: .45rem 0 1.3rem; font-size: .8rem; font-style: italic;
  color: var(--ap-cj-deal, #1a7f37); opacity: .9;
}

/* ---------- upit iz cjenika ---------- */

.ap-cj-send { display: flex; justify-content: flex-end; border-top: 1px solid var(--ap-cj-line, #ededed); padding-top: 1.1rem; }
.ap-cj-send .ap-cj-btn { padding: .65rem 1.6rem; }
/* Prigušen, ali NE disabled — klik otvara upozorenje s razlozima (aria-disabled).
   Kursor namjerno ostaje `pointer`: gost MORA osjetiti da se gumb da kliknuti, jer je klik
   jedini način da sazna ZAŠTO upit ne prolazi. `not-allowed` bi ga odgovorio od te povratne
   informacije. Normativ `ui--disabled-gumb-koji-radi`;
   #DRY #blockedbtn7k2q9x — isti obrazac ima `.magic-btn--blocked` u `core/magic/magic.css`. */
.ap-cj-btn--blocked { opacity: .45; cursor: pointer; }
.ap-cj-btn--blocked:hover { filter: none; background: var(--ap-cj-accent, #1f6feb); }

.ap-cj-inq__extras { display: grid; gap: .25rem; font-size: .85rem; }
.ap-cj-inq__extras-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; font-weight: 600; }
.ap-cj-inq__extra { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem .5rem; background: var(--ap-cj-past, #f6f6f6); border-radius: .3rem; }

.ap-cj-inq {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.ap-cj-inq__box {
  background: var(--ap-cj-bg, #fff); color: var(--ap-cj-fg, #1b1b1b);
  border-radius: var(--ap-cj-radius, .5rem);
  width: 100%; max-width: 26rem;
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .3);
  padding: 1.25rem 1.5rem 1.5rem;
  display: grid; gap: .8rem;
  max-height: 92vh; overflow: auto;
}
.ap-cj-inq__box h3 { margin: 0; font-size: 1.05rem; }
.ap-cj-inq__sum { margin: 0; font-size: .8rem; opacity: .7; }
.ap-cj-inq__field textarea { min-height: 5.5rem; resize: vertical; }
.ap-cj-inq__btns { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .3rem; }

/* ---------- mobitel ---------- */

@media (max-width: 40rem) {
  .ap-cj-back { padding: 0; }
  .ap-cj { max-width: none; border-radius: 0; height: 100%; max-height: none; }
  .ap-cj__body { padding: 1.1rem; }
  .ap-cj-cal { grid-template-columns: 1fr; }
  .ap-kids-add { grid-template-columns: 1fr; }
  .ap-cj-row .ap-cj-field { flex: 1 1 8rem; }
  /* glavni red se lomi: [dolazak, odlazak] pa [odraslih, djeca] */
  .ap-cj-row--main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}