/* Simple, shared styles for Login and Signup */

/* Page background */
body.login-page { background-color: var(--bg-dark); }

/* Main layout */
.login-wrapper { flex: 1 0 auto; padding-top: 2rem; padding-bottom: 2rem; }
.login-row { max-width: 1480px; margin-left: auto; margin-right: auto; }

/* Hero/text column */
.gradient { background-image: linear-gradient(to right, #ffd800, #ff8c00); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.left-column h1, .display-title { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; font-weight: 900; color: var(--text-white); letter-spacing: -0.4px; max-width: 16ch; }
.left-column h6 { font-weight: 600; color: var(--text-white); text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.highlight-bar { width: 160px; height: 4px; background: var(--brand-primary); margin-top: 10px; border-radius: 2px; }

/* Auth card */
.login-container {
  background-color: #fff;
  color: #111;
  width: 100%;
  max-width: 600px; /* wider on desktop so it doesn't feel cramped */
  padding: 2rem 2rem 2rem 2rem;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  text-align: center;
}

/* Headings and labels inside the card */
.login-container h4,
.login-container h5,
.login-container p,
.login-container label,
.login-container .form-label { color: #111; }

/* Inputs */
input.form-control {
  background-color: #fff;
  color: #111;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 1rem;
}
input.form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(255,216,0,.25); }
.login-container input::placeholder { color: #6b7280; }

/* Buttons and links */
.btn-custom {
  background-color: var(--brand-primary);
  color: #111;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 10px 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-custom:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.account-link { display: block; margin-top: 1rem; font-size: .9rem; color: #374151; text-decoration: none; }
.account-link:hover { color: #111; }

/* Corrigir cor de fundo do autofill/autocompletar */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
input.form-control:-webkit-autofill:active,
input.always-white:-webkit-autofill,
input.always-white:-webkit-autofill:hover,
input.always-white:-webkit-autofill:focus,
input.always-white:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: #111 !important;
  background-color: #fff !important;
}

/* Para inputs de senha especificamente */
input[type="password"]:-webkit-autofill,
input[type="password"]:-webkit-autofill:hover,
input[type="password"]:-webkit-autofill:focus,
input[type="password"]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: #111 !important;
  background-color: #fff !important;
}

@media (max-width: 992px) {
  .login-wrapper { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .login-row { max-width: 100%; }
  .left-column h1, .display-title { font-size: clamp(1.6rem, 6vw, 2.2rem); text-align: center; max-width: 18ch; margin-left: auto; margin-right: auto; }
  .left-column h6 { text-align: center; font-size: .95rem; }
  .highlight-bar { width: 100px; margin-left: auto; margin-right: auto; }
  .login-container { max-width: 100%; padding: 1.5rem; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
}