/* ============================================================
   TAMPILAN FORMULIR PUBLIK — FORM BEM UBAYA
   Dipakai oleh SEMUA formulir yang dibuat lewat Admin Panel
   (lihat formulir/_engine/render.php).
   ============================================================ */

:root {
  --bg: #eef1f6;
  --surface: #ffffff;
  --border: #e3e7ef;
  --text: #1b2433;
  --text-muted: #667085;
  --text-faint: #98a2b3;
  --red: #dc2626;
  --red-bg: #fdecec;
  --green: #16a34a;
  --green-bg: #e9f9ef;
  --radius-lg: 20px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 20px 50px rgba(20, 35, 60, .12);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  padding: 32px 16px 60px;
}
.form-shell { max-width: 640px; margin: 0 auto; }
/* PENTING: "overflow: hidden" SENGAJA tidak dipakai di sini (dulu ada, dihapus) --
   itu akan ikut memotong panel dropdown kustom (.cs-select-panel) yang perlu
   "meluber" keluar kotak saat pertanyaannya ada di bagian bawah form. Sudut
   membulat cover di bawah ini cukup diatur lewat border-radius elemen cover-nya
   sendiri (lihat .form-cover / .form-cover-image), tidak perlu memotong. */
.form-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 16px; }
.form-cover { padding: 34px 30px 28px; color: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.form-cover .badge-cat { display: inline-block; background: rgba(255,255,255,.22); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 10px; letter-spacing: .02em; }
.form-cover h1 { margin: 0; font-size: 23px; }
.form-cover p { margin: 10px 0 0; opacity: .94; font-size: 14.5px; white-space: pre-line; }
.form-body { padding: 26px 30px 30px; }

/* Header custom pakai gambar (mis. 1600x400, rasio 4:1) -- pengganti cover
   berwarna, meniru "header image" di Google Form. */
.form-cover-image { width: 100%; aspect-ratio: 4 / 1; overflow: hidden; background: var(--bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.form-cover-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.form-cover-plain { padding: 22px 30px 8px; border-top: 4px solid var(--accent, #1d508e); }
.form-cover-plain .badge-cat-plain { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 10px; letter-spacing: .02em; }
.plain-title { margin: 0; font-size: 22px; color: var(--text); }
.plain-desc { margin: 8px 0 0; color: var(--text-muted); font-size: 14px; white-space: pre-line; }

.form-section { margin: 26px 0 14px; }
.form-section:first-child { margin-top: 0; }
.form-section h2 { font-size: 17px; margin: 0 0 4px; }
.form-section p { color: var(--text-muted); font-size: 13.5px; margin: 0; }

/* Header bagian (halaman ke-2 dst pada formulir berjenjang) -- pengganti
   cover berwarna yang cuma tampil di halaman pertama. */
.page-header { padding: 22px 30px 4px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.page-header h2 { font-size: 18px; margin: 0 0 4px; color: var(--accent, #1d508e); }
.page-header p { color: var(--text-muted); font-size: 13.5px; margin: 0 0 14px; white-space: pre-line; }

.form-image-block { margin-bottom: 22px; }
.form-image-block img { width: 100%; border-radius: var(--radius); display: block; }
.form-image-caption { text-align: center; color: var(--text-muted); font-size: 12.5px; margin: 8px 0 0; }

.form-nav { display: flex; align-items: center; gap: 10px; }
.form-nav .btn-submit { flex: 1; }
.btn-back {
  padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
  color: var(--text-muted); font-weight: 700; font-size: 14.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.btn-back:hover { border-color: var(--text-faint); color: var(--text); }

.form-field { margin-bottom: 22px; }
.form-field > label.q-label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.form-field .req-star { color: var(--red); margin-left: 3px; }
.form-field .q-desc { color: var(--text-muted); font-size: 13px; margin-bottom: 9px; }
.form-field input[type=text], .form-field input[type=email], .form-field input[type=tel],
.form-field input[type=number], .form-field input[type=date], .form-field textarea, .form-field select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14.5px; background: #fbfcfe; color: var(--text);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--accent, #1d508e); box-shadow: 0 0 0 3px var(--accent-soft, #e8f0fb);
}
.form-field textarea { resize: vertical; min-height: 90px; }
.choice-option { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14.5px; cursor: pointer; }

/* ---------------- Dropdown kustom (menggantikan <select> bawaan browser) ---------------- */
.cs-select { position: relative; }
.cs-select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fbfcfe; font-family: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; text-align: left;
}
.cs-select-trigger:hover { border-color: var(--accent, #1d508e); }
.cs-select.open .cs-select-trigger { border-color: var(--accent, #1d508e); box-shadow: 0 0 0 3px var(--accent-soft, #e8f0fb); }
.cs-select-value.placeholder { color: var(--text-faint); }
.cs-chevron { flex-shrink: 0; color: var(--text-faint); transition: transform .15s ease; }
.cs-select.open .cs-chevron { transform: rotate(180deg); color: var(--accent, #1d508e); }
.cs-select-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 16px 32px rgba(20,35,60,.16); max-height: 240px; overflow-y: auto; padding: 6px;
}
.cs-select:not(.open) .cs-select-panel { display: none; }
.cs-select-option { padding: 10px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--text); }
.cs-select-option:hover, .cs-select-option.cs-active { background: var(--accent-soft, #e8f0fb); color: var(--accent, #1d508e); }
.cs-select-option.selected { font-weight: 700; color: var(--accent, #1d508e); }

/* ---------------- Unggah berkas kustom (menggantikan kotak abu2 bawaan browser) ---------------- */
.cs-file-trigger {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px;
  border: 2px dashed var(--border); border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text-faint); font-size: 13px; font-weight: 700; text-align: center;
}
.cs-file-trigger:hover { border-color: var(--accent, #1d508e); color: var(--accent, #1d508e); background: var(--accent-soft, #e8f0fb); }
.cs-file-trigger svg { color: var(--accent, #1d508e); width: 24px; height: 24px; }
.cs-file-info { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--accent, #1d508e); border-radius: var(--radius-sm); background: var(--accent-soft, #e8f0fb); }
.cs-file-info svg { color: var(--accent, #1d508e); flex-shrink: 0; }
.cs-file-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-file-remove { background: none; border: none; padding: 4px; color: var(--text-faint); cursor: pointer; flex-shrink: 0; display: flex; }
.cs-file-remove:hover { color: var(--red); }
.choice-option input { width: 17px; height: 17px; accent-color: var(--accent, #1d508e); flex-shrink: 0; }
.file-hint { color: var(--text-faint); font-size: 12px; margin-top: 6px; }
.field-error { color: var(--red); background: var(--red-bg); padding: 7px 11px; border-radius: var(--radius-sm); font-size: 12.5px; margin-top: 7px; font-weight: 600; }
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select { border-color: var(--red); }

.top-alert { display: flex; gap: 10px; align-items: flex-start; background: var(--red-bg); color: var(--red); padding: 13px 16px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }

.btn-submit {
  width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm); background: var(--accent, #1d508e);
  color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; transition: filter .15s;
}
.btn-submit:hover { filter: brightness(1.08); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }

.footer-note { text-align: center; color: var(--text-faint); font-size: 12.5px; margin-top: 8px; }
.footer-note a { color: var(--text-muted); }

/* Kartu status: gerbang kode akses / ditutup / terima kasih */
.status-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px 32px; text-align: center; }
.status-card .status-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; background: var(--accent-soft, #e8f0fb); color: var(--accent, #1d508e); }
.status-card .status-icon.success { background: var(--green-bg); color: var(--green); }
.status-card h1 { font-size: 19px; margin-bottom: 8px; }
.status-card p { color: var(--text-muted); font-size: 14px; }
.status-card form { margin-top: 20px; text-align: left; }
.status-card input[type=text] { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14.5px; margin-bottom: 12px; }
.status-card .btn-submit { margin-top: 4px; }

@media (max-width: 480px) {
  body { padding: 0; }
  .form-shell { max-width: 100%; }
  .form-card { border-radius: 0; box-shadow: none; }
  .form-cover, .form-body, .page-header, .form-cover-plain { padding-left: 20px; padding-right: 20px; }
  .form-nav { flex-wrap: wrap; }
  .status-card { border-radius: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
}

/* ---- Login email (OTP) & captcha ---- */
.login-card form { margin-top: 14px; }
.login-card input[type=email], .login-card input.otp-input, .captcha-box .captcha-input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: 15px; background: #fff; margin-bottom: 12px; box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
}
.login-card input:focus, .captcha-box .captcha-input:focus { outline: none; border-color: var(--accent, #1d508e); box-shadow: 0 0 0 3px var(--accent-soft, #e8f0fb); }
.login-card input.otp-input { text-align: center; font-size: 24px; letter-spacing: .4em; font-weight: 700; }
.login-hint { font-size: 13px; color: var(--text-soft, #5b6577); }
.login-msg { display: block; margin: 10px 0 0; text-align: left; }
.login-ok { color: #1f7a4d; background: #e7f6ee; padding: 7px 11px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; }
.login-alt { margin-top: 6px !important; }
.link-btn { background: none; border: none; color: var(--accent, #1d508e); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 4px; border-radius: 6px; transition: transform .18s cubic-bezier(.16,1,.3,1), background .18s; }
.link-btn:hover { background: var(--accent-soft, #e8f0fb); }
.link-btn:active { transform: scale(.97); }
.login-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 16px; border-radius: var(--radius-sm); background: var(--accent-soft, #e8f0fb); font-size: 13px; }
.login-bar span { display: inline-flex; align-items: center; gap: 6px; }
.login-bar svg { width: 16px; height: 16px; color: var(--accent, #1d508e); }
@media (prefers-reduced-motion: reduce) { .link-btn { transition: none; } }

/* ---- Umpan balik sentuh: tanpa kotak sorot bawaan Android, tombol mengecil saat ditekan ---- */
* { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #1d508e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .captcha-refresh, .btn, .btn-submit, .btn-back { transition: none !important; } }
.btn-submit, .btn-back { transition: transform .18s cubic-bezier(.16,1,.3,1), filter .18s, border-color .18s; }
.btn-submit:active, .btn-back:active { transform: scale(.97); }

/* ---- Captcha (includes/keamanan.php). Semua warna eksplisit, tidak mewarisi. ---- */
.captcha-box { margin: 6px 0 18px; text-align: left; color: #1b2540; }
.captcha-label { display: block; font-weight: 600; font-size: .9rem; color: #1b2540; margin-bottom: 8px; }
.captcha-req { color: #b42318; }
.captcha-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.captcha-img { width: 180px; height: 56px; border-radius: 8px; border: 1px solid #d6dbe4; background: #fff; display: block; }
.captcha-refresh { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  border: 1px solid #c9d1de; border-radius: 8px; background: #fff; color: #1d508e; font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.06); transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, background-color .18s; }
.captcha-refresh:hover { background: #f3f6fb; box-shadow: 0 2px 6px rgba(16,24,40,.1); }
.captcha-refresh:active { transform: scale(.97); }
.captcha-box .captcha-input { margin-top: 10px; max-width: 220px; color: #1b2540; background: #fff; }

/* Atribut hidden harus selalu menang atas display:flex/grid milik kelas mana pun. */
[hidden] { display: none !important; }

/* ---------- Kolom kode OTP sebagai 6 kotak (lihat form.js) ----------
   Tanpa JavaScript, yang tampil kolom biasa (aturan .otp-input di atas).
   Begitu form.js jalan, wadahnya dapat kelas .otp-kotak--siap: kolom
   aslinya dibikin transparan tapi TETAP di tempatnya (masih bisa
   diketuk, difokus, dan menerima saran kode otomatis dari HP), lalu
   6 kotak tampilan digambar di belakangnya. */
.otp-kotak { position: relative; }
.otp-kotak--siap { display: flex; gap: 8px; justify-content: center; }
.login-card .otp-kotak--siap input.otp-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: none; border-radius: 0;
  color: transparent; caret-color: transparent; letter-spacing: 0;
  text-align: center;
  font-size: 16px;            /* >=16px supaya iOS tidak ikut memperbesar halaman */
  z-index: 2; cursor: pointer;
}
.login-card .otp-kotak--siap input.otp-input:focus { outline: none; box-shadow: none; border: 0; }
/* Teks contoh "6 angka" ikut disembunyikan, supaya tidak membayang di balik kotak. */
.login-card .otp-kotak--siap input.otp-input::placeholder { color: transparent; }
.otp-sel {
  flex: 1 1 0; min-width: 0; max-width: 56px; aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #d7dfea; border-radius: 12px; background: #fff;
  font-size: 26px; font-weight: 700; color: #16233a; line-height: 1;
  transition: border-color .15s, box-shadow .15s, transform .15s cubic-bezier(.16,1,.3,1);
}
.otp-sel--isi { border-color: var(--accent, #1d508e); transform: scale(1.03); }
.otp-sel--aktif { border-color: var(--accent, #1d508e); box-shadow: 0 0 0 4px var(--accent-soft, #e8f0fb); }
/* Garis kedip di kotak yang sedang menunggu diketik. */
.otp-sel--aktif::after {
  content: ''; width: 2px; height: 56%; background: var(--accent, #1d508e);
  border-radius: 2px; animation: otpKedip 1s steps(2, start) infinite;
}
.otp-sel--aktif.otp-sel--isi::after { display: none; }
@keyframes otpKedip { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@media (max-width: 380px) { .otp-kotak--siap { gap: 6px; } .otp-sel { font-size: 22px; border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .otp-sel { transition: none; }
  .otp-sel--aktif::after { animation: none; }
}