/* ============ Paket Ekstensi CSTI — Pengaturan CSTI ============
   Kartu unduhan tiga paket ekstensi (laptop petugas, tablet SUPEL, mesin
   antrian) beserta panduan pemasangannya, untuk Chrome dan Firefox.

   Kartu ini berada di ATAS form pengaturan. Dulu di paling bawah dan petugas
   harus menggulir melewati seluruh form notifikasi untuk menemukannya. */

.csti-ext-card { margin-top: 16px; margin-bottom: 16px; }
.csti-ext-intro { margin: 10px 0 14px; color: var(--p-on-surface-variant, #5c727f); font-size: 12.5px; line-height: 1.6; }
.csti-ext-intro code { padding: 1px 5px; border-radius: 4px; background: var(--p-surface-container-high, #eef3f5); font-size: 11.5px; }

.csti-ext-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }

.csti-ext-item { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--p-outline-variant, #e3ebee); border-radius: 12px; background: var(--p-surface-container-lowest, #fff); }
.csti-ext-item.is-off { background: var(--p-surface-container, #f4f8f9); }

.csti-ext-item-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.csti-ext-item-head strong { display: block; color: var(--p-on-surface, #123f53); font-size: 13.5px; }
.csti-ext-item-head small { display: block; color: var(--p-on-surface-variant, #5c727f); font-size: 11px; }

.csti-ext-ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--p-primary-container, #d6ecf7); color: var(--p-primary, #075671); }
.csti-ext-ikon svg { width: 18px; height: 18px; }

/* Nomor versi dibedakan lewat teks "v…", bukan warna saja, supaya tetap
   terbaca tanpa mengandalkan persepsi warna. */
.csti-ext-versi { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--p-surface-container-high, #eef3f5); color: var(--p-on-surface-variant, #5c727f); font-size: 11px; font-weight: 800; white-space: nowrap; }

.csti-ext-ringkas { flex: 1 1 auto; margin: 0; color: var(--p-on-surface-variant, #5c727f); font-size: 12px; line-height: 1.55; }

.csti-ext-unduh { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 12.5px; }
.csti-ext-unduh svg { width: 15px; height: 15px; }
.csti-ext-unduh em { font-style: normal; font-weight: 600; opacity: 0.75; font-size: 11.5px; }

/* Tombol .xpi Firefox memakai gaya sekunder: satu kartu bisa menawarkan dua
   unduhan, dan hanya paket Chrome yang merupakan jalur utama di kebanyakan
   kantor. Ikut .csti-ext-unduh dalam bentuk, beda dalam bobot warna. */
.csti-ext-unduh-xpi { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; margin-top: 8px; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 12.5px; }
.csti-ext-unduh-xpi svg { width: 15px; height: 15px; }
.csti-ext-unduh-xpi em { font-style: normal; font-weight: 600; opacity: 0.75; font-size: 11.5px; }

.csti-ext-kosong { display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 11px; border-radius: 9px; background: #fdf0d5; color: #7d5100; font-size: 11.5px; line-height: 1.5; }
.csti-ext-kosong svg { width: 15px; height: 15px; flex: 0 0 15px; }

.csti-ext-panduan { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p-outline-variant, #e3ebee); }
.csti-ext-panduan a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.csti-ext-panduan a svg { width: 15px; height: 15px; }
.csti-ext-panduan small { color: var(--p-on-surface-variant, #5c727f); font-size: 11.5px; }
.csti-ext-panduan code { padding: 1px 5px; border-radius: 4px; background: var(--p-surface-container-high, #eef3f5); font-size: 11px; }

@media (max-width: 620px) {
  .csti-ext-grid { grid-template-columns: 1fr; }
}