/* LC2AR-498 — agent cards (module + Our Team) and the shared Profile / Email windows.
   Loaded by layouts/liang/agentmodals.php, so it is on every page that renders agent cards. */

/* ---------- avatar: darker on hover, name bottom-left, whole photo opens the Profile Window ---------- */
.agent-avatar-link {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
}
.agent-avatar-link img {
    display: block;
    width: 100%;
    height: auto;
    transition: filter .25s ease;
}
.agent-avatar-link .agent-avatar-name {
    position: absolute;
    left: 10px;
    bottom: 10px;
    right: 10px;
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.agent-avatar-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 60, 0);
    transition: background .25s ease;
}
.agent-avatar-link:hover img,
.agent-avatar-link:focus-visible img { filter: brightness(.82); }
.agent-avatar-link:hover::after,
.agent-avatar-link:focus-visible::after { background: rgba(20, 30, 60, .22); }
.agent-avatar-link:hover .agent-avatar-name,
.agent-avatar-link:focus-visible .agent-avatar-name { opacity: 1; }

/* ---------- card buttons ---------- */
.btn.btn-agent-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #203864;
    color: #fff !important;
    border: 0;
    border-radius: 4px;
    padding: 7px 16px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}
.btn.btn-agent-email:hover,
.btn.btn-agent-email:focus { background: #16284a; color: #fff !important; }
.btn.btn-agent-email i { font-size: 13px; color: #fff !important; }

.agent-read-more {
    display: inline-block;
    text-decoration: underline;
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 8px;
    cursor: pointer;
}

/* ---------- windows ---------- */
.modal.agent-modal-card { z-index: 12000 !important; }
.modal-backdrop { z-index: 11990 !important; }

.agent-modal-card .agent-window-header {
    border-bottom: 0;
    padding: 18px 20px 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 14px;
}
.agent-modal-card .agent-window-logo {
    height: 48px;
    width: auto;
    margin-right: auto;   /* logo hugs the right, but stays clear of the X */
    order: 2;
}
.agent-modal-card .agent-window-header .btn-close { order: 3; margin: 0; }
.agent-modal-card .agent-window-header::before { content: ""; order: 1; flex: 1 1 auto; }

.agent-modal-card .agent-window-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 16px;
}
.agent-modal-card .btn-download-vcard {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #203864;
    color: #203864;
    background: #fff;
    border-radius: 4px;
    padding: 7px 16px;
    font-weight: 600;
    font-size: 14px;
}
.agent-modal-card .btn-download-vcard:hover { background: #f1f4fa; }

/* Email Window */
.agent-email-window .agent-email-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.agent-email-window .modal-avatar-sm { width: 72px; flex: 0 0 72px; }
.agent-email-window .modal-avatar-sm img { width: 100%; height: auto; display: block; }
.agent-email-window .agent-modal-name { margin: 0; }
.agent-email-window .agent-modal-position { margin: 2px 0 0; }

.agent-email-window .agent-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 10px 0 4px;
}
.agent-email-window .agent-form-label .req { color: #c62828; }
.agent-email-window .contact-agent-form .form-control { margin-bottom: 4px; }

.agent-email-window .financing-requirements { margin-top: 18px; }
.agent-email-window .financing-requirements h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.agent-email-window .financing-requirements ul { margin: 0; padding-left: 0; list-style: none; }
.agent-email-window .financing-requirements li { font-size: 13px; line-height: 1.7; }

.agent-email-window .agent-email-footer {
    border-top: 0;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 22px;
}
.agent-email-window .btn-send-email {
    background: #203864;
    color: #fff !important;
    border: 0;
    border-radius: 4px;
    min-width: 220px;
    padding: 10px 24px;
    font-weight: 600;
}
.agent-email-window .btn-send-email:hover { background: #16284a; }

@media (max-width: 767px) {
    .agent-modal-card .agent-window-logo { height: 38px; }
    .agent-avatar-link .agent-avatar-name { font-size: 13px; }
}

/* ---------- overrides against the older agents.css / module css that style .modal-avatar and .btn-download-vcard ---------- */
.agent-email-window .agent-email-identity { justify-content: flex-start; text-align: left; }
.agent-email-window .agent-email-identity .modal-avatar-sm { margin: 0; text-align: left; }
.agent-email-window .agent-email-identity .modal-avatar-sm img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; }
.agent-email-window .agent-email-identity > div:last-child { flex: 1 1 auto; text-align: left; }
.agent-modal-card .agent-window-actions .btn { flex: 0 0 auto; width: auto; }
.agent-modal-card .agent-window-actions .btn-download-vcard {
    background: #fff !important;
    color: #203864 !important;
    border: 1px solid #203864 !important;
    padding: 7px 16px !important;
    font-size: 14px !important;
}
.agent-modal-card .agent-window-actions .btn-download-vcard i { color: #203864 !important; }
.agent-avatar-link .agent-avatar-name { font-size: 13px; }

/* ---------- LC2AR-498 v498d: match the Figma proportions (Barry, 2026-09-08) ----------
   Email Window: portrait avatar (not a 72px square), small logo sitting below the X at the
   top-right, tight label/input rhythm, centred Send Email. Profile Window: same header. */
.agent-modal-card .modal-content { position: relative; }
.agent-modal-card .agent-window-header {
    padding: 14px 18px 0 !important;
    min-height: 44px;
    display: block;
}
.agent-modal-card .agent-window-header::before { display: none; }
.agent-modal-card .agent-window-header .btn-close {
    position: absolute; top: 14px; right: 18px; margin: 0; z-index: 2;
}
.agent-modal-card .agent-window-logo {
    position: absolute !important;
    top: 44px; right: 48px;
    width: 84px !important; height: auto !important; max-width: 84px !important;
    margin: 0 !important; order: 0;
}
.agent-modal-card .modal-body { padding: 4px 48px 24px !important; }

/* Email Window */
.agent-email-window .modal-dialog { max-width: 900px; }
.agent-email-window .agent-email-identity { align-items: flex-start; gap: 22px; margin: 0 110px 14px 0; }
.agent-email-window .agent-email-identity .modal-avatar-sm,
.agent-email-window .agent-email-identity .modal-avatar-sm img {
    width: 88px !important; max-width: 88px !important; flex: 0 0 88px;
    height: auto !important; object-fit: unset !important; border-radius: 0 !important; margin: 0 !important;
}
.agent-email-window .agent-email-identity .agent-modal-name { font-size: 28px; line-height: 1.15; margin: 4px 0 4px; }
.agent-email-window .agent-email-identity .agent-modal-position { font-size: 16px; margin: 0; }
.agent-email-window .contact-agent-form .row { margin-left: -7px; margin-right: -7px; }
.agent-email-window .contact-agent-form .row > [class*="col-"] { padding-left: 7px; padding-right: 7px; }
.agent-email-window .agent-form-label { font-size: 13px; font-weight: 700; color: #203864; margin: 8px 0 4px; }
.agent-email-window .contact-agent-form .form-control {
    height: 36px; min-height: 36px; padding: 6px 12px; font-size: 14px; line-height: 1.4;
    border: 1px solid #9aa3b5; border-radius: 3px; margin-bottom: 2px;
}
.agent-email-window .contact-agent-form textarea.form-control { height: 175px; min-height: 175px; resize: vertical; }
.agent-email-window .contact-agent-form .cf-turnstile { margin-top: 2px; }
.agent-email-window .financing-requirements { margin-top: 14px; }
.agent-email-window .financing-requirements h4 { font-size: 16px; margin-bottom: 4px; }
.agent-email-window .financing-requirements li { font-size: 14px; line-height: 1.55; color: #203864; }
.agent-email-window .agent-email-footer { padding: 6px 0 26px !important; }
.agent-email-window .btn-send-email { min-width: 212px; height: 44px; font-size: 16px; }

/* Profile Window */
.agent-profile-window .modal-dialog { max-width: 900px; }
.agent-profile-window .agent-profile-section .row { margin-right: 110px; }
.agent-profile-window .modal-avatar,
.agent-profile-window .modal-avatar img {
    width: 150px !important; max-width: 150px !important; height: auto !important;
    margin: 0 !important; border-radius: 0 !important;
}
.agent-profile-window .agent-profile-section .col-md-3 { flex: 0 0 170px; max-width: 170px; }
.agent-profile-window .agent-profile-section .col-md-9 { flex: 1 1 auto; max-width: none; }
.agent-profile-window .agent-modal-name { font-size: 28px; line-height: 1.15; margin: 4px 0 4px; }
.agent-profile-window .agent-modal-position { font-size: 16px; }
.agent-profile-window .agent-description { margin-top: 14px; }
.agent-profile-window .agent-description .description-text { font-size: 14px; line-height: 1.6; }

@media (max-width: 767px) {
    .agent-modal-card .modal-body { padding: 4px 20px 20px !important; }
    .agent-modal-card .agent-window-logo { top: 40px; right: 20px; width: 64px !important; max-width: 64px !important; }
    .agent-email-window .agent-email-identity { margin-right: 80px; }
    .agent-profile-window .agent-profile-section .row { margin-right: 0; }
}

/* ---------- Bruce's Email Window (LC2AR-498 step 3, built by the bruce-liang-modules skill) ----------
   That window is a raw_html addon inside an SPPB / Magnific popup, not a Bootstrap .modal, and it
   reuses these classes. Its logo carries inline float/max-width styles, so the overrides use
   !important to reach the same Figma proportions as the shared Email Window above. */
.mfp-content .bruce-email-window,
.sppb-modal-content .bruce-email-window,
.bruce-email-window {
    position: relative;
    padding: 22px 48px 26px;
    background: #fff;
}
.bruce-email-window .bruce-window-logo {
    float: none !important;
    position: absolute !important;
    top: 30px; right: 48px;
    width: 84px !important; max-width: 84px !important; height: auto !important;
    margin: 0 !important;
}
.bruce-email-window .agent-email-identity { margin: 0 110px 14px 0; }
.bruce-email-window .agent-email-footer { text-align: center !important; padding: 6px 0 0; }
.bruce-email-window .bruce-email-status { text-align: center; }
@media (max-width: 767px) {
    .bruce-email-window { padding: 20px 20px 22px; }
    .bruce-email-window .bruce-window-logo { top: 26px; right: 20px; width: 64px !important; max-width: 64px !important; }
    .bruce-email-window .agent-email-identity { margin-right: 80px; }
}

/* ---------- Bruce's Profile pop-up (SPPB page in a Magnific popup; bruce-liang-modules skill) ----------
   Same header logo treatment as the shared windows, and the portrait capped at 150px like the shared
   Profile Window. Scoped with :has() on the popup's own Email button so no other SPPB popup is touched. */
.mfp-content .white-popup-block:has(.bruce-popup-email) { position: relative; padding-top: 26px; }
.mfp-content .white-popup-block:has(.bruce-popup-email) .bruce-window-logo {
    float: none !important;
    position: absolute !important;
    top: 26px; right: 48px;
    width: 84px !important; max-width: 84px !important; height: auto !important;
    margin: 0 !important;
}
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-addon-single-image-container img {
    width: 150px !important; max-width: 150px !important; height: auto !important;
}
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-addon-single-image-container { text-align: left; }
@media (max-width: 767px) {
    .mfp-content .white-popup-block:has(.bruce-popup-email) .bruce-window-logo { right: 20px; width: 64px !important; max-width: 64px !important; }
}

/* ---------- LC2AR-498 v498g: Profile Window per Barry's Figma check (2026-09-08) ----------
   114px portrait, bio in full (no View more), bio left edge = photo left edge, logo top = photo top. */
.agent-profile-window .modal-avatar,
.agent-profile-window .modal-avatar img { width: 114px !important; max-width: 114px !important; }
.agent-profile-window .agent-profile-section .col-md-3 { flex: 0 0 136px; max-width: 136px; }
.agent-profile-window .agent-profile-section .row { margin-right: 0; }
.agent-profile-window .agent-profile-section .col-md-9 { padding-right: 120px; }
.agent-profile-window .agent-modal-name { font-size: 26px; margin-top: 0; }
.agent-profile-window .agent-description { margin-top: 18px; }
.agent-profile-window .agent-description .description-text { font-size: 15px; line-height: 1.55; margin: 0;
    /* LC2AR-558: the bio is injected with textContent, so the blank lines between the
       agent's paragraphs only survive if white-space keeps them. */
    white-space: pre-line; }
.agent-profile-window .view-more-link { display: none !important; }
.agent-profile-window .agent-window-logo { top: 48px; }
.agent-profile-window .modal-body { padding-top: 4px !important; }

/* Bruce's Profile pop-up: same rules against the SPPB markup */
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-addon-single-image .sppb-addon-content { text-align: left !important; }
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-addon-single-image-container img { width: 114px !important; max-width: 114px !important; }
.mfp-content .white-popup-block:has(.bruce-popup-email) .bruce-window-logo { top: 0; }
.mfp-content .white-popup-block:has(.bruce-popup-email) #bio-dots { display: none !important; }
.mfp-content .white-popup-block:has(.bruce-popup-email) #bio-full { display: inline !important; }
.mfp-content .white-popup-block:has(.bruce-popup-email) #bio-toggle { display: none !important; }

/* LC2AR-558: on phones the logo (absolute, top right, 64px) sat on top of the last word of
   "Bruce Liang". Keep the name and title clear of it. */
@media (max-width: 767px) {
    .mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-addon-content h2,
    .mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-addon-content h4 { padding-right: 84px; }
}

/* ---------- v498h: Bruce's two pop-ups get the same 900px frame / 48px padding as the shared windows,
   so the bio and the email form are the same width (Barry, 2026-09-08). ---------- */
.mfp-content .white-popup-block:has(.bruce-popup-email),
.mfp-content .white-popup-block:has(.bruce-email-window) {
    width: 900px !important; max-width: 96vw !important; margin: 0 auto !important;
    box-sizing: border-box;
}
.mfp-content .white-popup-block:has(.bruce-popup-email) { padding: 26px 48px 26px !important; }
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-row-column { padding-left: 0 !important; padding-right: 0 !important; }
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-row { margin-left: 0 !important; margin-right: 0 !important; }
.mfp-content .white-popup-block:has(.bruce-email-window) { padding: 0 !important; }
.mfp-content .white-popup-block:has(.bruce-email-window) .sppb-row-column { padding-left: 0 !important; padding-right: 0 !important; }
.mfp-content .white-popup-block:has(.bruce-email-window) .sppb-row { margin-left: 0 !important; margin-right: 0 !important; }
.mfp-content .white-popup-block:has(.bruce-email-window) .bruce-email-window { padding: 26px 48px 26px; }

/* v498i: Bruce's Profile pop-up — photo column hugs the 114px portrait so the name sits next to it (Figma) */
/* only the row that holds the portrait — the bio row below is a single full-width column */
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-row:has(.sppb-addon-single-image) > .sppb-row-column:first-child {
    flex: 0 0 138px !important; width: 138px !important; max-width: 138px !important;
}
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-row:has(.sppb-addon-single-image) > .sppb-row-column:first-child + .sppb-row-column {
    flex: 1 1 auto !important; width: auto !important; max-width: none !important; padding-right: 120px !important;
}
/* keep the popup block as the logo's containing block (SPPB makes addons position:relative) */
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-row-column,
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-column,
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-column-addons,
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-addon-wrapper,
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-addon,
.mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-addon-content { position: static !important; }

/* v498k: Bruce Profile pop-up — logo's right edge flush with the bio's right edge (Figma) */
.mfp-content .white-popup-block:has(.bruce-popup-email) .bruce-window-logo { right: 15px; }

/* ---------- v498l (Barry, 2026-09-08) ----------
   1. Turnstile sits to the RIGHT of the financing block instead of above it (saves ~80px); the shared
      Email Window and Bruce's share classes and DOM order (turnstile row -> financing -> footer).
   2. Send Email label centred both ways.
   3. Profile Window: Download vCard left, Email right, both dark.
   4. Bruce's card: "Read more" and the Email button share the same left edge. */
.agent-email-window .contact-agent-form .row.mt-3 { float: right; width: 300px; margin: 6px 0 0 !important; }
.agent-email-window .contact-agent-form .row.mt-3 > .col-12 { padding: 0; }
.agent-email-window .contact-agent-form .cf-turnstile { margin: 0; }
.agent-email-window .financing-requirements { margin-right: 320px; margin-top: 10px; }
.agent-email-window .bruce-email-status,
.agent-email-window .agent-email-footer { clear: both; }
.agent-email-window .agent-email-footer { padding-top: 14px !important; }
.agent-email-window .btn-send-email,
.bruce-email-window .btn-send-email {
    display: inline-flex !important; align-items: center; justify-content: center;
    height: 44px; line-height: 1 !important; padding: 0 28px !important; min-width: 212px;
}
.agent-modal-card .agent-window-actions .btn-download-vcard {
    background: #203864 !important; color: #fff !important; border: 1px solid #203864 !important;
}
.agent-modal-card .agent-window-actions .btn-download-vcard i { color: #fff !important; }
.agent-modal-card .agent-window-actions .btn-download-vcard:hover { background: #16284a !important; }
.bruce-profile-btn .sppb-btn-link,
.bruce-email-btn .sppb-btn { margin-left: 0 !important; }
.bruce-profile-btn .sppb-btn-link { padding-left: 0 !important; }
.agent-card .agent-read-more { margin-left: 0; padding-left: 0; }
@media (max-width: 767px) {
    .agent-email-window .contact-agent-form .row.mt-3 { float: none; width: auto; }
    .agent-email-window .financing-requirements { margin-right: 0; }
}

/* v498n: Send Email must not stretch — the legacy .agent-modal-card .modal-footer is a flex row */
.agent-email-window .agent-email-footer { display: flex !important; justify-content: center !important; }
.agent-email-window .agent-email-footer .btn-send-email,
.bruce-email-window .agent-email-footer .btn-send-email { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }

/* ---------- v498o: mobile pass (≤767px), measured at 390px on liang2226 + cgyrest26 ---------- */
@media (max-width: 767px) {
    /* Bruce's two pop-ups: the desktop 48px side padding left only 248px for content */
    .mfp-content .white-popup-block:has(.bruce-popup-email) { padding: 20px 16px 20px !important; }
    .mfp-content .white-popup-block:has(.bruce-email-window) .bruce-email-window { padding: 20px 16px 20px !important; }
    .mfp-content .white-popup-block:has(.bruce-popup-email) .bruce-window-logo,
    .bruce-email-window .bruce-window-logo { right: 16px; }
    .mfp-content .white-popup-block:has(.bruce-popup-email) .sppb-row:has(.sppb-addon-single-image) > .sppb-row-column:first-child + .sppb-row-column { padding-right: 0 !important; }
    .bruce-email-window .agent-email-identity { margin-right: 76px; }
    /* Shared Profile Window: keep the name beside the 114px portrait instead of wrapping under it */
    .agent-profile-window .agent-profile-section .col-md-9 { width: auto !important; flex: 1 1 0 !important; padding-right: 76px; }
    .agent-profile-window .agent-profile-section .col-md-3 { width: 130px !important; flex: 0 0 130px !important; max-width: 130px !important; }
    .agent-profile-window .agent-modal-name { font-size: 22px; }
    .agent-modal-card .modal-body { padding-left: 16px !important; padding-right: 16px !important; }
    .agent-modal-card .agent-window-logo { right: 16px; }
}

/* ---------- LC2AR-563 (Trello SNoBeJlT): Bruce's homepage tile (SPPB "Bruce - Horizontal" modules) ----------
   1. Contact lines stacked tight: the text blocks kept the theme's 16px paragraph gap. abhotel26's own
      override is `p { margin-bottom: 0 rem; }` (the space makes it invalid, so browsers drop it), and
      cgywhse26/liang2226 set line-height 70%, which would overlap once the gap is gone, so both are set here.
      Direct children of the tile's own column only, so the pop-up content inside the modal addons is untouched.
   2. The Email button matches the agent cards' .btn.btn-agent-email (top of this file). SPPB writes the
      button's padding/size/radius with ID selectors, hence !important. */
.sppb-column-addons:has(> .sppb-addon-wrapper .bruce-email-btn) > .addon-root-text-block .sppb-addon-content p {
    margin-bottom: 0;
    line-height: 1.4;
}
.bruce-email-btn .sppb-btn.sppb-modal-selector {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
}
.bruce-email-btn .sppb-btn.sppb-modal-selector i { font-size: 13px; margin: 0 !important; }
.bruce-email-btn .sppb-btn.sppb-modal-selector:hover,
.bruce-email-btn .sppb-btn.sppb-modal-selector:focus { background-color: #16284a !important; }