/* ==========================================================================
   FORM — komponen bersama untuk halaman formulir (kelahiran, lahir-mati,
   kematian, dst.)
   ========================================================================== */

/* Kolom konten sejajar dengan app-header: kontainer 1180px termasuk padding
   16px kiri-kanan = kotak 1148px (di ≥1400px: 1320px = kotak 1288px). */
.form-page-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 16px 64px 16px; }
@media (min-width: 1400px) {
  .form-page-wrap { max-width: 1320px; }
}

/* ==========================================================================
   PAGE TITLE / BADGE JENIS PELAPORAN
   ========================================================================== */
.form-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.form-intro-text h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-primary);
}
.form-intro-text p {
  margin: 4px 0 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-static {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: linear-gradient(135deg, hsl(var(--cat-hue, 340), 78%, 58%), hsl(var(--cat-hue, 340), 68%, 46%));
  color: #FFFFFF;
  box-shadow: 0 6px 16px hsla(var(--cat-hue, 340), 55%, 30%, 0.35);
  flex-shrink: 0;
}
.badge-static svg { width: 17px; height: 17px; }

/* ---- Varian badge sebagai JUDUL formulir (menggantikan h2 di form-intro):
   lebih besar, di kiri, dengan subjudul kecil di bawahnya ---- */
.badge-static.badge-title {
  font-size: 16px;
  letter-spacing: 0.5px;
  padding: 13px 22px;
  gap: 10px;
  border-radius: 15px;
  margin-bottom: 8px;
}
.badge-static.badge-title svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .badge-static.badge-title { font-size: 14px; padding: 11px 18px; }
}

/* ==========================================================================
   INTRO BANNER — judul halaman bergaya banner gradien (ala hero beranda).
   Formulir memakai hue kategori (--cat-hue); halaman menu memakai varian
   .intro-banner-brand (gradien hijau-biru brand).
   ========================================================================== */
.intro-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 24px;
  padding: 24px 26px;
  margin-bottom: 20px;
  color: #FFFFFF;
  background:
    radial-gradient(420px circle at 90% -30%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(360px circle at -8% 130%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(135deg, hsl(var(--cat-hue, 205), 70%, 46%), hsl(var(--cat-hue, 205), 76%, 33%));
  box-shadow: 0 12px 30px hsla(var(--cat-hue, 205), 60%, 30%, 0.35);
  transition: box-shadow .3s ease-in-out;
}
body.dark .intro-banner {
  background:
    radial-gradient(420px circle at 90% -30%, rgba(255, 255, 255, 0.09), transparent 60%),
    radial-gradient(360px circle at -8% 130%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(135deg, hsl(var(--cat-hue, 205), 55%, 33%), hsl(var(--cat-hue, 205), 62%, 21%));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.intro-banner-brand {
  background:
    radial-gradient(420px circle at 90% -30%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(360px circle at -8% 130%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(135deg, #23A857 0%, #0E8ADF 100%);
  box-shadow: 0 12px 30px rgba(10, 100, 200, 0.30);
}
body.dark .intro-banner-brand {
  background:
    radial-gradient(420px circle at 90% -30%, rgba(255, 255, 255, 0.09), transparent 60%),
    radial-gradient(360px circle at -8% 130%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(135deg, #16713A 0%, #0A5BB4 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.intro-banner-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: hsl(var(--cat-hue, 205), 70%, 38%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.intro-banner-brand .intro-banner-icon { color: #0A6ACC; }
.intro-banner-icon svg { width: 26px; height: 26px; }
.intro-banner-text { min-width: 0; }
.intro-banner-text h2,
.intro-banner-title {
  display: block;
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.intro-banner-text p {
  margin: 5px 0 0 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 560px) {
  .intro-banner { padding: 18px; gap: 12px; }
  .intro-banner-icon { width: 44px; height: 44px; border-radius: 13px; }
  .intro-banner-icon svg { width: 22px; height: 22px; }
  .intro-banner-text h2, .intro-banner-title { font-size: 16px; }
}

/* ==========================================================================
   SECTION CARD
   ========================================================================== */
.form-section {
  background: var(--bg-card);
  border-radius: 24px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 26px var(--shadow-color);
  overflow: hidden;
  margin-bottom: 20px;
  transition: box-shadow .25s ease-in-out, border-color .3s ease-in-out, background-color .3s ease-in-out;
}

.form-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 55%),
    hsl(var(--cat-hue), var(--cat-sat, 62%), var(--cat-light-l, 88%));
  color: var(--cat-header-text, #1C1C1E);
  transition: background-color .3s ease-in-out, color .3s ease-in-out;
}
body.dark .form-section-header {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 55%),
    hsl(var(--cat-hue), var(--cat-sat-dark, 42%), var(--cat-dark-l, 24%));
  color: #F5F5F7;
}

.form-section-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, hsl(var(--cat-hue), 78%, 58%), hsl(var(--cat-hue), 68%, 42%));
  box-shadow: 0 4px 10px hsla(var(--cat-hue), 55%, 30%, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFFFFF;
}
.form-section-icon svg { width: 23px; height: 23px; stroke: currentColor; }

.form-section-title-wrap { flex: 1; min-width: 0; }
.form-section-title {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.3;
}
.form-section-subtitle {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.form-section-content {
  padding: 26px 24px 30px 24px;
  background:
    linear-gradient(180deg, hsla(var(--cat-hue), var(--cat-sat, 62%), 50%, 0.06), hsla(var(--cat-hue), var(--cat-sat, 62%), 50%, 0) 140px),
    var(--bg-card-body);
  transition: background-color .3s ease-in-out;
}

/* ==========================================================================
   FIELD GRID & INPUTS
   ========================================================================== */
.field-grid {
  display: grid;
  /* max(250px, 50%-gap): kolom minimum separuh lebar — walau kontainer lebar,
     field TIDAK PERNAH mengalir jadi 3-4 kolom (maksimal 2 kolom). */
  grid-template-columns: repeat(auto-fit, minmax(max(250px, calc(50% - 10px)), 1fr));
  gap: 20px;
}
.field-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 50-25-25 (mis. Penolong Kelahiran | Berat Bayi | Panjang Bayi).
   Kolom pertama HARUS calc(50% - 10px) — rumus yang sama dengan kolom
   field-grid-2col (satu gap 20px dibagi dua) — supaya tepi kanannya segaris
   dengan kolom 50% di baris lain. "2fr 1fr 1fr" meleset 10px karena kedua
   gap ikut dipotong sebelum pembagian fr. */
.field-grid-2-1-1 { grid-template-columns: calc(50% - 10px) 1fr 1fr; }
/* Baris dengan label panjang tak sama (mis. "Berita Acara Sumpah/Janji
   Setia" di perubahan-status-kewarganegaraan.php) bisa bungkus jadi jumlah
   baris teks berbeda per kolom, membuat input di bawahnya jadi tidak
   sejajar. subgrid menyamakan tinggi tiap baris (label/isian/error) lintas
   kolom terlepas dari berapa baris teks labelnya. */
.field-grid-row-aligned { grid-template-rows: auto auto auto; align-items: start; }
.field-grid-row-aligned > .field { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 7px; }
@media (max-width: 720px) {
  .field-grid-3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* HP: kolom 50% jadi baris penuh, dua kolom 25% berdampingan 50-50 */
  .field-grid-2-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid-2-1-1 > .field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .field-grid-2col, .field-grid-3col { grid-template-columns: 1fr; }
}
.field-subgroup {
  grid-column: 1 / -1;
  padding: 18px 18px 6px 18px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  margin-top: 4px;
}
.field-subgroup-title {
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.field-subgroup .field-grid { margin-bottom: 12px; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-full { grid-column: 1 / -1; }

/* ---- Micro-heading pemisah kelompok field di dalam satu section
   (mis. "Waktu & Tempat" / "Rincian Kelahiran" / "Ukuran Bayi") ---- */
.field-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.field-divider::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--border-color-strong);
}

/* ---- Badge nama hari otomatis di samping label Tanggal Lahir ---- */
.label-day-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--accent-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
}
.label-day-badge[hidden] { display: none; }

/* Label & hint memakai huruf normal (bukan kapital semua) supaya lebih mudah
   dibaca — placeholder & teks isian input tetap kapital. */
.field label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: none;
  /* warna teks utama — label lebih menonjol daripada placeholder */
  color: var(--text-primary);
}
.field label .req { color: var(--danger); margin-left: 2px; }
.field label .opt {
  color: var(--text-tertiary);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 12px;
}

.form-input,
.form-select {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border-radius: 15px;
  border: 1.5px solid var(--border-color-strong);
  background: var(--bg-input);
  color: var(--text-primary);
  /* 16px — di bawah itu Safari iPhone melakukan auto-zoom saat field difokus */
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, background-color .3s ease-in-out, color .2s ease-in-out;
}

/* ---- Field NIK/KK memakai JetBrains Mono supaya digit mudah dibaca & dihitung. ---- */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
}
/* .nik-mono: untuk field NIK/KK readonly (tersinkron otomatis) yang tidak
   punya data-digits — mis. #kematianNIK di section Kematian */
.form-input[data-digits],
.form-input.nik-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.5px;
}

/* Digit rata kolom untuk field angka lainnya */
#noHpInput, .pukul-input, .stepper-input { font-variant-numeric: tabular-nums; }

/* Dropdown yang BELUM dipilih tampil redup seperti placeholder (kelas
   .select-empty di-toggle otomatis oleh form.js), terisi = warna penuh */
.form-select.select-empty { color: var(--text-tertiary); font-weight: 500; }

/* Seluruh isian, dropdown, suffix, dan chip pilihan mengikuti font aplikasi. */
.form-input,
.form-select,
.input-suffix-wrap .suffix,
.chip-option span { font-family: inherit; }
.form-input::placeholder { text-transform: uppercase; font-weight: 400; color: var(--text-tertiary); }
.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.16);
}
.form-input[readonly] { opacity: 0.75; cursor: not-allowed; }
.form-input:disabled { opacity: 0.45; cursor: not-allowed; }
.form-input.invalid, .form-select.invalid { border-color: var(--danger); }

/* Email selalu huruf kecil — baik teks isian maupun placeholder-nya */
.form-input[type="email"] { text-transform: lowercase; }
.form-input[type="email"]::placeholder { text-transform: lowercase; }

/* ---- Penghitung digit NIK / No. KK (mis. "10/16 digit") — dibuat otomatis
   oleh form.js untuk semua input [data-digits] ---- */
.digit-counter {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  display: none;
}
.digit-counter.show { display: block; }
.field.has-error .digit-counter { color: var(--danger); }


.form-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 50px;
  background-repeat: no-repeat, no-repeat;
  background-position: right 10px center, right 16px center;
  background-size: 30px 30px, 18px 18px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23787880' fill-opacity='0.14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
body.dark .form-select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23787880' fill-opacity='0.24'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F2F7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.form-select:hover {
  background-position: right 10px center, right 16px center;
}
.form-select:focus {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%230A84FF' fill-opacity='0.16'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A84FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23787880' fill-opacity='0.08'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   DROPDOWN TANGGAL/BULAN/TAHUN — dipakai bareng oleh kelahiran.html,
   lahir-mati.html, dan kematian.html untuk menggantikan date picker kalender
   (lebih mudah dipakai lansia). Lihat initDateSelectGroup() di form.js.
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.date-select-group {
  display: flex;
  gap: 6px;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  width: 100%;
}
/* Proporsional/fleksibel — otomatis menyesuaikan lebar berapa pun jatah kolomnya (1/3, 1/2,
   atau full), supaya tidak pernah terbungkus turun ke baris baru di kolom manapun. Ikon panah
   versi ringkas & bergaya "pil" berwarna aksen aplikasi (bukan abu-abu polos seperti dropdown
   biasa) — lebih menarik secara visual, tetap cukup kecil untuk kolom sesempit apapun. */
.date-select-group .form-select {
  min-width: 0;
  padding: 13px 28px 13px 8px;
  font-size: 16px;
  text-align: center;
  text-align-last: center;
  background-position: right 8px center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230A84FF' fill-opacity='0.13'/%3E%3Cpath d='M11 13.5l5 5 5-5' fill='none' stroke='%230A84FF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}
body.dark .date-select-group .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230A84FF' fill-opacity='0.22'/%3E%3Cpath d='M11 13.5l5 5 5-5' fill='none' stroke='%2364B5FF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.date-select-group .form-select:hover {
  border-color: var(--accent-primary);
}
.date-select-group .form-select:focus,
body.dark .date-select-group .form-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230A84FF'/%3E%3Cpath d='M11 13.5l5 5 5-5' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.date-select-group .date-select-day { flex: 0 0 24%; }
.date-select-group .date-select-month { flex: 1 1 44%; }
.date-select-group .date-select-year { flex: 0 0 30%; }

/* Field tanggal yang berdiri sendiri di baris penuh (field-full) — batasi lebar maksimum
   supaya kotaknya tidak melebar berlebihan mengikuti seluruh lebar baris.
   HARUS pakai child selector (>) — selector turunan bebas ikut mengenai grup tanggal
   di dalam grid bersarang yang pembungkusnya kebetulan berkelas field-full,
   membuat kolom 50% tidak pernah terisi penuh. */
.field.field-full > .date-select-group,
.field-date-wide > .date-select-group { max-width: 420px; }

/* ---- Dropdown Jam/Menit (format 24 jam, menggantikan <input type="time">) ---- */
.time-select-group {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  max-width: 320px;
}
.time-select-group .form-select {
  min-width: 0;
  flex: 1 1 110px;
  padding-left: 10px;
  font-size: 16px;
  letter-spacing: 0.1px;
  text-align: center;
  text-align-last: center;
}
.time-select-group .time-select-sep { flex: 0 0 auto; font-weight: 700; font-size: 16px; color: var(--text-tertiary); }

.field-error {
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
  display: none;
}
.field.has-error .field-error { display: block; }
.field.has-error label { color: var(--danger); }

.field-hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: none;
  line-height: 1.4;
}

/* ---- Isian Pukul (mask "HH:MM" 24 jam, dipakai bareng oleh kelahiran.html,
   kematian.html, dst.) ---- */
.pukul-input { font-size: 16px; }

/* ---- Suffix (Kg / cm) ---- */
.input-suffix-wrap { position: relative; }
.input-suffix-wrap .form-input { padding-right: 48px; }
.input-suffix-wrap .suffix {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  pointer-events: none;
}

/* ---- Stepper ---- */
.stepper { display: flex; align-items: stretch; gap: 10px; }
.stepper-btn {
  width: 52px;
  min-height: 52px;
  border-radius: 15px;
  border: 1.5px solid var(--border-color-strong);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease-in-out, transform .15s ease-in-out;
  flex-shrink: 0;
}
.stepper-btn:hover { background: var(--tab-bg); }
.stepper-btn:active { transform: scale(0.92); }
.stepper-input {
  flex: 1;
  text-align: center;
  min-width: 0;
}

/* ==========================================================================
   CHIP RADIO — dasar (Tempat Dilahirkan, Jenis Kelahiran, Penolong, dll)
   ========================================================================== */
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-option { position: relative; }
.chip-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 18px;
  border-radius: 14px;
  border: 1.5px solid var(--border-color-strong);
  background: var(--bg-input);
  /* redup saat belum dipilih — pilihan aktif (biru solid) jadi lebih menonjol */
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out, transform .15s ease-in-out;
}
.chip-option span svg { width: 18px; height: 18px; flex-shrink: 0; }
.chip-option input:checked + span {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.3);
}
.chip-option input:focus-visible + span { box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.25); }
.chip-option span:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .chip-option input:not(:checked):hover + span { border-color: var(--accent-primary); }
}

/* ---- Segmented (2 pilihan besar: WNI/WNA, Laki-laki/Perempuan).
   Gap 20px = sama dengan gap kolom field-grid, supaya belahan tengah grup
   yang membentang penuh segaris dengan selokan kolom 50-50 di baris lain ---- */
.chip-group.segmented { display: flex; gap: 20px; flex-wrap: nowrap; }
.chip-group.segmented .chip-option { flex: 1; }
.chip-group.segmented .chip-option span {
  width: 100%;
  min-height: 54px;
  font-size: 14.5px;
}

/* ---- 1 baris (mis. Agama: 7 opsi tetap 1 baris, chip lebih ringkas + boleh scroll
   horizontal di layar sempit supaya tidak turun ke baris baru) ---- */
.chip-group.chip-group-1row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.chip-group.chip-group-1row .chip-option { flex: 0 0 auto; }
.chip-group.chip-group-1row .chip-option span {
  min-height: 42px;
  padding: 9px 12px;
  font-size: 13px;
  white-space: nowrap;
}

/* ---- Chip sejajar-input (Tempat Dilahirkan, Jenis Kelahiran, Penolong
   Kelahiran): tinggi & font MENGIKUTI form input (52px / 16px); padding
   horizontal ramping + tanpa letter-spacing supaya semua pilihan tetap
   muat satu baris di kolom 50% pada desktop ---- */
.chip-group.chip-group-compact { gap: 6px; }
/* flex-grow: sisa ruang kolom dibagi rata ke semua chip — baris terisi penuh
   sampai tepi kolom, tanpa celah kosong di kanan */
.chip-group.chip-group-compact .chip-option { flex: 1 1 auto; }
.chip-group.chip-group-compact .chip-option span {
  width: 100%;
  min-height: 52px;
  padding: 12px 10px;
  font-size: 16px;
  letter-spacing: 0;
}

/* ---- Grid 3 kolom tetap (mis. Sebab Kematian: 6 opsi jadi 2 baris @ 3 opsi) ---- */
.chip-group.chip-group-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.chip-group.chip-group-grid3 .chip-option span { width: 100%; }
@media (max-width: 640px) {
  .chip-group.chip-group-grid3 { grid-template-columns: repeat(2, 1fr); }
}
.chip-group.segmented .chip-option span svg { width: 20px; height: 20px; }

/* ==========================================================================
   DATE PICKER CUSTOM (DD/MM/YYYY)
   ========================================================================== */
.date-picker-wrap { position: relative; }
.date-picker-input { padding-right: 50px; cursor: pointer; }
.date-picker-icon-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 11px;
  transition: background-color .2s ease-in-out;
}
.date-picker-icon-btn:hover { background: var(--tab-bg); }
.date-picker-icon-btn svg { width: 21px; height: 21px; }

.date-picker-popup {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  max-width: 90vw;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 18px 44px var(--shadow-color);
  padding: 16px;
}
/* Dipakai lewat JS (initDatePicker) saat ruang di bawah input tidak cukup untuk menampilkan
   kalender penuh (mis. field tanggal terakhir sebelum tombol aksi) — kalender dibuka ke ATAS
   input supaya tidak terpotong oleh tepi layar/viewport. */
.date-picker-popup.dp-flip-up {
  top: auto;
  bottom: calc(100% + 8px);
}
.dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dp-title { font-size: 14px; font-weight: 800; text-transform: uppercase; color: var(--text-primary); }
.dp-nav {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--border-color);
  background: var(--tab-bg);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
}
.dp-nav:hover { background: var(--border-color); }
.dp-nav svg { width: 17px; height: 17px; }
.dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.dp-weekdays span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dp-cell {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease-in-out;
}
.dp-cell:hover:not(:disabled) { background: var(--tab-bg); }
.dp-cell:disabled { opacity: 0.28; cursor: not-allowed; }
.dp-cell.dp-today { border: 1.5px solid var(--accent-primary); }
.dp-cell.dp-selected { background: var(--accent-primary); color: #fff; font-weight: 800; }
.dp-empty { cursor: default; }

/* ==========================================================================
   ACTION BUTTONS — bilah melayang (sticky) di dasar layar dengan latar kaca,
   selalu terjangkau saat menggulir form yang panjang
   ========================================================================== */
.form-actions {
  position: sticky;
  bottom: 12px;
  z-index: 90;
  display: flex;
  gap: 12px;
  margin-top: 26px;
  padding: 12px;
  border-radius: 20px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--bg-header);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px var(--shadow-color);
}
.form-actions .btn { flex: 1; min-width: 150px; }
.form-actions .btn-back { flex: 0 0 auto; min-width: 130px; margin-right: auto; }
@media (max-width: 640px) {
  /* HP: satu baris ringkas — Kembali/Hapus/Sample jadi ikon saja,
     LIHAT & CETAK melebar sebagai aksi utama */
  .form-actions { flex-wrap: nowrap; gap: 8px; padding: 10px; }
  .form-actions .btn { min-width: 0; padding: 12px 10px; font-size: 13px; }
  .form-actions .btn-back { margin-right: 0; min-width: 0; }
  .form-actions .btn-back,
  .form-actions .btn-danger,
  .form-actions .btn-secondary {
    flex: 0 0 auto;
    width: 48px;
    padding: 0;
    justify-content: center;
  }
  .form-actions .btn-back span,
  .form-actions .btn-danger span,
  .form-actions .btn-secondary span { display: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 560px) {
  .form-intro-text h2 { font-size: 19px; }
  .day-readonly-wrap { flex-direction: column; align-items: stretch; }
  .day-badge { margin-top: 0; }
  .form-section-content { padding: 20px 16px 24px 16px; }
}

/* ==========================================================================
   TOAST NOTIFIKASI
   ========================================================================== */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  width: 100%;
  padding: 0 16px;
}
.toast {
  pointer-events: auto;
  max-width: 420px;
  padding: 14px 22px;
  border-radius: 16px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: linear-gradient(135deg, #34C759, #248A3D); }
.toast-error { background: linear-gradient(135deg, #FF453A, #D70015); }

/* Keep the service forms focused; help links remain on informational pages. */
body.kelahiran-page .help-banner,
body.service-wizard-page .help-banner { display: none; }