/* Filter dan pencarian Program (assets/program-filter.js). Dimuat hanya di halaman yang memuat Grid Program.
   Tema Astra memberi gaya global pada button dan input (button:hover/focus: teks putih + latar biru tua; input[type=search]: padding,
   input:focus: border putus-putus). Selector di bawah sengaja lebih spesifik (.lrjp + elemen + kelas, spesifisitas >= 0,3,1 pada keadaan
   normal dan >= 0,4,1 pada :hover/:focus) dan menetapkan warna, latar, border, bayangan, dan outline secara eksplisit untuk setiap keadaan.
   Palet: teks #1f2a37 di putih; hijau #1f5c3a di #eaf5ec (hover/fokus/terpilih), #d9eddd (tekan/hover tombol), putih di #1f5c3a (aktif). */

/* ---- Tata letak ---- */
.lrjp{width:100%; max-width:100%; margin:0 0 18px}
/* Kartu punya jarak luar 10px (style.css tema anak: .cards__campaign.campaign_grid .cards__item{padding:10px}); bar diberi jarak yang sama
   agar tepi kiri tombol filter sejajar dengan tepi kiri kartu pertama dan tepi kanan kotak cari dengan tepi kanan kartu di baris itu. */
.lrjp{--lrjp-gutter:10px}
.lrjp .lrjp-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; max-width:100%; padding:0 var(--lrjp-gutter); box-sizing:border-box}
.lrjp .lrjp-f{position:relative; flex:0 0 auto; max-width:60%}
.lrjp .lrjp-s{position:relative; flex:0 1 260px; width:260px; min-width:0}

/* ---- Tombol filter ---- */
.lrjp .lrjp-f button.lrjp-fbtn{display:inline-flex; align-items:center; gap:8px; max-width:100%; min-width:44px; min-height:44px; margin:0; padding:0 14px; border:1px solid #1f5c3a; border-radius:999px; background:#eaf5ec; background-image:none; color:#1f5c3a; box-shadow:none; text-shadow:none; text-transform:none; letter-spacing:normal; font-family:inherit; font-size:14px; font-weight:700; line-height:1.2; cursor:pointer; outline:0; box-sizing:border-box; -webkit-appearance:none; appearance:none}
.lrjp .lrjp-f button.lrjp-fbtn svg{flex:0 0 auto}
.lrjp .lrjp-f button.lrjp-fbtn .lrjp-fbtn__label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px}
.lrjp .lrjp-f button.lrjp-fbtn .lrjp-fbtn__label:empty{display:none}
.lrjp .lrjp-f button.lrjp-fbtn:hover,
.lrjp .lrjp-f button.lrjp-fbtn:focus,
.lrjp .lrjp-f button.lrjp-fbtn[aria-expanded="true"]{background:#d9eddd; background-image:none; border-color:#1f5c3a; color:#1f5c3a; box-shadow:none}
.lrjp .lrjp-f button.lrjp-fbtn:active{background:#cfe6d4; background-image:none; border-color:#1f5c3a; color:#1f5c3a; box-shadow:none}
.lrjp .lrjp-f button.lrjp-fbtn.is-active{background:#1f5c3a; background-image:none; border-color:#1f5c3a; color:#fff}
.lrjp .lrjp-f button.lrjp-fbtn.is-active:hover,
.lrjp .lrjp-f button.lrjp-fbtn.is-active:focus,
.lrjp .lrjp-f button.lrjp-fbtn.is-active:active,
.lrjp .lrjp-f button.lrjp-fbtn.is-active[aria-expanded="true"]{background:#174a2e; background-image:none; border-color:#174a2e; color:#fff; box-shadow:none}
.lrjp .lrjp-f button.lrjp-fbtn:focus-visible{outline:2px solid #1f5c3a; outline-offset:2px}
.lrjp .lrjp-f button.lrjp-fbtn.is-active:focus-visible{outline-color:#1f5c3a}

/* ---- Dropdown kategori ---- */
.lrjp .lrjp-menu{display:none; position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:200px; max-width:calc(100vw - 16px); max-height:60vh; overflow-y:auto; margin:0; padding:6px; background:#fff; border:1px solid #1f5c3a; border-radius:16px; box-shadow:0 8px 24px rgba(31,92,58,.18); box-sizing:border-box}
.lrjp .lrjp-menu.is-open{display:block}
.lrjp .lrjp-menu button.lrjp-menu__item{display:flex; align-items:center; gap:8px; width:100%; min-height:44px; margin:0; padding:0 12px; border:0; border-radius:10px; background:#fff; background-image:none; color:#1f2a37; box-shadow:none; text-shadow:none; text-transform:none; letter-spacing:normal; font-family:inherit; font-size:15px; font-weight:400; line-height:1.3; text-align:left; cursor:pointer; outline:0; box-sizing:border-box; -webkit-appearance:none; appearance:none}
.lrjp .lrjp-menu button.lrjp-menu__item .lrjp-menu__check{flex:0 0 auto; visibility:hidden}
.lrjp .lrjp-menu button.lrjp-menu__item .lrjp-menu__name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lrjp .lrjp-menu button.lrjp-menu__item .lrjp-menu__count{flex:0 0 auto; color:#4b5563; font-size:13px}
.lrjp .lrjp-menu button.lrjp-menu__item:hover,
.lrjp .lrjp-menu button.lrjp-menu__item:focus,
.lrjp .lrjp-menu button.lrjp-menu__item.is-on{background:#eaf5ec; background-image:none; color:#1f5c3a; box-shadow:none}
.lrjp .lrjp-menu button.lrjp-menu__item:hover .lrjp-menu__count,
.lrjp .lrjp-menu button.lrjp-menu__item:focus .lrjp-menu__count,
.lrjp .lrjp-menu button.lrjp-menu__item.is-on .lrjp-menu__count{color:#1f5c3a}
.lrjp .lrjp-menu button.lrjp-menu__item:active{background:#d9eddd; background-image:none; color:#1f5c3a; box-shadow:none}
.lrjp .lrjp-menu button.lrjp-menu__item.is-on{font-weight:700}
.lrjp .lrjp-menu button.lrjp-menu__item.is-on .lrjp-menu__check{visibility:visible}
.lrjp .lrjp-menu button.lrjp-menu__item:focus-visible{outline:2px solid #1f5c3a; outline-offset:-2px}

/* ---- Kotak cari ---- */
.lrjp .lrjp-s .lrjp-s__icon{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#1f5c3a; pointer-events:none}
.lrjp .lrjp-s input.lrjp-s__input{display:block; width:100%; height:44px; min-height:44px; margin:0; padding:0 46px 0 44px; border:1px solid #1f5c3a; border-radius:999px; background:#eaf5ec; background-image:none; color:#1f4a31; box-shadow:none; text-shadow:none; font-family:inherit; font-size:16px; font-weight:400; line-height:1.2; text-overflow:ellipsis; outline:0; box-sizing:border-box; -webkit-appearance:none; appearance:none}
.lrjp .lrjp-s input.lrjp-s__input::placeholder{color:#4f6b5a; opacity:1}
.lrjp .lrjp-s input.lrjp-s__input::-webkit-search-cancel-button,
.lrjp .lrjp-s input.lrjp-s__input::-webkit-search-decoration{-webkit-appearance:none; display:none}
.lrjp .lrjp-s input.lrjp-s__input:hover,
.lrjp .lrjp-s input.lrjp-s__input:focus{border:1px solid #1f5c3a; background:#eaf5ec; background-image:none; color:#1f4a31; box-shadow:none}
.lrjp .lrjp-s input.lrjp-s__input:focus-visible{outline:2px solid #1f5c3a; outline-offset:2px}
.lrjp .lrjp-s button.lrjp-s__clear{position:absolute; right:2px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; min-height:0; margin:0; padding:0; border:0; border-radius:999px; background:transparent; background-image:none; color:#1f5c3a; box-shadow:none; cursor:pointer; outline:0; -webkit-appearance:none; appearance:none}
.lrjp .lrjp-s button.lrjp-s__clear[hidden]{display:none}
.lrjp .lrjp-s button.lrjp-s__clear:hover,
.lrjp .lrjp-s button.lrjp-s__clear:focus{background:#d9eddd; background-image:none; color:#1f5c3a; box-shadow:none}
.lrjp .lrjp-s button.lrjp-s__clear:active{background:#cfe6d4; background-image:none; color:#1f5c3a; box-shadow:none}
.lrjp .lrjp-s button.lrjp-s__clear:focus-visible{outline:2px solid #1f5c3a; outline-offset:0}

/* ---- Catatan, status, hasil kosong ---- */
.lrjp .lrjp-note{margin:8px var(--lrjp-gutter) 0; font-size:13px; color:#5B6660}
.lrjp .lrjp-note[hidden],.lrjp-empty[hidden]{display:none}
.lrjp .lrjp-status{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.lrjp-empty{text-align:center; margin:8px 0 18px}
.lrjp-empty .lrjp-empty__text{color:#5B6660; font-size:15px; margin:0 0 10px}
.lrjp-empty button.lrjp-empty__btn{min-height:44px; margin:0; padding:0 20px; border:1px solid #1f5c3a; border-radius:999px; background:#eaf5ec; background-image:none; color:#1f5c3a; box-shadow:none; text-shadow:none; text-transform:none; letter-spacing:normal; font-family:inherit; font-size:14px; font-weight:700; line-height:1.2; cursor:pointer; outline:0; -webkit-appearance:none; appearance:none}
.lrjp-empty button.lrjp-empty__btn:hover,
.lrjp-empty button.lrjp-empty__btn:focus{background:#d9eddd; background-image:none; border-color:#1f5c3a; color:#1f5c3a; box-shadow:none}
.lrjp-empty button.lrjp-empty__btn:active{background:#cfe6d4; background-image:none; border-color:#1f5c3a; color:#1f5c3a; box-shadow:none}
.lrjp-empty button.lrjp-empty__btn:focus-visible{outline:2px solid #1f5c3a; outline-offset:2px}

/* ---- Kartu tersembunyi dan tombol Selengkapnya tanpa sisa ---- */
.cards__campaign .cards__item[hidden]{display:none !important}
.lrjp-nomore{display:none !important}

/* ---- Ponsel: satu baris; filter hanya ikon (nama kategori aktif tetap tampil), kotak cari mengisi sisa lebar ---- */
@media(max-width:600px){
	.lrjp .lrjp-f button.lrjp-fbtn{padding:0 12px}
	.lrjp .lrjp-f button.lrjp-fbtn.is-active .lrjp-fbtn__label{max-width:34vw}
	.lrjp .lrjp-f button.lrjp-fbtn:not(.is-active) .lrjp-fbtn__label{display:none}
	.lrjp .lrjp-s{flex:1 1 0; width:auto; max-width:360px; margin-left:auto}
}