/* ===============================
   LOGIN – Frontend page
================================ */

:root {
  --txt-orange: #ff8a00;
  --txt-orange-2: #ff9f2a;
  --txt-red: #e03e33;
  --txt-border: #f08a00;
  --text: #1f1f1f;
  --muted: #6b6b6b;
  --bg: #ffffff;
  --card: #ffffff;
}

.login-wrap {
  max-width: 560px;           /* container width similar to screenshot */
  margin: 56px auto;
  padding: 0 16px;
}

.login-title {
  text-align: center;
  color: var(--txt-orange);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 24px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;                  /* space between fields */
}

.login-form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-form label {
  font-size: 14px;
  color: var(--text);
}

.login-form .input,
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
  height: 46px;
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  border: 2px solid var(--txt-border);
  border-radius: 10px;
  box-shadow: none;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.login-form .input:focus {
  border-color: var(--txt-orange);
  box-shadow: 0 0 0 3px rgba(255,138,0,.15);
}

/* Gradient button */
.login-button,
.login-form button[type="submit"],
.login-form input[type="submit"] {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  background-image: linear-gradient(90deg, var(--txt-orange-2), var(--txt-red));
  transition: filter .2s ease, transform .06s ease;
}

.login-button:hover,
.login-form button[type="submit"]:hover,
.login-form input[type="submit"]:hover {
  filter: brightness(1.05);
}

.login-button:active,
.login-form button[type="submit"]:active,
.login-form input[type="submit"]:active {
  transform: translateY(1px);
}

/* Optional: center the whole section and reduce page clutter */
.ast-container .entry-content > .login-wrap:first-child {
  margin-top: 64px;
}

.remember {
    display:flex;
    align-items:center;
    gap:8px;
}