/* This build's own Vendor-portal-specific CSS additions — reuses the
   prototype's shared style.css/app.css/fallback.css and this build's own
   admin.css utility classes (u-mt-*, .notice, .field, .btn-st, .portal,
   .authpage, .dropzone, .media-grid, .doclist, etc. — all generic, not
   Admin-specific) rather than duplicating them. Add genuinely Vendor-only
   rules here as new screens need them; don't edit style.css/app.css/
   fallback.css (mandatory rule 6). */

.vendor-submitted__check {
  font-size: 46px;
  color: var(--green);
}

/* Ensure the vendor auth page fills the viewport and the left artwork shows its
   logo without requiring a scroll. Place form content in a vertically-centred
   column while keeping the logo anchored near the top of the art panel. */
.authpage {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
  gap: 0;
}

/* Left artwork column: fixed proportion, keep content pinned near the top so
   the logo is visible immediately. Allow the background (if any) to cover. */
.authpage__art {
  flex: 0 0 52%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
  box-sizing: border-box;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* Keep the logo small so it remains visible at the top on most viewports. */
.authpage__art > img {
  display: block;
  max-width: 240px;
  width: auto;
  height: auto;
}

/* Text under the logo should not push the logo off-screen. */
.authpage__art h2,
.authpage__art p {
  margin-top: 18px;
  color: var(--white);
}

/* Right form column: centre the form vertically and horizontally, allow it to
   scroll if the viewport height is too small. */
.authpage__form {
  flex: 1 1 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  box-sizing: border-box;
  overflow: auto;
}

/* Constrain inner form width so the right column doesn't grow too tall */
.authpage__inner {
  width: 100%;
  max-width: 520px;
}

/* Responsive: stack on small screens, keep art above the form (logo still visible) */
@media (max-width: 991.98px) {
  .authpage {
    flex-direction: column;
  }
  .authpage__art,
  .authpage__form {
    flex: none;
    width: 100%;
    padding: 24px;
  }
  .authpage__art > img { max-width: 200px; }
}