/**
 * UCSSACCO member UI — shared tokens & shells
 * Matches the online landing page visual language.
 */

:root {
  --navy: #213a7b;
  --navy-dark: #182d60;
  --navy-soft: #e8eef9;
  --navy-light: #eef1f8;
  --accent: #00a0e0;
  --accent-soft: #e6f6fc;
  --check: #1f9d57;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
  --radius: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 40px rgba(33, 58, 123, .12);
  --font-member: "Plus Jakarta Sans", sans-serif;
}

/* Soft page canvas used by auth funnel & marketing pages */
.member-shell,
body.member-auth,
body.member-info {
  font-family: var(--font-member);
  color: var(--text);
  background:
    radial-gradient(ellipse 55% 70% at 88% 18%, rgba(0, 160, 224, .10) 0%, transparent 70%),
    radial-gradient(ellipse 42% 55% at 8% 88%, rgba(33, 58, 123, .06) 0%, transparent 70%),
    #f8fafc;
  min-height: 100vh;
}

body.member-auth {
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

/* Auth card */
.member-auth .card,
.member-shell .card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px 28px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(226, 232, 240, .9);
}

.member-auth .card-title,
.member-shell .card-title {
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.member-auth .btn-verify,
.member-auth button[type="submit"].btn-verify,
.member-shell .btn-primary {
  background: var(--navy);
  border-radius: 12px;
  font-family: var(--font-member);
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(33, 58, 123, .22);
}

.member-auth .btn-verify:hover {
  background: var(--navy-dark);
}

/* Slim brand bar on auth pages */
.member-auth-brand {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, .85);
  text-decoration: none;
  color: var(--navy);
}

.member-auth-brand img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(33, 58, 123, .08);
  padding: 3px;
}

.member-auth-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.member-auth-brand-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.member-auth-brand-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

body.member-auth {
  padding-top: 84px;
}

/* Marketing nav (info + shared) */
.member-mkt-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 48px);
  padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 232, 240, .85);
}

.member-mkt-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--navy);
  min-width: 0;
}

.member-mkt-logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(33, 58, 123, .08);
  padding: 3px;
  flex-shrink: 0;
}

.member-mkt-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.member-mkt-logo-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.member-mkt-logo-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-mkt-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.member-mkt-links a {
  color: var(--navy);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  transition: background .18s;
  white-space: nowrap;
}

.member-mkt-links a:hover,
.member-mkt-links a.is-active {
  background: var(--navy-soft);
}

.member-mkt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.member-mkt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-member);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(33, 58, 123, .2);
  transition: background .18s, transform .15s;
}

.member-mkt-btn:hover {
  background: var(--navy-dark);
  transform: translateY(-1px);
  color: #fff;
}

.member-mkt-btn--ghost {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid #c7d4ef;
  box-shadow: none;
}

.member-mkt-btn--ghost:hover {
  background: var(--navy-soft);
  color: var(--navy);
}

@media (max-width: 860px) {
  .member-mkt-links { display: none; }
  .member-mkt-logo-tag { display: none; }
}

@media (max-width: 480px) {
  .member-auth .card,
  .member-shell .card {
    padding: 22px 16px 18px;
    border-radius: 16px;
  }

  body.member-auth {
    padding: 72px 12px 20px;
    align-items: flex-start;
  }
}