/* Every modal a property site opens (contact / RSVP, virtual open house, document access, share,
   agent bio and testimonials, placeholder mode) carries the class site-modal and follows the
   site's colors: the body takes the even sections background, the header and footer the odd
   sections background, text the body copy color, the title and close icon the headlines color,
   links the regular links color. A modal renders outside the section that opened it, so that
   section's own color options cannot reach it by inheritance; the opening script copies the
   section's resolved values onto the modal with cfCopySectionColors() (common.js). */
.site-modal .modal-content {
    background-color: var(--section-bgcolor-even, #fafafa);
    color: var(--body-copy-color, #212529);
    /* A 1px ring in the text color separates the modal from a page of nearly the same color, dark
       or light; the drop shadow below it only shows on light designs. */
    box-shadow: 0 0 0 1px rgba(var(--body-copy-color-rgb, 33,37,41), .25), 0 20px 60px rgba(0,0,0,.5);
}
/* Bootstrap's backdrop is black at 50%, invisible over a black design. While a site modal is open,
   tint it with the text color instead (greys a dark page, darkens a light one) and blur the page
   behind. The alpha is in the color rather than --bs-backdrop-opacity so the blur stays full
   strength. */
body:has(.site-modal.show) .modal-backdrop {
    --bs-backdrop-bg: rgba(var(--body-copy-color-rgb, 33,37,41), .3);
    --bs-backdrop-opacity: 1;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.site-modal .modal-header {
    border-bottom: none;
    background-color: var(--section-bgcolor-odd, #ffffff);
}
.site-modal .modal-footer {
    border-top: none;
    background-color: var(--section-bgcolor-odd, #ffffff);
}
.site-modal .modal-title {
    color: var(--heading-color, #212529);
}
/* Bootstrap's close button is a black SVG background; draw it as a mask in the heading color so it
   stays visible on a dark header. */
.site-modal .btn-close {
    background-color: var(--heading-color, #000);
    background-image: none;
    -webkit-mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
    mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
}
/* The text "X" close button (Bootstrap 4's .close, unstyled in 5). */
.site-modal .modal-header .close {
    background: none;
    border: 0;
    color: var(--heading-color, #000);
    font-size: 1.25rem;
    line-height: 1;
}
.site-modal a {
    color: var(--body-link-color, #007bff);
    text-decoration: underline;
}
.site-modal hr {
    border-top: 1px solid var(--body-copy-color, #212529);
    opacity: 0.3;
}
.site-modal ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(var(--body-copy-color-rgb, 0,0,0), .5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}