/* =========================
   GFO Profiling - Guest FORCE DARK
   Guest page: selalu gelap (tidak ikut theme site)
   ========================= */

/* Pastikan wrapper guest memang: <div class="gfo-pk gfo-pk-guest"> ... */
.gfo-pk.gfo-pk-guest {
  /* bikin komponen form pakai UI dark sebagai default */
  color-scheme: dark;

  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.62);
  --border: rgba(255, 255, 255, 0.12);

  /* surface utama card/input */
  --surface: rgba(12, 18, 26, 0.78);
  --surface2: rgba(255, 255, 255, 0.04);

  --neutral: rgba(255, 255, 255, 0.32);

  /* kalau mau sedikit lebih “neon” di background gelap, boleh naikin green */
  /* --green: #00d89a; */
  /* --green2: #00966f; */
}

/* Kalau ada card wrapper di render_form (umumnya ada .gfo-pk-card) */
.gfo-pk.gfo-pk-guest .gfo-pk-card {
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Input */
.gfo-pk.gfo-pk-guest .gfo-input {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.gfo-pk.gfo-pk-guest .gfo-input::placeholder {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

/* Dot checked shadow: pakai versi dark walau html bukan dark */
.gfo-pk.gfo-pk-guest .gfo-dot input:checked + .gfo-dot__ui {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
}

/* Button border: pakai versi dark walau html bukan dark */
.gfo-pk.gfo-pk-guest .gfo-btn {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Optional: garis pembatas lebih halus di background gelap */
.gfo-pk.gfo-pk-guest .gfo-sec,
.gfo-pk.gfo-pk-guest .gfo-q,
.gfo-pk.gfo-pk-guest .gfo-pk-hero {
  border-color: var(--border);
}
.gfo-sec__title {
  color: #fff !important;
}
.gfo-pk-result {
  margin-top: 20px;
}
.gfo-pk.gfo-pk-guest,
.gfo-pk-guest .gfo-pk-result {
  padding: 20px 30px;
}

/* =========================
   GFO Profiling - RESULT FORCE DARK
   (dipakai di guest page / bg hitam)
   ========================= */

/* Pilih salah satu:
   A) Kalau kamu mau result SELALU dark di mana pun: pakai selector .gfo-pk-result saja.
   B) Kalau kamu mau result dark hanya saat muncul setelah form guest: pakai selector baris kedua (lebih aman).
*/

/* A) global */
.gfo-pk-result,
/* B) khusus saat result muncul setelah guest form (umumnya result di-append setelah form) */
.gfo-pk.gfo-pk-guest ~ .gfo-pk-result {
  color-scheme: dark;

  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.62);
  --border: rgba(255, 255, 255, 0.12);

  --surface: rgba(12, 18, 26, 0.78);
  --surface2: rgba(255, 255, 255, 0.04);

  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);

  --green: #00b982;
  --green2: #00785a;
  --red: #ef4444;
}

/* pastikan card result ikut variabel dark di atas */
.gfo-pk-result .gfo-pk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* mini cards di dalam result */
.gfo-pk-result .gfo-pk-mini {
  border-color: var(--border);
  background: var(--surface2);
}

/* pill/badge row */
.gfo-pk-result .gfo-pk-pill {
  background: var(--surface2);
  border-color: var(--border);
}

/* separator */
.gfo-pk-result .gfo-pk-sep {
  background: var(--border);
}

/* status badge: sudah pakai --st, tapi border/bg ikut dark */
.gfo-pk-result .gfo-pk-status {
  border-color: color-mix(in srgb, var(--st) 40%, transparent);
  background: color-mix(in srgb, var(--st) 12%, transparent);
}

/* kalau di result ada tombol, samakan border dark */
.gfo-pk-result .gfo-btn {
  border-color: rgba(255, 255, 255, 0.1);
}