/* CertPrepAI Login Page - Vibrant theme-aligned styles */
/* Uses variables from public/assets/css/common.css */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

/* Page background and centering */
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Move the auth card to the right on desktop */
  justify-content: flex-end;
  padding: 24px;
  /* Gradient mesh + faint SVG watermark (no photo) */
  background:
    /* Subtle light vignette behind the card (desktop only) */
    /* linear-gradient(90deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0) 100%) right / clamp(320px, 34vw, 520px) 100% no-repeat, */
    /* Toned-down gradients */
    /* radial-gradient(1000px 700px at -12% -18%, rgba(56, 168, 103, 0.16), transparent 58%), */
    /* radial-gradient(820px 600px at 112% -12%, rgba(1, 77, 64, 0.14), transparent 52%), */
    /* radial-gradient(900px 600px at 50% 110%, rgba(1, 77, 64, 0.08), transparent 62%), */
    /* linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(236, 245, 241, 0.60) 100%), */
    /* Full-bleed hero image */
    url('../images/login_sidebar2 5.svg') left -10% center / cover no-repeat,
    linear-gradient(180deg, #f7fbfa 0%, var(--imarticus-bg-grey) 100%);
}

/* Container */
.login-container {
  /* Slight transparency so the background peeks through */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(2px);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(1, 77, 64, 0.18);
  width: 100%;
  max-width: 440px;
  border: 1px solid rgba(1, 77, 64, 0.08);
  margin-right: clamp(20px, 8vw, 96px);
}

.login-image {
  display: flex;
  justify-content: center;
  max-height: 40px;
  margin-bottom: 24px;
}

/* Header */
.login-header h1 {
  color: #3C4852;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Onest;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 0px;
  /* 41.6px */
}

.login-header p {
  color: rgba(47, 49, 48, 0.80);
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  /* 16.8px */
}

/* Form controls (reuse MD styles, tweak spacing) */
.login-container .form-label {
  color: var(--md-text-primary);
  font-weight: 600;
  color: #212A39;
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 18.2px */
}

.login-container .form-control {
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid rgba(102, 102, 102, 0.16);
  background: #FFF;
  height: inherit;
}

.login-container .form-control:focus {
  border-radius: 8px;
  border: 1px solid rgba(3, 86, 66, 0.60);
  background: #FFF;
}

.login-container .email-input {
  color: #212A39;
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 18.2px */
}

.login-container .email-input::placeholder {
  color: #212A39;
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  opacity: 0.4;
  /* 18.2px */
}

/* Submit button */
.login-container .btn-primary {
  display: flex;
  padding: 16px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 10px;
  background: #035642;
  text-transform: none;
  color: #FFF;
  font-family: Onest;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 120% */
  /* text-transform: capitalize; */
}

.login-container .btn-primary:hover {
  background-color: var(--md-primary-dark);
}

/* Divider */
.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #6E6E6E;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Onest;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 24px */
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--md-divider);
}

.login-divider:not(:empty)::before {
  margin-right: .75em;
}

.login-divider:not(:empty)::after {
  margin-left: .75em;
}

/* Provider buttons - align to theme */
.login-container .btn-outline-secondary {
  border: 1px solid var(--md-primary);
  color: var(--md-primary);
  background-color: transparent;
}

.login-container .btn-outline-secondary:hover,
.login-container .btn-outline-secondary:focus {
  background-color: rgba(1, 77, 64, 0.06);
  color: var(--md-primary-dark);
}

/* Alerts spacing inside compact card */
.login-container .alert {
  margin-bottom: 0.75rem;
}

/* Minor extras */
.login-container a {
  color: var(--md-primary);
  text-decoration: none;
  color: #048E6C;
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  /* 142.857% */
}

.login-container a:hover {
  color: var(--md-primary-dark);
  text-decoration: underline;
}

/* Password toggle button */
.password-toggle-btn {
  color: var(--md-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
  border-radius: 10px;
  border: 1px solid #D9D9D9;
  background: #FFF;
  border-left: 0;
  box-shadow: none;
}

.password-toggle-btn:hover {
  background: #FFF;
  color: var(--md-text-secondary);
  box-shadow: none;
}

.password-toggle-btn i {
  font-size: 1rem;
}

.email-input-div {
  height: 59px;
}

.input-group {

  input {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
  }
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .login-container {
    padding: 1.25rem 1.25rem 1rem 1.25rem;
    border-radius: 12px;
  }
}

/* Right alignment on desktop, center on tablets/phones */
@media (max-width: 992px) {
  body {
    justify-content: center;
    padding: 16px;
    /* Simplify background on small screens (no stripe) */
    background:
      radial-gradient(1000px 700px at -12% -18%, rgba(56, 168, 103, 0.14), transparent 58%),
      radial-gradient(820px 600px at 112% -12%, rgba(1, 77, 64, 0.12), transparent 52%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(236, 245, 241, 0.64) 100%),
      /* Option 1: Focal Left -> center-top for tablets */
      url('../images/login_sidebar2 5.svg') 50% 30% / cover no-repeat,
      linear-gradient(180deg, #f7fbfa 0%, var(--imarticus-bg-grey) 100%);
  }

  .login-container {
    margin-right: 0;
  }
}

/* Further adjust focal point for small phones */
@media (max-width: 576px) {
  body {
    background:
      radial-gradient(1000px 700px at -12% -18%, rgba(56, 168, 103, 0.14), transparent 58%),
      radial-gradient(820px 600px at 112% -12%, rgba(1, 77, 64, 0.12), transparent 52%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(236, 245, 241, 0.66) 100%),
      /* Mobile: slightly higher center to keep subject visible */
      url('../images/login_sidebar2 5.svg') 50% 20% / cover no-repeat,
      linear-gradient(180deg, #f7fbfa 0%, var(--imarticus-bg-grey) 100%);
  }
}

/* --- OAuth provider buttons --- */
.btn-provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--md-divider);
  background: #fff;
  color: var(--md-text-primary);
  font-weight: 600;
}

.btn-provider .provider-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
}

/* Google */
.btn-google {
  border-color: #dadce0;
  color: #3c4043;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #34A853;
  background: linear-gradient(0deg, rgba(52, 168, 83, 0.04) 0%, rgba(52, 168, 83, 0.04) 100%), #FFF;
  display: flex;
  height: 54px;
  padding: 16px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: #232323;
  font-family: Onest;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
}

.btn-google:hover {
  background: #f8f9fa;
}

/* Facebook */
.btn-facebook {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}

.btn-facebook:hover {
  background: #166fe5;
  border-color: #166fe5;
}

.non-account-text {
  color: #3C4852;
  font-family: Onest;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  /* 142.857% */
}