/* ==========================================================================
   BIVAK RENTAL - Perbaikan tampilan layar VERTICAL (portrait)
   --------------------------------------------------------------------------
   Masalah yang diperbaiki:
   1. styles.css menetapkan .grid-2col = selalu 2 kolom (repeat(2, 1fr))
      tanpa media query, jadi di layar sempit tiap kolom hanya ~45% lebar.
   2. styles.css menetapkan .input-group = display:flex; align-items:center,
      sehingga LABEL dan KOLOM ISIAN berdiri BERDAMPINGAN. Akibatnya tulisan
      "Nama untuk Sertifikat" turun 3 baris dan kotak isiannya jadi kotak kecil.
   3. Teks bantuan (<small class="note">) ikut jadi kolom ke-3 yang memanjang
      ke bawah.

   Berkas ini dimuat PALING AKHIR supaya menimpa aturan di atas, tanpa
   mengubah isi styles.css. Tampilan layar lebar (horizontal/desktop) sengaja
   dibiarkan sama seperti sekarang karena sudah terbaca.
   ========================================================================== */

@media (max-width: 760px) {

  /* --- 1. Grid dua kolom di dalam kartu form jadi satu kolom --- */
  .form-card .grid-2col,
  #adopsiFormCard .grid-2col,
  #adopsiPaymentInfo .grid-2col {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  /* --- 2. Label di atas, kolom isian melebar penuh --- */
  .form-card .input-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    min-width: 0;
  }

  .form-card .input-group > label {
    display: block;
    width: 100%;
    white-space: normal;
    font-size: 0.9rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--text-muted);
  }

  .form-card .input-group > .form-control {
    width: 100%;
    height: auto;
    min-height: 48px;
    /* 16px mencegah layar ikut membesar sendiri saat diketuk di HP */
    font-size: 16px;
    padding: 0.75rem 0.9rem;
    line-height: 1.35;
  }

  /* teks bantuan & pesan validasi ikut penuh, tidak jadi kolom sempit */
  .form-card .input-group > .note,
  .form-card .input-group > small,
  .form-card .input-group > div {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: left;
  }

  /* --- 3. Tombol yang berjajar jadi bertumpuk selebar kartu --- */
  #adopsiFormCard .flex-gap-md,
  #adopsiPaymentInfo .flex-gap-md {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  #adopsiFormCard .flex-gap-md > .btn,
  #adopsiPaymentInfo .flex-gap-md > .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- 4. Kotak ringkasan paket tetap terbaca --- */
  #adopsiFormCard .summary-box .flex-between,
  #adopsiPaymentInfo .summary-box .flex-between {
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    min-width: 0;
  }

  #adopsiFormCard .summary-box .flex-between > span {
    min-width: 0;
    word-break: break-word;
  }

  .payment-box {
    min-width: 0;
    word-break: break-word;
  }

  /* --- 5. Judul form tidak terpotong --- */
  .form-card > h4 {
    min-width: 0;
    word-break: break-word;
    line-height: 1.3;
  }
}

/* Layar sangat sempit: kartu paket adopsi (Bibit/Pohon/Rumpun) satu per baris
   supaya nama paket dan harganya tidak terpotong. */
@media (max-width: 420px) {
  .adopsi-packages.grid-2col {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ==========================================================================
   Menu "Kelola Barang Toko" di navigasi atas - dibuat menonjol hijau supaya
   vendor langsung menemukannya.
   ========================================================================== */

.nav-menu .nav-link-shop {
  color: var(--primary-emerald);
  font-weight: 700;
}

.nav-menu .nav-link-shop i {
  margin-left: 0.3rem;
  font-size: 0.9em;
}

.nav-menu .nav-link-shop:hover,
.nav-menu .nav-link-shop:focus-visible {
  color: #34d399;
}

.btn-shop-drawer {
  border-color: rgba(16, 185, 129, 0.55);
  color: var(--primary-emerald);
}

/* ======================================================================
   Hemat render di HP: bagian berat di bawah lipatan (donasi, adopsi,
   dampak) tidak digambar sebelum mendekati viewport. Ukuran terakhir
   disimpan (auto) supaya scrollbar tidak melompat.
   ====================================================================== */
@media (max-width: 640px) {
  #donasi,
  #adopsi,
  #dampak {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
  }
}