/* =====================================================================
   ZPCG Design System — Bootstrap 5 tema (klonirano sa zpcg.me)
   Radi kao override sloj PREKO Bootstrap 5 (CDN ili lokalno).
   Ubaci ovaj fajl POSLIJE bootstrap.min.css.
   Font: Plus Jakarta Sans (Google Fonts) — vidi <link> u HTML-u.
   ===================================================================== */

:root {
  /* --- Brend boje (izvučene sa zpcg.me) --- */
  --zpcg-red:        #D82234;   /* primarna / CTA */
  --zpcg-red-hover:  #BE1E2E;
  --zpcg-red-active: #A31925;
  --zpcg-gold:       #F3B000;   /* akcenat / istaknuto */
  --zpcg-dark:       #5D5D5D;   /* tamni tekst / headings alt */
  --zpcg-gray:       #696969;   /* sekundarni tekst */
  --zpcg-light:      #F6F6F6;   /* svijetla pozadina sekcija */
  --zpcg-white:      #FFFFFF;
  --zpcg-black:      #111111;
  --zpcg-border:     #D9D9D9;

  /* --- Bootstrap CSS varijable override --- */
  --bs-primary:            var(--zpcg-red);
  --bs-primary-rgb:        216, 34, 52;
  --bs-body-color:         var(--zpcg-black);
  --bs-body-bg:            var(--zpcg-white);
  --bs-body-font-family:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size:     1rem;      /* 16px */
  --bs-body-font-weight:   400;
  --bs-border-radius:      .5rem;     /* 8px  – rounded-lg */
  --bs-border-radius-sm:   .375rem;
  --bs-border-radius-lg:   1rem;      /* 16px – rounded-2xl (kartice) */
  --bs-border-radius-xl:   1.5rem;    /* 24px – rounded-3xl (mobilni panel) */
  --bs-border-radius-pill: 9999px;
  --bs-link-color:         var(--zpcg-red);
  --bs-link-hover-color:   var(--zpcg-red-hover);

  /* --- Sjenke (izvučene) --- */
  --zpcg-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --zpcg-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);

  /* --- Tipografska skala --- */
  --zpcg-h1: 3rem;      /* ~48px */
  --zpcg-h2: 2.25rem;   /* 36px  */
  --zpcg-h3: 1.5rem;    /* 24px  */
}

/* =========================== Baza =========================== */
body {
  font-family: var(--bs-body-font-family);
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3 { font-weight: 600; }
h1,.h1 { font-size: var(--zpcg-h1); }
h2,.h2 { font-size: var(--zpcg-h2); }
h3,.h3 { font-size: var(--zpcg-h3); }

/* Boje kao utility helperi */
.text-zpcg-red   { color: var(--zpcg-red) !important; }
.text-zpcg-gold  { color: var(--zpcg-gold) !important; }
.text-zpcg-dark  { color: var(--zpcg-dark) !important; }
.text-zpcg-gray  { color: var(--zpcg-gray) !important; }
.bg-zpcg-red     { background-color: var(--zpcg-red) !important; }
.bg-zpcg-gold    { background-color: var(--zpcg-gold) !important; }
.bg-zpcg-light   { background-color: var(--zpcg-light) !important; }
.bg-zpcg-dark    { background-color: var(--zpcg-dark) !important; }

.shadow-zpcg    { box-shadow: var(--zpcg-shadow-lg) !important; }
.shadow-zpcg-xl { box-shadow: var(--zpcg-shadow-xl) !important; }
.rounded-zpcg    { border-radius: var(--bs-border-radius-lg) !important; }
.rounded-zpcg-xl { border-radius: var(--bs-border-radius-xl) !important; }

/* =========================== Dugmad =========================== */
/* Primarno = crvena pilula (glavni CTA na ZPCG) */
.btn { font-weight: 600; border-radius: var(--bs-border-radius-pill); }

.btn-zpcg,
.btn-primary {
  --bs-btn-color:            #fff;
  --bs-btn-bg:               var(--zpcg-red);
  --bs-btn-border-color:     var(--zpcg-red);
  --bs-btn-hover-color:      #fff;
  --bs-btn-hover-bg:         var(--zpcg-red-hover);
  --bs-btn-hover-border-color: var(--zpcg-red-hover);
  --bs-btn-active-bg:        var(--zpcg-red-active);
  --bs-btn-active-border-color: var(--zpcg-red-active);
  --bs-btn-disabled-bg:      var(--zpcg-red);
  --bs-btn-disabled-border-color: var(--zpcg-red);
  padding: .75rem 1.75rem;
}

.btn-zpcg-gold {
  --bs-btn-color:        #111;
  --bs-btn-bg:           var(--zpcg-gold);
  --bs-btn-border-color: var(--zpcg-gold);
  --bs-btn-hover-color:  #111;
  --bs-btn-hover-bg:     #d99e00;
  --bs-btn-hover-border-color: #d99e00;
}

.btn-outline-zpcg {
  --bs-btn-color:        var(--zpcg-red);
  --bs-btn-border-color: var(--zpcg-red);
  --bs-btn-hover-color:  #fff;
  --bs-btn-hover-bg:     var(--zpcg-red);
  --bs-btn-hover-border-color: var(--zpcg-red);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg:    var(--zpcg-red);
  --bs-btn-active-border-color: var(--zpcg-red);
}

/* Jednosmjerna/Povratna segmentirani izbor na formi pretrage */
.zpcg-trip .btn { padding: .7rem 1rem; font-size: 1.05rem; }
/* Mobilni: ikona + tekst ostaju u jednom redu */
@media (max-width: 575.98px) {
  .zpcg-trip .btn { padding: .6rem .5rem; font-size: .875rem; white-space: nowrap; }
}

/* Hotel-stil brojač putnika (checkout) */
.zpcg-counter { display: inline-flex; align-items: center; gap: .9rem; }
.zpcg-counter-btn {
  width: 2.4rem; height: 2.4rem; border-radius: 9999px;
  border: 2px solid var(--zpcg-red); background: #fff; color: var(--zpcg-red);
  font-size: 1.3rem; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.zpcg-counter-btn:hover { background: var(--zpcg-red); color: #fff; }
.zpcg-counter-btn:active { transform: scale(.94); }
.zpcg-counter-value { min-width: 1.5rem; text-align: center; font-size: 1.25rem; font-weight: 700; }

/* Okrugli icon-button (npr. swap polazak/odredište) */
.btn-icon-round {
  width: 3.25rem; height: 3.25rem;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--zpcg-red); color:#fff; border:0;
}

/* =========================== Navbar =========================== */
.navbar-zpcg {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.navbar-zpcg .navbar-brand { display: inline-flex; align-items: center; }
.navbar-zpcg .navbar-brand img { height: 30px; width: auto; }
.navbar-zpcg .nav-link {
  color: var(--zpcg-dark);
  font-weight: 500;
  padding-inline: 1rem;
}
.navbar-zpcg .nav-link:hover,
.navbar-zpcg .nav-link.active { color: var(--zpcg-red); }

/* =========================== Kartice =========================== */
.card-zpcg {
  border: 0;
  border-radius: var(--bs-border-radius-lg);
  background: #fff;
  box-shadow: var(--zpcg-shadow-lg);
}

/* Search kartica (bijela, veliki padding, jaka sjenka) */
.zpcg-search-card {
  background: #fff;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--zpcg-shadow-xl);
  padding: 2rem;
}
@media (min-width: 576px){ .zpcg-search-card { padding: 3rem; } }

/* Input u stilu ZPCG: bez okvira, samo donja linija koja postane crvena */
.zpcg-input {
  border: 0;
  border-bottom: 2px solid var(--zpcg-border);
  border-radius: 0;
  padding: .5rem .25rem;
  font-size: 1.25rem;
  font-weight: 600;
  background: transparent;
  width: 100%;
}
.zpcg-input:focus {
  outline: 0;
  border-bottom-color: var(--zpcg-red);
  box-shadow: none;
}
.zpcg-input::placeholder { color:#8e8e8e; font-weight:500; }
.zpcg-label { font-weight: 500; font-size: 1.125rem; color: var(--zpcg-dark); }

/* =========================== Hero =========================== */
.zpcg-hero {
  position: relative;
  color: #fff;
  padding: 4rem 0 6rem;
  background-color: var(--zpcg-dark);
  /* tamni overlay preko slike da bijeli naslov ostane čitljiv */
  background-image:
    linear-gradient(180deg, rgba(17,17,17,.55), rgba(17,17,17,.25) 55%, rgba(17,17,17,.45)),
    url("../img/pruga1.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.zpcg-hero h1 { color:#fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); }

/* =========================== Timetable red (rezultat) =========================== */
.zpcg-result {
  background:#fff;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--zpcg-shadow-lg);
  padding: 1.25rem 1.5rem;
}
.zpcg-result--past { opacity: .55; }
.zpcg-time { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.zpcg-train-no { font-size:.9rem; color: var(--zpcg-gray); font-weight:500; }
.zpcg-price { font-weight:700; }
.zpcg-price--1 { color: var(--zpcg-red); }
.zpcg-price--2 { color: var(--zpcg-dark); }

/* Badge */
.badge-zpcg { background: var(--zpcg-red); color:#fff; border-radius:9999px; font-weight:600; }
.badge-zpcg-gold { background: var(--zpcg-gold); color:#111; border-radius:9999px; font-weight:600; }

/* =========================== Select u ZPCG stilu (lista stanica) =========================== */
select.zpcg-input { cursor: pointer; color: var(--zpcg-black); }
select.zpcg-input:invalid, select.zpcg-input option[value=""] { color: #8e8e8e; }

/* =========================== select2 u ZPCG stilu =========================== */
.select2-container--default .select2-selection--single {
  border: 0; border-bottom: 2px solid var(--zpcg-border); border-radius: 0;
  height: auto; background: transparent; padding: .5rem 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--zpcg-black); font-size: 1.25rem; font-weight: 600; line-height: 1.4; padding-left: .25rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #8e8e8e; font-weight: 500; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single { border-bottom-color: var(--zpcg-red); }
.select2-dropdown {
  border: 0; border-radius: .75rem; overflow: hidden;
  box-shadow: var(--zpcg-shadow-xl); font-family: var(--bs-body-font-family);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--zpcg-border); border-radius: .5rem; padding: .45rem .6rem; font-family: inherit;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { outline: 2px solid var(--zpcg-red); border-color: var(--zpcg-red); }
.select2-results__group { color: var(--zpcg-gray); text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--zpcg-red); color: #fff; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--zpcg-light); }

/* =========================== Pickadate — ZPCG brend (preko classic teme) =========================== */
.picker__holder { border-radius: 1rem; box-shadow: var(--zpcg-shadow-xl); font-family: var(--bs-body-font-family); }
.picker__weekday { color: var(--zpcg-gray); font-weight: 600; }
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected { background: var(--zpcg-red); border-color: var(--zpcg-red); }
.picker--focused .picker__day--highlighted,
.picker__day--highlighted:hover { background: var(--zpcg-red-hover); border-color: var(--zpcg-red-hover); color: #fff; }
.picker__day--today:before { border-top-color: var(--zpcg-red); }
.picker__button--today, .picker__button--close, .picker__button--clear { font-weight: 600; }
.picker__button--today:hover, .picker__button--close:hover, .picker__button--clear:hover {
  background: var(--zpcg-light); border-bottom-color: var(--zpcg-red);
}
.picker__nav--prev:hover, .picker__nav--next:hover { background: var(--zpcg-light); }
input.zpcg-input[readonly] { background: transparent; cursor: pointer; }

/* =========================== Stepper (koraci kupovine) =========================== */
.zpcg-steps { display: flex; gap: .5rem; flex-wrap: wrap; counter-reset: step; }
.zpcg-step {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex: 1 1 auto;
  padding: .5rem 1rem; border-radius: 9999px;
  background: #fff; color: var(--zpcg-gray); font-weight: 600;
}
.zpcg-step .num {
  width: 1.75rem; height: 1.75rem; border-radius: 9999px;
  background: #fff; border: 2px solid var(--zpcg-border);
  display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
}
.zpcg-step.active { background: var(--zpcg-red); color: #fff; }
.zpcg-step.active .num { background: #fff; color: var(--zpcg-red); border-color: #fff; }
.zpcg-step.done { color: var(--zpcg-red); }
.zpcg-step.done .num { background: var(--zpcg-red); color: #fff; border-color: var(--zpcg-red); }

/* Mobilni: sva 4 koraka u jednom redu */
@media (max-width: 767.98px) {
  .zpcg-steps { flex-wrap: nowrap; gap: .375rem; }
  .zpcg-step { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: .4rem .5rem; gap: .35rem; font-size: .875rem; }
  .zpcg-step .num { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
}
@media (max-width: 575.98px) {
  .zpcg-step { font-size: .75rem; padding: .4rem .3rem; gap: .25rem; }
  .zpcg-step .num,
  .zpcg-step.active .num,
  .zpcg-step.done .num { width: auto; height: auto; background: transparent; border: 0; font-size: .75rem; font-weight: 700; }
  .zpcg-step.active .num { color: #fff; }
  .zpcg-step.done .num { color: var(--zpcg-red); }
}

/* =========================== Motion (ishod plaćanja, karta) =========================== */
/* easing: ease-out-quint — prirodno usporenje, bez bounce-a */
.zpcg-flash { animation: zpcg-flash-in .45s cubic-bezier(0.22, 1, 0.36, 1) both; padding: 1.5rem 1.25rem; }
.zpcg-flash-anim {
  width: 112px; height: 112px;
  display: inline-flex; align-items: center; justify-content: center;
}
.zpcg-flash-anim i { font-size: 4rem; }
.zpcg-flash-anim svg { display: block; }
@media (max-width: 575px) {
  .zpcg-flash-anim { width: 92px; height: 92px; }
  .zpcg-flash-anim i { font-size: 3.25rem; }
}
@keyframes zpcg-flash-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.zpcg-ticket { animation: zpcg-ticket-in .5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes zpcg-ticket-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.btn { transition: transform .12s cubic-bezier(0.25, 1, 0.5, 1), background-color .15s, border-color .15s, box-shadow .15s; }
.btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .zpcg-flash, .zpcg-ticket { animation: none; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* =========================== QR karta (vaučer) =========================== */
.zpcg-ticket { background: #fff; border-radius: 1rem; box-shadow: var(--zpcg-shadow-xl); overflow: hidden; max-width: 420px; }
.zpcg-ticket .head { background: var(--zpcg-red); color: #fff; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; }
.zpcg-ticket .body { padding: 1.25rem; }
.zpcg-ticket .stub { border-top: 2px dashed var(--zpcg-border); padding: 1.25rem; text-align: center; }
.zpcg-ticket .qr { width: 150px; height: 150px; }

/* =========================== Form kontrole u ZPCG stilu =========================== */
.form-control:focus, .form-select:focus { border-color: var(--zpcg-red); box-shadow: 0 0 0 .2rem rgba(216,34,52,.15); }
.form-check-input:checked { background-color: var(--zpcg-red); border-color: var(--zpcg-red); }

/* Footer */
.zpcg-footer { background: var(--zpcg-light); color: var(--zpcg-gray); padding: 3rem 0; }
.zpcg-footer a { color: var(--zpcg-dark); text-decoration:none; }
.zpcg-footer a:hover { color: var(--zpcg-red); }