body {
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #F8F9FA;
  color: #333;
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.navbar {
  background-color: #48E1C1 !important;
  padding: 0.55rem 0;
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar .logo {
  color: #152320;
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  margin-left: 0;
}

.navbar nav a {
  color: #152320;
  text-decoration: none;
  font-weight: 530;
  letter-spacing: 0.3px;
  /* padding: 0 0.5rem; */
  padding: 0 0.3rem;
}

.navbar nav a:hover {
  text-decoration: underline;
}

.navbar .nav-item a {
  color: #152320 !important;
  text-decoration: none;
  font-weight: 530;
  letter-spacing: 0.3px;
  /* padding: 0 0.5rem; */
  padding: 0 0.3rem;
}

.navbar .nav-item a:hover {
  text-decoration: underline;
}

.footer {
  text-align: center;
  padding: 1rem;
  background-color: #c1c1c1;
  color: #333;
  margin-top: auto; /* Ovo ga gura na dno */
}

main {
  /* flex 1 popunjava sav preostali prostor između navbara i footera zakomentarisao sam ga 
  jer je pravio problem kada sam pomjerio ovaj css fajl da bude ispod bootstrapa */ 
  /* flex: 1;                  */
  display: flex;                /* postaje fleks kontejner */
  flex-direction: column;       /* vertikalni raspored */
  background-color: #F8F9FA;  /* ujednači pozadinu s formom */
}


/* STilizacija standardne forme */

/* --- Wrapper i box --- */
.auth-wrapper {
  flex: 1;                     /* popuni prostor između navbara i footera */
  display: flex;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.auth-box {
  background-color: #ffffff;
  padding: 2rem 2.5rem;
  /* border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */
  border-radius: 10px;                         /* usklađeno s .notice-card (10px) */
  border: 1px solid rgba(0, 0, 0, 0.06);       /* diskretna ivica kao na notice karticama */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);  /* subjektivno ista “težina” sjene kao .notice-card */
  width: 100%;
  max-width: 500px;
  /* text-align: center; */
  text-align: left; /* tekst se ravna lijevo osim naslova koji je ispod desno poravnat */
}

/* --- Sama forma --- */
.form-standard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* --- Naslov forme --- */
.auth-box h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  /* margin-bottom: 1.5rem; */
  /*margin-bottom: 0.5rem;  manji razmak jer ispod ide podnaslov */
  margin-bottom: 0.4rem !important;   /* još malo smanjen razmak prema podnaslovu */
  color: #152320;
  text-align: center; /* samo naslov centriran */

}


/* Podnaslov ispod naslova na auth formama (login/registracija) */
.auth-subtitle {
  font-size: 0.95rem;
  color: #666;              /* diskretnija nijansa od glavnog teksta */
  text-align: center;
  margin-bottom: 1.5rem;    /* razmak prema formi */
  /* margin-bottom: 1.25rem !important;  kompaktniji razmak prema formi */
}

/* Link za reset lozinke – obrnut hover efekat */
.auth-forgot {
  text-align: right;           /* poravnanje desno */
  margin-top: -0.5rem;         /* blago podizanje bliže polju lozinke */
  /*margin-bottom: 1rem;          razmak prema dugmetu */
  margin-bottom: 0.85rem !important;  /* razmak prema dugmetu ranije 1rem */
}

.auth-forgot a {
  font-size: 0.95rem;      /* blago uvećanje */
  font-weight: 600;        /* polu-bold za veću čitljivost */
  color: #152320;        /* tamna, usklađena sa stilom */
  text-decoration: underline;   /* već podvučen – početno stanje */
  /* text-decoration: none; */
  text-underline-offset: 2px;   /* malo odmaknuto radi elegancije */
  transition: text-decoration 0.15s ease;
}

/* obrnuti hover – linija nestaje */
.auth-forgot a:hover {
  text-decoration: none;        
}

/* isti hover kao i linkovi u nav baru */
/* .auth-forgot a:hover {
  text-decoration: underline;  
} */

/* CTA ispod login forme: poziv na registraciju */
.auth-cta {
  /*margin-top: 1rem;              razmak od forme/dugmeta iznad */
  margin-top: 0.9rem !important;      /* precizan razmak ispod dugmeta */
  text-align: center;           /* tekst u sredinu */
  font-size: 0.95rem;
  color: #555;                  /* malo blaža nijansa od glavnog teksta */
}

.auth-cta a {
  color: #152320;               /* usklađeno sa brendom (logo/nav) */
  font-weight: 600;             /* blago istaknuto */
  text-decoration: none;        /* početno bez podvlačenja */
}

.auth-cta a:hover {
  text-decoration: underline;   /* standardni hover za link */
}


/* Labele iznad polja*/
.form-standard .form-label {
  display: block;              /* NOVO: label postaje blok */
  text-align: left;
  font-weight: 600;
  /* margin-bottom: 0.3rem; */
  margin-bottom: 0.25rem;             /* ranije 0.3rem, sada 0.25 – UX finese */
  color: #152320;
  font-size: 0.9rem;
}

/* Problem sa form-group bootstrap klasom */

/* Polja – niža visina, ista širina kao kontakt forma */
.form-standard input,
.form-standard select,
.form-standard textarea {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.55rem 0.75rem; /* upravlja visinom polja */
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 0.95rem;
}

/* ============================
   Polja sa ikonicama (login)
   .auth-field je jedan logički blok: label + input + ikone + error.
   .auth-field-inner postaje position: relative da bi ikone mogle biti absolute.
   .auth-icon-left i .auth-icon-right sjede preko inputa, a padding na form-control sprječava preklapanje teksta.
   Klase auth-field--icon-left, --icon-right, --icon-both biraju gdje treba dodatni padding.
   ============================ */

/* Wrapper za jedno polje (label + input + ikone) */
.auth-field {
  margin-bottom: 0.75rem; /* ujednačen razmak među poljima */
}

/* Unutrašnji kontejner koji drži input i ikonice */
.auth-field-inner {
  position: relative;      /* omogućava absolute pozicioniranje ikonica */
}

/* Ukloni donju marginu inputa unutar .auth-field-inner da ikone budu centrirane u odnosu na polje */
.auth-field-inner input {
  margin-bottom: 0;
  display: block;
}

/* Ikonica sa lijeve strane inputa */
.auth-icon-left {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;    /* da klik prolazi u input */
  color: #888;             /* diskretna nijansa */
  font-size: 1rem;
}

/* Ikonica dugme sa desne strane (oko za lozinku) */
.auth-icon-right {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #888;
  font-size: 1rem;
}

/* Hover efekt za ikonicu oka */
.auth-icon-right {
  color: #888;                      /* početna diskretna boja */
  transition: color 0.15s ease;     /* glatka tranzicija */
}

.auth-icon-right:hover {
  color: #152320;                  /*  tamnija nijansa – ista kao labele i naslovi */
  /*color: #48E1C1;                    boja brenda nije baš dobra*/
}

/* Oko je tamnije kada je polje u fokusu */
.auth-field-inner .form-control:focus ~ .auth-icon-right {
  color: #152320 !important;
}

/* Dodatni padding da tekst ne ulazi ispod ikonice */
.auth-field--icon-left .form-control {
  padding-left: 2.3rem;    /* prostor za lijevu ikonu */
}

.auth-field--icon-right .form-control {
  padding-right: 2.3rem;   /* prostor za desnu ikonu */
}

/* Kombinovano: lijeva i desna ikona */
.auth-field--icon-both .form-control {
  padding-left: 2.3rem;
  padding-right: 2.3rem;
}

/* Fokus inputa – blago istakni i ikone */
.auth-field-inner .form-control:focus + .auth-icon-right,
.auth-field-inner .form-control:focus ~ .auth-icon-left {
  color: #555;
}


/* rješenja za form-group iz bootstrapa */

/* -------------------------------------------------------------------
   RJEŠENJE ZA RAZMAKE U REGISTRACIJI (Bootstrap form-group)
------------------------------------------------------------------- */

/* NOVO: smanji razmak .form-group iz Bootstrapa da ne bude prenaglašen */
.form-group {
  margin-bottom: 0.75rem; /* ranije 1rem → sada kompaktnije */
}

/* UJEDNAČENJE RAZMAKA kada login koristi .form-control */
/* 1) Podrazumijevani razmak ispod svakog .form-control u .form-standard (služi loginu) */
.form-standard .form-control {
  /* margin-bottom: 0.75rem;  razmak kao na registraciji */
  margin-bottom: 0.65rem;             /* ranije 0.75 – polja bliža labelama */
}

/* 2) Ako postoji .form-group (registracija), neka razmak kontroliše .form-group, a ne input */
.form-standard .form-group .form-control {
  margin-bottom: 0; /* spriječi dupliranje na registraciji */
}

/* Login forma ostaje netaknuta jer nema .form-group ni .form-control */


/* Dugme – ujednačeno s kontakt formom */
/* Primarno dugme na auth/form ekranima (login, registracija, kontakt…) */
.form-standard button[type="submit"] {
  padding: 0.75rem;                        /* malo viši CTA – lakši za klik */
  background-color: #333333;               /* tamna baza, stabilna boja */
  color: #48E1C1;                          /* brend-zelena kao akcenat na tekstu */
  border: none;
  border-radius: 8px;                      /* zaobljenije, modernije od 4px */
  cursor: pointer;
  width: 100%;
  font-weight: 600;
  font-size: 1rem;                         /* blago veći tekst od defaulta */
  letter-spacing: 0.3px;
  margin-top: 0.35rem;                     /* malo više “zraka” iznad */
  transition:
    background-color 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;                  /* glatke mikro-animacije */
}

/* Hover: malo svjetlija nijansa i “lift” efekat */
.form-standard button[type="submit"]:hover {
  background-color: #444444;               /* nijansa svjetlija */
  color: #ffffff;                         /*  TEKST POSTAJE BIJEL */
  transform: translateY(-1px);             /* vrlo suptilno podizanje */
  box-shadow: 0 4px 12px rgba(0,0,0,0.18); /* naglašava da je primarni CTA */
}

/* Fokus tastaturom – pristupačnost i jasan fokus-ring */
.form-standard button[type="submit"]:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(72, 225, 193, 0.4),     /* prsten u brend boji */
    0 4px 10px rgba(0,0,0,0.15);
}

 /* .form-standard button {
  padding: 0.65rem;
  background-color: #333;
  color: #48E1C1;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background-color 0.2s ease;
  margin-top: 0.35rem;                
}

.form-standard button:hover {
  background-color: #444;
}  */


/* Greške – diskretne */
.field-errors {
  text-align: left;
  color: #d9534f;
  margin: -0.5rem 0 0.75rem;
  font-size: 0.9rem;
}


/* ============================
   NOTICE KARTICE ZA AUTH EKRANE
   (.auth-wrapper > .notice-card)
   ============================ */

.notice-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  padding: 1.25rem 1.25rem 1rem;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.notice-card .notice-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}

.notice-card .notice-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  color: #152320;
  margin: 0;
  line-height: 1.25;
}

.notice-card .notice-icon {
  font-size: 1.6rem; /* ako koristiš <i class="bi ..."> */
  line-height: 1;
  color: #152320;
  opacity: .85;
}

.notice-card .notice-body {
  color: #333;
  font-size: 1rem;
  margin-bottom: .75rem;
}

.notice-card .notice-meta {
  font-size: .925rem;
  color: #666;
  margin-top: .25rem;
}

/* Varijante stanja – diskretna lijeva traka */
.notice--info { border-left: 4px solid #17a2b8; }
.notice--success { border-left: 4px solid #28a745; }
.notice--warning { border-left: 4px solid #ffc107; }
.notice--danger { border-left: 4px solid #dc3545; }

/* Akcije (dugmad/linkovi) ispod teksta */
.notice-actions {
  margin-top: .75rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Sekundarno (ghost) dugme – u skladu s postojećim stilom */
.btn-ghost {
  background: transparent;
  color: #333;
  border: 1px solid #d0d0d0;
}
.btn-ghost:hover {
  background: #f3f3f3;
}

/* Fokus i pristupačnost (kontrastni obrub na tab/fokus) */
.notice-card a:focus,
.notice-card button:focus {
  outline: 2px solid #48E1C1;
  outline-offset: 2px;
}

/* Dugi e-mailovi – prelamanje bez izlijevanja */
.notice-card .break-all {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Stilizacija dugmeta za zatvaranje poruke ispod navbara */
.alert-dismissible .close {
  padding: .65rem 1.25rem !important; /* blago smanjeno, po tvom opažanju bootstrap je 0.75rem */
}


/* Tanji progress bar za alert poruke */
.lexbox-alert-progress {
  height: 2px !important;
  background: transparent;
}

.lexbox-alert-progress .progress-bar {
  height: 2px !important;
  border-radius: 0;
}

/* Linearna animacija (ravnomjerna) */
@keyframes lexboxProgressLinear {
  from { width: 100%; }
  to   { width: 0%; }
}

/* Primjena animacije */
.lexbox-progress-anim {
  animation: lexboxProgressLinear 7s linear forwards;
}


/* Rješenje za male ekrane */
/* Mobilne prilagodbe */
@media (max-width: 576px){
  .notice-card { padding: 1rem; border-radius: 8px; }
  .notice-card .notice-title { font-size: 1.35rem; }
}


/* Mobiteli (≤576px): bočni razmak, normalan padding i ergonomija */
@media (max-width: 576px){
  .auth-wrapper { padding-left: 24px; padding-right: 24px; }
  .auth-box { 
    padding: 16px; 
    max-width: 100%; 
    /* border-radius: 6px;  */
    border-radius: 8px;  /* malo manji radius na uskim ekranima, ali i dalje blizak desktop 10px */
  }
  .form-standard .form-control { font-size: 16px; } /* iOS anti-zoom */
  .form-standard button { min-height: 44px; }
}

/* Vrlo uski telefoni (≤360px): još malo smanji label font */
@media (max-width: 360px){
  .form-standard .form-label { font-size: 13px; }
}

/* Veći ekrani (≥768px): malo uža i elegantnija kutija */
@media (min-width: 768px){
  .auth-box { max-width: 480px; } /* bilo 500px */
}