/* ============================================================
 * Unified Connect — Authentication template: DEFAULT
 * ------------------------------------------------------------
 * Clean, professional, familiar SaaS login: centered brand block
 * above a single card. The complete visual design lives HERE —
 * shared primitives (form/inputs/buttons/methods) come from
 * assets/css/auth-base.css; this file defines the layout,
 * surfaces, spacing and theming that make the Default look.
 *
 * Scoped to .uc-auth-template-default. Template settings arrive
 * as --uc-tpl-* custom properties on this root element with
 * safe fallbacks. Dark mode is declared in template.json.
 * No global selectors. No <style> in markup.
 * ============================================================ */

.uc-auth-template-default {
  background: var(--uc-tpl-background, #f6f7f9);
  border-radius: var(--uc-tpl-border-radius, 16px);
  padding: 40px 16px;
}

.uc-auth-template-default__inner {
  max-width: var(--uc-tpl-card-width, 420px);
  margin: 0 auto;
}

/* The widget itself is centered on the stage. */
.uc-auth-template-default .uc-auth {
  max-width: var(--uc-tpl-card-width, 420px);
  margin: 0 auto;
  padding: 0;
}

/* ---- brand block (component heading area — NOT the site header) ---- */
.uc-auth-template-default__brand {
  text-align: center;
  margin-bottom: 22px;
}

.uc-auth-template-default__brand .uc-auth__logo {
  max-height: 72px;
  margin: 0 auto 16px;
}

.uc-auth-template-default__brand .uc-auth__title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--uc-text, #1f2937);
}

.uc-auth-template-default__brand .uc-auth__subtitle {
  margin: 0;
  color: var(--uc-muted, #6b7280);
  font-size: 14px;
  line-height: 1.8;
}

/* ---- card: the classic centered panel ---- */
.uc-auth-template-default .uc-auth__card {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px rgba(16, 24, 40, 0.08);
  border-color: var(--uc-border, #e2e8f0);
  overflow: hidden;
}

.uc-auth-template-default .uc-auth__body {
  min-width: 0;
}

/* ---- form theming: calm, roomy ---- */
.uc-auth-template-default .uc-form { gap: 16px; }

.uc-auth-template-default .uc-auth__field { gap: 7px; }

.uc-auth-template-default .uc-label { font-size: 13.5px; }

/* Inputs: soft, boxed. */
.uc-auth-template-default .uc-input {
  border-radius: var(--uc-radius-sm, 12px);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Buttons: full-width, confident primary. */
.uc-auth-template-default .uc-btn--primary { border-radius: var(--uc-radius-sm, 12px); }

/* Method cards: friendly boxed rows. */
.uc-auth-template-default .uc-method { border-radius: var(--uc-radius-sm, 12px); }

/* Footer links stay quiet under the card. */
.uc-auth-template-default .uc-auth__slot--footer {
  margin-top: 18px;
  text-align: center;
}

/* ---- dark mode (declared supported) — self-contained, never
 * relies on the WordPress theme's dark mode ---- */
@media (prefers-color-scheme: dark) {
  .uc-auth-template-default { background: #0f1115; }
  .uc-auth-template-default .uc-auth {
    --uc-bg: #171a21;
    --uc-surface-2: #1f232c;
    --uc-text: #e7eaf0;
    --uc-muted: #9aa3b2;
    --uc-border: #2b313d;
    --uc-border-strong: #3d4554;
    --uc-primary-soft: rgba(176, 0, 74, 0.22);
    --uc-primary-soft-strong: rgba(176, 0, 74, 0.34);
    --uc-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  .uc-auth-template-default .uc-auth__card { border-color: var(--uc-border, #2b313d); }
  .uc-auth-template-default__brand .uc-auth__title { color: var(--uc-text, #e7eaf0); }
  .uc-auth-template-default__brand .uc-auth__subtitle { color: var(--uc-muted, #9aa3b2); }
}

/* ---- responsive: mobile-first tightening ---- */
@media (max-width: 480px) {
  .uc-auth-template-default { padding: 24px 12px; }
  .uc-auth-template-default__brand { margin-bottom: 18px; }
  .uc-auth-template-default__brand .uc-auth__title { font-size: 21px; }
}

@media (min-width: 768px) {
  .uc-auth-template-default { padding: 48px 24px; }
}