/* RERA, developers and apartment pages: shared building blocks in the original
   verified.realestate theme (Gordita, ink #1a1a1a, one orange accent, white cards
   with a hairline on all four sides and a soft shadow). Used by the RERA list and
   detail blades, /developers and the apartment compare page. */
:root {
    --vre-ink: #1a1a1a;
    --vre-muted: #6b625b;
    --vre-soft: #8a817a;
    --vre-line: #E9E2DA;
    --vre-line-warm: #F2C9B3;
    --vre-sand: #FBF7F2;
    --vre-cream: #F6EFE7;
    --vre-orange: #FF6725;
    --vre-orange-wash: #FFF3EC;
    --vre-shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 6px 20px rgba(60, 40, 20, .06);
    --vre-shadow-hover: 0 2px 4px rgba(60, 40, 20, .06), 0 12px 32px rgba(60, 40, 20, .10);
}

.vre-card .sv-ico, .vre-head .sv-ico, .vre-pill .sv-ico, .vre-btn .sv-ico, .vre-seg .sv-ico,
.vre-row .sv-ico, .vre-promo .sv-ico, .vre-tile .sv-ico, .vre-dev .sv-ico, .vre-map-line .sv-ico,
.vre-empty .sv-ico, .vre-filters .sv-ico {
    width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle;
}

/* Card */
.vre-card {
    background: #fff;
    border: 1px solid var(--vre-line);
    border-radius: 20px;
    box-shadow: var(--vre-shadow);
    padding: 24px 26px;
    margin-bottom: 24px;
    font-family: "Gordita", sans-serif;
    color: var(--vre-ink);
}
.vre-card-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--vre-ink);
    margin: 0 0 18px;
}
.vre-card-title .vre-ico-tile { width: 34px; height: 34px; }
.vre-card-title .vre-ico-tile .sv-ico { width: 18px; height: 18px; }
.vre-card-title .vre-count { margin-left: auto; font-size: 13px; color: var(--vre-muted); font-weight: 400; }
.vre-card-sub { font-size: 14px; color: var(--vre-muted); margin: -10px 0 16px; line-height: 1.55; }

.vre-ico-tile {
    width: 44px; height: 44px; flex: none;
    border-radius: 12px; border: 1px solid var(--vre-line); background: var(--vre-cream);
    display: inline-flex; align-items: center; justify-content: center; color: var(--vre-ink);
}
.vre-ico-tile .sv-ico { width: 22px; height: 22px; }

/* Pills */
.vre-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--vre-line); background: var(--vre-sand);
    font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--vre-ink);
    white-space: nowrap;
}
.vre-pill .sv-ico { width: 14px; height: 14px; }
.vre-pill.is-success { background: #EDF7F0; border-color: #CFE7D7; color: #1F6B3A; }
.vre-pill.is-warning { background: #FFF6E5; border-color: #F1DDB4; color: #835400; }
.vre-pill.is-danger { background: #FDEFEF; border-color: #F2D0D0; color: #9B2C2C; }
.vre-pill.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; letter-spacing: 0; }

/* Buttons */
.vre-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px; border-radius: 999px;
    border: 1px solid var(--vre-line); background: #fff; color: var(--vre-ink);
    font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    white-space: nowrap;
}
.vre-btn:hover, .vre-btn:focus-visible { border-color: var(--vre-line-warm); background: var(--vre-sand); color: var(--vre-ink); box-shadow: var(--vre-shadow); text-decoration: none; }
.vre-btn.is-primary { background: var(--vre-orange); border-color: var(--vre-orange); color: #fff; }
.vre-btn.is-primary:hover, .vre-btn.is-primary:focus-visible { background: #F25A18; border-color: #F25A18; color: #fff; }
.vre-btn.is-sm { padding: 6px 14px; font-size: 13px; }
.vre-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Segmented filter */
.vre-seg {
    display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
    border: 1px solid var(--vre-line); border-radius: 999px; background: var(--vre-sand);
}
.vre-seg a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 500; color: var(--vre-ink); text-decoration: none; white-space: nowrap;
    transition: background-color .2s ease;
}
.vre-seg a .sv-ico { width: 15px; height: 15px; }
.vre-seg a:hover { background: #fff; color: var(--vre-ink); }
.vre-seg a.is-active { background: var(--vre-orange); color: #fff; }
.vre-seg .vre-seg-count { font-size: 12px; opacity: .75; font-weight: 400; }

/* Results card head (title + filter) */
.vre-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.vre-results-head h4 { margin: 0; }

/* Result cells used inside list tables */
.vre-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--vre-ink); white-space: nowrap; text-decoration: none; }
a.vre-id:hover { color: var(--vre-orange); }
.vre-name { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--vre-ink); text-decoration: none; }
a.vre-name:hover { color: var(--vre-orange); }
.vre-sub {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; line-height: 1.5; color: var(--vre-muted); margin-top: 2px;
}
.vre-nowrap { white-space: nowrap; }

/* Detail page header */
.vre-head {
    background: #fff; border: 1px solid var(--vre-line); border-radius: 20px; box-shadow: var(--vre-shadow);
    padding: 26px 28px; margin-bottom: 24px; font-family: "Gordita", sans-serif;
    display: flex; gap: 18px; align-items: flex-start;
}
.vre-head-body { min-width: 0; flex: 1; }
.vre-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--vre-muted); margin-bottom: 6px; }
.vre-title { font-size: 26px; line-height: 1.3; font-weight: 500; color: var(--vre-ink); margin: 0 0 10px; overflow-wrap: anywhere; }
.vre-meta { font-size: 14px; color: var(--vre-muted); line-height: 1.6; margin: 0 0 12px; }
.vre-head-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vre-head-actions { margin-top: 16px; }

/* Definition list */
.vre-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 0; }
.vre-dl.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vre-dl > div { min-width: 0; }
.vre-dl dt { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--vre-muted); margin: 0 0 4px; }
.vre-dl dd { font-size: 15px; line-height: 1.5; color: var(--vre-ink); margin: 0; overflow-wrap: anywhere; }
.vre-dl .is-wide { grid-column: 1 / -1; }

/* Stat tiles */
.vre-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vre-tile { background: #fff; border: 1px solid var(--vre-line); border-radius: 16px; padding: 16px; min-width: 0; }
.vre-tile .vre-tile-label { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--vre-muted); margin-bottom: 6px; }
.vre-tile .vre-tile-value { font-size: 16px; font-weight: 500; color: var(--vre-ink); overflow-wrap: anywhere; }

/* Rows split by neutral dividers */
.vre-rows { list-style: none; margin: 0; padding: 0; }
.vre-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid #F0EAE3; text-decoration: none; color: var(--vre-ink); }
.vre-rows > li:first-child .vre-row, .vre-rows > .vre-row:first-child { border-top: 0; padding-top: 4px; }
a.vre-row:hover .vre-row-name { color: var(--vre-orange); }
.vre-row-main { min-width: 0; flex: 1; }
.vre-row-name { font-size: 15px; font-weight: 500; color: var(--vre-ink); line-height: 1.4; }
.vre-row-sub { font-size: 13px; color: var(--vre-muted); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vre-row-end { flex: none; display: flex; align-items: center; gap: 10px; }
.vre-row .vre-ico-tile { width: 40px; height: 40px; }
.vre-row .vre-ico-tile .sv-ico { width: 20px; height: 20px; }

/* Cream inset notice */
.vre-inset { background: var(--vre-sand); border: 1px solid var(--vre-line); border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.6; color: var(--vre-ink); }
.vre-inset.is-danger { background: #FDF4F4; border-color: #F2D0D0; }
.vre-inset.is-success { background: #F3FAF5; border-color: #D5EBDC; }
.vre-note-meta { font-size: 13px; color: var(--vre-muted); margin-top: 12px; }

/* Address line shown instead of an empty map */
.vre-map-line { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--vre-ink); }
.vre-map-line .sv-ico { margin-top: 2px; color: var(--vre-muted); }
.vre-map-line a { color: var(--vre-orange); font-weight: 500; white-space: nowrap; }
.vre-map-frame { border: 1px solid var(--vre-line); border-radius: 16px; overflow: hidden; height: 300px; margin-top: 14px; }
.vre-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Quiet promo */
.vre-promo {
    background: #fff; border: 1px solid var(--vre-line); border-radius: 20px; box-shadow: var(--vre-shadow);
    padding: 24px 26px; margin-bottom: 24px; display: flex; align-items: center; gap: 20px; font-family: "Gordita", sans-serif;
}
.vre-promo-body { flex: 1; min-width: 0; }
.vre-promo h3 { font-size: 20px; font-weight: 500; color: var(--vre-ink); margin: 0 0 6px; line-height: 1.35; }
.vre-promo p { font-size: 14px; color: var(--vre-muted); margin: 0; line-height: 1.6; }

/* Filter pills with counts (agents, cases) */
.vre-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.vre-filters a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; border: 1px solid var(--vre-line); background: #fff;
    font-size: 14px; font-weight: 500; color: var(--vre-ink); text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.vre-filters a:hover { border-color: var(--vre-line-warm); background: var(--vre-sand); box-shadow: var(--vre-shadow); color: var(--vre-ink); }
.vre-filters a .vre-filter-count { font-size: 12px; font-weight: 500; color: var(--vre-muted); background: var(--vre-sand); border: 1px solid var(--vre-line); border-radius: 999px; padding: 1px 8px; }
.vre-filters a.is-active { background: var(--vre-orange); border-color: var(--vre-orange); color: #fff; }
.vre-filters a.is-active .vre-filter-count { background: rgba(255, 255, 255, .2); border-color: transparent; color: #fff; }

/* Empty state */
.vre-empty { text-align: center; padding: 40px 24px; }
.vre-empty .vre-ico-tile { margin: 0 auto 16px; width: 56px; height: 56px; border-radius: 16px; }
.vre-empty .vre-ico-tile .sv-ico { width: 26px; height: 26px; }
.vre-empty h2, .vre-empty h3 { font-size: 20px; font-weight: 500; color: var(--vre-ink); margin: 0 0 6px; }
.vre-empty p { font-size: 15px; color: var(--vre-muted); margin: 0 auto 20px; max-width: 460px; line-height: 1.6; }

@media (max-width: 991px) {
    .vre-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vre-dl.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .vre-card, .vre-promo { padding: 18px; border-radius: 18px; }
    .vre-head { padding: 20px 18px; flex-direction: column; gap: 12px; border-radius: 18px; }
    .vre-title { font-size: 21px; }
    .vre-dl, .vre-dl.is-3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .vre-tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .vre-promo { flex-direction: column; align-items: flex-start; gap: 14px; }
    .vre-results-head { flex-direction: column; align-items: flex-start; }
    .vre-seg { max-width: 100%; }
    .vre-row { gap: 12px; }
    .vre-map-frame { height: 240px; }
}