@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --nhp-background: #f0f4eb;
  --nhp-surface: #ffffff;
  --nhp-surface-soft: #e8ede2;
  --nhp-primary: #357a2c;
  --nhp-primary-dark: #1e5215;
  --nhp-heading: #344514;
  --nhp-text: #1d1d1f;
  --nhp-muted: #62685e;
  --nhp-border: rgba(29, 29, 31, 0.1);
  --nhp-focus: rgba(53, 122, 44, 0.24);
  --nhp-danger: #a4241d;
  --nhp-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --keycloak-card-top-color: transparent;
}

html.login-pf,
.login-pf body {
  min-height: 100%;
  background: var(--nhp-background);
  color: var(--nhp-text);
  font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.login-pf body {
  position: relative;
  isolation: isolate;
}

.login-pf body::before,
.login-pf body::after {
  position: fixed;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.login-pf body::before {
  inset: -18vh auto auto -10vw;
  width: min(58vw, 720px);
  height: min(58vw, 720px);
  border: 1px solid rgba(53, 122, 44, 0.1);
  border-radius: 42% 58% 64% 36% / 46% 38% 62% 54%;
  background:
    radial-gradient(circle at 63% 64%, rgba(53, 122, 44, 0.07), transparent 52%),
    rgba(255, 255, 255, 0.2);
  transform: rotate(-12deg);
}

.login-pf body::after {
  right: -18vw;
  bottom: -28vh;
  width: min(68vw, 860px);
  height: min(68vw, 860px);
  border-radius: 58% 42% 40% 60% / 54% 62% 38% 46%;
  background: rgba(45, 74, 53, 0.055);
  transform: rotate(18deg);
}

.pf-v5-c-login {
  min-height: 100svh;
  background: transparent;
}

.pf-v5-c-login__container {
  width: min(100% - 32px, 480px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "main";
  align-content: center;
  gap: 22px;
  padding: 32px 0;
}

.pf-v5-c-login__header {
  margin: 0;
  padding: 0;
}

#kc-header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--nhp-heading) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-align: center;
  text-transform: none;
}

#kc-header-wrapper::before {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(53, 122, 44, 0.13);
  border-radius: 18px;
  background: #fff url("../img/logo.png") center / 52px 52px no-repeat;
  box-shadow: 0 10px 34px rgba(45, 74, 53, 0.1);
  content: "";
}

#kc-header-wrapper small {
  color: var(--nhp-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pf-v5-c-login__main {
  overflow: hidden;
  border: 1px solid var(--nhp-border);
  border-radius: 20px;
  background: var(--nhp-surface);
  box-shadow: 0 20px 60px rgba(45, 74, 53, 0.12), 0 2px 8px rgba(29, 29, 31, 0.04);
}

.pf-v5-c-login__main-header {
  min-height: 0;
  padding: 30px 32px 14px;
  border-top: 0;
}

.pf-v5-c-login__main-header:has(.pf-v5-c-login__main-header-utilities) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.pf-v5-c-login__main-header .pf-v5-c-title {
  color: var(--nhp-heading);
  font-family: inherit;
  font-size: clamp(1.55rem, 4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  min-width: 112px;
  border: 1px solid var(--nhp-border);
  border-radius: 999px;
  background: var(--nhp-surface-soft);
  box-shadow: none;
}

.pf-v5-c-login__main-header-utilities select {
  color: var(--nhp-muted);
  font-family: inherit;
  font-size: 13px;
}

.pf-v5-c-login__main-body {
  padding: 10px 32px 30px;
}

.pf-v5-c-form,
.pf-v5-c-form-control,
.pf-v5-c-button {
  font-family: inherit;
}

.pf-v5-c-form__label-text,
.pf-v5-c-check__label {
  color: var(--nhp-heading);
  font-size: 13px;
  font-weight: 600;
}

.pf-v5-c-form-control {
  min-height: 46px;
  border: 1px solid rgba(29, 29, 31, 0.18);
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
  transition: border-color 160ms var(--nhp-ease), box-shadow 160ms var(--nhp-ease);
}

.pf-v5-c-form-control:hover {
  border-color: rgba(53, 122, 44, 0.48);
}

.pf-v5-c-form-control:focus-within {
  border-color: var(--nhp-primary);
  box-shadow: 0 0 0 4px var(--nhp-focus);
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select {
  color: var(--nhp-text);
  font-family: inherit;
  font-size: 15px;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border: 0 !important;
}

.pf-v5-c-button {
  min-height: 44px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 160ms var(--nhp-ease), background 160ms var(--nhp-ease), border-color 160ms var(--nhp-ease), box-shadow 160ms var(--nhp-ease);
}

.pf-v5-c-button.pf-m-primary {
  border-color: var(--nhp-primary);
  background: var(--nhp-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(53, 122, 44, 0.18);
}

.pf-v5-c-button.pf-m-primary:hover {
  border-color: var(--nhp-primary-dark);
  background: var(--nhp-primary-dark);
  transform: translateY(-1px);
}

.pf-v5-c-button.pf-m-secondary,
#try-another-way {
  border: 1px solid rgba(53, 122, 44, 0.25);
  background: #fff;
  color: var(--nhp-primary-dark);
}

.pf-v5-c-button.pf-m-secondary:hover,
#try-another-way:hover {
  border-color: var(--nhp-primary);
  background: rgba(53, 122, 44, 0.06);
}

.pf-v5-c-button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid var(--nhp-focus);
  outline-offset: 3px;
}

a {
  color: var(--nhp-primary);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--nhp-primary-dark);
}

.pf-v5-c-check__input:checked {
  accent-color: var(--nhp-primary);
}

.pf-v5-c-alert {
  border: 0;
  border-radius: 12px;
  background: var(--nhp-surface-soft);
  box-shadow: none;
}

.pf-v5-c-alert.pf-m-danger {
  background: #fff1ef;
  color: var(--nhp-danger);
}

.kc-feedback-text {
  font-size: 13px;
  line-height: 1.45;
}

.pf-v5-c-login__main-footer {
  padding: 0;
}

.nhp-login-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 18px 26px 22px;
  border-top: 1px solid var(--nhp-border);
  background: rgba(232, 237, 226, 0.48);
  color: var(--nhp-muted);
  text-align: center;
}

.nhp-login-footer__note {
  margin: 0;
  color: var(--nhp-heading);
  font-size: 12px;
  font-weight: 600;
}

.nhp-login-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
}

.nhp-login-footer__legal a,
.nhp-login-footer__back {
  color: var(--nhp-muted);
  text-decoration: none;
}

.nhp-login-footer__legal a:hover,
.nhp-login-footer__back:hover {
  color: var(--nhp-primary-dark);
  text-decoration: underline;
}

.nhp-login-footer__back {
  font-size: 12px;
  font-weight: 600;
}

.nhp-login-footer__back::before {
  content: "\2190\00a0";
}

@media (max-width: 520px) {
  .pf-v5-c-login__container {
    width: min(100% - 24px, 460px);
    gap: 16px;
    padding: 18px 0;
  }

  #kc-header-wrapper::before {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background-size: 46px 46px;
  }

  .pf-v5-c-login__main {
    border-radius: 17px;
  }

  .pf-v5-c-login__main-header {
    padding: 24px 22px 12px;
  }

  .pf-v5-c-login__main-body {
    padding: 8px 22px 24px;
  }

  .pf-v5-c-login__main-header .pf-v5-c-title {
    font-size: 1.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}