/* The bio and testimonials modals follow the site's colors: the body takes the even sections
   background, the header and footer the odd sections background, text and headings the global
   colors. The Agent Info section's own color options are copied onto the modal when it opens
   (agents-0N.js), because the modal renders outside the section and cannot inherit from it. */
.agent-bio-modal .modal-content, .agent-testimonials-modal .modal-content {
    border-radius: 0;
    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 one of these modals 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(.agent-bio-modal.show) .modal-backdrop,
body:has(.agent-testimonials-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);
}
.agent-bio-modal .modal-dialog, .agent-testimonials-modal .modal-dialog  {
    max-width: 500px;
}
.agent-bio-modal .modal-header, .agent-testimonials-modal .modal-header  {
    border-bottom: none;
    background-color: var(--section-bgcolor-odd, #ffffff);
}
.agent-bio-modal .modal-footer, .agent-testimonials-modal .modal-footer  {
    border-top: none;
    background-color: var(--section-bgcolor-odd, #ffffff);
}
.agent-bio-modal .modal-title, .agent-testimonials-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. */
.agent-bio-modal .btn-close, .agent-testimonials-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;
}
.agent-testimonials-modal hr {
    border-top: 1px solid var(--body-copy-color, #212529);
    opacity: 0.3;
}

.agent-bio-modal .agent-bio-text, .agent-testimonials-modal .agent-testimonials-text {
    max-height: 300px;
    overflow-y: scroll;
}

.agent-bio-modal ::-webkit-scrollbar, .agent-testimonials-modal ::-webkit-scrollbar{
  -webkit-appearance: none;
  width: 10px;
}

.agent-bio-modal a, .agent-testimonials-modal a {
    color: var(--body-link-color, #007bff);
    text-decoration: underline;
}

.agent-bio-modal ::-webkit-scrollbar-thumb, .agent-testimonials-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);
}

.agent-testimonials-modal .horiz-line {
  border-top: 1px solid #aaa;
}

.agent-bio-modal .modal-agent-photo, .agent-testimonials-modal .modal-agent-photo {
  margin-top:-55px;
  margin-left:5px;
  /* Same rounding as the section's agent photo (copied onto the modal by agents-0N.js). */
  border-radius: var(--photo-border-radius, 1%);
}

@media only screen and (max-width: 500px) {
    .agent-bio-modal .agent-bio-text, .agent-testimonials-modal .agent-testimonials-text {
        max-height: 200px;
        overflow-y: scroll;
    }
}