/* Malaysia Home Finder buyer tools (round 4): matcher, shortlist, compare, viewing request. Mobile first. */
.mhf-tools-matcher { padding: 20px 16px; margin: 24px 0; box-shadow: 0 18px 40px -28px rgba(8, 50, 58, .45); }
.mhf-tools-matcher.is-compact { padding: 16px 14px; }
.mhf-tools-title { font-size: 1.6rem; line-height: 1.2; margin: 6px 0 4px; }
.mhf-tools-matcher.is-compact .mhf-tools-title { font-size: 1.25rem; }
.mhf-tools-intro { color: var(--color-muted, #5b6b6f); font-size: .95rem; margin: 0 0 14px; line-height: 1.5; }
.mhf-tools-of { font-weight: 500; font-size: .75rem; color: var(--color-muted, #5b6b6f); margin-left: 4px; }
.mhf-tools-progress { height: 4px; border-radius: 4px; background: var(--color-primary-50, #eef6f6); margin: 6px 0 16px; overflow: hidden; }
.mhf-tools-progress span { display: block; height: 100%; background: var(--color-accent, #e2694a); transition: width .25s ease; }
.mhf-tools-step { margin-bottom: 12px; }
.mhf-tools-opts { display: grid; grid-template-columns: 1fr; gap: 8px; }
.mhf-tools-opts.is-row { grid-template-columns: repeat(3, 1fr); }
.mhf-tools-opt { appearance: none; border: 1.5px solid var(--color-line, #e6dccf); background: #fff; color: var(--color-ink, #13262b); border-radius: 14px; padding: 11px 14px; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.3; text-align: left; cursor: pointer; min-height: 46px; transition: border-color .15s, background-color .15s; }
.mhf-tools-opts.is-row .mhf-tools-opt { text-align: center; }
.mhf-tools-opt:hover { border-color: var(--color-primary-500, #1f7a80); }
.mhf-tools-opt.is-on { border-color: var(--color-primary-700, #0e4f5c); background: var(--color-primary-700, #0e4f5c); color: #fff; }
.mhf-tools-opt.is-on .mhf-tools-of { color: rgba(255, 255, 255, .8); }
.mhf-tools-opt:focus-visible, .mhf-tools-link:focus-visible, .mhf-tools-bar:focus-visible { outline: 2px solid var(--color-accent, #e2694a); outline-offset: 2px; }
.mhf-tools-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.mhf-tools-go { padding: .7rem 1.1rem; }
.mhf-tools-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--color-primary-600, #146570); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mhf-tools-link.is-small { font-size: .78rem; display: block; margin-top: 4px; }
.mhf-tools-link.is-light { color: #fff; margin-left: 8px; }
.mhf-tools-rhead { font-weight: 700; font-size: 1.1rem; margin: 4px 0 10px; }
.mhf-tools-empty { background: var(--color-sand, #f6efe6); border-radius: 12px; padding: 10px 12px; font-size: .92rem; margin: 0 0 12px; }
.mhf-tools-results { display: grid; gap: 12px; }
.mhf-tools-res { display: grid; grid-template-columns: 1fr; border: 1px solid var(--color-line, #e6dccf); border-radius: 14px; overflow: hidden; background: #fff; }
.mhf-tools-thumb img { display: block; width: 100%; height: 150px; object-fit: cover; }
.mhf-tools-rbody { padding: 12px 14px; }
.mhf-tools-rname { font-size: 1.1rem; line-height: 1.25; margin: 0; }
.mhf-tools-rname a { color: var(--color-ink, #13262b); text-decoration: none; }
.mhf-tools-rzh { display: block; font-size: .85rem; color: var(--color-muted, #5b6b6f); margin: 2px 0 0; }
.mhf-tools-facts { list-style: none; margin: 8px 0 0; padding: 0; font-size: .88rem; line-height: 1.45; display: grid; gap: 3px; }
.mhf-tools-facts strong { color: var(--color-primary-700, #0e4f5c); }
.mhf-tools-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.mhf-tools-tag { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; background: var(--color-sand, #f6efe6); color: var(--color-ink, #13262b); }
.mhf-tools-tag.is-close { background: #fde6dd; color: #8a3a22; }
.mhf-tools-ract { display: flex; gap: 16px; margin-top: 10px; font-size: .9rem; }
.mhf-tools-cta { margin-top: 16px; text-align: center; }
.mhf-tools-cta.is-left { text-align: left; }
.mhf-tools-cta .mhf-btn-wa { width: 100%; max-width: 420px; }
.mhf-tools-cta .mhf-btn-wa.is-dim { opacity: .5; }
.mhf-tools-promise { font-size: .85rem; color: var(--color-muted, #5b6b6f); margin: 8px 0 0; }
.mhf-tools-sec { font-size: .9rem; margin: 10px 0 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mhf-tools-cta.is-left .mhf-tools-sec { justify-content: flex-start; }
.mhf-tools-note { font-size: .78rem; color: var(--color-muted, #5b6b6f); margin: 10px 0 0; line-height: 1.5; }

/* Heart: off/on labels */
.mhf-tools-heart .mhf-tools-on, .mhf-tools-heart-s .mhf-tools-on { display: none; }
.mhf-tools-heart.is-on .mhf-tools-off, .mhf-tools-heart-s.is-on .mhf-tools-off { display: none; }
.mhf-tools-heart.is-on .mhf-tools-on, .mhf-tools-heart-s.is-on .mhf-tools-on { display: inline; }
.mhf-tools-heart { cursor: pointer; font-family: inherit; }
.mhf-tools-heart.is-on { background: #fde6dd; border-color: var(--color-accent, #e2694a); color: #8a3a22; }

/* Floating bar (bottom-left, clear of the floating WhatsApp button on the right) */
.mhf-tools-bar { position: fixed; left: 12px; bottom: calc(var(--mhf-tools-bottom, 16px) + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: calc(100% - 100px); display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 16px; background: var(--color-primary-700, #0e4f5c); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.2; box-shadow: 0 10px 24px -10px rgba(8, 50, 58, .7); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhf-tools-bar > span[aria-hidden] { color: #ffb4a0; }
.mhf-tools-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--mhf-tools-bottom, 16px) + 60px + env(safe-area-inset-bottom, 0px)); z-index: 70; background: var(--color-ink, #13262b); color: #fff; border-radius: 12px; padding: 10px 14px; font-size: .9rem; max-width: calc(100% - 32px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }

/* Drawer / dialog */
.mhf-tools-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(8, 50, 58, .45); display: flex; align-items: flex-end; justify-content: center; }
.mhf-tools-drawer { background: var(--color-shell, #fffdf9); width: 100%; max-width: 980px; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
.mhf-tools-drawer.is-narrow { max-width: 560px; }
.mhf-tools-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mhf-tools-dtitle { font-weight: 700; font-size: 1.2rem; margin: 0; }
.mhf-tools-x { appearance: none; border: 0; background: var(--color-primary-50, #eef6f6); width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: var(--color-ink, #13262b); }
.mhf-tools-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-line, #e6dccf); border-radius: 14px; background: #fff; }
.mhf-tools-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 520px; font-size: .86rem; line-height: 1.4; }
.mhf-tools-table th, .mhf-tools-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-line, #e6dccf); vertical-align: top; text-align: left; }
.mhf-tools-table thead th { background: var(--color-primary-50, #eef6f6); min-width: 140px; }
.mhf-tools-table thead th a { color: var(--color-ink, #13262b); font-weight: 700; text-decoration: none; }
.mhf-tools-table tbody th { position: sticky; left: 0; background: #fff; font-weight: 600; color: var(--color-muted, #5b6b6f); width: 110px; min-width: 96px; }
.mhf-tools-table thead th:first-child { position: sticky; left: 0; z-index: 1; }
.mhf-tools-table tr:last-child th, .mhf-tools-table tr:last-child td { border-bottom: 0; }
.mhf-tools-cthumb { display: block; width: 100%; max-width: 220px; height: 96px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.mhf-tools-table .mhf-tools-heart { margin-top: 6px; padding: .35rem .8rem; font-size: .78rem; }
.mhf-tools-drawer .mhf-chipset { margin-bottom: 14px; }
.mhf-tools-root .sr-only, .mhf-tools-table .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 640px) {
	.mhf-tools-matcher { padding: 26px 28px; }
	.mhf-tools-opts { grid-template-columns: 1fr 1fr; }
	.mhf-tools-opts.is-row { grid-template-columns: repeat(6, 1fr); }
	.mhf-tools-drawer.is-narrow .mhf-tools-opts.is-row { grid-template-columns: repeat(2, 1fr); }
	.mhf-tools-res { grid-template-columns: 180px 1fr; }
	.mhf-tools-thumb img { height: 100%; min-height: 150px; }
	.mhf-tools-matcher.is-compact .mhf-tools-res { grid-template-columns: 1fr; }
	.mhf-tools-overlay { align-items: center; padding: 24px; }
	.mhf-tools-drawer { border-radius: 18px; padding: 20px 22px 24px; }
}
@media (min-width: 1024px) {
	.mhf-tools-matcher:not(.is-compact) .mhf-tools-results { grid-template-columns: repeat(3, 1fr); }
	.mhf-tools-matcher:not(.is-compact) .mhf-tools-res { grid-template-columns: 1fr; }
	.mhf-tools-matcher:not(.is-compact) .mhf-tools-thumb img { height: 160px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mhf-tools-progress span, .mhf-tools-opt { transition: none; }
}

/* Integration (round 4): on phones the wa.php sticky bar (66px, z 9990) sits at the bottom edge.
   Lift the shortlist bar and toast above it (same 76px lift wa.css gives the Click-to-Chat button,
   which stays on the right; the shortlist bar stays on the left, max-width 100% - 100px).
   The compare drawer is a modal: put it above the sticky bar and the floating button. */
.mhf-tools-bar, .mhf-tools-toast { transition: bottom .25s ease; }
@media (max-width: 1023.98px) {
	/* --mhf-wa-bar-h is set by wa.js and already includes the safe-area inset; the bar's own calc adds the inset again, so subtract nothing and accept the extra gap. */
	body.mhf-wa-bar-on { --mhf-tools-bottom: calc(var(--mhf-wa-bar-h, 66px) + 10px); }
}
.mhf-tools-overlay { z-index: 2147483000; }