.message {
    margin: 15px auto;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}
.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
/* --- Password mező konténer + input beállítások --- */
.password-wrap {
  position: relative;        /* KELL az ikon pozicionálásához */
  display: block;
  width: 100%;
  max-width: 400px;
}

.password-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.4rem;     /* hely az ikon gombnak (22px ikon + hézag) */
  /* ha felülírja valami: */
  max-width: 100% !important;
}

/* --- Szem gomb teljes reset + pontos pozícionálás --- */
.password-wrap .toggle-password {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  line-height: 0;
  z-index: 2;                /* biztosan az input fölött legyen */
}
.password-wrap .toggle-password::-moz-focus-inner { border:0; padding:0; }
.password-wrap .toggle-password:focus-visible {
  outline: 2px solid #99c2ff; 
  outline-offset: 2px;
  border-radius: 4px;
}

.password-wrap .toggle-password svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: #555;
  transition: fill .2s ease;
}
.password-wrap .toggle-password:hover svg { fill: #000; }

/* ikon váltás */
.password-wrap .toggle-password[aria-pressed="true"] .eye-open { display:none; }
.password-wrap .toggle-password[aria-pressed="false"] .eye-closed { display:none; }