/* =============================================================
   Sign-in, registration, forgotten and new password.
   The values come from the design file; these classes cross
   component boundaries (a page styles a Field it did not render),
   so they are not scoped to one component.
   ============================================================= */

.auth-column { width: 100%; max-width: 400px; }
.auth-logo { display: flex; align-items: center; gap: 9px; justify-content: center; margin-bottom: 28px; color: var(--bs-cta); }
.auth-logo img { display: block; }
.auth-card { padding: 28px 26px; }

.auth-title { font: 700 20px/26px var(--font-sans); margin: 0 0 4px; }
.auth-lead { margin-bottom: 20px; font-size: 13px; }
.auth-lead--tight { margin-bottom: 16px; }

/* The sign-in's note that this is not the Parra account, as the design draws it. */
.auth-info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 18px;
  background: var(--bg-light-brand-2);
  border-radius: var(--r-lg);
  color: var(--bs-cta);
}
.auth-info svg { flex: none; margin-top: 2px; }
.auth-info__text { font: 500 12px/18px var(--font-sans); }
.auth-info__link { font-weight: 700; white-space: nowrap; color: inherit; }
.auth-field { margin-bottom: 14px; }
.auth-field--tight { margin-bottom: 8px; }
.auth-error { color: var(--error-primary); font: 500 12px/16px var(--font-sans); margin-bottom: 10px; }
.auth-forgot { text-align: right; margin-bottom: 18px; font-size: 12px; }
.auth-switch { text-align: center; margin-top: 16px; font: 500 12px/16px var(--font-sans); color: var(--text-secondary); }

/* Notice card: "Link je poslan", "Lozinka je promijenjena". */
.auth-notice { text-align: center; }
.auth-notice__icon { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.auth-notice__title { font: 700 20px/26px var(--font-sans); margin-bottom: 8px; }
.auth-notice__body { font-size: 13px; line-height: 20px; margin-bottom: 22px; }
.auth-notice__detail { font: 600 13px/18px var(--font-sans); color: var(--bs-cta); background: var(--bg-light-brand); padding: 10px 12px; margin-bottom: 22px; word-break: break-all; }
.auth-notice__secondary { margin-top: 14px; }

/* Password rules under the new-password fields. */
.pw-rules { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.pw-rules--inline { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 24px; }
.pw-rule { display: flex; align-items: center; gap: 8px; font: 500 12px/16px var(--font-sans); }
.pw-rule__mark { width: 14px; height: 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.pw-rule__mark--on { background: #EAF3DE; color: #3B6D11; }
.pw-rule__mark--off { background: #F1EFE8; color: var(--bs-icons-2); }
.pw-rule__label--on { color: #3B6D11; }
.pw-rule__label--off { color: var(--text-secondary); }

/* Krug oko ikone u kartici obavijesti: zeleno kad je posao gotov, crveno kad nije. */
.auth-notice__icon--good { background: #EAF3DE; color: #3B6D11; }
.auth-notice__icon--bad { background: #FCEBEB; color: #A32D2D; }
.auth-notice__action { width: 100%; justify-content: center; text-decoration: none; }

/* =============================================================
   Registracija je šira od ostalih kartica: nosi podatke obveznika,
   prvo prodajno mjesto i pristup, sve na jednom ekranu.
   ============================================================= */

.auth-column--wide { max-width: 880px; }

.reg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.reg-card { padding: 26px 28px; }
.reg-title { font: 700 22px/28px var(--font-sans); margin: 0 0 6px; }
.reg-lead { font-size: 13px; line-height: 20px; margin-bottom: 24px; }

.reg-section {
  font: 700 12px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-cta);
  margin-bottom: 14px;
}

.reg-section--tight { margin-bottom: 10px; }

.reg-note {
  font: 500 13px/20px var(--font-sans);
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.reg-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

.reg-address {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.4fr);
  gap: 14px;
  margin-bottom: 10px;
}

.reg-hint { font-size: 12px; margin-top: 6px; }

/* Izbor s kružićem: web stranica i čime se obveznik bavi. */
.reg-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.reg-choice__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ds-secondary);
  border-radius: var(--r-lg);
  background: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.reg-choice__item.is-on { border-color: var(--bs-cta); background: var(--bg-light-brand); }

/* Tri retka jedan ispod drugog, kako ih dizajn slaže: naslov, objašnjenje, posljedica. */
.reg-choice__label { display: block; font: 700 14px/20px var(--font-sans); }
.reg-choice__sub { display: block; font-size: 12px; line-height: 18px; }
.reg-choice__note { display: block; font: 500 12px/18px var(--font-sans); color: var(--bs-cta); }

.reg-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font: 500 13px/18px var(--font-sans);
  margin-bottom: 20px;
}

.reg-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-table);
}

.reg-foot__actions { display: flex; justify-content: flex-end; }

.reg-error {
  padding: 10px 12px;
  background: #FCEBEB;
  border: 1px solid rgba(163, 45, 45, .25);
  font: 500 12px/18px var(--font-sans);
  color: #A32D2D;
}

/* The website and the path on one line: together they are the one address the redirect goes on. */
.reg-site {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 14px;
  max-width: 520px;
}
.reg-site__hint { max-width: 520px; margin: 6px 0 24px; }

@media (max-width: 767.98px) {
  .reg-site { grid-template-columns: 1fr; }
}
.reg-pair--access { margin-bottom: 14px; }

/* Registracija je duga, pa se veže uz vrh ekrana umjesto da se centrira. */
.authbg--top { align-items: flex-start; padding: 40px 24px; }
.reg-done { max-width: 400px; margin: 0 auto; }

/* Legal: the notice, the stacked checkboxes, and the document links under the card. */
.reg-terms--tight { margin-bottom: 10px; }
.reg-terms__error { margin: -4px 0 10px 26px; }
.legal-notice {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--bg-light-brand-2);
  border-left: 3px solid var(--bg-brand-2);
  font: 500 12px/18px var(--font-sans);
  color: var(--text-tertiary);
}
.legal-notice__title { font: 700 13px/18px var(--font-sans); color: var(--text-primary); margin-bottom: 4px; }
.legal-notice--registration { margin: 6px 0 20px; }
/* The document links under the card, as the design sets them on every sign-in screen. */
.legal-links.auth-legal { justify-content: center; gap: 6px 14px; margin-top: 18px; font: 500 12px/16px var(--font-sans); }
.legal-links.auth-legal a { color: var(--bs-cta); }

/* The acceptance screen ("Prije nastavka"), after the design. */
.legal-warning {
  padding: 14px 16px;
  margin-bottom: 18px;
  background: #FAEEDA;
  border: 1px solid rgba(133, 79, 11, .2);
  border-radius: var(--r-lg);
}
.legal-warning__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font: 700 13px/18px var(--font-sans);
  color: #854F0B;
}
.legal-warning__text { font: 500 13px/20px var(--font-sans); color: #6B3F09; }

.legal-checks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.legal-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font: 500 13px/19px var(--font-sans);
  color: var(--text-primary);
}
.legal-check .chk { margin-top: 1px; }

/* The square is what is seen, the real checkbox is what is posted — and on a static page the square
   fills from the checkbox itself, with no circuit to toggle a class. */
.legal-check__box { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.legal-check:has(.legal-check__box:checked) .chk { background: var(--bs-cta); border-color: var(--bs-cta); }
.legal-check:has(.legal-check__box:focus-visible) .chk { outline: 2px solid var(--bs-cta); outline-offset: 2px; }

.legal-error { margin-bottom: 12px; border-radius: var(--r-md); }
.legal-out { text-align: center; margin-top: 14px; font-size: 12px; }