/* =====================================================================
   Skrin aplikasi mudah alih AgroBorong (mokup-utama-mobileapp.png)
   Hanya dipaparkan < 768px. Kad listing dikongsi dengan home.css (.hm-card, .hp-meta, .hp-contact)
   ===================================================================== */
.ap { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #334155; background: #f6f8f6; min-height: 100vh; padding-bottom: 96px; }
.ap h1, .ap h2, .ap h3 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; color: #0f172a; }
.ap a { text-decoration: none; }

/* App bar */
.ap-bar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .35rem; height: 58px; padding: 0 .55rem; background: #fff; border-bottom: 1px solid #edf1ee; }
.ap-bar h1 { flex: 1; font-size: 1.15rem; font-weight: 700; margin: 0 0 0 .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .45rem; }
.ap-bar-btn { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 12px; display: grid; place-items: center; color: #0f172a; font-size: 1.15rem; flex: 0 0 40px; }
.ap-bar-btn:active { background: #eef4f0; }
.ap-new { background: #ef4444; color: #fff; font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; }
.ap-body { padding: .85rem .8rem 0; }

/* Penapis */
.ap-selects { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: .75rem; }
.ap-select { appearance: none; -webkit-appearance: none; width: 100%; border: 1px solid #dfe7e2; border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23334155' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") right .75rem center no-repeat; padding: .58rem 1.9rem .58rem .8rem; font-size: .84rem; font-weight: 600; color: #0f172a; outline: 0; }
.ap-select.sm { width: auto; padding: .38rem 1.7rem .38rem .7rem; font-size: .8rem; }
.ap-search { display: flex; gap: .45rem; margin-bottom: .7rem; }
.ap-search .ap-input { flex: 1; position: relative; }
.ap-search .ap-input i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: #64748b; }
.ap-search input { width: 100%; border: 1px solid #dfe7e2; border-radius: 10px; padding: .62rem .7rem .62rem 2.3rem; font-size: .88rem; outline: 0; background: #fff; }
.ap-search input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.ap-search button { width: 46px; border: 0; border-radius: 10px; background: #0f7a37; color: #fff; font-size: 1rem; }
.ap-search button i { color: #fff; }
.ap-chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.8rem .75rem; padding: 0 .8rem; }
.ap-chips::-webkit-scrollbar { display: none; }
.ap-chip { flex: 0 0 auto; padding: .38rem .85rem; border-radius: 9px; border: 1px solid #e2e8e4; background: #fff; color: #475569; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.ap-chip.active { background: #0f7a37; border-color: #0f7a37; color: #fff; }
.ap-count { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; font-size: .84rem; color: #64748b; }

/* Kad melintang (Cari Hasil, Iklan Saya) */
.ap-hcard { display: flex; gap: .7rem; background: #fff; border: 1px solid #e8eee9; border-radius: 14px; padding: .55rem; margin-bottom: .6rem; box-shadow: 0 3px 10px rgba(15,41,26,.04); position: relative; }
.ap-hcard-img { position: relative; flex: 0 0 118px; height: 92px; border-radius: 10px; overflow: hidden; background: #e8f3ea; display: block; }
.ap-hcard-img img { width: 100%; height: 100%; object-fit: cover; }
.ap-hcard-img .hp-noimg { width: 100%; height: 100%; display: grid; place-items: center; color: #9fb7a6; font-size: 1.5rem; }
.ap-hcard-img .hp-badge { left: .35rem; top: .35rem; font-size: .64rem; padding: .12rem .45rem; }
.ap-hcard-body { flex: 1; min-width: 0; padding-right: 1.4rem; }
.ap-hcard-title { display: block; font-weight: 700; color: #0f172a; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-hcard-loc { font-size: .74rem; color: #64748b; margin: .05rem 0 .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-hcard-loc i { color: #ef4444; margin-right: .2rem; }
.ap-hcard .hp-card-meta { margin-bottom: 0; gap: .35rem; }
.ap-hcard .hp-meta b { font-size: .74rem; }
.ap-kebab { position: absolute; right: .25rem; top: .35rem; width: 32px; height: 32px; border: 0; background: transparent; color: #334155; border-radius: 8px; }
.ap-status { display: inline-block; font-size: .66rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; margin-left: .3rem; vertical-align: middle; }
.ap-status.aktif { background: #dcfce7; color: #15803d; }
.ap-status.tamat { background: #fee2e2; color: #b91c1c; }
.ap-status.tunggu { background: #fef3c7; color: #b45309; }

/* Senarai kategori */
.ap-cat { display: block; background: #fff; border: 1px solid #e8eee9; border-radius: 14px; overflow: hidden; margin-bottom: .75rem; box-shadow: 0 3px 10px rgba(15,41,26,.05); color: inherit; }
.ap-cat-img { position: relative; height: 92px; }
.ap-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.ap-cat-img span { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #0f172a; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.ap-cat-body { display: flex; align-items: center; padding: .6rem 1rem .7rem; }
.ap-cat-body strong { display: block; font-family: 'Poppins', sans-serif; font-size: 1.05rem; color: #0f172a; }
.ap-cat-body small { color: #64748b; font-size: .82rem; }
.ap-cat-body i { margin-left: auto; color: #334155; }

/* Butiran hasil */
.ap-gallery { position: relative; margin: -.85rem -.8rem .8rem; height: 230px; background: #e8f3ea; overflow: hidden; }
.ap-gallery-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ap-gallery-track::-webkit-scrollbar { display: none; }
.ap-gallery-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.ap-gallery .hp-badge { left: .8rem; top: .8rem; font-size: .76rem; padding: .2rem .65rem; }
.ap-gallery-count { position: absolute; right: .8rem; bottom: .7rem; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; }
.ap-title { font-size: 1.35rem; font-weight: 700; margin: 0; }
.ap-loc { color: #64748b; font-size: .86rem; margin: .15rem 0 .8rem; }
.ap-loc i { color: #ef4444; margin-right: .25rem; }
.ap-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: 1rem; }
.ap-tile { display: flex; align-items: center; gap: .55rem; background: #fff; border: 1px solid #e8eee9; border-radius: 12px; padding: .65rem .7rem; font-size: .74rem; color: #64748b; line-height: 1.25; }
.ap-tile i { font-size: 1.25rem; color: #0f7a37; }
.ap-tile b { display: block; color: #0f172a; font-size: .92rem; }
.ap-h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .5rem; }
.ap-table { background: #fff; border: 1px solid #e8eee9; border-radius: 12px; padding: .2rem .85rem; margin-bottom: 1rem; }
.ap-row { display: grid; grid-template-columns: 42% 58%; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid #f0f4f1; font-size: .84rem; }
.ap-row:last-child { border-bottom: 0; }
.ap-row span:first-child { color: #64748b; }
.ap-row span:last-child { color: #0f172a; font-weight: 500; word-break: break-word; }
.ap-seller { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid #e8eee9; border-radius: 12px; padding: .75rem .85rem; margin-bottom: 1rem; color: inherit; }
.ap-seller-av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #16a34a, #0b5d2a); color: #fff; font-weight: 700; font-size: 1.3rem; display: grid; place-items: center; flex: 0 0 52px; }
.ap-seller strong { display: block; color: #0f172a; font-size: 1rem; }
.ap-seller small { color: #64748b; }
.ap-seller > i { margin-left: auto; color: #334155; }
.ap-sticky-cta { position: sticky; bottom: 84px; z-index: 5; padding: .3rem 0 .2rem; }
.ap-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; border: 0; border-radius: 12px; background: #0f7a37; color: #fff !important; font-weight: 700; font-size: 1rem; padding: .85rem; box-shadow: 0 8px 18px rgba(15,122,55,.28); }
.ap-btn i { font-size: 1.2rem; }
.ap-btn.outline { background: #fff; color: #0f7a37 !important; border: 1.5px solid #0f7a37; box-shadow: none; }

/* Tab pil (Iklan Saya) */
.ap-tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.8rem .8rem; padding: 0 .8rem; }
.ap-tabs::-webkit-scrollbar { display: none; }
.ap-tab { flex: 0 0 auto; border: 1px solid #e2e8e4; background: #fff; color: #475569; border-radius: 10px; padding: .45rem .9rem; font-size: .8rem; font-weight: 600; }
.ap-tab.active { background: #0f7a37; border-color: #0f7a37; color: #fff; }

/* Akaun */
.ap-profile { display: flex; align-items: center; gap: .9rem; padding: .3rem .1rem 1rem; color: inherit; }
.ap-profile-av { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #16a34a, #0b5d2a); color: #fff; font-weight: 700; font-size: 1.6rem; display: grid; place-items: center; flex: 0 0 64px; }
.ap-profile strong { display: block; font-family: 'Poppins', sans-serif; font-size: 1.3rem; color: #0f172a; line-height: 1.15; }
.ap-profile .ap-credit { color: #ea580c; font-weight: 700; font-size: 1.1rem; }
.ap-profile > i { margin-left: auto; color: #334155; }
.ap-menu { background: #fff; border: 1px solid #e8eee9; border-radius: 14px; overflow: hidden; margin-bottom: .9rem; }
.ap-menu a, .ap-menu button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .78rem .95rem; border: 0; border-bottom: 1px solid #f0f4f1; background: #fff; color: #0f172a; font-size: .92rem; text-align: left; }
.ap-menu a:last-child, .ap-menu button:last-child { border-bottom: 0; }
.ap-menu a > i:first-child, .ap-menu button > i:first-child { width: 22px; text-align: center; color: #0f7a37; font-size: 1.05rem; }
.ap-menu .ap-chev { margin-left: auto; color: #94a3b8; font-size: .85rem; }
.ap-menu .ap-pill { margin-left: auto; }
.ap-menu .ap-pill + .ap-chev { margin-left: .5rem; }
.ap-menu .danger, .ap-menu .danger > i:first-child { color: #dc2626; }
.ap-count-badge { background: #ef4444; color: #fff; font-size: .7rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; padding: 0 5px; }

/* Permintaan pembeli */
.ap-reqs { background: #fff; border: 1px solid #e8eee9; border-radius: 14px; padding: 0 .85rem; }
.ap-req { display: grid; grid-template-columns: 42px 1fr auto 14px; gap: .65rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid #f0f4f1; color: inherit; }
.ap-req:last-child { border-bottom: 0; }
.ap-req-emoji { font-size: 1.75rem; text-align: center; }
.ap-req strong { display: block; color: #0f172a; font-size: .9rem; }
.ap-req small { display: block; color: #475569; font-size: .78rem; line-height: 1.3; }
.ap-req-time { color: #94a3b8; font-size: .72rem; white-space: nowrap; }
.ap-req > i { color: #94a3b8; font-size: .8rem; }

/* Tambah listing: langkah & jenis */
.ap-steps { display: flex; justify-content: space-between; position: relative; margin: .2rem .3rem 1.1rem; }
.ap-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 14px; height: 2px; background: #e2e8e4; }
.ap-step { position: relative; z-index: 1; flex: 1; text-align: center; font-size: .7rem; color: #94a3b8; font-weight: 600; }
.ap-step b { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto .3rem; border-radius: 50%; background: #e2e8e4; color: #64748b; font-size: .82rem; }
.ap-step.active { color: #0f172a; }
.ap-step.active b { background: #0f7a37; color: #fff; box-shadow: 0 0 0 4px rgba(15,122,55,.15); }
.ap-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: 1rem; }
.ap-type { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .85rem .3rem; border: 1.5px solid #e2e8e4; border-radius: 12px; background: #fff; color: #0f172a; font-size: .8rem; font-weight: 600; }
.ap-type i { font-size: 1.6rem; }
.ap-type.active { border-color: #16a34a; background: #eaf7ee; }
.ap-label { display: block; font-weight: 700; font-size: .86rem; color: #0f172a; margin: 0 0 .35rem; }
.ap-label .req { color: #dc2626; }
.ap-field { width: 100%; border: 1px solid #dfe7e2; border-radius: 10px; padding: .65rem .8rem; font-size: .9rem; background: #fff; outline: 0; margin-bottom: .9rem; }
.ap-field:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.ap-empty { background: #fff; border: 1px dashed #cfe3d4; border-radius: 14px; padding: 1.8rem 1rem; text-align: center; color: #64748b; font-size: .9rem; }
.ap-empty i { display: block; font-size: 2rem; color: #9fd3b0; margin-bottom: .5rem; }

.ap-bar-btn.is-saved { color: #ef4444; }
.ap-gallery-track > .hp-noimg { flex: 0 0 100%; height: 100%; display: grid !important; place-items: center; font-size: 3rem; color: #9fb7a6; }
.ap.ap-top { min-height: 0; padding-bottom: 0; }
.ap-cta-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem calc(.65rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e8eee9; box-shadow: 0 -6px 18px rgba(15,41,26,.08); }
.ap-cta-wrap .ap-sticky-cta { position: static; padding: 0; flex: 1; }
.ap-back { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #e2e8e4; background: #fff; color: #475569; font-size: 1.15rem; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
@media (max-width: 767.98px) { .pd-main { background: #f6f8f6; padding-bottom: 96px !important; } }