/* ==================================================
   MIMORA BOX
   Auth Stylesheet
   Version : 1.0
================================================== */

/* ==================================================
   LOGIN PAGE
================================================== */

.login-page {
  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  background: linear-gradient(180deg, #fff3f8, #ffe5f0);

  padding: 40px 20px;
}

.login-box {
  width: 100%;

  max-width: 450px;

  background: #fff;

  padding: 40px;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.login-box h2 {
  text-align: center;

  color: var(--primary);

  margin-bottom: 30px;
}

.login-box form {
  display: flex;

  flex-direction: column;
}

.login-box label {
  margin-bottom: 8px;

  font-weight: 600;
}

.login-box input {
  padding: 14px;

  margin-bottom: 20px;

  border: 2px solid #ffd5e8;

  border-radius: 10px;

  outline: none;

  font-size: 15px;
}

.login-box input:focus {
  border-color: var(--primary);
}

.login-box .btn {
  width: 100%;

  border: none;

  cursor: pointer;

  margin-top: 10px;
}

.login-box p {
  text-align: center;

  margin-top: 20px;
}

.login-box a {
  color: var(--primary);

  font-weight: 600;
}

/* ==================================================
   AUTH REGISTER / LOGIN
================================================== */

.auth {
  padding: 80px 0;
}

.auth-box {
  max-width: 500px;

  margin: auto;

  background: white;

  padding: 40px;

  border-radius: 20px;

  box-shadow: var(--shadow);
}

.auth-box h2 {
  text-align: center;

  margin-bottom: 30px;

  color: var(--primary);
}

.auth-box label {
  display: block;

  margin-bottom: 8px;

  font-weight: 600;
}

.auth-box input {
  width: 100%;

  padding: 15px;

  margin-bottom: 20px;

  border: 2px solid #ffd5e8;

  border-radius: 12px;

  font-size: 16px;

  transition: 0.3s;
}

.auth-box input:focus {
  border-color: var(--primary);

  outline: none;

  box-shadow: 0 0 10px rgba(255, 95, 150, 0.2);
}

.auth-box .btn {
  width: 100%;

  margin-top: 10px;
}

.auth-link {
  text-align: center;

  margin-top: 20px;
}

.auth-link a {
  color: var(--primary);

  font-weight: 600;
}

.auth-link a:hover {
  text-decoration: underline;
}

/* ==================================================
   PASSWORD SHOW / HIDE
================================================== */

.password-box {
  position: relative;
}

.password-box input {
  width: 100%;

  padding-right: 50px;
}

.password-box i {
  position: absolute;

  right: 18px;

  top: 40%;

  transform: translateY(-50%);

  cursor: pointer;

  color: #999;

  transition: 0.3s;
}

.password-box i:hover {
  color: #ff5b93;
}

/* ==================================================
   LOGIN STATUS
================================================== */

.welcome-user {
  font-size: 14px;

  font-weight: 500;

  color: #555;
}

.logout-btn {
  border: none;

  background: #ff5b93;

  color: white;

  padding: 8px 15px;

  border-radius: 20px;

  cursor: pointer;
}

.logout-btn:hover {
  background: #ff3b7d;
}

/* ==================================================
   LOGIN AREA
================================================== */

.login-area {
  display: flex;

  align-items: center;

  gap: 15px;
}

.login-btn {
  background: #ff5b93;

  color: white !important;

  padding: 12px 28px;

  border-radius: 30px;

  font-size: 16px !important;

  font-weight: 600;

  white-space: nowrap;
}

.login-btn:hover {
  background: #ff3b7d;
}

.register-btn {
  color: #333;

  font-size: 16px;

  font-weight: 500;

  text-decoration: none;

  white-space: nowrap;
}

.register-btn:hover {
  color: #ff5b93;
}

/* ==================================================
   PROFILE
================================================== */

#profileData {
  margin: 30px 0;

  font-size: 17px;

  line-height: 2;
}

#profileData p {
  border-bottom: 1px solid #ffd5e8;

  padding: 10px 0;
}

#profileData span {
  color: var(--primary);

  font-weight: 600;
}
.logout-btn {
  background: #ff6faf;

  color: white;

  border: none;

  padding: 8px 18px;

  border-radius: 20px;

  cursor: pointer;

  margin-left: 10px;
}

.logout-btn:hover {
  background: #ff4c96;
}
/* ===================================
   PROFILE LINK
=================================== */

.user-profile-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
}

.user-profile-link .user-name {
  cursor: pointer;
  transition: 0.3s;
}

.user-profile-link .user-name:hover {
  color: var(--primary);
}

.user-profile-link i {
  margin-right: 5px;
}

/* ===================================
   AUTH V2
=================================== */
.remember-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
  cursor: pointer;
  font-weight: 500;
}

.remember-row input {
  width: auto;
  margin: 0;
}

.auth-message {
  min-height: 22px;
  margin: 8px 0 14px;
  font-size: 14px;
}

.auth-message.error {
  color: #b42318;
}

.auth-message.success {
  color: #067647;
}