/* Login / Sign Up pages (resources/views/auth/login.blade.php,
   resources/views/auth/signup.blade.php + resources/views/layouts/auth.blade.php).

   Intentionally minimal — .plx-card/.plx-input/.plx-select/.plx-btn/etc.
   already carry the project's full light+dark theming via the global
   token set (base/variables.css + base/theme-dark.css), so this file only
   adds the page-level layout (centering, max-width) those components
   don't provide on their own. No auth-specific colors are defined here. */
.plx-auth-page {
  padding: var(--space-12) var(--space-4) var(--space-12);
  position: relative;
}

.plx-auth-theme-toggle {
  position: fixed;
  right: var(--space-5);
  top: var(--space-5);
  z-index: 10;
}

.plx-auth-brand {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.plx-auth-brand img {
  height: 31px;
}

/* Width varies by form length, same idea as <x-ui.modal size="...">
   sizing by content rather than forcing one width for every form. */
.plx-auth-wrap {
  margin: 0 auto;
}

.plx-auth-wrap-sm {
  max-width: 460px;
}

.plx-auth-wrap-lg {
  max-width: 560px;
}

/* Transparent, borderless card — just reuses .plx-card-header/.plx-card-body
   for their existing padding/spacing, not for the card "container" look. */
.plx-auth-card {
  background: transparent;
  border: 0;
}

.plx-auth-card .plx-card-header {
  border-bottom: 0;
  justify-content: center;
  text-transform: uppercase;
}

/* .plx-form-row > * zeroes each field's own margin-bottom (it expects
   .plx-form-rows's 20px gap to provide spacing instead), but nothing
   normally follows the last .plx-form-row inside .plx-form-rows — here
   the reCAPTCHA block does, so it needs its own bottom margin restored. */
.plx-auth-card .plx-form-rows {
  margin-bottom: var(--space-4);
  gap: 0;
}
.plx-auth-card .plx-form-row {
  gap: 10px;

}
.plx-auth-footer {
  margin-top: var(--space-6);
  text-align: center;
}

.plx-auth-footer p {
  color: var(--text-muted);
  font-size: var(--text-base);
  margin: 0 0 var(--space-3);
}

/* Long consent sentence — the shared .plx-checkbox-group centers a single
   short label against the checkbox by default, which reads oddly once the
   label wraps to two lines, so the checkbox is pinned to the first line
   here instead. Link color/hover mirrors the project's only other existing
   in-text link convention (.plx-breadcrumb a). */
.plx-auth-terms-group {
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.plx-auth-terms-group .plx-checkbox {
  margin-top: 3px;
}

.plx-auth-terms-label a {
  color: var(--pm-primary);
  font-weight: var(--weight-medium);
}

.plx-auth-terms-label a:hover {
  text-decoration: underline;
}

/* reCAPTCHA has its own fixed-width chrome (normal size is ~304px) that
   auth-captcha.js swaps for the narrower "compact" size under 360px —
   this just stops the wrapping .plx-form-group from adding its own
   bottom margin twice. */
.plx-recaptcha-group {
  margin-bottom: var(--space-4);
}

.plx-recaptcha-js {
  max-width: 100%;
  overflow: hidden;
}
.plx-auth-card .plx-form-group {
    margin-bottom: var(--space-3);
}
@media (max-width: 767.98px) {
  .plx-auth-card  .plx-form-row {
    gap: 0;
  }
}
@media (min-width: 1200px) and (max-width: 1535.98px) {

.plx-auth-card .plx-label {

    margin-top: 4px;
}
}