/**
 * password-toggle.css
 * Stiluri pentru butonul toggle parolă și butonul Renunță
 */

/* Containerul trebuie să fie relativ (Bootstrap are deja .position-relative, dar îl întărim) */
.position-relative {
  position: relative !important;
}

/* Inputul trebuie să lase loc pentru icon */
.js-password-input.pe-5 {
  padding-right: 2.5rem !important;
}

/* Butonul toggle - poziționare absolută în input */
.password-toggle,
.js-toggle-password {
  position: absolute !important;
  top: 50% !important;
  right: 0.6rem !important;
  transform: translateY(-50%) !important;

  height: 20px !important;
  width: 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: none !important;
  padding: 0 !important;

  color: var(--primary, #003e4a) !important;
  cursor: pointer !important;

  z-index: 15 !important;
  line-height: 1 !important;
  font-size: 0.8rem !important;
}

.password-toggle:hover,
.js-toggle-password:hover {
  opacity: 0.85;
}

.password-toggle:focus,
.password-toggle:focus-visible,
.js-toggle-password:focus,
.js-toggle-password:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================
   BUTON RENUNȚĂ (controlat complet de noi)
   IMPORTANT: NU îl combina cu .btn-sm
   ========================= */
.btn-renunta {
  /* Ca să bată Bootstrap .btn */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Centrare verticală "beton" indiferent de font/diacritice */
  line-height: 1 !important;

  text-decoration: none !important;
  gap: 0.35rem !important;

  background-color: transparent !important;
  border: 1px solid var(--primary, #003e4a) !important;
  color: var(--primary, #003e4a) !important;

  /* Dimensiune tip "small", dar stabilă */
  padding: 0.5rem 0.75rem !important;   /* padding simetric => centrare corectă */
  font-size: 0.875rem !important;
  font-weight: 500 !important;

  border-radius: 0.375rem !important;

  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-renunta:hover {
  background-color: rgba(0, 62, 74, 0.1) !important;
  text-decoration: none !important;
}

.btn-renunta:focus,
.btn-renunta:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Icon: nu îl "aplatizăm" cu font-weight; îl lăsăm curat */
.btn-renunta .bi {
  line-height: 1 !important;
  font-size: 0.95em !important; /* ușor mai mic decât textul, arată ca btn-urile Bootstrap */
}

/* Clasă helper pentru butoane extra small */
.btn-xs {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  border-radius: 0.25rem !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  gap: 0.25rem !important;
}

/* Fallback pentru tema primary */
:root {
  --primary: #003e4a;
}

/* =========================
   ELIMINARE ICONIȚĂ EROARE BOOTSTRAP
   Previne suprapunerea cu butonul toggle parolă
   ========================= */
.form-control.is-invalid,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid,
.was-validated .form-control:invalid:focus {
  background-image: none !important;
  padding-right: 40px !important;  /* Păstrează loc pentru butonul ochi */
}

/* Elimină orice iconiță falsă din pseudo-elemente */
.form-control.is-invalid::after,
.form-control.is-invalid::before,
.was-validated .form-control:invalid::after,
.was-validated .form-control:invalid::before {
  display: none !important;
  content: none !important;
}