/* Jembatan token untuk halaman form & status (login, register, 404, store-not-found).
   Dimuat SETELAH <style> milik halaman supaya menang tanpa harus menulis ulang
   seluruh stylesheet lama. Semua nilai diambil dari token editorial di
   /landing/css/site.css (--color-*, --font-*). */

html,
body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  /* Halaman form tidak memakai kelas variabel font di <html> seperti landing,
     jadi --font-sans bisa kosong di sini. Pakai nama font langsung + fallback. */
  font-family: Archivo, "Archivo Fallback", system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Wadah + kartu */
.card,
  .error-card {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Tipografi */
h1,
h2,
h3,
.brand-primary,
.biz-name,
.banner-title,
.error-title {
  color: var(--color-text) !important;
  font-family: Archivo, system-ui, sans-serif !important;
  letter-spacing: -0.02em;
}

.subtitle,
p,
.field-hint,
.footer-text,
.biz-label,
.brand-sub,
.oauth-divider,
.msg {
  color: var(--color-muted) !important;
}

label,
.status-kicker,
.back-home {
  color: var(--color-label) !important;
}

a {
  color: var(--color-text);
  text-decoration-color: var(--color-outline);
}

/* Kicker */
.status-dot {
  background: var(--color-positive) !important;
  box-shadow: none !important;
}

.status-kicker,
.oauth-divider,
.nav,
.footer-links-wrap {
  border-color: var(--color-hairline) !important;
}

/* Field */
input,
select,
textarea {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-outline) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
  font-family: Archivo, system-ui, sans-serif !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-faint) !important;
}

.slug-wrap {
  background: var(--color-surface) !important;
  border-color: var(--color-outline) !important;
}

.slug-prefix {
  background: transparent !important;
  color: var(--color-faint) !important;
}

/* Tombol */
.btn-submit,
.btn-next,
.btn-solid,
.btn-verify {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: 0 !important;
  color: var(--color-on-accent) !important;
}

.btn-outline,
.btn-back,
.btn-google,
.btn-link,
.back-home {
  background: transparent !important;
  border: 1px solid var(--color-outline) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
}

/* Pilihan jenis bisnis */
.biz-option {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-hairline) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
}

.biz-option.active,
.biz-option[aria-selected="true"] {
  border-color: var(--color-accent) !important;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)) !important;
}

.biz-icon {
  color: var(--color-accent) !important;
}

/* Status */
.email-verified-badge {
  background: color-mix(in srgb, var(--color-positive) 14%, var(--color-surface)) !important;
  border-color: var(--color-positive) !important;
  color: var(--color-positive) !important;
}

.field-error,
.msg.error {
  color: var(--color-negative) !important;
}

.badge {
  background: var(--color-surface) !important;
  border-color: var(--color-hairline) !important;
  color: var(--color-label) !important;
}

/* Header editorial bersifat fixed — beri ruang supaya kartu tidak tertutup.
   Halaman form memakai tinggi 100vh untuk memusatkan kartu, jadi padding ini
   juga membuat kartu bergeser sedikit ke bawah (disengaja). */
/* Wadah di tiap halaman, bukan body — style halaman menang atas body. */
.login-container,
.register-wrap {
  padding-top: 96px !important;
  min-height: 100vh !important;
  box-sizing: border-box;
}

body > .error-card {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}

@media (max-width: 720px) {
  .login-container,
  .register-wrap {
    padding-top: 80px !important;
  }

  body > .error-card {
    margin-top: 72px !important;
  }
}