/* ==========================================================================
   REALTOR SEARCH - Grid Layout
   ========================================================================== */

:root {
    --accent-red: #c40035;
    --filter-input-bg: #fff;
    --filter-input-color: #002B4B;
    --search-icon-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='white' d='M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z'/%3E%3C%2Fsvg%3E");
}

.realtor_search-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 52px !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--filter-input-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.realtor_search-wrap > div {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Dividers between columns */
.realtor_search-wrap > div + div::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 0 !important;
    height: 1.5rem !important;
    border-left: 1px solid rgba(0, 43, 75, 0.25) !important;
    transform: translateY(-50%) !important;
    background: none !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Shared input and select styles */
.realtor_search-wrap input.realtor_search,
.realtor_search-wrap select#realtor_search_city {
    width: 100% !important;
    height: 100% !important;
    padding: 0 0.75rem !important;
    background: transparent !important;
    color: var(--filter-input-color) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.realtor_search-wrap select#realtor_search_city {
    color: rgba(0, 43, 75, 0.6) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.realtor_search-wrap input.realtor_search::placeholder {
    color: var(--filter-input-color) !important;
    opacity: 0.6 !important;
    text-align: center !important;
}

/* Last column (button wrapper) */
.realtor_search-wrap > div:last-child {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.realtor_search-wrap > div:last-child::before {
    display: none !important;
    content: none !important;
}

.realtor_search-wrap > div:last-child input[type="hidden"] {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
}

/* Search button */
.realtor_search-wrap .btn.btn-red.custom-btn-margins,
.realtor_search-wrap a.btn.btn-red.custom-btn-margins {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--accent-red) !important;
    background-image: var(--search-icon-white) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 18px 18px !important;
    border: none !important;
    border-radius: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.realtor_search-wrap .btn.btn-red.custom-btn-margins::before,
.realtor_search-wrap a.btn.btn-red.custom-btn-margins::before,
.realtor_search-wrap .btn.btn-red.custom-btn-margins::after,
.realtor_search-wrap a.btn.btn-red.custom-btn-margins::after {
    display: none !important;
    content: none !important;
}

.realtor_search-wrap .btn.btn-red.custom-btn-margins:hover,
.realtor_search-wrap a.btn.btn-red.custom-btn-margins:hover {
    background-color: #a0002b !important;
}

/* ==========================================================================
   RESPONSIVE: Mobile
   ========================================================================== */

@media (max-width: 800px) {
    .realtor_search-wrap {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        row-gap: 0;
    }

    .realtor_search-wrap > div {
        width: 100% !important;
        height: 50px !important;
        border-bottom: 1px solid rgba(0, 43, 75, 0.15) !important;
        box-sizing: border-box !important;
    }

    .realtor_search-wrap > div + div::before {
        display: none !important;
        content: none !important;
    }

    .realtor_search-wrap > div:last-child {
        height: 50px !important;
        border-bottom: none !important;
    }

    .realtor_search-wrap .btn.btn-red.custom-btn-margins,
    .realtor_search-wrap a.btn.btn-red.custom-btn-margins {
        background-image: none !important;
        color: #fff !important;
        font-size: 13px !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }

    .realtor_search-wrap .btn.btn-red.custom-btn-margins:hover,
    .realtor_search-wrap a.btn.btn-red.custom-btn-margins:hover {
        background-image: none !important;
    }
}

/* ==========================================================================
   AGENT PROFILES & BIO
   ========================================================================== */

h2.agent-title,
h3.agent-brokerage,
.agent-bio,
.realtor_archive-wrapper,
#simple-realtor-count,
#simple-realtor-page-range,
.simple-realtor-count,
.simple-realtor-page-range {
    color: #fff;
}

.agent-btn.btn.btn-red,
.agent-block.contact .btn.btn-red,
.agent-contact .btn-red,
.agents-accordion-wrapper .agent-img,
.simple-realtor > div,
.simple-company > div,
.simple-realtor--buttons .btn.btn-red-outline,
.simple-realtor--buttons .btn.btn-red,
.realtor_archive-wrapper .agent-tabs .agents ul .agent-img img,
.agent-tabs .agents ul .agent-img img,
.featured-item-panel .image-wrap img,
.realtor-sidebar > div {
    border-radius: 10px;
}

.realtor_archive-wrapper .featured-item-panel {
    border-bottom: 1px solid #fff;
}

/* ==========================================================================
   AGENT ACCORDION TOGGLE ICON
   ========================================================================== */

.agent-accordion,
.agent-accordion:after {
    color: #fff;
}

.agent-accordion:after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 13px !important;
    height: 13px !important;
    background-color: #fff !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    transform: translateY(-50%) !important;
}

/* ==========================================================================
   FEATURED ITEM PANEL TABS
   ========================================================================== */

.featured-item-panel ul.nav:not(:empty) {
    gap: 0.5rem;
}

.featured-item-panel ul.nav:not(:empty) li {
    background: rgba(255, 255, 255, 0);
    color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
}

.featured-item-panel ul.nav:not(:empty) li.active {
    background: #fff;
    color: #004990;
}

/* ==========================================================================
   SIMPLE REALTOR LIST & PAGINATION
   ========================================================================== */

div#simple-realtor-pager,
div.simple-realtor-pager {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
}

/* The pager below the list needs a little breathing room from the last row. */
.simple-realtor-pager-wrap + .simple-realtor-pager-wrap,
#simple-realtor-container + .simple-realtor-pager-wrap {
    display: block;
    margin-top: 1.5rem;
}

.simple-realtor-page {
    background: #fff;
    color: #004990;
    border: 1px solid #fff;
    border-radius: 4px;
}

.simple-realtor-page:hover,
.simple-realtor-page.current-page {
    background-color: #002b4b;
    color: #fff;
    border-color: #002b4b;
}

/* Darker blue row background for contrast against the page */
.simple-realtor > div,
.simple-company > div {
    background-color: #002b4b;
    border-color: #002b4b;
}

.simple-realtor h4,
.simple-company h4 {
    margin: 0;
    color: #fff;
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
}

.simple-realtor--buttons .btn-red-outline {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}

/* ==========================================================================
   AGENT CONTACT SIDEBAR
   ========================================================================== */

.agent-contact i,
.agent-block.contact i {
    color: #fff;
}

.agent-contact-header {
    background-color: #002b4b;
    border-radius: 10px 10px 0 0;
}

.agent-contact-header h3 {
    text-align: center;
}

.agent-contact ul li:not(:last-child) {
    border-bottom: 1px solid #fff;
}

/* Read More inline with excerpt (featured cards + nested team agents) */
.agent-bio.agent-bio--readmore-inline,
.realtor-info .agent-bio.agent-bio--readmore-inline {
    margin-bottom: 2rem;
}

.agent-bio.agent-bio--readmore-inline .agent-bio-content.agent-bio-content--short.active,
.realtor-info .agent-bio.agent-bio--readmore-inline .agent-bio-content.agent-bio-content--short.active {
    display: inline !important;
}

.agent-bio.agent-bio--readmore-inline .agent-bio-more,
.realtor-info .agent-bio.agent-bio--readmore-inline .agent-bio-more {
    display: inline;
    margin-top: 0;
    vertical-align: baseline;
}

.agent-bio.agent-bio--readmore-inline .agent-bio-content.agent-bio-content--long.active,
.realtor-info .agent-bio.agent-bio--readmore-inline .agent-bio-content.agent-bio-content--long.active {
    display: block !important;
    margin-top: 0.5em;
}

.featured-item-panel .contact-row {
    display: flex;
    gap: 1rem;
    margin-top: var(--space);
    margin-bottom: 1rem;
    color: var(--blue-light);
    font-weight: 500;
}

h3.agent-brokerage {
    margin-bottom: 2rem;
}

/* Desktop: tighter gap between the bio and the Contact Team / Team Profile row.
   The base rule uses margin-top: var(--space), which maxes out at 3.5rem on wide
   screens and left a large empty band under the bio. */
@media (min-width: 769px) {
    .featured-item-panel .contact-row {
        margin-top: 1.25rem;
    }
}

/* Contact Team / Team Profile as outlined buttons, matching the Team Info /
   Agents tabs above them. Only the panel's own row, not the phone numbers in
   the nested agent bios. */
.featured-item-panel .realtor-info > .contact-row {
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.featured-item-panel .realtor-info > .contact-row .contact-row-sep {
    display: none;
}

.featured-item-panel .realtor-info > .contact-row > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45em 1.5em;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.featured-item-panel .realtor-info > .contact-row > a:hover,
.featured-item-panel .realtor-info > .contact-row > a:focus-visible {
    background: #fff;
    color: #004990;
}

@media (max-width: 768px) {
    /* full-width-ish buttons that share the row on phones */
    .featured-item-panel .realtor-info > .contact-row > a {
        flex: 1 1 10rem;
    }
}

/* Nested agent bios: tighten the space around the name and phone number. */
.featured-item-panel .agents ul .agent-name {
    margin-bottom: 0.35rem;
}

.featured-item-panel .agents ul .bio .contact-row {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}