/* ============================================
   MIBOOK.DEV - Login Page Theme
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background: #f4f6fa !important;
  min-height: 100vh;
}

/* Logo Section */
.book-logo-login-sec {
  padding-top: 50px !important;
  padding-bottom: 10px !important;
}

.book-logo-login-sec .book-logo {
  text-align: center;
}

.book-logo-login-sec .book-logo img {
  max-width: 200px !important;
  height: auto !important;
}

/* Login Form Section */
.login-form-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 16px 60px !important;
}

.login-form-section .row {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}

.login-form-section .col-sm-12 {
  width: 100% !important;
}

.login-form-section .card,
.login-form-section .form-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
  border: 1px solid #e5e7eb !important;
  padding: 40px 36px !important;
  width: 100% !important;
}

/* Title */
.login-form-section h3.title {
  font-family: 'Inter', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin-bottom: 6px !important;
}

.login-form-section p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #6b7280 !important;
  margin-bottom: 28px !important;
}

/* Form inputs */
.login-form-section .form-group {
  margin-bottom: 20px !important;
}

.login-form-section .form-control,
.login-form-section input[type="text"],
.login-form-section input[type="password"],
.login-form-section input[type="email"] {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  color: #1a1a2e !important;
  background: #ffffff !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
}

.login-form-section .form-control:focus,
.login-form-section input:focus {
  border-color: #e8652e !important;
  box-shadow: 0 0 0 3px rgba(232,101,46,0.12) !important;
  outline: none !important;
}

.login-form-section label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
}

/* Submit Button */
.login-form-section .submit-btn button,
.login-form-section button[type="submit"],
.login-form-section .btn-primary {
  background: #e8652e !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  color: #ffffff !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 8px rgba(232,101,46,0.3) !important;
  margin-top: 8px !important;
}

.login-form-section .submit-btn button:hover,
.login-form-section button[type="submit"]:hover,
.login-form-section .btn-primary:hover {
  background: #c74e1a !important;
  box-shadow: 0 4px 16px rgba(232,101,46,0.4) !important;
  transform: translateY(-1px);
}

/* Password toggle icon */
.login-form-section .toggle-password,
.login-form-section .fa-eye,
.login-form-section .fa-eye-slash {
  color: #9ca3af !important;
  cursor: pointer;
}

/* Error messages */
.login-form-section .text-danger,
.login-form-section .invalid-feedback {
  font-size: 13px !important;
  color: #ef4444 !important;
  margin-top: 4px !important;
}

/* Responsive */
@media (max-width: 479px) {
  .login-form-section .card,
  .login-form-section .form-card {
    padding: 28px 20px !important;
    border-radius: 12px !important;
  }

  .login-form-section h3.title {
    font-size: 22px !important;
  }

  .book-logo-login-sec {
    padding-top: 30px !important;
  }
}