/* Agen Finder v3.1.0 (perbaikan kompatibilitas tema) — scope semua aturan agar tidak mengganggu tema WordPress */
.af-wrap {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.af-wrap *, .af-wrap *::before, .af-wrap *::after { box-sizing: border-box; }

/* Layout filter — dibuat lebih keras agar tidak bentrok dengan CSS tema */
.af-wrap .af-filters {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) clamp(180px, 35%, 280px);
	grid-template-areas:
		"search wilayah"
		"tags tags";
	align-items: start;
	justify-items: stretch;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	margin: 0 0 14px;
}
.af-wrap .af-filters > * {
	min-width: 0;
	max-width: 100%;
	margin: 0;
}
.af-wrap .af-search-field {
	grid-area: search;
	width: 100%;
	max-width: 100%;
}
.af-wrap .af-region-field {
	grid-area: wilayah;
	width: 100%;
	max-width: 100%;
}
.af-wrap .af-search-field > input.af-search,
.af-wrap .af-region-field > select.af-wil {
	/* Theme WordPress (termasuk normalize.css) bisa memaksa
	   input[type="search"] ke content-box. Jika lebar 100%, padding 14px
	   di kedua sisi membuat input melebar 30px ke luar grid. */
	-webkit-box-sizing: border-box !important;
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid #d3dbe5 !important;
	border-radius: 10px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	color: #1f2937 !important;
	background-color: #fff !important;
	box-shadow: none !important;
	vertical-align: middle !important;
}
.af-wrap .af-region-field > select.af-wil {
	/* Tema Woodmart menambahkan ikon panah lewat background-image.
	   Jika native select juga memakai appearance:auto, dua panah muncul.
	   Matikan kedua sumber tersebut, lalu gambar SATU panah di wrapper. */
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: none !important;
	padding-right: 42px !important;
	cursor: pointer;
}
.af-wrap .af-filters .af-region-field {
	position: relative;
}
.af-wrap .af-filters .af-region-field::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 19px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #586475;
	border-bottom: 2px solid #586475;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.af-wrap .af-search:focus,
.af-wrap .af-wil:focus {
	outline: 2px solid #1d4ed8;
	outline-offset: 2px;
}
.af-wrap .af-wil:disabled { background: #f4f5f7; color: #626c7a; cursor: not-allowed; }
.af-wrap .af-category-row {
	grid-area: tags;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.af-wrap .af-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 7px 16px;
	border: 1px solid #d3dbe5;
	border-radius: 999px;
	background: #fff;
	color: #374151;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: color .15s, background-color .15s, border-color .15s;
}
.af-wrap .af-chip:hover { border-color: #1d4ed8; color: #1d4ed8; background: #eff6ff; }
.af-wrap .af-chip.is-active, .af-wrap .af-chip[aria-pressed="true"] {
	background: #1d4ed8;
	color: #fff;
	border-color: #1d4ed8;
}
.af-wrap .af-chip.is-active:hover { background: #1e40af; color: #fff; }
.af-wrap .af-chip:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px; }
.af-wrap .af-summary { margin: 0 0 14px; color: #667085; font-size: 13px; line-height: 1.5; min-height: 1.5em; }

.af-wrap .af-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; transition: opacity .15s; }
.af-wrap .af-list.af-loading { opacity: .55; }
.af-wrap .af-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid #e2e4e7; border-radius: 12px; background: #fff; }
.af-wrap .af-thumb img { width: 100%; height: auto; border-radius: 8px; display: block; }
.af-wrap .af-title { margin: 0; font-size: 18px; line-height: 1.3; }
.af-wrap .af-title a { text-decoration: none; color: inherit; }
.af-wrap .af-addr { margin: 0; color: #50575e; font-size: 14px; line-height: 1.5; }
.af-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.af-btn { display: inline-block; padding: 8px 14px; border: 1px solid #1d4ed8; border-radius: 999px; color: #1d4ed8; font-size: 14px; text-decoration: none; line-height: 1.2; }
.af-btn:hover { background: #1d4ed8; color: #fff; }
.af-btn.af-wa { border-color: #16a34a; color: #16a34a; }
.af-btn.af-wa:hover { background: #16a34a; color: #fff; }
.af-wrap .af-empty { grid-column: 1 / -1; text-align: center; color: #50575e; padding: 24px 0; }
.af-wrap .af-pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 20px; }
.af-wrap .af-pagebtn { width: 40px; height: 40px; padding: 0; border: 1px solid #ccd0d4; border-radius: 50%; background: #fff; color: #374151; font: inherit; font-size: 20px; cursor: pointer; }
.af-wrap .af-pagebtn:disabled { opacity: .4; cursor: not-allowed; }
.af-wrap .af-pageinfo { font-size: 15px; }

/* Halaman single — tidak bergantung pada layout filter */
.af-single { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.af-map { width: 100%; height: 360px; border-radius: 12px; z-index: 0; }
.af-back { align-self: flex-start; color: #1d4ed8; font-weight: 600; text-decoration: none; }
.af-back:hover { text-decoration: underline; }
.af-badge { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; }
.af-badge-distributor { background: #e8f0fe; color: #1d4ed8; }
.af-badge-agen { background: #e6f6ec; color: #15803d; }
.af-badge-ritel { background: #fff1e0; color: #b45309; }

/* Mobile: row 1 Wilayah; row 2 Search; row 3 chips */
@media (max-width: 640px) {
	.af-wrap .af-filters {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"wilayah"
			"search"
			"tags";
		gap: 10px;
		justify-items: center;
	}
	.af-wrap .af-search-field,
	.af-wrap .af-region-field,
	.af-wrap .af-category-row {
		width: 100%;
		max-width: 100%;
		justify-self: center;
	}
	.af-wrap .af-category-row {
		justify-content: center;
	}
	.af-wrap .af-chip { padding: 7px 14px; }
	.af-map { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
	.af-wrap .af-chip, .af-wrap .af-list { transition: none; }
}