/* ============================================================
   MyEPK Auth Pages — showcard.fm brand
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root {
  --epk-cream:      #F5F2EB;
  --epk-cream2:     #FCFAF5;
  --epk-dark:       #1A1714;
  --epk-dark-bg:    #121114;
  --epk-dark-bg2:   #1c1b1f;
  --epk-dark-bd:    #2a282f;
  --epk-dark-txt:   #F3F1EC;
  --epk-dark-sub:   #A8A2B0;
  --epk-dark-mono:  #6f6a78;
  --epk-mono-hi:    #a99cf2;
  --epk-violet:     #6C3DF0;
  --epk-violet-lt:  #F1ECFC;
  --epk-violet-bd:  #DCD2F7;
  --epk-muted:      #6B655C;
  --epk-border:     #E4DDD0;
  --epk-border2:    #CFC6B5;
  --epk-error:      #c0392b;

  /* Legacy aliases — keep these so any template referencing
     the old names doesn't break visually */
  --epk-light:      var(--epk-cream);
  --epk-accent:     var(--epk-violet);
  --epk-text:       var(--epk-dark);
}

/* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
  font-size: 16px !important;
}

/* ── Full page ─────────────────────────────────────────────── */
.myepk-auth-page {
  min-height: 100vh;
  background: var(--epk-cream);
  display: flex;
  flex-direction: column;
  font-family: 'Archivo', sans-serif;
  color: var(--epk-dark);
}

/* ── Sticky header ─────────────────────────────────────────── */
.myepk-auth-header {
  background: var(--epk-cream2);
  border-bottom: 1px solid var(--epk-border);
  position: sticky;
  top: 0;
  z-index: 100;
  animation: epkAuthFadeDown 0.4s ease forwards;
}

.myepk-auth-header-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 2rem 1.75rem;
  text-align: center;
}

/* Logo — replaced image with CSS logo-mark to match homepage */
.myepk-auth-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--epk-dark);
  position: relative;
  margin: 0 auto 1.25rem;
}
.myepk-auth-logo::after {
  content: '';
  position: absolute;
  left: 7px; top: 7px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--epk-violet);
}

/* Legacy alias used by epk-onboarding.php */
.myepk-login-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--epk-dark);
  position: relative;
  margin: 0 auto 1.25rem;
}
.myepk-login-logo::after {
  content: '';
  position: absolute;
  left: 7px; top: 7px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--epk-violet);
}

.myepk-auth-title {
  font: 800 1.75rem/1.1 'Archivo', sans-serif;
  letter-spacing: -.02em;
  color: var(--epk-dark);
  margin: 0 0 0.5rem;
}

.myepk-auth-subtitle {
  font: 400 1rem/1.5 'Archivo', sans-serif;
  color: var(--epk-muted);
  margin: 0;
}

/* ── Scrollable body ───────────────────────────────────────── */
.myepk-auth-body {
  flex: 1;
  padding: 3rem 2rem;
  animation: epkAuthFadeUp 0.4s ease 0.08s both;
}

.myepk-auth-body-inner {
  max-width: 680px;
  margin: 0 auto;
}

/* ── Card ──────────────────────────────────────────────────── */
.myepk-auth-card {
  background: #fff;
  border: 1px solid var(--epk-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.myepk-auth-card-body {
  padding: 2rem;
}

/* ── Status messages ───────────────────────────────────────── */
.epk-auth-msg {
  border-radius: 10px;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  font: 400 0.875rem/1.5 'Archivo', sans-serif;
}
.epk-auth-msg-success {
  background: var(--epk-violet-lt);
  border: 1px solid var(--epk-violet-bd);
  color: #3d2a8a;
  text-align: center;
}
.epk-auth-msg-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--epk-error);
}

/* ── Confirmation box ──────────────────────────────────────── */
.epk-confirm-box {
  background: var(--epk-violet-lt);
  border: 1px solid var(--epk-violet-bd);
  border-radius: 11px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  text-align: center;
  font: 400 0.9rem/1.6 'Archivo', sans-serif;
  color: var(--epk-dark);
}
.epk-confirm-box strong { color: var(--epk-violet); }

/* ── Form groups ───────────────────────────────────────────── */
.epk-form-group {
  margin-bottom: 1.25rem;
}

.epk-form-group label {
  display: block;
  font: 700 11px/1 'Space Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--epk-muted);
  margin-bottom: 9px;
}

.epk-form-group input,
.myepk-auth-card input[type="text"],
.myepk-auth-card input[type="password"],
.myepk-auth-card input[type="email"] {
  width: 100%;
  padding: 15px 18px;
  font: 400 16px 'Archivo', sans-serif;
  border: 1px solid var(--epk-border2);
  border-radius: 11px;
  background: var(--epk-cream2);
  color: var(--epk-dark);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.epk-form-group input::placeholder,
.myepk-auth-card input::placeholder { color: #9b9488; }

.epk-form-group input:focus,
.myepk-auth-card input:focus {
  outline: none;
  border-color: var(--epk-violet);
  box-shadow: 0 0 0 3px rgba(108,61,240,0.12);
}

.epk-form-group small {
  display: block;
  font: 400 0.75rem/1.4 'Archivo', sans-serif;
  color: var(--epk-muted);
  margin-top: 0.3rem;
}

/* ── Remember me ───────────────────────────────────────────── */
.epk-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0.25rem 0 1rem;
}
.epk-remember input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--epk-violet);
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.epk-remember label {
  font: 400 0.8125rem/1 'Archivo', sans-serif;
  color: var(--epk-muted);
  cursor: pointer;
  margin: 0;
}

/* ── Primary button ────────────────────────────────────────── */
.epk-btn-primary,
.myepk-auth-card .button-primary,
.myepk-auth-card input[type="submit"] {
  width: 100%;
  background: var(--epk-violet);
  color: #fff;
  border: none;
  border-radius: 25px !important;
  padding: 16px 1.5rem;
  font: 600 16px 'Archivo', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: center;
  display: block;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: none !important;
  text-shadow: none !important;
}
.epk-btn-primary:hover,
.myepk-auth-card .button-primary:hover,
.myepk-auth-card input[type="submit"]:hover {
  background: #5430cc;
  color: #fff;
}
.epk-btn-primary:disabled,
.myepk-auth-card input[type="submit"]:disabled {
  background: rgba(108,61,240,0.4);
  cursor: not-allowed;
}

/* ── Secondary / ghost button ──────────────────────────────── */
.epk-btn-secondary {
  width: 100%;
  background: transparent;
  color: var(--epk-muted);
  border: 1px solid var(--epk-border2);
  border-radius: 999px;
  padding: 16px 1.5rem;
  font: 600 16px 'Archivo', sans-serif;
  cursor: pointer;
  text-align: center;
  display: block;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, color 0.15s ease;
  margin-top: 0.75rem;
}
.epk-btn-secondary:hover {
  border-color: var(--epk-dark);
  color: var(--epk-dark);
}

/* ── Footer link row ───────────────────────────────────────── */
.myepk-auth-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--epk-border);
  text-align: center;
  font: 400 0.875rem/1.5 'Archivo', sans-serif;
  color: var(--epk-muted);
}
.myepk-auth-footer a {
  color: var(--epk-violet);
  font-weight: 700;
  text-decoration: none;
}
.myepk-auth-footer a:hover { text-decoration: underline; }

/* ── Animations ────────────────────────────────────────────── */
@keyframes epkAuthFadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes epkAuthFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* WP admin login page (/wp-login.php) is styled via the
   customize_login_head() method in class-epk-plugin.php */