/* ============ Neon Button ============ */
:root{
  --c-orange:#FB9B36;
  --c-green:#9DFF2C;
  --c-black:#000000;
  --c-white:#FFFFFF;
}

.btn-neon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: 12px 18px;
  border-radius: 14px;

  font-weight: 800;
  letter-spacing: .2px;

  color: var(--c-black);
  background: #111;
  border: 1px solid rgba(255,255,255,.08);

  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  outline: none;
}

.btn-neon::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 16px;
  background: transparent;
  filter: blur(10px);
  opacity: 0;
  transition: opacity .18s ease;
  z-index: -1;
}

.btn-neon--orange{
  background: linear-gradient(180deg, rgba(251,155,54,1) 0%, rgba(210,120,30,1) 100%);
  color: var(--c-black);
  border-color: rgba(251,155,54,.55);
  box-shadow:
    0 0 10px rgba(251,155,54,.25),
    0 0 22px rgba(251,155,54,.18);
}
.btn-neon--orange::before{
  background: rgba(251,155,54,.55);
}

.btn-neon--green{
  background: linear-gradient(180deg, rgba(157,255,44,1) 0%, rgba(110,200,20,1) 100%);
  color: var(--c-black);
  border-color: rgba(157,255,44,.55);
  box-shadow:
    0 0 10px rgba(157,255,44,.25),
    0 0 22px rgba(157,255,44,.18);
}
.btn-neon--green::before{
  background: rgba(157,255,44,.55);
}

.btn-neon:hover{
  transform: translateY(-1px);
}
.btn-neon:hover::before{
  opacity: .45;
}
.btn-neon--orange:hover{
  box-shadow:
    0 0 14px rgba(251,155,54,.35),
    0 0 32px rgba(251,155,54,.22);
}
.btn-neon--green:hover{
  box-shadow:
    0 0 14px rgba(157,255,44,.35),
    0 0 32px rgba(157,255,44,.22);
}

.btn-neon:active{
  transform: translateY(0px) scale(.99);
}

.btn-neon:focus-visible{
  outline: 2px solid rgba(255,255,255,.15);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,255,255,.12),
    0 0 18px rgba(251,155,54,.28);
}

.btn-neon[disabled],
.btn-neon.is-disabled{
  cursor: not-allowed;
  opacity: .55;
  filter: saturate(.75);
  box-shadow: none !important;
}
.btn-neon[disabled]::before,
.btn-neon.is-disabled::before{
  opacity: 0 !important;
}

/* optional: pulse only on hover */
@keyframes neonPulse {
  0%   { filter: blur(10px); opacity: .35; }
  50%  { filter: blur(13px); opacity: .55; }
  100% { filter: blur(10px); opacity: .35; }
}
@media (prefers-reduced-motion: no-preference){
  .btn-neon:hover::before{
    animation: neonPulse 1.1s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce){
  .btn-neon:hover::before{ animation: none; }
}

/* ============ Password Toggle (olhozinho) ============ */
.password-field{
  position: relative;
  display: flex;
  align-items: center;
}

.password-field input{
  width: 100%;
  padding-right: 44px; /* espaço para o botão */
}

.password-toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 34px;
  height: 34px;
  border-radius: 10px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  cursor: pointer;

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

  transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease, background .18s ease;
}

.password-toggle:hover{
  border-color: rgba(251,155,54,.55);
  box-shadow: 0 0 14px rgba(251,155,54,.18);
}

.password-toggle:active{
  transform: translateY(-50%) scale(.98);
}

.password-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(157,255,44,.18);
  border-color: rgba(157,255,44,.55);
}

.icon-eye{
  width: 18px;
  height: 18px;
  display: inline-block;
  background: currentColor;
  color: #FFFFFF;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.5A2.5 2.5 0 1 0 12 9a2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.5A2.5 2.5 0 1 0 12 9a2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.password-toggle.is-on{
  border-color: rgba(157,255,44,.55);
  box-shadow: 0 0 14px rgba(157,255,44,.18);
}
.password-toggle.is-on .icon-eye{
  color: #9DFF2C;
}