/* Modern Password Field Styles for MaketOu (Karma Template) */

:root {
  --eye-color: #777;
  --eye-active-color: #ffa200; /* Karma template primary color */
  --eye-glint: white;
  --button-shade: 80%;
}

@media(prefers-color-scheme: dark) {
  :root {
    --button-shade: 30%;
    --eye-glint: black;
  }
}

.modern-password-group {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.modern-password-group input.form-control.modern-password {
  padding-right: 55px !important; /* Make room for the eye button */
  letter-spacing: 0.1ch;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Désactiver complètement l'apparence bleutée de l'autofill */
.modern-password-group input.form-control.modern-password:-webkit-autofill,
.modern-password-group input.form-control.modern-password:-webkit-autofill:hover,
.modern-password-group input.form-control.modern-password:-webkit-autofill:focus,
.modern-password-group input.form-control.modern-password:-webkit-autofill:active,
.modern-password-group input.form-control.modern-password:-webkit-autofill::first-line {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #222222 !important;
  box-shadow: 0 0 0 1000px white inset !important;
  background-color: white !important;
  background-clip: content-box !important;
  -webkit-background-clip: content-box !important;
  transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s !important;
  caret-color: #222222 !important;
  filter: none !important;
}

/* Pour Firefox */
.modern-password-group input.form-control.modern-password:-moz-autofill {
  background-color: white !important;
  background-image: none !important;
  color: #222222 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Pour tous les navigateurs - style général */
.modern-password-group input.form-control.modern-password[autocomplete] {
  background-color: white !important;
}

/* Styles spécifiques pour le formulaire de login */
.login_form .modern-password-group {
  position: relative !important;
}

.login_form .modern-password-group .eye-toggle {
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.modern-password-group .eye-toggle {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 6px;
  border: 0 !important;
  background: transparent !important;
  transition: all 0.2s;
  color: var(--eye-color) !important;
  position: absolute !important;
  right: 8px !important;
  z-index: 100 !important;
  top: 50% !important;
  cursor: pointer !important;
  transform: translateY(-50%) !important;
  outline: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0 !important;
}

.modern-password-group .eye-toggle:hover,
.modern-password-group .eye-toggle:focus {
  color: var(--eye-active-color);
  background: rgba(0, 0, 0, 0.05);
}

.modern-password-group .eye-toggle:active {
  background: rgba(0, 0, 0, 0.1);
}

.modern-password-group .eye-toggle svg path,
.modern-password-group .eye-toggle svg circle {
  stroke: currentColor;
  fill: currentColor;
}

.modern-password-group .eye-toggle svg {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.modern-password-group .eye-toggle svg path {
  stroke: currentColor;
  fill: none;
}

.modern-password-group .eye-toggle svg .eye circle {
  fill: currentColor;
}

.modern-password-group .eye-toggle svg .eye circle:nth-of-type(2) {
  fill: var(--eye-glint);
}

/* SR Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Animations */
.lid--upper, .lid--lower {
  transition: morphSVG 0.125s;
}