/**
 * CourseGlade Auth Page
 * Styles for the [courseglade_auth] standalone shortcode.
 *
 * One centred card, nothing beside it. Tabs, fields and error styles live in
 * base.css (.courseglade-auth-*); this file owns the page and the card.
 */

.courseglade-auth-split {
  display: flex;
  justify-content: center;
  min-height: 60vh;
}

/* -------------------------------------------------------------------------
   Form column
   ---------------------------------------------------------------------- */

.courseglade-auth-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 2.5rem 1.25rem;
}

.courseglade-auth-card {
  width: 100%;
  max-width: 400px;
}

.courseglade-auth-heading {
  margin: 0 0 0.375rem;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--courseglade-on-surface);
  letter-spacing: -0.3px;
}

.courseglade-auth-subheading {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--courseglade-on-surface-muted);
  line-height: 1.6;
}

.courseglade-auth-card .courseglade-auth-tabs {
  margin-bottom: 1.75rem;
}

/* The row above the button carries its own bottom margin, so the extra top
   margin base.css adds for the modal reads as a gap here. */
.courseglade-auth-card .courseglade-auth-form .courseglade-btn {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   Social sign-in, above the fields
   ---------------------------------------------------------------------- */

/* The addon spaces itself for the modal, where it follows a form. Here it
   leads, so the top margin goes and the gap moves below, between the buttons
   and the divider. */
.courseglade-auth-card .courseglade-social-login {
  margin-top: 0;
  margin-bottom: 1.125rem;
}

/* The addon captions its row "Or continue with". Above the fields that reads
   backwards — the divider below now says where the boundary is. */
.courseglade-auth-card .courseglade-social-login .courseglade-auth-divider {
  display: none;
}

/* The addon sizes its buttons for the login modal, where they sit in a short
   centred row. On this card they share the form's full width instead. */
.courseglade-auth-card .courseglade-social-login__row {
  flex-wrap: nowrap;
  gap: 0.5625rem;
}

.courseglade-auth-card .courseglade-social-login__btn {
  flex: 1;
  width: auto;
  height: 46px;
  box-shadow: none;
}

.courseglade-auth-card .courseglade-social-login__btn:hover,
.courseglade-auth-card .courseglade-social-login__btn:focus-visible {
  box-shadow: none;
  transform: none;
  background: var(--courseglade-surface-low);
}

.courseglade-auth-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.125rem;
  color: var(--courseglade-on-surface-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.courseglade-auth-or::before,
.courseglade-auth-or::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--courseglade-border);
}

/* "No account? Create one" — the prompt stays quiet, the action does not.
   margin-bottom is zeroed because this is a <p>, and a theme's paragraph rule
   (Astra's is 1.6em) otherwise hangs empty space off the end of the card. */
.courseglade-auth-card .courseglade-auth-alt {
  text-align: center;
  margin-top: 1.125rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-auth-card .courseglade-auth-alt a,
.courseglade-auth-card .courseglade-auth-alt button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--courseglade-primary);
  text-decoration: none;
  cursor: pointer;
}

.courseglade-auth-card .courseglade-auth-alt a:hover,
.courseglade-auth-card .courseglade-auth-alt button:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Notice card (registration closed)
   ---------------------------------------------------------------------- */

.courseglade-auth-card--notice {
  max-width: 420px;
}

.courseglade-auth-closed-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1rem 0;
}

.courseglade-auth-closed-notice svg {
  color: var(--courseglade-primary);
  opacity: 0.7;
}

.courseglade-auth-closed-notice h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--courseglade-on-surface);
  margin: 0;
}

.courseglade-auth-closed-notice p {
  font-size: 0.9375rem;
  color: var(--courseglade-on-surface-secondary);
  margin: 0;
}

.courseglade-auth-closed-notice .courseglade-btn {
  margin-top: 0.5rem;
  width: 100%;
}

.courseglade-auth-message {
  text-align: center;
  padding: 1rem 0;
}

.courseglade-auth-message--error p {
  color: var(--courseglade-danger);
  font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 480px) {
  .courseglade-auth-main {
    padding: 2rem 1rem;
  }
}