/* ============================================================
   Property Details page re-skin  (Home/ViewDetails)
   Ported from the ui_changes redesign (warm green / navy design
   system). STYLING + LAYOUT ONLY - every id/class the page's
   JS hooks (Slick gallery, mortgage calculator, Google Map,
   inquiry AJAX form, related links) is preserved untouched.

   Typography note: unlike the ui_changes original, this port
   declares NO font-family anywhere - all text inherits the
   site's existing 'Source Sans Pro' stack from style.css. Size,
   weight, line-height and letter-spacing are kept as designed.

   Everything is scoped under #html-content-holder so it can never
   leak onto the print flyer (.printmodeOn block above it) or other
   views. The id-level scope also lets these rules win over the
   in-page inline <style> blocks (which use bare .class selectors)
   without needing !important on every line.
   ============================================================ */

#html-content-holder {
    --vd-bg: #F5F6F7;
    --vd-heading: #252525;
    --vd-body: #707070;
    --vd-green: #21b389;
    --vd-green-dark: #1a9873;
    --vd-navy: #16233a;
    --vd-navy-deep: #0e1826;
    --vd-card: #ffffff;
    --vd-border: #e8e4dc;
    --vd-input: #d8dee6;
    --vd-star: #f5b731;
    --vd-radius: 16px;
    --vd-radius-sm: 10px;

    background: var(--vd-bg);
    overflow-x: hidden;            /* never let a stray col push the page sideways */
}

/* Centered ~1200px canvas with equal gutters. */
#html-content-holder > .container {
    max-width: 1200px;
}

#html-content-holder,
#html-content-holder p,
#html-content-holder li,
#html-content-holder td,
#html-content-holder label {
    color: var(--vd-body);
}

/* Display headings on the page (site typeface, tighter tracking). */
#html-content-holder .sl-title h2,
#html-content-holder .sl-sp-title,
#html-content-holder .related-properties h2,
#html-content-holder #calculator h4,
#html-content-holder .section-title h3 {
    color: var(--vd-heading);
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   1. Action bar  (Back / Email / Print / social / Take a Tour)
   ------------------------------------------------------------ */
#html-content-holder .row.m-b-20 > .col-md-8,
#html-content-holder .row.m-b-20 > .col-md-4.text-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#html-content-holder .row.m-b-20 > .col-md-4.text-right {
    justify-content: flex-end;
}

/* Mobile: the action columns have no xs width class, so as flex items
   they size to content and overlap. Force them full-width so the
   "Take a Virtual Tour" button drops cleanly below the social row. */
@media (max-width: 767px) {
    #html-content-holder .row.m-b-20 > .col-md-8,
    #html-content-holder .row.m-b-20 > .col-md-4.text-right {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    #html-content-holder .row.m-b-20 > .col-md-4.text-right {
        justify-content: flex-start;
        margin-top: 12px;
    }
}

/* Unify all the action buttons into calm green pills. */
#html-content-holder .btn.themeSecColor,
#html-content-holder a.btn.btn-primary.btn-lg {
    background: var(--vd-green) !important;
    border: 1px solid var(--vd-green) !important;
    color: #fff !important;
    border-radius: var(--vd-radius-sm) !important;
    font-weight: 600;
    font-size: .92rem;
    padding: 10px 18px;
    box-shadow: none;
    transition: background .18s ease, transform .18s ease;
}

#html-content-holder .btn.themeSecColor:hover,
#html-content-holder a.btn.btn-primary.btn-lg:hover {
    background: var(--vd-green-dark) !important;
    border-color: var(--vd-green-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Back -> quiet white/outline button (it's a nav control, not a primary
   action). Scoped to the first button in the action row. */
#html-content-holder .row.m-b-20 > .col-md-8 > a.btn:first-of-type {
    background: #fff !important;
    border: 1px solid var(--vd-border) !important;
    color: var(--vd-heading) !important;
}

#html-content-holder .row.m-b-20 > .col-md-8 > a.btn:first-of-type:hover {
    background: var(--vd-bg) !important;
    border-color: var(--vd-input) !important;
    color: var(--vd-heading) !important;
}

#html-content-holder .row.m-b-20 > .col-md-8 > a.btn:first-of-type::before {
    content: "\2190";
    margin-right: 7px;
    font-weight: 700;
}

/* Social share links -> real brand colours. Facebook ("Share") and X
   ("Post") are plain <a.btn> links; Instagram and LinkedIn are matched
   by href (both carry the same duplicate id in the source markup). */
/* Lay the social buttons out in a centred flex row and give them the
   same 44px height and padding as the Email/Print buttons, with icon +
   label centred on both axes. Height/width use !important to beat the
   theme's #btnLinkedin rule (which pins them to 28px). */
/* !important because the legacy ViewDetails.css forces display:block /
   inline-block on .icon-button at various breakpoints, which disables the
   flex gap and let wrapped share buttons touch on small screens. */
#html-content-holder .icon-button {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    vertical-align: middle;
}

#html-content-holder .icon-button a.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 16px !important;
    line-height: 1 !important;
    font-size: .92rem;
    font-weight: 600;
    border-radius: var(--vd-radius-sm) !important;
}

/* Strip any background box / padding the theme puts on the brand icons
   (e.g. .fa-facebook has its own #3B5998 background) so the glyph sits
   flat on the button. */
#html-content-holder .icon-button a.btn > i,
#html-content-holder .icon-button a.btn > svg {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    color: inherit !important;
}

#html-content-holder .icon-button a[href*="instagram.com"] {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
    border: 0 !important;
    color: #fff !important;
}

#html-content-holder .icon-button a[href*="linkedin.com"] {
    background: #0a66c2 !important;
    border: 0 !important;
    color: #fff !important;
}

#html-content-holder .icon-button a.ez-fb-share {
    background: #1877f2 !important;
    border: 0 !important;
    color: #fff !important;
}

#html-content-holder .icon-button a.ez-x-share {
    background: #000 !important;
    border: 0 !important;
    color: #fff !important;
}

/* Take-a-tour keeps prominence via the navy fill instead of green.
   Scoped to the action row only, so the price pill (which lives in a
   different .col-md-4.text-right) is unaffected. */
#html-content-holder .row.m-b-20 .col-md-4.text-right a.btn {
    background: var(--vd-navy) !important;
    border-color: var(--vd-navy) !important;
}

#html-content-holder .row.m-b-20 .col-md-4.text-right a.btn:hover {
    background: var(--vd-navy-deep) !important;
    border-color: var(--vd-navy-deep) !important;
}

/* ------------------------------------------------------------
   2. Two-column shell  (main column + sticky sidebar)
   ------------------------------------------------------------ */
#html-content-holder .col-lg-8.single-list-page {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* Sticky sidebar on desktop; stacks normally below lg via Bootstrap. */
@media (min-width: 992px) {
    #html-content-holder .col-lg-4.col-md-7 > .sidebar {
        position: sticky;
        top: 24px;
    }
}

#html-content-holder .sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* Kill the theme's wrapper shadow (style.css .sidebar) so each
       widget below reads as its own separate bordered box. */
    box-shadow: none !important;
    padding-left: 0;
}

/* ------------------------------------------------------------
   3. Gallery  (Slick main slider + thumbnail nav)
   ------------------------------------------------------------ */
#html-content-holder .SlickCaro {
    background: var(--vd-card);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius);
    padding: 12px;
}

#html-content-holder .SlickCaro .slider figure {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
}

#html-content-holder .SlickCaro .slider figure img {
    width: 100%;
    height: clamp(320px, 46vw, 520px);
    object-fit: cover;
    display: block;
}

/* Status ribbon -> diagonal corner ribbon, matching the mockup. The
   figure is overflow:hidden, so the rotated band clips to a clean
   triangle in the top-left corner. Status colour stays CMS-driven
   (inline style on the span conveys For Sale / Sold / etc.). */
#html-content-holder .SlickCaro .slider .ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 122px;
    height: 122px;
    overflow: hidden;
    transform: none;
    z-index: 5;
    pointer-events: none;
}

#html-content-holder .SlickCaro .slider .ribbon span {
    position: absolute;
    display: block;
    width: 172px;
    top: 28px;
    left: -42px;
    margin: 0;
    padding: 7px 0;
    transform: rotate(-45deg);
    text-align: center;
    border-radius: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 24, 38, .28);
}

#html-content-holder .SlickCaro .slider .ribbon span::before,
#html-content-holder .SlickCaro .slider .ribbon span::after {
    display: none;
}

/* Thumbnails */
#html-content-holder .slider-nav-thumbnails {
    margin-top: 12px;
}

#html-content-holder .slider-nav-thumbnails > div {
    padding: 0 5px;
}

/* No border/box on the slide wrappers - kills the theme's dark navy
   border so only the <img> carries the green active/hover border. */
#html-content-holder .slider-nav-thumbnails .slick-slide,
#html-content-holder .slider-nav-thumbnails .slick-slide > div,
#html-content-holder .slider-nav-thumbnails > div {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

#html-content-holder .slider-nav-thumbnails img {
    width: 100%;
    height: 74px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent !important;
    /* ViewDetails.css sets background:#000 here; with the default
       border-box clip it bled under the transparent border as a dark
       ring. Clear it so normal thumbnails show no border. */
    background: transparent !important;
    background-clip: padding-box !important;
    cursor: pointer;
    opacity: .7;
    transition: opacity .18s ease, border-color .18s ease;
}

/* Green border only on hover and on the active thumbnail. */
#html-content-holder .slider-nav-thumbnails .slick-current img,
#html-content-holder .slider-nav-thumbnails img:hover {
    opacity: 1;
    border-color: var(--vd-green) !important;
}

/* Compact circular slider arrows. */
#html-content-holder .SlickCaro .slick-prev,
#html-content-holder .SlickCaro .slick-next {
    width: 38px;
    height: 38px;
    background: rgba(14, 24, 38, .62) !important;
    border-radius: 50%;
    z-index: 6;
    transition: background .18s ease;
}

#html-content-holder .SlickCaro .slick-prev:hover,
#html-content-holder .SlickCaro .slick-next:hover {
    background: var(--vd-green) !important;
}

#html-content-holder .SlickCaro .slick-prev { left: 20px; }
#html-content-holder .SlickCaro .slick-next { right: 20px; }

#html-content-holder .SlickCaro .slick-prev::before,
#html-content-holder .SlickCaro .slick-next::before {
    font-size: 20px;
    opacity: 1;
    line-height: 1;
}

/* ------------------------------------------------------------
   4. Address + price header
   ------------------------------------------------------------ */
/* single-list-content is now just a transparent stack: the address/price
   row sits on the page background, the details live in their own card. */
#html-content-holder .single-list-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Address + price, on the page background above the details card. */
#html-content-holder .single-list-content > .row:first-child {
    align-items: center;
    margin: 0;
    /* ~14px + the columns' own 15px ≈ the details card's 28px, so the
       address/price line up with the card content below. */
    padding: 4px 14px 0;
}

/* Mobile: split the row 50/50 so the address and the price button stay
   side by side and the button never overflows off-screen. Below sm the
   col-sm-* classes don't apply, so we set the widths explicitly. */
@media (max-width: 767px) {
    #html-content-holder .single-list-content > .row:first-child {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    #html-content-holder .single-list-content > .row:first-child > div {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #html-content-holder .single-list-content > .row:first-child > .text-right {
        text-align: right !important;
    }
}

/* The details card (Property Details -> schools). */
#html-content-holder .vd-details-card {
    background: var(--vd-card);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius);
    padding: 26px 28px;
}

/* First heading inside the card shouldn't carry the inter-section top gap. */
#html-content-holder .vd-details-card > .sl-sp-title:first-child {
    margin-top: 0;
}

#html-content-holder .sl-title h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.2;
}

#html-content-holder .sl-title p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
    color: var(--vd-body);
}

#html-content-holder .sl-title p .fa-map-marker {
    color: var(--vd-green);
}

/* Price badge -> green pill (overrides the inline CMS background).
   Scoped inside .single-list-content so it only hits the price button,
   never the action-bar's Take-a-Tour button. */
#html-content-holder .btn-price,
#html-content-holder .single-list-content .col-md-4.text-right a.btn {
    background: var(--vd-green) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--vd-radius-sm) !important;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 12px 22px;
    box-shadow: 0 6px 18px rgba(33, 179, 137, .28);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   5. Section titles  (Property Details / Description / Location)
   ------------------------------------------------------------ */
#html-content-holder .sl-sp-title {
    position: relative;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 34px 0 20px;
    padding-bottom: 12px;
}

#html-content-holder .sl-sp-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: var(--vd-green);
}

/* ------------------------------------------------------------
   6. Spec / facts grid  (.PDMAin > .pdIcon + .pdCnntent)
   The in-page inline <style> sets these with float + calc widths
   and colors the icon from the CMS var; id-scope here overrides it
   into an icon-card grid without touching the markup.
   ------------------------------------------------------------ */
#html-content-holder .home-facts-at-a-glance-section > .row.no-gutters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0;
}

#html-content-holder .PDMAin {
    display: flex !important;
    float: none !important;
    width: auto !important;
    align-items: center;
    gap: 14px;
    max-width: none !important;
    flex: unset !important;
    padding: 16px;
    background: var(--vd-bg);
    border: 1px solid var(--vd-border);
    border-radius: 12px;
    margin: 0 !important;
}

#html-content-holder .PDMAin .pdIcon {
    width: 44px !important;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(33, 179, 137, .12);
    border-radius: 10px;
}

#html-content-holder .PDMAin .pdIcon svg,
#html-content-holder .PDMAin .pdIcon i {
    width: 22px;
    height: 22px;
    font-size: 20px !important;
    color: var(--vd-green) !important;
    fill: var(--vd-green) !important;
}

#html-content-holder .PDMAin .pdCnntent {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#html-content-holder .PDMAin .pdCnntent h5 {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vd-body);
    margin: 0;
}

#html-content-holder .PDMAin .pdCnntent p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--vd-heading);
    margin: 0;
    word-break: break-word;
}

/* Empty spec value -> em dash so cards never look broken. */
#html-content-holder .PDMAin .pdCnntent p:empty::after {
    content: "\2014";
    color: var(--vd-body);
    font-weight: 500;
}

@media (max-width: 767px) {
    #html-content-holder .home-facts-at-a-glance-section > .row.no-gutters {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Keep two boxes per row on phones (tighter spacing so they fit). */
@media (max-width: 460px) {
    #html-content-holder .home-facts-at-a-glance-section > .row.no-gutters {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    #html-content-holder .PDMAin {
        gap: 10px;
        padding: 12px;
    }

    #html-content-holder .PDMAin .pdIcon {
        width: 38px !important;
        height: 38px;
    }

    #html-content-holder .PDMAin .pdIcon svg,
    #html-content-holder .PDMAin .pdIcon i {
        width: 18px;
        height: 18px;
        font-size: 17px !important;
    }
}

/* ------------------------------------------------------------
   7. Description
   ------------------------------------------------------------ */
#html-content-holder .description,
#html-content-holder #summerDesc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--vd-body);
}

#html-content-holder #summerDesc p {
    margin-bottom: 12px;
}

/* Style any link in the CMS description (e.g. "APPLY HERE") as a green
   button. Content is untouched - this only restyles the anchor. */
#html-content-holder #summerDesc a {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 22px;
    background: var(--vd-green);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: var(--vd-radius-sm);
    transition: background .18s ease;
}

#html-content-holder #summerDesc a:hover {
    background: var(--vd-green-dark);
    color: #fff !important;
}

/* Some CMS descriptions are saved wrapped in a table (.tabsTable) whose
   markup carries fixed pixel widths from the admin editor (width:1449px on
   the table, width:966px on inner divs, min-width:325px on cells), pushing
   the text out of the card. Force the table AND everything inside it back
   to fluid widths; long words/URLs wrap instead of overflowing. */
#html-content-holder .description table,
#html-content-holder #summerDesc table,
#html-content-holder .tabsTable {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    /* the editor also injects an inline white background-color - not wanted,
       let the card's own background show through. */
    background: transparent !important;
}

    #html-content-holder .description table td,
    #html-content-holder #summerDesc table td,
    #html-content-holder .tabsTable td {
        min-width: 0;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Editor-injected fixed-width wrappers inside the table (e.g.
       div.col-md-8 with style width:966px) - back to fluid. */
    #html-content-holder .description table div,
    #html-content-holder #summerDesc table div,
    #html-content-holder .tabsTable div {
        width: auto !important;
        max-width: 100% !important;
    }

#html-content-holder .description img,
#html-content-holder #summerDesc img {
    max-width: 100% !important;
    height: auto;
}

/* ------------------------------------------------------------
   8. Location map + nearby schools
   ------------------------------------------------------------ */
#html-content-holder #mapDetails #map {
    border-radius: 12px;
    border: 1px solid var(--vd-border);
    overflow: hidden;
}

#html-content-holder .plan-accordion .panel-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--vd-green) !important;
    border: 0 !important;
    color: #fff;
    border-radius: 10px 10px 0 0;
    font-weight: 600;
    padding: 14px 18px;
}

#html-content-holder .plan-accordion .panel-body {
    border: 1px solid var(--vd-border);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    padding: 0;
    overflow-x: auto;
}

#html-content-holder .plan-accordion table {
    margin: 0;
}

#html-content-holder .plan-accordion thead th {
    background: var(--vd-bg);
    color: var(--vd-heading);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 0;
    padding: 12px 16px;
}

#html-content-holder .plan-accordion tbody td {
    font-size: .92rem;
    color: var(--vd-body);
    border-top: 1px solid var(--vd-border);
    padding: 12px 16px;
    vertical-align: middle;
}

/* ------------------------------------------------------------
   9. Sidebar cards  (inquiry form / calculator / pre-approved)
   ------------------------------------------------------------ */
#html-content-holder .contact-form-card,
#html-content-holder #calculator,
#html-content-holder .sidebar > .col-md-12:last-child {
    background: var(--vd-card);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius);
    overflow: hidden;
}

#html-content-holder .contact-form-card {
    padding: 0;
}

/* Inquiry form (partial injected into #propertyInterestedRequests).
   The navy title sits flush against the card's top edge and spans the
   full width (card overflow:hidden rounds its top corners); only the
   fields below get inner padding. */
#html-content-holder #SidePropForm,
#html-content-holder #propertyInterestedRequests {
    padding: 0;
}

#html-content-holder .ctm-form-title {
    margin: 0;
    padding: 16px 22px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff !important;
}

#html-content-holder #propertyInterestedRequestForm {
    padding: 22px;
}

/* ViewDetails.css pads the injected form with a higher-specificity
   `#SidePropForm #propertyInterestedRequests .form-horizontal` rule;
   out-rank it here (4 ids) instead of editing that shared file. */
#html-content-holder #SidePropForm #propertyInterestedRequests .form-horizontal {
    padding: 22px;
}

#html-content-holder #calculator {
    padding: 22px;
}

#html-content-holder #calculator .well {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

#html-content-holder #calculator h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 18px;
    color: var(--vd-heading);
}

#html-content-holder .sidebar label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--vd-heading);
    margin-bottom: 6px;
}

/* Inputs / selects across the whole sidebar. */
#html-content-holder .sidebar .form-control {
    border: 1px solid var(--vd-input);
    border-radius: var(--vd-radius-sm);
    box-shadow: none;
    color: var(--vd-heading);
}

/* Uniform field height across BOTH sidebar forms (inquiry + Monthly
   Cost calculator) so they read consistently. Textarea grows instead. */
#html-content-holder .contact-form-card .form-control,
#html-content-holder #calculator .form-control {
    height: 48px;
}

#html-content-holder .contact-form-card textarea.form-control {
    height: auto;
    min-height: 110px;
}

/* The property-tax field nests a % input inside an input-group addon;
   keep the whole group on the same 48px line, and strip the addon's own
   border/background so only the inner % input shows a single border. */
#html-content-holder #calculator .input-group.appentInput,
#html-content-holder #calculator .input-group-append,
#html-content-holder #calculator .input-group-text {
    height: 48px;
}

#html-content-holder #calculator .input-group-text {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

#html-content-holder #calculator .input-group-text .form-control {
    height: 48px;
}

#html-content-holder .sidebar .form-control:focus {
    border-color: var(--vd-green);
    box-shadow: 0 0 0 3px rgba(33, 179, 137, .15);
}

/* Radio / checkbox rows (Percentage/Dollar, Include taxes/insurance):
   keep the control dot/box vertically centred with its label text.
   Bootstrap positions the control assuming a 1.5rem label line; the
   global sidebar-label sizing shrank that and pushed the control out
   of line, so restore it here (this selector outranks the global one). */
#html-content-holder .sidebar .custom-control-label {
    margin-bottom: 0;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.5rem;
    cursor: pointer;
}

#html-content-holder .sidebar .custom-control {
    margin-bottom: 8px;
}

/* Radio / checkbox accents (Percentage/Dollar, include taxes). */
#html-content-holder .sidebar .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--vd-green);
    border-color: var(--vd-green);
}

#html-content-holder #results.alert-success {
    background: rgba(33, 179, 137, .1);
    border: 1px solid rgba(33, 179, 137, .3);
    color: var(--vd-green-dark);
    border-radius: var(--vd-radius-sm);
    min-height: 48px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* Calculate button: kept hidden by .d-none in the markup (we do NOT set
   display, so it stays hidden); styled green here to match the other
   buttons for whenever the script reveals it. */
#html-content-holder #calchomenote {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    line-height: 52px;
    text-align: center;
    letter-spacing: .3px;
    font-size: 1rem;
    font-weight: 600;
    border: 0 !important;
    border-radius: var(--vd-radius-sm) !important;
    background: var(--vd-green) !important;
    color: #fff !important;
}

/* Pre-approved CTA block: a light-green highlight callout (per the
   design), with a subtle green border. */
#html-content-holder .sidebar > .col-md-12:last-child {
    padding: 22px;
    text-align: center;
    background: #eef9f4 !important;
    border: 1px solid rgba(33, 179, 137, .25) !important;
    background-image: none !important;
}

#html-content-holder .section-title h3 {
    position: relative;
    display: inline-block;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 16px;
    padding-bottom: 12px;
    text-wrap: balance;
}

/* Centered green underline accent under the heading (matches the
   section-title treatment used across the redesign). */
#html-content-holder .section-title h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: var(--vd-green);
}

#html-content-holder .section-title p {
    font-size: .92rem;
    line-height: 1.6;
    color: #3f3f3f;
    margin: 0 0 18px;
    text-wrap: balance;
}

/* Submit + pre-approved CTA. For an <input type=submit> the value is
   centred vertically by a line-height equal to the box height (padding
   left to 0 vertically so nothing skews it) and horizontally by
   text-align. Fixed 52px height keeps it in proportion with the 48px
   fields. !important on background beats the theme's .themeSecColor. */
#html-content-holder .site-btn.themeSecColor,
#html-content-holder .sidebar .site-btn,
#html-content-holder #btnSubmitPropertyInterested {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 18px;
    line-height: 52px;
    min-width: 0;
    text-align: center;
    letter-spacing: .3px;
    font-size: 1rem;
    font-weight: 600;
    border: 0;
    border-radius: var(--vd-radius-sm);
    background: var(--vd-green) !important;
    color: #fff !important;
    transition: background .18s ease;
}

#html-content-holder .site-btn.themeSecColor:hover,
#html-content-holder .sidebar .site-btn:hover,
#html-content-holder #btnSubmitPropertyInterested:hover {
    background: var(--vd-green-dark);
    color: #fff !important;
}

/* ------------------------------------------------------------
   10. Related properties  (homepage-style cards)
   ------------------------------------------------------------ */
#html-content-holder .related-properties {
    margin-top: 48px;
    margin-bottom: 26px;
}

#html-content-holder .related-properties h2 {
    position: relative;
    display: inline-block;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    padding-bottom: 14px;
}

    /* Same centered green underline as the site's other section headings
       (60x3px #30caa0, rounded). */
    #html-content-holder .related-properties h2::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: #30caa0;
        border-radius: 2px;
    }

#html-content-holder .row.noprint > .col-md-4 {
    margin-bottom: 26px;
}

#html-content-holder .rp-item.card {
    display: flex;
    flex-direction: column;
    background: var(--vd-card);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
}

#html-content-holder .rp-item.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(16, 24, 40, .12);
}

#html-content-holder .rp-item .rp-pic {
    position: relative;
    height: 210px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Ribbon on related cards -> diagonal corner ribbon (matches mockup). */
#html-content-holder .rp-item .ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 102px;
    height: 102px;
    transform: none;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}

#html-content-holder .rp-item .ribbon span {
    position: absolute;
    display: block;
    width: 150px;
    top: 22px;
    left: -38px;
    margin: 0;
    padding: 6px 0;
    transform: rotate(-45deg);
    text-align: center;
    border-radius: 0;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--vd-green) !important;
    box-shadow: 0 2px 6px rgba(14, 24, 38, .25);
}

#html-content-holder .rp-item .ribbon span::before,
#html-content-holder .rp-item .ribbon span::after {
    display: none;
}

#html-content-holder .rp-item .rp-info {
    padding: 18px 18px 12px;
    text-align: center;
}

#html-content-holder .rp-item .rp-info h5 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--vd-heading);
    margin: 0 0 6px;
}

#html-content-holder .rp-item .rp-info p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .88rem;
    color: var(--vd-body);
    margin: 0;
}

#html-content-holder .rp-item .rp-info p .fa-map-marker {
    color: var(--vd-green) !important;
}

/* Green price bar pinned to the card foot. */
#html-content-holder .rp-item .rp-price {
    display: block;
    margin-top: auto;
    background: var(--vd-green) !important;
    color: #fff !important;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 12px;
    text-decoration: none;
}

#html-content-holder .rp-item .rp-price:hover {
    background: var(--vd-green-dark) !important;
}

/* Empty related state. */
#html-content-holder .noRecord {
    text-align: center;
    padding: 30px 0 10px;
}

#html-content-holder .noRecord .nodata_img {
    max-width: 150px;
    opacity: .8;
}

#html-content-holder .noRecord p {
    font-size: 1.2rem !important;
    color: var(--vd-body);
}

@media (prefers-reduced-motion: reduce) {
    #html-content-holder .rp-item.card,
    #html-content-holder .rp-item .rp-pic,
    #html-content-holder .btn.themeSecColor {
        transition: none;
    }
    #html-content-holder .rp-item.card:hover {
        transform: none;
    }
    #html-content-holder .rp-item.card:hover .rp-pic {
        transform: none;
    }
}

/* ============================================================
   "Email This Home" modal (#emailPropertyPopup)
   Scoped to its own id - this modal lives outside #html-content-holder
   at page level. Preserves all ids/fields; restyles only. Text renders
   in the site's existing typeface (no font-family overrides).
   ============================================================ */
#emailPropertyPopup .modal-dialog {
    max-width: 480px;
    margin: 1.75rem auto;
}

#emailPropertyPopup .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(14, 24, 38, .28);
}

/* Header */
#emailPropertyPopup .modal-header {
    align-items: center;
    padding: 22px 26px;
    border-bottom: 1px solid #eef0ee;
    background: #fff;
}

#emailPropertyPopup .modal-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #252525;
    letter-spacing: -.01em;
}

#emailPropertyPopup .modal-header .close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: #f2f0ec;
    opacity: 1;
    color: #707070;
    font-size: 1.3rem;
    line-height: 1;
    margin: 0;
    text-shadow: none;
    transition: background .18s ease, color .18s ease;
}

#emailPropertyPopup .modal-header .close:hover {
    background: #e6e2da;
    color: #252525;
}

/* Body: normalise the three stacked .modal-body blocks into fields */
#emailPropertyPopup .modal-body {
    padding: 18px 26px 0;
}

#emailPropertyPopup .modal-body lable,
#emailPropertyPopup .modal-body label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #252525;
    margin-bottom: 7px;
}

#emailPropertyPopup .form-control {
    height: 48px;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .95rem;
    color: #252525;
    background: #fff;
    box-shadow: none;
}

#emailPropertyPopup textarea.form-control {
    height: auto;
    min-height: 92px;
    padding: 12px 14px;
    resize: vertical;
}

#emailPropertyPopup .form-control:focus {
    border-color: #21b389;
    box-shadow: 0 0 0 3px rgba(33, 179, 137, .15);
}

#emailPropertyPopup .form-control::placeholder {
    color: #9aa2ab;
}

/* Helper text ("Separate multiple addresses with a comma.") */
#emailPropertyPopup .modal-body > span {
    display: inline-block;
    margin-top: 7px;
    font-size: .8rem;
    line-height: 1.4;
    color: #8a9299;
}

#emailPropertyPopup .modal-body > span.text-danger {
    color: #d9534f !important;
}

/* Footer */
#emailPropertyPopup .modal-footer {
    padding: 20px 26px 24px;
    border-top: 1px solid #eef0ee;
    margin-top: 16px;
    gap: 10px;
}

#emailPropertyPopup .modal-footer .btn {
    height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    border: 0;
    margin: 0;
    transition: background .18s ease;
}

#emailPropertyPopup #sendEmail,
#emailPropertyPopup .modal-footer .btn-info {
    background: #21b389 !important;
    color: #fff !important;
}

#emailPropertyPopup #sendEmail:hover,
#emailPropertyPopup .modal-footer .btn-info:hover {
    background: #1a9873 !important;
}

#emailPropertyPopup .modal-footer .btn-default {
    background: #f2f0ec !important;
    color: #252525 !important;
    border: 1px solid #e8e4dc !important;
}

#emailPropertyPopup .modal-footer .btn-default:hover {
    background: #e6e2da !important;
}