/* Trust & buyer tools: verification badge, market price, saved list, compare, visit booking, calculator. */
:root {
    --kh-navy: #101a33;
    --kh-muted: #6d7486;
    --kh-line: #e8ecf3;
    --kh-soft: #f7f9fc;
    --kh-green: #12804a;
    --kh-green-bg: #eaf7ef;
    --kh-amber: #a15c07;
    --kh-amber-bg: #fff4e0;
    --kh-red: #b42318;
    --kh-red-bg: #fdecea;
}

/* ---------- Verification badge ---------- */
.kh-verify {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.5;
}
.kh-verify small { font-weight: 500; opacity: .85; }
.kh-verify--ok { background: var(--kh-green-bg); color: var(--kh-green); }
.kh-verify--stale { background: var(--kh-amber-bg); color: var(--kh-amber); }
.kh-verify--none { background: var(--kh-soft); color: var(--kh-muted); border: 1px dashed var(--kh-line); }
.kh-verify--compact { padding: .25rem .6rem; font-size: .75rem; }
.kh-verify-link { display: inline-block; margin: .25rem 0 .75rem; text-decoration: none; }
.property-image { position: relative; }
.property-image .kh-verify { position: absolute; top: .6rem; right: .6rem; box-shadow: 0 6px 16px rgba(16, 26, 51, .15); }

/* ---------- Card tools (save / compare) ---------- */
.property-card-wrap { display: flex; flex-direction: column; min-width: 0; }
.property-card-wrap > .property-card { flex: 1; }
.property-card-tools,
.kh-detail-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.kh-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border: 1px solid var(--kh-line);
    border-radius: 10px;
    background: #fff;
    color: var(--kh-navy);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
.kh-tool-btn:hover { border-color: var(--kh-navy); }
.kh-tool-btn.is-active { background: var(--kh-navy); border-color: var(--kh-navy); color: #fff; }
.kh-tool-btn.is-active .fa-heart { font-weight: 900; color: #ff6b81; }
.kh-tool-btn:focus-visible { outline: 3px solid #93b4ff; outline-offset: 2px; }
.kh-share-btn .fab { font-size: 1.05rem; }
.kh-share-btn--more .fas { color: var(--kh-navy); }
.kh-share-btn { justify-content: center; min-width: 2.35rem; padding-inline: .55rem; }
.kh-share-group { display: inline-flex; gap: .35rem; margin-inline-start: auto; }
/* Labels collapse to icons as the row narrows, so it stays on one line; text stays for screen readers. */
.kh-detail-tools { container-type: inline-size; margin-bottom: 1.1rem; }
@container (max-width: 560px) {
    .kh-detail-tools .kh-alert-btn [data-label] {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
}
@container (max-width: 400px) {
    .kh-detail-tools [data-label] {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .kh-detail-tools .kh-tool-btn { min-width: 2.35rem; justify-content: center; padding-inline: .55rem; }
}
.kh-toast {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1.25rem;
    z-index: 1000;
    max-width: 26rem;
    margin-inline: auto;
    padding: .75rem 1rem;
    border-radius: 12px;
    background: var(--kh-navy);
    color: #fff;
    font-size: .9rem;
    text-align: center;
    overflow-wrap: anywhere;
    user-select: text;
    box-shadow: 0 10px 30px rgba(16, 26, 51, .25);
    transition: opacity .4s;
}
.kh-toast.is-hiding { opacity: 0; }

.property-card-wrap { position: relative; }
.property-card-share { position: absolute; top: 2.0rem; left: 1.0rem; display: flex; gap: .35rem; z-index: 2; }
.property-card-share .kh-share-btn {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 16px rgba(16, 26, 51, .15);
}
.kh-share-btn--whatsapp .fab { color: #25d366; }
.kh-share-btn--telegram .fab { color: #229ed9; }
.kh-share-btn--whatsapp:hover { border-color: #25d366; }
.kh-share-btn--telegram:hover { border-color: #229ed9; }

.navbar-saved { display: inline-flex; align-items: center; gap: .35rem; }
.navbar-saved__count {
    min-width: 1.4rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #ff6b81;
    color: #fff;
    font-size: .75rem;
    line-height: 1.4rem;
    text-align: center;
}

.kh-compare-bar {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 900;
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: 16px;
    background: var(--kh-navy);
    color: #fff;
    box-shadow: 0 18px 40px rgba(16, 26, 51, .3);
}
.kh-compare-bar[hidden] { display: none; }
.kh-compare-bar span { flex: 1; font-size: .9rem; }
.kh-compare-bar__go { padding: .45rem 1rem; border-radius: 10px; background: #f4b740; color: var(--kh-navy); font-weight: 800; text-decoration: none; }
.kh-compare-bar__go.is-disabled { pointer-events: none; opacity: .6; }
.kh-compare-bar__clear { border: 0; background: transparent; color: #cfd6e6; font: inherit; cursor: pointer; text-decoration: underline; }

/* ---------- Market price ---------- */
.kh-market {
    display: grid;
    gap: .3rem;
    margin-top: .75rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.8;
}
.kh-market strong { font-size: 1rem; }
.kh-market small { color: var(--kh-muted); }
.kh-market--below { background: var(--kh-green-bg); color: var(--kh-green); }
.kh-market--fair { background: #eef4ff; color: #1d4ed8; }
.kh-market--above { background: var(--kh-amber-bg); color: var(--kh-amber); }

/* ---------- Trust report ---------- */
.kh-trust,
.kh-buyer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.kh-section { margin-bottom: 1.5rem; }
.kh-buyer-actions:has(> article:only-child) { grid-template-columns: minmax(0, 1fr); }
.kh-trust .pd2-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.kh-trust__intro { color: var(--kh-muted); font-size: .92rem; line-height: 1.9; margin: .25rem 0 1rem; }
.kh-trust__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.kh-trust__list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .6rem;
    padding: .65rem .8rem;
    border-radius: 12px;
    background: var(--kh-soft);
    font-size: .92rem;
}
.kh-trust__list li.is-done i { color: var(--kh-green); }
.kh-trust__list li.is-pending { color: var(--kh-muted); }
.kh-trust__list li.is-pending i { color: #c3cad8; }
.kh-trust__list small { color: var(--kh-muted); direction: ltr; }
.kh-trust__always {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    background: #f3f6fb;
    font-size: .9rem;
    line-height: 1.9;
}
.kh-trust__always ul { margin: .4rem 0 0; padding-inline-start: 1.2rem; }

.kh-builder-record {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0;
    padding: .6rem .8rem;
    border-radius: 12px;
    background: var(--kh-soft);
    font-size: .88rem;
}

/* ---------- Forms (visit, alert) ---------- */
.kh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.kh-form label { display: grid; gap: .35rem; font-size: .88rem; color: var(--kh-navy); font-weight: 600; }
.kh-form input,
.kh-form select,
.kh-form textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--kh-line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-weight: 400;
}
.kh-form input:focus,
.kh-form select:focus,
.kh-form textarea:focus { outline: 2px solid #93b4ff; border-color: transparent; }
.kh-form__full { grid-column: 1 / -1; }
.kh-form .pd2-btn { min-height: 48px; cursor: pointer; font: inherit; font-weight: 800; }
.kh-form .pd2-btn-primary { border: 0; }

/* Progress and score cards only render with real data; let the remaining cards fill the row. */
.pd2-three:has(> article:only-child) { grid-template-columns: minmax(0, 1fr); }
.pd2-three:has(> article:nth-child(2):last-child) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 1100px) {
    .pd2-three:has(> article:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
}
.kh-error { color: var(--kh-red); font-weight: 500; }
.kh-flash { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: 12px; background: var(--kh-green-bg); color: var(--kh-green); font-weight: 600; }

/* ---------- Installment calculator ---------- */
.kh-calc__inputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.kh-calc__inputs label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--kh-navy); }
.kh-calc__inputs input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--kh-line); border-radius: 10px; font: inherit; }
.kh-calc__result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0 0 .75rem; }
.kh-calc__result div { padding: .9rem 1rem; border-radius: 14px; background: var(--kh-soft); }
.kh-calc__result dt { font-size: .82rem; color: var(--kh-muted); }
.kh-calc__result dd { margin: .3rem 0 0; font-weight: 800; color: var(--kh-navy); }
.kh-calc__error { color: var(--kh-red); font-size: .88rem; }
.bd-layout__main .kh-calc { margin-bottom: 1.25rem; }

/* ---------- Building progress photos ---------- */
.kh-progress-photos__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.kh-progress-photos__list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.kh-progress-photos__list div { display: grid; gap: .15rem; margin-top: .45rem; font-size: .85rem; }
.kh-progress-photos__list span { color: var(--kh-muted); }
.kh-progress-photos__list p { margin: 0; color: var(--kh-muted); }

/* ---------- Builder trust ---------- */
.kh-builder-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; margin-bottom: 1rem; }
.kh-builder-trust__card { padding: 1.4rem; border: 1px solid var(--kh-line); border-radius: 18px; background: #fff; }
.kh-builder-trust__card h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: 1.15rem; color: var(--kh-navy); }
.kh-builder-trust__card > p { color: var(--kh-muted); line-height: 1.9; font-size: .92rem; }
.kh-builder-trust__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; margin: 0 0 .75rem; }
.kh-builder-trust__stats div { padding: .8rem; border-radius: 12px; background: var(--kh-soft); }
.kh-builder-trust__stats dt { font-size: .8rem; color: var(--kh-muted); }
.kh-builder-trust__stats dd { margin: .25rem 0 0; font-size: 1.3rem; font-weight: 800; color: var(--kh-navy); }
.kh-builder-trust__score strong { font-size: 1.6rem; color: var(--kh-navy); }
.kh-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.kh-reviews li { padding: .8rem .9rem; border-radius: 12px; background: var(--kh-soft); }
.kh-reviews li p { margin: .35rem 0 0; line-height: 1.8; font-size: .9rem; }
.kh-reviews li small { color: var(--kh-muted); }
.kh-reviews__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kh-reviews__stars { color: #f4b740; letter-spacing: 1px; }
.kh-reviews__stars em { color: #d7dce6; font-style: normal; }
.kh-reviews__verified { font-size: .78rem; color: var(--kh-green); background: var(--kh-green-bg); padding: .1rem .5rem; border-radius: 999px; }

/* ---------- Favorites & compare pages ---------- */
.kh-empty { display: grid; justify-items: center; gap: 1rem; padding: 3rem 1rem; text-align: center; color: var(--kh-muted); }
.kh-empty i { font-size: 2.5rem; color: #c3cad8; }
.kh-empty .pd2-btn { min-height: 48px; padding: 0 1.5rem; text-decoration: none; }
.kh-compare { overflow-x: auto; border: 1px solid var(--kh-line); border-radius: 16px; background: #fff; }
.kh-compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .92rem; }
.kh-compare th,
.kh-compare td { padding: .8rem; border-bottom: 1px solid var(--kh-line); text-align: right; vertical-align: top; }
.kh-compare tbody th { width: 160px; color: var(--kh-muted); font-weight: 600; background: var(--kh-soft); }
.kh-compare thead th { vertical-align: bottom; }
.kh-compare thead a { display: grid; gap: .5rem; color: var(--kh-navy); text-decoration: none; font-weight: 800; }
.kh-compare thead img { width: 100%; max-width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.kh-compare thead .kh-tool-btn { margin-top: .5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 860px) {
    .kh-trust,
    .kh-buyer-actions,
    .kh-builder-trust { grid-template-columns: minmax(0, 1fr); }
    .kh-calc__inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .kh-form,
    .kh-calc__result { grid-template-columns: minmax(0, 1fr); }
    .kh-trust__list li { grid-template-columns: auto 1fr; }
    .kh-trust__list small { grid-column: 2; }
}