/* Kerdilpedia — aksesibilitas kelompok 3 (dimuat di semua halaman toko). */

/* 1. Focus ring: terlihat di semua kontrol keyboard (pengganti outline:none). */
a:focus, button:focus, input:focus,
select:focus, textarea:focus, [tabindex]:focus,
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #263c7e !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/* 2. Target sentuh minimum 44px untuk kontrol utama. */
header nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
#kd-mnav a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
/* chip kategori & tab: tinggi 44px tanpa mengubah tampilan desktop */
#katalog-produk + * button, [id*=kategori] button, [id*=tabBtn] {
  min-height: 44px;
}
/* tombol ikon header: area sentuh 44px */
header button.p-2 {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* tautan footer: jarak sentuh lebih lega di HP */
footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
}

/* 3. Tahan zoom 200%: header & footer boleh membungkus, tidak meluber. */
header .max-w-7xl {
  flex-wrap: wrap;
  row-gap: 8px;
}
footer .max-w-7xl {
  overflow-x: hidden;
}
footer ul {
  flex-wrap: wrap;
}

/* 4. State gagal + tombol coba lagi (dipakai JS saat API mati). */
.kd-state-box {
  padding: 24px 16px;
  text-align: center;
  background: #f2f3ff;
  border-radius: 12px;
  color: #131b2e;
}
.kd-state-box p {
  margin: 8px 0 16px;
  color: #444650;
}
.kd-retry-btn {
  min-height: 44px;
  padding: 10px 24px;
  border-radius: 8px;
  background: #263c7e;
  color: #fff;
  font-weight: 700;
}

/* Fallback keyboard: kelas .kd-fokus dipasang JS saat focusin (selalu cocok). */
a.kd-fokus, button.kd-fokus, input.kd-fokus,
select.kd-fokus, textarea.kd-fokus {
  outline: 3px solid #263c7e !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/* Chip kategori, tab lacak/masuk, tombol kecil: samakan tinggi 44px. */
#katalog-produk ~ * button, main button[class*=rounded-full],
#search-tabs button, #infoTabs button, [id*=tabBtn] {
  min-height: 44px;
}

/* Kelompok 4: kontrol teks kecil jadi tombol 44px yang konsisten. */
a[data-cs-wa], [data-ubah-data], main a[href="#"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
/* tombol Salin di lacak: samakan tinggi 44px */
main button[class*=rounded-md], main button[class*=rounded-lg] {
  min-height: 44px;
}
/* tautan bayar cadangan (dibuat JS): samakan tinggi 44px */
main [data-qr-box] a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* ikon mata / salin kecil: area sentuh 44px */
main button.p-1, main button[class*=rounded-full].p-1 {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Padding main mengikuti tinggi header (diatur JS). Fallback bila JS mati. */
#kd-main { padding-top: 112px; }

/* Baris chip e-wallet di kartu QRIS: ramping di semua layar (hemat tinggi kartu HP) */
.qris-chip-row { gap: 4px !important; margin-top: 6px !important; }
.qris-chip-row span { font-size: 10px !important; padding: 2px 6px !important; }

/* Tombol aksi bawah QR: tinggi seragam + membungkus di HP */
[data-qr-box] ~ div button, [data-kirim-invoice] {
  min-height: 48px;
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
}
[data-qr-box] ~ div > div { flex-wrap: wrap; }
[data-qr-box] ~ div button, [data-kirim-invoice] { flex: 1 1 auto; }