/* ============================================================================
   AIRPH Plus — tambah-integrasi.css
   Hanya untuk skrin-integrasi.js: bahasa paparan, bahasa RPH, dan bayar
   guna QR DuitNow.

   Semua pemilih diawali `.ig-` supaya fail ini tidak boleh menulis semula
   apa-apa dalam asas.css atau sistem.css. Token warna, jejari dan bayang
   diambil daripada asas.css — tiada warna baharu dicipta di sini, jadi
   mod gelap berjalan sendiri.
   ========================================================================= */

/* ------------------------------------------------------- fieldset telus
   Kumpulan radio perlu <fieldset> untuk pembaca skrin, tetapi sempadan
   lalai pelayar melukis kotak kedua di dalam kad. */
.ig-set{border:0;margin:0;padding:0;min-width:0}

/* --------------------------------------------------------- skrip bukan Latin
   Fon sistem yang benar-benar ada pada macOS dan Windows sekolah. Tanpa
   senarai ini, Jawi dan Tamil jatuh ke fon gantian yang memenggal tanda
   baris atas dan bawah huruf. */
.ig-skrip{font-style:normal}
.ig-skrip--jawi,.ig-skrip--arab{
  font-family:"Geeza Pro","Noto Naskh Arabic","Scheherazade New",
              "Traditional Arabic","Arabic Typesetting",serif;
  line-height:1.9;                      /* baris Jawi tinggi — jangan dirapatkan */
}
.ig-skrip--cina{
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC",
              "Microsoft YaHei","Heiti SC",sans-serif;
  line-height:1.5;
}
.ig-skrip--tamil{
  font-family:"Tamil Sangam MN","Noto Sans Tamil","Nirmala UI","Latha",sans-serif;
  line-height:1.8;
}

/* ------------------------------------------------- kad pilihan bahasa paparan
   Kad besar, bukan baris senarai: cikgu memilih dengan melihat contoh
   tulisan, jadi contoh itu perlu ruang dan saiz yang boleh dibaca. */
.ig-bhs{
  position:relative;display:flex;flex-direction:column;gap:8px;cursor:pointer;
  min-height:168px;padding:22px 24px;
  background:var(--kad);border:1.6px solid var(--sempadan);
  border-radius:var(--r-kad);box-shadow:var(--bayang);
  transition:border-color .12s,background .12s;
}
.ig-bhs:hover{border-color:var(--aksen)}
.ig-bhs input{position:absolute;opacity:0;width:0;height:0}
/* Padding dikecilkan supaya sempadan 2.6px tidak menganjak kandungan kad
   sebelahnya apabila kad ini dipilih. */
.ig-bhs:has(input:checked){
  background:var(--aksen-l);border:2.6px solid var(--aksen);padding:21px 23px;
}
.ig-bhs:has(input:focus-visible){outline:3px solid var(--aksen);outline-offset:2px}
.ig-bhs:has(input:checked) .radio__bulat{border-color:var(--aksen)}
.ig-bhs:has(input:checked) .radio__bulat::after{transform:scale(1)}
.ig-bhs__atas{display:flex;align-items:center;gap:14px}
.ig-bhs__nama{font-size:18px;font-weight:700;letter-spacing:-.01em;flex:1;min-width:0}
.ig-bhs:has(input:checked) .ig-bhs__nama{color:var(--aksen-g)}
/* Cip "SEDANG DIGUNA" wujud pada setiap kad dan hanya dinampakkan pada kad
   yang ditanda — supaya kad tidak perlu dibina semula setiap kali memilih.
   Saiz dikecilkan (sama seperti .pakej__lencana): pada cip 11px penuh,
   "Bahasa Melayu" tidak muat sebaris dan pecah jadi dua baris. */
.ig-bhs .cip{display:none;flex:none;height:24px;padding:0 10px;font-size:9.5px;letter-spacing:.02em}
.ig-bhs:has(input:checked) .cip{display:inline-flex}
/* `margin-top:auto` pada label CONTOH, bukan pada teks contoh — kalau tidak
   label terapung di atas dan terpisah daripada perkataan yang dilabelnya. */
.ig-bhs .eyebrow{margin-top:auto}
.ig-bhs__contoh{display:block;font-size:26px;color:var(--teks)}

/* ------------------------------------------------------ radio senarai bahasa
   radio() dalam ui.js meletak label dan sub pada baris yang sama; pada
   senarai panjang kedua-duanya bercantum jadi satu ayat. */
.ig-radio .radio__teks{display:block;min-width:0}
.ig-radio .radio__teks .sub{display:block;margin-top:3px}

/* -------------------------------------------------------- langkah bernombor */
.ig-langkah{display:flex;flex-direction:column;gap:18px;padding:0;list-style:none}
.ig-langkah li{display:flex;align-items:center;gap:16px;font-size:16.5px}
.ig-langkah__no{
  flex:none;width:32px;height:32px;border-radius:16px;
  background:var(--aksen);color:var(--aksen-atas);
  display:grid;place-items:center;
  font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:700;
}

/* --------------------------------------------------------------- kod QR
   Kotak QR kekal PUTIH walaupun mod gelap — kamera app bank membaca
   modul gelap atas latar terang; QR terbalik tidak boleh diimbas. */
.ig-qr{
  background:#FFFFFF;border:1.4px solid var(--sempadan);border-radius:14px;
  padding:20px;display:grid;place-items:center;
}
.ig-qr__kod{
  width:100%;max-width:300px;height:auto;display:block;
  shape-rendering:crispEdges;      /* tanpa ini tepi modul jadi kelabu kabur */
}
.ig-jumlah{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1}

/* ------------------------------------------------- contoh skrip & dwibahasa */
.ig-contoh-skrip{
  display:flex;align-items:center;justify-content:space-around;gap:16px;
  background:var(--kad-dalam);border:1.2px solid var(--sempadan);
  border-radius:var(--r-medan);padding:14px 18px;
}
.ig-contoh-skrip .ig-skrip{font-size:30px}
.ig-dwi-contoh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ig-dwi-contoh>span{
  min-height:96px;display:grid;place-items:center;
  background:var(--kad-dalam);border:1.2px solid var(--sempadan);
  border-radius:var(--r-medan);font-size:16px;font-weight:700;
}

/* --------------------------------------------------------------- responsif */
@media (max-width:759px){
  .ig-bhs{min-height:0;padding:18px 20px}
  .ig-bhs:has(input:checked){padding:17px 19px}
  .ig-bhs__contoh{font-size:22px;margin-top:6px}
  .ig-qr{padding:14px}
  .ig-qr__kod{max-width:240px}
  .ig-jumlah{font-size:34px}
  .ig-langkah li{font-size:16px}
}