/* ======================================================
   auth.css
   AUTH PAGES (login / register / verify)
====================================================== */

.auth-wrap{
  min-height: calc(100vh - 80px);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:140px 20px 40px;
  background:#f0f2f5;
  box-sizing:border-box;
}

.auth-card{
  width:100%;
  max-width:430px;
  background:#fff;
  padding:2rem 2rem 2.1rem;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  text-align:center;
  box-sizing:border-box;
}

.auth-card h1{
  margin:0 0 1.2rem;
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  color:#111827;
}

.auth-muted{
  margin:0 0 1.2rem;
  font-size:.95rem;
  color:#4b5563;
  line-height:1.5;
}

.auth-muted strong{
  color:#111827;
}

.auth-alert{
  margin-bottom:1rem;
  font-size:.92rem;
  border-radius:8px;
  padding:.8rem .9rem;
  text-align:left;
  line-height:1.45;
}

.auth-alert-danger{
  background:#ffe5e5;
  color:#b00020;
  border:1px solid #ffd1d1;
}

.auth-alert-info{
  background:#e7f5ff;
  color:#004085;
  border:1px solid #b8daff;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.auth-form .form-group{
  text-align:left;
}

.auth-form label{
  display:block;
  margin-bottom:.42rem;
  font-size:.9rem;
  font-weight:600;
  color:#374151;
}

.auth-input,
.auth-wrap input[type="text"],
.auth-wrap input[type="email"],
.auth-wrap input[type="password"],
.auth-wrap input[type="tel"],
.auth-wrap input.form-control{
  width:100%;
  padding:.88rem .95rem;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  font-size:1rem;
  color:#111827;
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease;
  outline:none;
}

.auth-input:focus,
.auth-wrap input[type="text"]:focus,
.auth-wrap input[type="email"]:focus,
.auth-wrap input[type="password"]:focus,
.auth-wrap input[type="tel"]:focus,
.auth-wrap input.form-control:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.16);
}

.auth-code{
  text-align:center;
  letter-spacing:6px;
  font-weight:700;
  font-size:1.15rem !important;
}

.auth-button,
.auth-wrap .btn.btn-success,
.auth-wrap .submit-button,
.auth-wrap button[type="submit"],
.auth-wrap input[type="submit"]{
  width:100%;
  padding:.9rem 1rem;
  border:none;
  border-radius:10px;
  background:#28a745;
  color:#fff;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease, transform .05s ease;
}

.auth-button:hover,
.auth-wrap .btn.btn-success:hover,
.auth-wrap .submit-button:hover,
.auth-wrap button[type="submit"]:hover,
.auth-wrap input[type="submit"]:hover{
  background:#218838;
}

.auth-button:active,
.auth-wrap .btn.btn-success:active,
.auth-wrap .submit-button:active,
.auth-wrap button[type="submit"]:active,
.auth-wrap input[type="submit"]:active{
  transform:scale(.99);
}

.auth-links{
  margin-top:1.1rem;
}

.auth-links a,
.auth-wrap a{
  color:#007bff;
  text-decoration:none;
}

.auth-links a:hover,
.auth-wrap a:hover{
  text-decoration:underline;
}

.auth-legal{
  font-size:.78rem;
  color:#666;
  line-height:1.5;
  text-align:left;
  margin-top:-.2rem;
}

.auth-legal input[type="checkbox"]{
  margin-right:6px;
  transform:translateY(1px);
}

.auth-coupon{
  background:#e7f5ff;
  border:1px solid #b8daff;
  color:#004085;
  padding:12px 14px;
  border-radius:10px;
  margin-bottom:1.15rem;
  font-size:.93rem;
  line-height:1.5;
}

.auth-helper{
  font-size:.88rem;
  color:#6b7280;
  margin-top:.35rem;
  line-height:1.45;
}

@media (max-width: 768px){
  .auth-wrap{
    padding:120px 16px 28px;
  }

  .auth-card{
    max-width:100%;
    padding:1.45rem 1.2rem 1.55rem;
    border-radius:12px;
  }

  .auth-card h1{
    font-size:21px;
  }

  .auth-muted,
  .auth-coupon,
  .auth-alert{
    font-size:.9rem;
  }

  .auth-code{
    letter-spacing:4px;
    font-size:1.05rem !important;
  }
}