/* Gaya untuk satu-satunya bagian microsite yang bukan buatan vendor: formulir
   lead katalog di dalam modal. Sengaja berdiri sendiri dan tidak memakai token
   milik salah satu situs — Good Dog dan Maxi Cat punya palet berbeda, dan
   formulir ini harus terlihat wajar di keduanya.

   Warnanya menumpang var(--red) dan var(--ink) yang ada di kedua site.css,
   dengan nilai cadangan kalau suatu saat token itu berganti nama. */

.bis-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }

.bis-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 420px) {
    .bis-row { grid-template-columns: 1fr; }
}

.bis-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.bis-f > span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink, #26170F);
}

.bis-f input {
    width: 100%;
    box-sizing: border-box;
    /* 16px supaya Safari iOS tidak memperbesar halaman saat field difokus. */
    font: 400 16px/1.2 inherit;
    color: var(--ink, #26170F);
    background: #fff;
    border: 1.5px solid #e0d8cd;
    border-radius: 10px;
    padding: 11px 13px;
    /* Kontrol wajib >= 44px di layar sentuh, sesuai kontrak aksesibilitas handover. */
    min-height: 44px;
    transition: border-color .18s ease;
}

.bis-f input:focus {
    outline: none;
    border-color: var(--red, #B61600);
}

.bis-err {
    font-size: 13px;
    line-height: 1.5;
    color: #8d1100;
    background: #fdf3f2;
    border: 1px solid #f3d9d5;
    border-radius: 10px;
    padding: 10px 12px;
}

/* Umpan bot. Tidak memakai display:none — sebagian bot mengabaikan field yang
   benar-benar tersembunyi, dan justru yang mengisi inilah yang ingin ditangkap. */
.bis-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bis-form button[type="submit"][disabled] { opacity: .6; cursor: default; }

/* Pemilih bahasa: di handover keduanya <a>, di sini <button> supaya bisa
   menyisipkan formulir dulu. Lebarnya perlu dipaksa penuh karena .btn memakai
   inline-flex yang menyusut mengikuti isi. */
.bis-cat { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 800; }

/* Tombol kembali ke daftar brand, hanya di halaman utama microsite.

   Ketiga situs sudah punya .tbback untuk tombol kembali di halaman anak, jadi
   kelas itu dipakai ulang supaya padding dan ukuran fontnya mengikuti masing-
   masing site.css. Yang ditambahkan di sini hanya perilaku yang tidak ada di
   sana: di topbar sempit label teksnya dilepas dan tersisa panahnya saja —
   di bawah 900px burger masih tampil, dan logo + tiga kontrol tidak muat. */

.bis-brands { display: inline-flex; align-items: center; gap: 8px; }

.bis-brands-t { white-space: nowrap; }

@media (max-width: 899px) {
    .bis-brands-t { display: none; }
    /* Tanpa label, tombolnya menyusut jadi lebih kecil dari batas sentuh 44px
       yang dipegang ketiga handover. */
    .bis-brands { min-width: 44px; min-height: 40px; justify-content: center; padding-left: 12px; padding-right: 12px; }
}

/* ------------------------------------------------------------------
   Tambalan satu handover: kartu gambar SuperCat menciut jadi 52px.

   Slide galeri dipasang GD.gallery sebagai .glayer{position:absolute;inset:0}
   di keenam microsite — jadi tidak satu pun menyumbang tinggi ke induknya.
   Lima handover lain memberi .ppimgcard tinggi lewat aspect-ratio:1/1; berkas
   site.css SuperCat kiriman 22 Agustus tidak. Akibatnya kartunya menciut ke
   sisa padding-nya saja (26px + 26px), gambar 448px-nya meluber, dan
   overflow:hidden memotongnya — yang tersisa cuma pita tipis berisi lencana,
   panah, dan penghitung "1/10".

   Ditulis di sini, bukan di site.css, karena berkas itu diregenerasi vendor
   setiap rilis dan suntingan tangan akan hilang tanpa suara. Dikunci ke
   data-bis-site="supercat" supaya lima situs yang sudah benar tidak ikut
   tersentuh kalau nanti ada yang sengaja memakai kartu tidak persegi.

   Hapus begitu vendor mengirim site.css yang sudah memuat aspect-ratio-nya. */
[data-bis-site="supercat"] .ppimgcard {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* Handover lain memasangkan aspect-ratio dengan max-width:100% pada gambarnya.
   Tanpa itu pack shot yang lebih lebar dari kartunya tetap meluber ke samping. */
[data-bis-site="supercat"] .ppimgcard img {
    max-width: 100%;
    max-height: 100%;
}