/* ---------- CSS Variables ---------- */
:root {
  --primary-color: #313131;
  --accent-bar-color: var(--primary-color);
}

/* ---------- Inverted color scheme: dark card, light text (page bg untouched) ---------- */
.kc-form-card {
  background: #313131;
  border-color: #1a1a1a;
  box-shadow: 0px 32px 48px -12px rgba(0, 0, 0, 0.6), 0px 32px 48px -12px rgba(0, 0, 0, 0.4);
}

#kc-page-title {
  color: #ffffff;
}

#kc-form-login label,
#kc-register-form label,
#kc-reset-password-form label {
  color: #ffffff;
}

#kc-form-login input[type="text"],
#kc-form-login input[type="password"],
#kc-register-form input[type="text"],
#kc-register-form input[type="password"],
#kc-reset-password-form input[type="text"] {
  background: #ffffff;
  border-color: #ffffff;
  color: #313131;
}

#kc-form-login input[type="text"]:focus,
#kc-form-login input[type="password"]:focus,
#kc-register-form input[type="text"]:focus,
#kc-register-form input[type="password"]:focus,
#kc-reset-password-form input[type="text"]:focus {
  background: #ffffff;
  border-color: #cccccc;
}

.checkbox label {
  color: #cccccc;
}

#kc-form-login > div:nth-last-of-type(2) > div:last-child a,
#kc-registration a,
#kc-register-form #kc-form-options a,
#kc-reset-password-form #kc-form-options a {
  color: #9ec5ff;
}

#kc-registration span {
  color: #cccccc;
}

#kc-info-wrapper {
  color: #cccccc;
}

#kc-header-wrapper {
  color: #cccccc;
}

#kc-current-locale-link {
  color: #cccccc;
}

#kc-login,
#kc-register-form input[type="submit"],
#kc-reset-password-form input[type="submit"] {
  background: #ffffff;
  color: #313131;
}

#kc-login:hover,
#kc-register-form input[type="submit"]:hover,
#kc-reset-password-form input[type="submit"]:hover {
  background: #d9d9d9;
}

.subtitle {
  color: #aaaaaa;
}

.subtitle .required {
  color: #ff8a8a;
}

/* ---------- Footer text ---------- */
.digital-footer-text {
  color: #000000;
  font-size: 17px;
  font-weight: bold;
}

/* ---------- Use the original AR PNG icons, inverted to white ---------- */
#kc-form-login > div:has(#username)::after {
  background-color: transparent;
  mask: none;
  -webkit-mask: none;
  background: url('../img/user.png') no-repeat center / contain;
}

#kc-form-login > div:has(#password)::after {
  background-color: transparent;
  mask: none;
  -webkit-mask: none;
  background: url('../img/key.png') no-repeat center / contain;
}

/* ---------- Eye icon for password reveal toggle ---------- */
button[data-password-toggle] {
  width: 32px;
  height: 32px;
  background: url('../img/oeil.png') no-repeat center / contain !important;
  color: transparent !important;
  font-size: 0 !important;
  filter: invert(1);
}

button[data-password-toggle] i,
button[data-password-toggle] svg {
  display: none;
}

/* ---------- Social providers buttons ---------- */
#kc-social-providers {
  color: #ffffff;
}

#kc-social-providers ul li a {
  background: #1f1f1f;
  border-color: #4a4a4a;
  color: #ffffff;
}

#kc-social-providers ul li a:hover {
  border-color: #ffffff;
}