/* Fit2Ride — izgled kase.
 *
 * Dva sloja, namerno razdvojena:
 *
 *  1. OMOTAC (zaglavlje, podnozje, sirina) — nas kod od prve do poslednje
 *     linije, ponasa se predvidivo.
 *  2. SAMA KASA — blokovi koje ispisuje WooCommerce. Gadaju se `wc-block-*`
 *     klase, koje su stabilne godinama; generisana imena se ne diraju jer se
 *     menjaju sa svakom nadogradnjom.
 *
 * Boje i fontovi su prepisani sa sajta kao vrednosti, ne uvozom `styles.css`:
 * najveci deo tog fajla nema sta na kasi, a zaglavlje mu je zapleteno sa
 * navigacijom i mobilnim prekidacem kojih ovde nema.
 */

:root {
  --navy: #0E2A47;
  --red: #db2229;
  --red-dark: #b91c22;
  --gray-bg: #f4f6f9;
  --gray-text: #555;
  --font-h: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-b: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--font-b);
  color: var(--navy);
  background: #fff;
  line-height: 1.65;
  /* Podnozje ostaje na dnu i kad je kasa kratka (npr. prazna korpa). */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ===================== ZAGLAVLJE ===================== */

.kasse-kopf {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.kasse-kopf-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0 1.25rem; min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.kasse-logo { height: 38px; width: auto; }
.kasse-zurueck {
  font-size: .88rem; color: var(--gray-text);
  text-decoration: underline; text-underline-offset: .25em;
  text-decoration-color: rgba(14,42,71,.25);
}
.kasse-zurueck:hover { color: var(--navy); text-decoration-color: var(--navy); }

/* Linija poverenja. Stoji ispod zaglavlja, ne u njemu: u zaglavlju bi se na
   telefonu tukla sa logom i povratkom za istu sirinu. */
.kasse-vertrauen {
  margin: 0; padding: .5rem 1.25rem;
  background: var(--gray-bg);
  border-bottom: 1px solid rgba(0,0,0,.05);
  font-size: .82rem; color: var(--gray-text); text-align: center;
}
.kasse-vertrauen a { color: var(--navy); font-weight: 600; text-decoration: none; }
.kasse-vertrauen a:hover { text-decoration: underline; }

/* ===================== OMOTAC SADRZAJA ===================== */

.kasse-main { flex: 1 0 auto; }
.kasse-sadrzaj {
  max-width: 1100px; margin: 0 auto;
  padding: 2rem 1.25rem 3.5rem;
}

.kasse-prazno { max-width: 620px; text-align: center; padding-top: 4rem; }
.kasse-prazno h1 {
  font-family: var(--font-h); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.05; margin: 0 0 1rem;
}

/* ===================== PODNOZJE ===================== */

.kasse-fuss {
  flex-shrink: 0;
  background: var(--navy); color: rgba(255,255,255,.75);
  padding: 1.5rem 1.25rem;
  font-size: .85rem; text-align: center;
}
.kasse-fuss nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem;
  margin-bottom: .75rem;
}
.kasse-fuss a { color: rgba(255,255,255,.85); text-decoration: none; }
.kasse-fuss a:hover { color: #fff; text-decoration: underline; }
.kasse-fuss p { margin: 0; opacity: .6; }

/* ===================== DUGME ===================== */

/* Isti oblik kao `.btn-primary` na sajtu — kupac je to dugme vec video kad je
   kliknuo „Buchen", pa ga ovde prepoznaje. */
.kasse-btn,
.kasse-sadrzaj .wc-block-components-checkout-place-order-button {
  display: inline-block;
  padding: 1.15rem 2.4rem;
  background: var(--red); color: #fff;
  font-family: var(--font-h);
  font-weight: 800; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .06em;
  border: 0; border-radius: .3rem;
  box-shadow: 0 6px 20px rgba(219,34,41,.4);
  transition: background .25s, transform .25s;
  cursor: pointer;
}
.kasse-btn:hover,
.kasse-sadrzaj .wc-block-components-checkout-place-order-button:hover {
  background: var(--red-dark); transform: translateY(-2px);
}
/* Dugme stoji u uskoj bocnoj koloni, a natpis je dugacak jer nemacki zakon trazi
   da se na njemu jasno vidi da je porudzbina placena (§ 312j Abs. 3 BGB). Zato
   manji bocni razmak i dozvoljen prelom u dva reda — skracivanje natpisa nije
   opcija. */
.kasse-sadrzaj .wc-block-components-checkout-place-order-button {
  width: 100%;
  padding-left: 1rem; padding-right: 1rem;
  font-size: 1rem; line-height: 1.25;
  white-space: normal;
}

/* ===================== SAMA KASA ===================== */

/* Naslovi koraka („Kontakt", „Rechnungsadresse", „Zahlung") — isti rez kao
   naslovi na sajtu. */
.kasse-sadrzaj .wc-block-components-title,
.kasse-sadrzaj .wc-block-components-checkout-step__title {
  font-family: var(--font-h);
  font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  color: var(--navy);
}

/* Polja. Visina je namerno velika: kasa se najcesce popunjava palcem. */
.kasse-sadrzaj .wc-block-components-text-input input,
.kasse-sadrzaj .wc-block-components-textarea,
.kasse-sadrzaj select {
  font-family: var(--font-b); font-size: 1rem;
  color: var(--navy);
  border: 1px solid rgba(14,42,71,.3);
  border-radius: .3rem;
  min-height: 3rem;
}
.kasse-sadrzaj .wc-block-components-text-input input:focus,
.kasse-sadrzaj .wc-block-components-textarea:focus,
.kasse-sadrzaj select:focus {
  border-color: var(--red);
  outline: 2px solid rgba(219,34,41,.35);
  outline-offset: 1px;
}
.kasse-sadrzaj .wc-block-components-text-input label { color: var(--gray-text); }

/* Greska mora da kaze sta nije u redu, ne samo da oboji okvir. */
.kasse-sadrzaj .wc-block-components-validation-error {
  color: var(--red-dark); font-size: .88rem; font-weight: 600;
}

/* Naziv termina u pregledu porudzbine je `<h3>`, pa ga je pravilo za naslove iz
   `theme.json` diglo u verzal. Ime proizvoda nije naslov nego podatak — u
   verzalu se lose cita i deluje kao vika. */
.kasse-sadrzaj h3.wc-block-components-product-name {
  font-family: var(--font-b);
  font-weight: 600; text-transform: none; letter-spacing: 0;
  font-size: .95rem; line-height: 1.4;
}

/* Podloga ide na sam pregled porudzbine, NE na bocnu kolonu: kolona je visoka
   koliko i unos levo, pa bi siva povrsina visila prazna ispod dugmeta. */
.kasse-sadrzaj .wc-block-components-order-summary { border-radius: .5rem; }

/* Pravne kvacice i tekst uz njih (Germanized): NE smanjivati. To je tekst koji
   kupac potvrduje — ako se ne cita, potvrda ne vredi. */
.kasse-sadrzaj .wc-block-components-checkbox__label,
.kasse-sadrzaj .wc-gzd-checkbox-placeholder,
.kasse-sadrzaj .wc-gzd-checkout-checkboxes {
  font-size: .95rem; line-height: 1.6; color: var(--navy);
}
.kasse-sadrzaj .wc-block-components-checkbox__input {
  width: 1.25rem; height: 1.25rem; accent-color: var(--red);
}

@media (min-width: 782px) {
  .kasse-sadrzaj { padding-top: 2.75rem; }
}