/* AbayaFemme Halal Guide. Flat surfaces, square corners, theme colours when available. */
.afh {
	--afh-ink: var(--af-ink, #1d1b19);
	--afh-soft: var(--af-ink-soft, #5f5a55);
	--afh-line: var(--af-line, #e3ddd5);
	--afh-paper: var(--af-paper, #ffffff);
	--afh-tint: var(--af-tint, #f6f2ec);
	--afh-accent: var(--af-accent, #6b4f3a);
	--afh-ok: #2f6b3f;
	color: var(--afh-ink);
	margin: 2rem 0;
	font-size: 1rem;
}
.afh :is(h1, h2, h3, h4, label, legend, button) { text-transform: none; letter-spacing: normal; }
.afh li { margin-bottom: 0; }
.afh button, .afh .afh-btn { font: inherit; cursor: pointer; }

.afh-bar { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.afh-count { margin: 0; color: var(--afh-soft); }
.afh-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.afh-chip, .afh-near {
	border: 1px solid var(--afh-line); background: var(--afh-paper); color: var(--afh-ink);
	padding: .45rem .9rem; border-radius: 0; min-height: 44px;
}
.afh-chip.is-on { background: var(--afh-ink); color: var(--afh-paper); border-color: var(--afh-ink); }
.afh-near { border-color: var(--afh-accent); color: var(--afh-accent); }
.afh-check { display: inline-flex; gap: .4rem; align-items: center; min-height: 44px; }

.afh-map { height: 420px; border: 1px solid var(--afh-line); margin-bottom: 1.25rem; background: var(--afh-tint); }
.afh-map--hub { height: 480px; }

.afh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--afh-line); }
.afh-place { padding: 1rem 0; border-bottom: 1px solid var(--afh-line); }
.afh-place.is-focus { background: var(--afh-tint); }
.afh-place > p { margin: .2rem 0; }
.afh-name { font-size: 1.1rem; margin: 0 0 .25rem; }
.afh-meta, .afh-address, .afh-hours, .afh-confirmed { color: var(--afh-soft); font-size: .95rem; }
.afh-status { display: inline-block; font-size: .85rem; padding: .1rem .5rem; border: 1px solid var(--afh-line); }
.afh-status--certified { border-color: var(--afh-ok); color: var(--afh-ok); }
.afh-links a { margin-right: 1rem; color: var(--afh-accent); text-decoration: underline; text-underline-offset: 2px; }
.afh-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem !important; }
.afh-actions button { border: 1px solid var(--afh-line); background: var(--afh-paper); color: var(--afh-ink); padding: .35rem .7rem; min-height: 40px; border-radius: 0; }
.afh-msg { display: block; width: 100%; font-size: .9rem; color: var(--afh-ok); }

.afh-contribute { margin: 1.5rem 0 1rem; }
.afh-btn { display: inline-block; background: var(--afh-ink); color: var(--afh-paper); border: 1px solid var(--afh-ink); padding: .6rem 1.1rem; min-height: 44px; border-radius: 0; text-decoration: none; }
.afh-btn--ghost { background: var(--afh-paper); color: var(--afh-ink); }
.afh-note, .afh-credit { font-size: .85rem; color: var(--afh-soft); margin: .5rem 0; }

.afh-dialog { border: 1px solid var(--afh-line); padding: 1.5rem; max-width: 34rem; width: calc(100% - 32px); border-radius: 0; background: var(--afh-paper); color: var(--afh-ink); }
.afh-dialog::backdrop { background: rgba(0,0,0,.45); }
.afh-dialog h3 { margin-top: 0; text-transform: none; }
.afh-dialog label { display: grid; gap: .25rem; margin-bottom: .75rem; font-size: .95rem; text-transform: none; }
.afh-dialog input, .afh-dialog select, .afh-dialog textarea { width: 100%; border: 1px solid var(--afh-line); padding: .5rem; border-radius: 0; font: inherit; background: var(--afh-paper); color: var(--afh-ink); }
.afh-dialog__legal { font-size: .8rem; color: var(--afh-soft); margin: .5rem 0 0; }
.afh-dialog__actions { display: flex; gap: .5rem; justify-content: flex-end; margin: 1rem 0 0; flex-wrap: wrap; }

.afh-search { display: grid; gap: .3rem; max-width: 28rem; margin-bottom: 1rem; }
.afh-search input { border: 1px solid var(--afh-line); padding: .6rem; min-height: 44px; border-radius: 0; }
.afh-country h2 { font-size: 1.3rem; margin: 1.5rem 0 .5rem; text-transform: none; }
.afh-cities { list-style: none; margin: 0; padding: 0; columns: 3 14rem; column-gap: 2rem; }
.afh-cities li { break-inside: avoid; padding: .25rem 0; }
.afh-cities span { color: var(--afh-soft); font-size: .85rem; }

@media (max-width: 600px) {
	.afh-map { height: 320px; }
	.afh-bar { flex-direction: column; align-items: flex-start; }
}