/* ═══════════════════════════════════════════════════
   LEAN MODAL — Prosvjeta d.o.o.
   Modali uvijek centrirani na ekranu (fixed)
   ═══════════════════════════════════════════════════ */

/* ── OVERLAY ── */
#lean_overlay {
  position: fixed;
  z-index: 190;
  top: 0; left: 0;
  height: 100%; width: 100%;
  background: #000;
  display: none;
  opacity: 0.45 !important;
}

/* ── MODALI — fixed, uvijek centrirani ── */
#signin,
#signup,
#forgotten,
#follow,
.follow {
  position: fixed !important;
  top: 350% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4300 !important;
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  overflow-y: auto;
  display: none;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 30, 80, 0.22);
  border-radius: 10px;
  overflow: hidden;
}

/* signup ima scroll unutar forme, ne na samom modalu */
#signup {
  overflow: hidden;
}

#signup form {
  max-height: calc(90vh - 64px);
  overflow-y: auto;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

#signin form {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

/* ── HEADERI ── */
#signup-header,
#signin-header,
#forgotten-header,
#follow-header,
.follow-header {
  padding: 18px 24px;
  background: var(--blue);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#signup-header h1,
#signin-header h1,
#forgotten-header h1,
#follow-header h1,
.follow-header h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

#signup-header h1 > span,
#signin-header h1 > span,
#forgotten-header h1 > span,
#follow-header h1 > span,
.follow-header h1 > span {
  font-size: 20px;
  color: #fff;
  vertical-align: middle;
  margin: 0;
}

/* ── CLOSE GUMB ── */
.modal_close {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.modal_close span,
.login_content a.modal_close span,
.basket_content a.modal_close span {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.75);
  display: block;
  transition: color 0.2s;
}

.modal_close:hover span {
  color: #fff;
}

/* ── REDOVI FORME ── */
#signin .txt-fld,
#signup .txt-fld,
#forgotten .txt-fld,
#follow .txt-fld,
.follow .txt-fld {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #f0f4f8;
  position: relative;
}

#signin .txt-fld:last-of-type,
#signup .txt-fld:last-of-type,
#forgotten .txt-fld:last-of-type,
#follow .txt-fld:last-of-type,
.follow .txt-fld:last-of-type {
  padding: 16px 24px 20px;
  border: none;
}

/* ── LABELE ── */
#signin .txt-fld label,
#signup .txt-fld label,
#forgotten .txt-fld label,
#follow .txt-fld label,
.follow .txt-fld label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  float: none;
  width: 120px;
  padding: 0;
  margin: 0;
  cursor: default;
  text-align: left;
}

/* ── INPUTI ── */
#signin .txt-fld input,
#signup .txt-fld input,
#forgotten .txt-fld input,
#follow .txt-fld input,
.follow .txt-fld input {
  flex: 1;
  float: none;
  width: auto;
  min-width: 140px;
  height: 36px;
  padding: 0 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: #333;
  background: #fff;
  border: 1.5px solid #d0dce8;
  border-radius: 5px;
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  opacity: 1;
}

#signin .txt-fld input:hover,
#signin .txt-fld input:focus,
#signin .txt-fld input:active,
#signup .txt-fld input:hover,
#signup .txt-fld input:focus,
#signup .txt-fld input:active,
#forgotten .txt-fld input:hover,
#forgotten .txt-fld input:focus,
#forgotten .txt-fld input:active,
#follow .txt-fld input:hover,
#follow .txt-fld input:focus,
#follow .txt-fld input:active,
.follow .txt-fld input:hover,
.follow .txt-fld input:focus,
.follow .txt-fld input:active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 100, 200, 0.08);
  background: #fff;
  color: #333;
  font-size: 13px;
}

/* ── SUBMIT GUMB ── */
#signin .txt-fld input[type="submit"],
#signup .txt-fld input[type="submit"],
#forgotten .txt-fld input[type="submit"],
#follow .txt-fld input[type="submit"],
.follow .txt-fld input[type="submit"] {
  flex: none;
  float: none;
  width: auto;
  min-width: unset;
  height: auto;
  padding: 10px 28px;
  background: var(--blue);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 80, 180, 0.18);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  opacity: 1;
}

#signin .txt-fld input[type="submit"]:hover,
#signup .txt-fld input[type="submit"]:hover,
#forgotten .txt-fld input[type="submit"]:hover,
#follow .txt-fld input[type="submit"]:hover,
.follow .txt-fld input[type="submit"]:hover {
  background: var(--blue-dark);
  box-shadow: 0 4px 14px rgba(0, 80, 180, 0.28);
  transform: translateY(-1px);
  color: #fff;
  font-size: 13px;
}

/* ── ZABORAVLJENA LOZINKA ── */
.forgotten_password,
.login_content a.forgotten_password {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  display: inline;
  float: none;
  padding: 0;
  margin: 0 0 0 12px;
  opacity: 0.8;
  transition: opacity 0.2s;
  text-decoration: none;
}

.forgotten_password:hover,
.login_content a.forgotten_password:hover {
  opacity: 1;
  text-decoration: underline;
  color: var(--blue);
  font-size: 11px;
}

/* ── ZVJEZDICA ── */
#signin .red_star,
#signup .red_star,
#forgotten .red_star {
  font-size: 14px;
  color: #e53935;
  margin: 0 0 0 2px;
  padding: 0;
  position: relative;
}

/* ── GDPR CHECKBOX ── */
#signup .txt-fld input[type="checkbox"],
#signin .txt-fld input[type="checkbox"],
#forgotten .txt-fld input[type="checkbox"],
#follow .txt-fld input[type="checkbox"],
.follow .txt-fld input[type="checkbox"] {
  width: auto;
  flex: none;
  height: auto;
  accent-color: var(--blue);
}

#signup .lean_consent_data {
  align-items: flex-start;
}

#signup .lean_consent_data label {
  width: auto;
  flex: 1;
  padding: 0;
  margin: 0 0 0 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #666;
  line-height: 1.6;
  cursor: default;
}

#signup .lean_consent_data label p {
  font-size: 11px;
  margin: 0 0 4px;
  padding: 0;
}

#signup .lean_consent_data label p:last-of-type {
  margin: 0;
  padding: 0;
}

/* ── RESET: focus bg iz originalnog lean.css ── */
.txt-fld input:focus,
.txt-fld textarea:focus {
  background-color: #fff;
}

/* ── RECAPTCHA ── */
#login_form div.grecaptcha-badge,
#register_form div.grecaptcha-badge,
#forget_form div.grecaptcha-badge {
  position: inherit !important;
  visibility: inherit !important;
  margin-bottom: 12px !important;
}

/* ── RESPONSIVE modali ── */
@media (max-width: 520px) {
  #signin,
  #signup,
  #forgotten,
  #follow,
  .follow {
    width: calc(100vw - 24px);
    border-radius: 8px;
  }

  #signin .txt-fld label,
  #signup .txt-fld label,
  #forgotten .txt-fld label,
  #follow .txt-fld label {
    width: 100%;
    margin-bottom: 2px;
  }

  #signin .txt-fld input,
  #signup .txt-fld input,
  #forgotten .txt-fld input,
  #follow .txt-fld input {
    width: 100%;
    flex: none;
    min-width: unset;
  }

  #signin .txt-fld,
  #signup .txt-fld,
  #forgotten .txt-fld,
  #follow .txt-fld {
    padding: 10px 16px;
  }

  #signup-header,
  #signin-header,
  #forgotten-header {
    padding: 14px 16px;
  }
}