/* Nadgradnja Bootstrap-a 5.3: samo ono što tema ne pokriva.
   Paleta je brend paleta Zbora Palilula — navy + crvena. */

:root {
  --zbor-navy:   #1b1f4d;
  --zbor-navy-2: #12153a;
  --zbor-red:    #c8202f;
  --zbor-red-2:  #9c1522;
  --zbor-cream:  #f7f7fa;
  --zbor-ivica:  #e2e8f0;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  background: var(--zbor-cream);
  color: #1f2340;
}

/* Link „preskoči na sadržaj" — vidi se samo kad se dođe tabom. */
.preskoci {
  position: absolute;
  z-index: 1100;
  top: .5rem;
  left: .5rem;
  padding: .5rem .9rem;
  background: #fff;
  border-radius: .5rem;
  font-weight: 600;
}

/* ── Traka ─────────────────────────────────────────────────────────────────── */

.vdv-navbar {
  background: var(--zbor-navy);
  box-shadow: 0 1px 12px rgba(18, 21, 58, .18);
}

.vdv-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #fff;
  font-weight: 700;
}

.brand-logo { border-radius: 6px; }

.brand-podnaslov {
  font-weight: 400;
  font-size: .8rem;
  color: rgba(255, 255, 255, .62);
  border-left: 1px solid rgba(255, 255, 255, .25);
  padding-left: .55rem;
}

/* Prekidač pisma: dugme nudi ono pismo na koje se prebacuje, ne trenutno. */
.btn-pismo { font-weight: 700; letter-spacing: .03em; }
html[data-pismo="lat"] .pismo-lat { display: none; }
html[data-pismo="cir"] .pismo-cir { display: none; }

/* ── Dugmad ────────────────────────────────────────────────────────────────── */

.btn-zbor {
  background: var(--zbor-red);
  border: 1px solid var(--zbor-red);
  color: #fff;
  font-weight: 600;
}

.btn-zbor:hover,
.btn-zbor:focus {
  background: var(--zbor-red-2);
  border-color: var(--zbor-red-2);
  color: #fff;
}

.btn-zbor:disabled {
  background: var(--zbor-red);
  border-color: var(--zbor-red);
  color: #fff;
  opacity: .55;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.hero {
  background: linear-gradient(140deg, var(--zbor-navy) 0%, var(--zbor-navy-2) 100%);
  color: #fff;
  padding: 3.25rem 0 3rem;
}

.hero h1 {
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.hero-oznaka {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(200, 32, 47, .18);
  border: 1px solid rgba(200, 32, 47, .5);
  color: #ffd8dc;
  border-radius: 999px;
  padding: .28rem .8rem;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero-uvod { font-size: 1.15rem; color: rgba(255, 255, 255, .86); }

@media (min-width: 992px) {
  .hero { padding: 4.5rem 0 4rem; }
  .hero h1 { font-size: 3.1rem; }
}

/* ── Kartice i sekcije ─────────────────────────────────────────────────────── */

.kartica {
  background: #fff;
  border: 1px solid var(--zbor-ivica);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(27, 31, 77, .05), 0 6px 18px rgba(27, 31, 77, .05);
}

.sekcija-naslov {
  font-weight: 700;
  color: var(--zbor-navy);
  margin-bottom: 1rem;
}

.sekcija-naslov .bi { color: var(--zbor-red); }

.poziv-tekst p {
  font-size: 1.06rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Lista „koga tražimo" — kvačica u koloni, tekst ne obleće ispod nje. */
.lista-profil {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-profil li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--zbor-ivica);
  line-height: 1.55;
}

.lista-profil li:last-child { border-bottom: 0; }
.lista-profil .bi { color: #15803d; flex: 0 0 auto; margin-top: .2rem; }

.ne-treba {
  background: var(--zbor-cream);
  border-left: 3px solid var(--zbor-navy);
  border-radius: 8px;
  padding: .8rem 1rem;
}

/* Koraci pre prijave */
.koraci { counter-reset: korak; list-style: none; padding: 0; margin: 0; }

.koraci li {
  counter-increment: korak;
  position: relative;
  padding: .35rem 0 .35rem 2.4rem;
  line-height: 1.55;
}

.koraci li::before {
  content: counter(korak);
  position: absolute;
  left: 0;
  top: .3rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--zbor-navy);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Forma ─────────────────────────────────────────────────────────────────── */

/* 16px: ispod toga iOS zumira stranu kad se polje fokusira. */
.forma-prijave .form-control,
.forma-prijave .form-select { font-size: 16px; }

.forma-prijave .form-label { font-weight: 600; color: var(--zbor-navy); }

.obavezno { color: var(--zbor-red); font-weight: 700; }

.brojac-znakova { font-variant-numeric: tabular-nums; }
.brojac-znakova.preko { color: var(--zbor-red); font-weight: 700; }

/* Mamac za botove. Namerno NIJE display:none — botovi to prepoznaju i preskoče
   polje; ovako je van ekrana, pa ga popune kao i svako drugo. */
.zamka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Zahvalnica ────────────────────────────────────────────────────────────── */

.hvala-znak {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  margin: 0 auto 1.25rem;
}

/* ── Podnožje ──────────────────────────────────────────────────────────────── */

.vdv-podnozje {
  background: var(--zbor-navy-2);
  color: rgba(255, 255, 255, .82);
  padding: 2.5rem 0 1.75rem;
  margin-top: 3.5rem;
}

.podnozje-naslov {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .75rem;
}

.podnozje-logo { border-radius: 6px; }

.podnozje-naslov-mali {
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
}

.vdv-podnozje a { color: #fff; }
.podnozje-crta { border-color: rgba(255, 255, 255, .16); margin: 1.75rem 0 1rem; }

/* ── Admin ─────────────────────────────────────────────────────────────────── */

.admin-telo { background: #f1f5f9; }

.tabela-prijave td,
.tabela-prijave th { vertical-align: middle; }

.tabela-prijave .kolona-uska { white-space: nowrap; }

.motivacija-tekst { white-space: pre-wrap; word-break: break-word; }

.brojka-kartica {
  background: #fff;
  border: 1px solid var(--zbor-ivica);
  border-radius: 12px;
  padding: .9rem 1.1rem;
}

.brojka-kartica .brojka {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--zbor-navy);
}