@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.sb-guest {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-text-base);
  line-height: var(--sb-leading-normal);
  color: var(--sb-text-secondary);
  background: radial-gradient(ellipse at top, var(--sb-bg-top) 0%, var(--sb-bg-outer) 70%);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
}

body.sb-guest:has(.sb-login-page) {
  min-height: 100dvh;
  overflow-x: hidden;
}

html:has(body.sb-guest .sb-login-page) {
  scroll-behavior: smooth;
}

.sb-login-alert {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--sb-radius-sm);
  font-size: var(--sb-text-sm);
  line-height: var(--sb-leading-normal);
  text-align: left;
}

.sb-login-alert--error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fecaca;
}

.sb-login-alert--success {
  background: rgba(80, 200, 120, 0.12);
  border: 1px solid rgba(80, 200, 120, 0.45);
  color: #bbf7d0;
}

/* Login / register card on guest layout */
.sb-guest .card.shadow-lg {
  background: var(--sb-surface) !important;
  border: 1px solid var(--sb-border) !important;
  box-shadow: var(--sb-shadow-gold) !important;
  color: var(--sb-text-secondary) !important;
}

.sb-guest .card h2,
.sb-guest .card .fw-semibold {
  color: var(--sb-text-heading) !important;
  font-family: var(--sb-font-sans) !important;
  font-size: var(--sb-text-xl) !important;
}

.sb-guest .form-control {
  background: var(--sb-elevated) !important;
  border-color: var(--sb-border) !important;
  color: var(--sb-text-primary) !important;
  font-size: var(--sb-text-sm) !important;
}

.sb-guest .form-label {
  color: var(--sb-text-subtle) !important;
  font-size: var(--sb-text-sm) !important;
}

.sb-guest .btn-outline-primary {
  background: linear-gradient(135deg, var(--sb-gold) 0%, var(--sb-gold-light) 100%) !important;
  border-color: var(--sb-gold-dark) !important;
  color: var(--sb-bg-top) !important;
  font-weight: var(--sb-font-semibold) !important;
}

.sb-guest .btn-outline-primary:hover {
  filter: brightness(1.05);
  color: var(--sb-bg-outer) !important;
}

.sb-guest .text-primary {
  color: var(--sb-gold) !important;
}

.sb-guest a {
  color: var(--sb-gold);
}

.sb-guest .text-muted,
.sb-guest .small.text-muted {
  color: var(--sb-text-dim) !important;
}

.sb-guest hr {
  border-color: var(--sb-border) !important;
}

.sb-guest .position-absolute.bg-white {
  background: var(--sb-surface) !important;
  color: var(--sb-text-dim) !important;
}

/* Guest login page layout */
.sb-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  width: 100%;
  box-sizing: border-box;
  padding-block: max(clamp(1.25rem, 4vh, 2rem), env(safe-area-inset-top))
    max(clamp(1.25rem, 4vh, 2rem), env(safe-area-inset-bottom));
}

.sb-login-page .row {
  width: 100%;
  margin-inline: auto;
}

.sb-login-page .card.shadow-lg {
  width: 100%;
  max-width: min(28rem, 100%);
  margin-inline: auto;
}

.sb-login-page form,
.sb-login-page .form-control,
.sb-login-page .d-grid,
.sb-login-page .required.field {
  width: 100%;
  max-width: 100%;
}

.sb-login-brand {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: clamp(0.5rem, 1.5vh, 1rem);
}

.sb-login-brand-link {
  display: inline-block;
  text-decoration: none;
}

.sb-guest .sb-login-logo {
  display: block;
  height: auto !important;
  width: clamp(10rem, 58vw, 14rem);
  max-width: 100%;
  margin-inline: auto;
  padding: 0 !important;
}

@media (min-width: 768px) {
  .sb-guest .sb-login-logo {
    width: clamp(11rem, 28vw, 16rem);
  }
}

.sb-login-page .card h2,
.sb-login-page .card .fw-semibold {
  font-family: var(--sb-font-display) !important;
  font-size: clamp(1.5rem, 4vw, 1.875rem) !important;
}

.sb-login-page .form-control {
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem !important;
}

.sb-login-page .btn-outline-primary {
  width: 100% !important;
  min-height: 2.75rem;
}

@media (max-width: 575.98px) {
  .sb-login-page {
    padding-inline: max(0.875rem, env(safe-area-inset-left)) max(0.875rem, env(safe-area-inset-right));
  }

  .sb-guest .sb-login-logo {
    width: clamp(9rem, 72vw, 13rem);
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .sb-login-page .card.shadow-lg {
    max-width: min(26rem, 100%);
  }
}

/* Short viewports — compact spacing; page scrolls when content exceeds height */
@media (max-height: 900px) {
  .sb-guest .sb-login-logo {
    width: clamp(8rem, 32vw, 12rem);
  }

  .sb-login-page {
    padding-block: max(clamp(1rem, 4vh, 1.75rem), env(safe-area-inset-top))
      max(clamp(1rem, 4vh, 1.75rem), env(safe-area-inset-bottom));
  }

  .sb-login-brand {
    margin-bottom: 1rem;
    padding-top: 0.375rem;
  }

  .sb-login-page .card.shadow-lg {
    padding: 1rem 1.25rem !important;
  }

  .sb-login-page .title-space {
    padding-bottom: 0.25rem;
    margin-bottom: 0;
  }

  .sb-login-page .form-control {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem !important;
  }

  .sb-login-page .btn-outline-primary {
    min-height: 2.5rem;
  }
}

@media (max-height: 760px) {
  .sb-guest .sb-login-logo {
    width: clamp(7rem, 28vw, 9.5rem);
  }

  .sb-login-page {
    padding-block: max(0.875rem, env(safe-area-inset-top)) max(0.875rem, env(safe-area-inset-bottom));
  }

  .sb-login-brand {
    margin-bottom: 0.75rem;
    padding-top: 0.25rem;
  }

  .sb-login-page .card h2,
  .sb-login-page .card .fw-semibold {
    font-size: 1.375rem !important;
  }

  .sb-login-page .card.shadow-lg {
    padding: 0.875rem 1rem !important;
  }

  .sb-login-page .mt-3 {
    margin-top: 0.625rem !important;
  }

  .sb-login-page .mb-3 {
    margin-bottom: 0.625rem !important;
  }
}