.login-wrapper {
  min-height: 100vh;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-size: 0.875rem;
}
.login-wrapper .text-link {
  color: rgba(22, 163, 74, 1);
}

.login-content {
  background: linear-gradient(
    to right bottom,
    rgb(7, 49, 44),
    rgb(2, 14, 29)
  );
}
.login-content .title {
  font-weight: 700;
}
.login-content .sub-title {
  font-size: 1.125rem;
}

.login-usp {
  display: grid;
  gap: 1.25rem;
}
.login-usp .fa {
  color: #86efac;
  font-size: 1.25rem;
}
.login-usp h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}
.login-usp p {
  margin: 0;
  opacity: 0.7;
}

.login-form {
  background-image: linear-gradient(to right, #e6e6e6b2 1px, transparent 1px),
    linear-gradient(to bottom, #e6e6e6b2 1px, transparent 1px);
  background-size: 22px 22px;
}
.login-form-content {
  display: grid;
  gap: 2rem;
}
.login-form-content .form-control {
  height: 44px;
  font-size: 0.875rem;
}
.lw-validation-error {
  color: var(--danger);
  font-size: 0.725rem;
  margin-top: 0.2rem;
}

/* Trusted by logos (left panel) */
.trusted-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.05); /* subtle divider */
  width: 100%;
  text-align: center;
}

.trusted-title {
  text-align: center;
}

/* Title */
.trusted-title small {
  color: rgba(255,255,255,0.65);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.trusted-title h4 {
  font-size: 1.125rem;
  margin: 0;
  color: rgba(255,255,255,0.95);
}

.trusted-logos { gap: 1.5rem; margin-top: 0.75rem; flex-wrap: wrap; justify-content: center; }
.trusted-logo { height: 36px; max-width: 120px; object-fit: contain; opacity: 0.95; filter: saturate(1) contrast(0.95);}

/* Reduce logo size a bit on narrow desktops */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .trusted-logo { height: 30px; max-width: 100px; }
}

/* Make sure left panel spacing keeps logos at bottom on tall screens */
.login-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* keep main content centered */
}

/* If you want logos always at bottom of left column (sticky-ish) */
@media (min-width: 992px) {
  .login-content { justify-content: space-between; padding-top: 3rem; padding-bottom: 3rem; }
  .trusted-section { margin-top: 0; }
}

/* Accessibility + small polish */
.trusted-logo[alt=""] { display: none; } /* hide decorative if alt empty */

/* make image + info a horizontal row on desktop */
.login-top { gap: 2.5rem; }

/* ensure image not too big and text flows */
.login-image img { max-width: 300px; width: 100%; height: auto; display: block; }

/* make sure the text column uses remaining space */
.login-text { min-width: 0; } /* allows flex child to shrink */

/* Responsive: if viewport narrower (but left column hidden under lg anyway),
   ensure login-top stacks nicely when displayed */
@media (max-width: 1199.98px) {
  .login-top { flex-direction: row; }
}
@media (max-width: 991.98px) {
  /* left panel hidden on <992px — but safe fallback */
  .login-top { flex-direction: column; gap: 1.25rem; align-items: center; text-align: center; }
  .login-image img { max-width: 220px; }
  .trusted-section { text-align: center; }
  .trusted-logos { justify-content: center; }
}