/*==========================Skinn manager vars applied here==========================*/
/* Common front colors [Not home page]*/
pre { clear: both; }
.whiteText, .whiteTextHover:hover { color: var(--white) }
.primaryRed, .primaryRedHover:hover { color: var(--front_primary_brand) }
.primaryRedBg, .primaryRedBgHover:hover { background-color: var(--front_primary_brand) }
.primaryDeepRedBg, .primaryDeepRedBgHover:hover { background-color: var(--front_primary_brand_hover) }
.primaryRedBorder, .primaryRedBorderHover:hover { border-color: var(--front_primary_brand) }
.primaryDeepRedBorder, .primaryDeepRedBorderHover:hover { border-color: var(--front_primary_brand_hover) }

.propBoxButton:hover i.svg-icons { color: var(--white) !important;}

.virtual_tour a, .formLegalText a,
.propBoxButton i.svg-icons { color : var(--front_primary_brand) !important;}

.singlePrevNextLinks a,
.carousel-control .fa, .featuredCont a.featuredBtn .fa, .testimonialCont a.featuredBtn .fa, .rating-container .rating-stars,
.closedInfo span, .agent_listings h2,
.fa-folder,.fa-search-plus,.fa .fa-heart,.fa .fa-eye,.saves span.leftBtn .fa { color : var(--front_primary_brand) !important;}
.searchTabHead .fa-search,
.full_profile_right h3,.full_profile_right1 h2,.full_profile_right2 h2,.full_profile_about .span11 > h2,.client-review h2,.client-review a,.client-review h3 a,
.client-review h3 a:hover,.client-review span,.sColorText,.sColorTextHover { color : var(--front_primary_brand) !important;}


#widget-header,.propertyTitleBar .propertyPrice h2,.feature-property_left1 h2,.back_testi,
.searchTabHead li.active a,
.total-search-for p,.total-search h2,.total-search_bottom h2,.mapText a,.span1,.mc-title,
.close a,.loginSubmenu .dropdown-menu h2,.mc_embed_mortgage h3,.left1-resource h2 { color : var(--front_primary_brand) !important;}
.descriptionHeadTitles,.property-feature-info-sub h4,
th.ui-datepicker-week-end,td.ui-datepicker-week-end a,.real-estate-news h1,.real-estate-news h1 a,.drop a:hover { color : var(--front_primary_brand) !important;}

.newsletterPanel .fa, .newsPanel .fa {color : var(--front_primary_brand) !important; font-size: 20px; margin-right: 5px;}

.swiper-button-next, .swiper-button-prev, .mcw-calculate-btn, .searchTabHead2 .active a, .searchTabHead2 li a:hover,
.fa .fa-search-plus,.agent_lit,.loginSubmenu .dropdown-menu .btn,
.searchin,.bx-pager-item a:hover,.bx-pager-item a.active,.searchtabb1 li a:hover,.searchtabb1 li.active a,.searchTabHead li a:hover,.namm,.full_profile2 a,.full_profile3 .fa:hover,
.profile-submit,.save-submit,.save-submitt,.glyphicon.glyphicon-chevron-left,.glyphicon.glyphicon-chevron-right,.resource_right > .page_title_heading h2, .resource_right > .back-agent h2,.agent h2,
.pagination a:hover,.pagination .active a,.contactus_info1 .submitt,.livechat,.livechat:hover,.weak-password,
.mcw-wrap_theme4 .mcw-calculate-btn,.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,
.ui-button:active,.ui-button.ui-state-active:hover,#businessModal .modal-header, #businessModal .submit_btn, #businessModal .submit_btn:hover, #businessModal .submit_btn:focus,
.btn_add_new,.mc-button,.searchTabBody .checkContaineer label.checkbox-inline input[type="radio"]:checked, .searchTabBody .checkContaineer label.checkbox-inline input[type="checkbox"]:checked,
input[type="radio"]:checked, input[type="checkbox"]:checked,.propLabel.newProp, .topMenu .dropdown-menu li:hover,
.searchTabBody .jointNow2,#residentialsearch-form .jointNow2,.thumb-view-left-content,.topPanel .userLogindetail ul li a:hover,
.real-estate-read-more a { background-color: var(--front_primary_brand) !important;}

.setPaginate input:disabled{ background-color: var(--pagination-accent, #a00a0f) !important; opacity: 1 !important; cursor: not-allowed; }

.contactus_info1 .submitt:hover,
.mcw-calculate-btn:hover, .loginSubmenu .dropdown-menu .btn:hover, .resource_right .btn-primary:hover, .resource_right .btn-primary:active, .resource_right .btn-primary:focus, .resource_right .btn-primary.active,
.addBusinessBtn:hover .full_profilee_sub .full_profile2 a:hover,.save-submit:hover, .searchin:hover, .searchinfo:hover,.searchTabBody .jointNow2:hover, .searchTabBody .jointNow2:focus, .searchTabBody .jointNow2:active,
#residentialsearch-form .jointNow2:hover, #residentialsearch-form .jointNow2:focus, #residentialsearch-form .jointNow2:active{ background-color: var(--front_primary_brand_hover) !important; border-color: var(--front_primary_brand_hover) !important;}

.real-estate-read-more a,
.searchTabBody .jointNow2,#residentialsearch-form .jointNow2,
header .navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li:hover > a{ border-color: var(--front_primary_brand) !important; }

.contactus_info1 .submitt, .loginSubmenu .dropdown-menu .btn, .searchin,.searchinfo { border-color: var(--front_primary_brand) !important; }
/* Read More on news pages -- match the site's other solid-red buttons (dark red on hover), not .selt_blue_txt's own inverted (white-on-hover) behavior */
.real-estate-read-more a:hover { background-color: var(--front_primary_brand_hover) !important; border-color: var(--front_primary_brand_hover) !important; color: var(--white) !important; }
@media (min-width:980px){
  header .navbar-default .nav > li > a:hover,
  .navbar-default .navbar-nav > li:hover > a,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus { border-color: var(--front_primary_brand) !important; }
  #navbar-collapse .navbar-nav li ul li a:hover,
  #navbar-collapse .navbar-nav li ul li:hover > a,
  #navbar-collapse .navbar-nav li ul li.active > a { color: var(--white); background-color: var(--front_primary_brand) !important; }
}

/* Pre-redesign hover/active color+border rules removed here (they fired on
   plain :hover and on the dcjq-accordion's own open/expand .active class,
   which is not the same thing as "this is the current page" -- see the
   .is-current-page rules below in the .category-tree block for the real
   current-page highlight). */

.selt_blue_txt:hover,.agent_lit:hover { border-color: var(--front_primary_brand) !important; color: var(--front_primary_brand) !important; }

.highlightForm { box-shadow: 0px 0px 10px 1px var(--front_primary_brand); z-index: 1; }

.singlePrevNextLinks a:hover,
.carousel-control .fa:hover, .featuredCont a.featuredBtn .fa:hover, .testimonialCont a.featuredBtn .fa:hover,
.sColorTextHover:hover { color : var(--front_primary_brand_hover) !important;}
.mcw-calculate-btn { border-color: var(--front_primary_brand_hover) !important;}

.newsletter_bg, .topPanel, .descriptionHeadTitles { background-color: var(--front_topbar_bg) !important;}


#left .feature-property_left, .resource_right .page_title_heading, .left1-resource h2, .tool h2{ background-color: var(--front_secondary_brand) !important;}


.newsPanel a, .formLegalText a { text-decoration: underline; }
.newsPanel a:hover, .formLegalText a:hover { text-decoration: none; }

.footerBottom, .footerBottom table{ background-color: var(--front_footer_bg) !important; }
.footerBottom .socialIcons { color: var(--front_footer_text) !important; }
.footerBottom table, .footerBottom table a { color: var(--front_footer_text) !important; }
.footerBottom svg path:first-child { fill: var(--front_footer_text); }
.footerBottom svg{ fill: var(--front_footer_bg); }


/*==========================Skinn manager vars applied here end==========================*/

.saves { width: 100%; display: flex; gap: 4px; flex-wrap: wrap;}
.saves span.leftBtn { background-color: var(--white); text-align: center; line-height: 50px; flex: 1 0 auto;}
.saves span.leftBtn a { text-decoration: none; display: block; height: 50px; padding: 0px 10px;}

*{margin:0px;padding:0px;}
.view-all-image{ border-radius:80px;border:7px solid var(--lgray-cc);transition:all 0.3s ease 0s; }
.view-all-image:hover{border-radius:80px;border:12px solid var(--lgray-cc);transition:all 0.3s ease 0s;}
#menu-sidebar-menu { margin-bottom: 4px; }
body, p, img, div, h1, h2, h3, h4, h5, h6, table, input, textarea, button, ul, li{margin:0px;padding:0px;border:0px;outline:0px;margin-bottom:0;}
.pageEditorContent p,
.pageEditorContent img,
.pageEditorContent div,
.pageEditorContent h1,
.pageEditorContent h2,
.pageEditorContent h3,
.pageEditorContent h4,
.pageEditorContent table,
.pageEditorContent input,
.pageEditorContent textarea,
.pageEditorContent button,
.pageEditorContent ul,
.pageEditorContent li { margin: revert; padding: revert; border: revert; outline: revert; margin-bottom: revert; vertical-align: revert; }
a, a:hover{text-decoration:none;}
a:focus{outline:0px;text-decoration:none;}
ul, li{list-style:none;}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html {-ms-overflow-style: scrollbar; overflow-y: scroll;}
.bx-viewport{height:550px !important;}
#contactform > h5 {color: red;margin-top: 10px;}
::-ms-clear {display: none;}
header{background-color:var(--white);}
@media screen and (-ms-high-contrast: active), (-ms-agentthigh-contrast: none) {::-ms-browse {margin-right: 15px;margin-left: 15px;}
  ::-ms-value {background-color:var(--lgray-cc);}
}
footer {bottom: 0;float: left;margin: 0;padding: 0;position: relative;width: 100%;}
.mcw-wrap .mcw-calculate-btn { line-height: normal !important; }
.mcw-wrap .mcw__title { display: none !important;}

#dc_jqaccordion_widget-3-item ul li.active ul li a {
    padding: 12px 18px;
}
#left {position: absolute;height: 100%;width:25%;}
#right {position: relative;float: right;width:75%;}
@media (min-width:1200px) { #left { min-width: 280px; } }
.search-property-leftbar{height:auto;display:block !important;}
#popup{cursor:pointer;text-align:left;}
.page{background-color: var(--white); padding:0;}
.menuu1{padding:0;}
.search-match{width:100%;float:left;}
.fa.fa-eye{font-size:16px;}
.thumb-view{width:100%;display:block;padding:0 ;}
.propLabel.featuredProp { background: #059116; top: 10px; left: 10px; }
.thumb-view:not(:has(.no-results-state)) { margin-bottom: 30px; }
.search-match.listViewContainer:not(:has(.no-results-state)) { margin-bottom: 30px; }
#quickSearchContent:not(.property-detail-page) .tab-content { margin-top: 0px; }
img.miamiRealtorLogo { width: 70px; margin: -10px 0px; }
.show-search-by-criteria-closed {display:none;}
.new{float:right;text-align:right;margin-top:5px;}
.new li{float:left;margin-right:8px;color:#2374db;font-size:11px;font-weight:600;height:auto;padding:2px;}
.new li a{color:#2374db;text-decoration:underline;font-size:11px;font-weight:600;}
.fa-folder{padding-right:5px;}
.fa-search-plus{padding-right:5px;}
.sortByDropDownContainer label.for-label { margin: 0px; font-size: 11px !important; text-transform: uppercase; letter-spacing: .6px; color: var(--pc-text-gray); font-weight: 700; width: auto; }
.search-quick-panel{float:left;padding:0;}
.fa .fa-heart{font-size:16px;margin-right:5px;}
.fa .fa-search-plus{font-size:14px;color:var(--white);margin-right:5px;padding:1px;}
.fa .fa-eye {font-size: 18px;margin-right:5px;}
.mc-body{width:887px;}
.matrices-widget{width:100%;float:left;}
.major-widget{width:100%;float:left;}
.matrices-widget iframe{width:270px;}
.major-widget iframe{width:100%;height:450px;}
.navbar {border-radius:0;}
label.error { color:red; margin: 2px 0 0px; padding: 0; width:100%; font-family: var(--font-base); font-size: 13px;}
.red1{color:red;}
.category-tree2 { float:left;width:100%;}
.profile-form11 { background-color:var(--white);margin:0 4px;display:block;text-align:center;border:none;padding:20px 0px; }
.profile-form11 .profilePic { text-align:center; margin:0 0 20px 0; }
.profile-form11 h2 { font-size:22px; font-weight:600; }
.profile-form11 h3 { color:#070404; font-size:14px; margin-bottom:10px; }
.profile-form11 h4, .profile-form11 h6 { margin:10px 0; }
.profile-form11 h6 { margin-bottom: 0; }
.profile-form11 h4 a, .profile-form11 h6 a { color:#2374db; text-decoration:underline; font-size:13px; font-weight:600; }
.profile-form11 h4 a:hover, .profile-form11 h6 a:hover { text-decoration:none;}
.profile-form11 .profilePopBtn a { border-radius:5px; text-align:center; margin:0 auto; padding:7px 17px; display: inline-block;}



/* Chevron icon replaces the old plus_grey.png/minus_grey.png background-
   image swap -- matches business-directory-redesign-mockup-v3.html's
   .sidebar-nav li.has-submenu > a .chevron (rotate 180deg on open, same
   .6s ease-in-out as the dcjq-accordion plugin's own speed:'slow' 600ms,
   so the icon and panel move at the same rate). .dcjq-parent.active is
   the exact class the plugin itself already toggles open/closed, so no
   JS changes were needed to hook the rotation to it. */
#dc_jqaccordion_widget-3-item ul a.dcjq-parent { background: none; }
#dc_jqaccordion_widget-3-item ul a.dcjq-parent.active { background-color: #f5f5f5; font-weight: 700; }
/* margin-right:-12px (was margin-left:8px, redundant with the row's own gap:8px and didn't nudge the icon to the true edge) */
.dcjq-icon svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: #6b6b6b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .6s ease-in-out, stroke .15s ease;
}
/* jquery.dcjqaccordion.2.9.js appends its own empty <span class="dcjq-icon">
   to every parent link on init (see classArrow in the plugin), on top of the
   one already in the markup above. The empty one has no svg, so it's
   invisible, but it still counts as a 3rd flex item, pushing the real
   chevron away from the row's right edge instead of flush against it. */
.dcjq-icon:empty { display: none; }
a.dcjq-parent.active .dcjq-icon svg { transform: rotate(180deg); stroke: #333333; stroke-width: 3; }

/* Plain positioning container now -- .category-tree_sub-fill supplies the gray backdrop instead */
.category-tree_sub{padding:0 !important;float:left;position:relative; border-radius: 12px; }
/* Resources sidebar hidden below desktop again, per direct request -- reverts the mockup-fidelity change that un-hid it. */
@media (max-width:979px){ .category-tree_sub{display:none !important;} }
/* re-show agentDetail.php's contact form, which the nav-menu hide rule above also caught */
@media (max-width:979px){ .category-tree_sub:has(#contactAgentCard){display:block !important;} }
/* re-show the search pages' Save Search/Receive Alerts row (v39: stays at the top on every screen size) */
@media (max-width:979px){ .category-tree_sub.search-property-leftbar:has(.ss-sidebar-actions){display:block !important;} }
@media (min-width:980px){ .category-tree_sub{min-width:280px;} }
.newspp{ width:100%;display:block;}
.newspp h3{float:right;display:block;font-size:16px;font-weight:bold;}
.newspp span {float: right;margin-top: 8px;font-weight:normal;}

.rel{position:relative;}
.abs{position:absolute;}
h1{font-size:30px;font-weight:bold;color:#383737;text-transform:uppercase;margin-bottom:18px;}
h3{font-size:18px;font-weight:normal;color:#383737;text-transform:none;margin-bottom:18px;}
.featuredPanel h1.featureText, .testimonialPanel h1 { text-transform: capitalize;  font-size: clamp(24px, 6vw, 32px); font-weight: 600; }
.popup {cursor: pointer;font-weight: bold;text-align: left;}
.scrollTop .fa {line-height: 2;}
.staticPanel{width:100%;float:left;display:block;position:relative;padding-bottom: 25px;}
.scrollTop{position:fixed;bottom:10px ;right:20px;background:rgba(0,0,0,.7);width:45px;height:40px;z-index:1000;border-radius:5px;cursor:pointer;text-align:center;line-height:40px;font-size:20px;color:var(--white);display:none;}
.scrollTop:hover{background:#000}
.fa-file-text {font-size: 28px;margin-right: 10px;}
.language{margin-right:8px;}
.text{margin-top:6px;}

.feature{padding:0;}
.feature-property_left{float:left;display:block;background-color:var(--lgray-e5);width:100%;border:solid 1px var(--lgray-cc);height:100% !important;}
.feature-property_right{float:right;display:block;width:100%;}
#mcwWrap, .mcw-wrap input.mcw-form__field, .select-target.select-theme-default, .profile-form li span, .profile-form textarea, .formLegalText, .profile-form li input[type="text"] { color: var(--cgray) !important; }
.feature-property-estimates { float:right; }
.feature-property-estimates li { float:left; font-size:12.5px; color:#2374db; }
.feature-property-estimates li a{ color:#2374db; text-decoration:underline; font-weight:600;}
.dropdown-submenu.dropdown-menu li a{font-size:14px;padding-left:40px !important;}
.dropdown-submenu{position:relative;}
.dropdown-submenu > .dropdown-menu { display: none; top:0; left:100%; margin-top:-1px; margin-left:0px; }
.dropdown-submenu:hover .dropdown-menu { display: block; }
.dropdown-submenu>a:after{display:block;content:" ";width:162px;height:0;border-color:transparent;border-width:5px 0 5px 5px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;display:block;}
/* Applied by js/main.js when a top-nav dropdown's own bounding rect would
   overflow past the right edge of the viewport -- flips it to hang off the
   trigger's right edge instead of its left, keeping it fully on-screen. */
.dropdown-menu-right-align{left:auto !important;right:0 !important;}
.ratings {float: right;overflow: visible;padding: 5px;position: relative;width: 48%;}
.arrow, .arrow1 {background-repeat: no-repeat;border-left: 4px solid rgba(0, 0, 0, 0);border-right: 4px solid rgba(0, 0, 0, 0);float: right;height: 0;margin-left: 2px;position: relative;right: 0;vertical-align: middle;width: 0;background-image:url(../images/arrow.png);width:19px;height:19px;}
.navbar-default .dropdown.open .arrow {border-top: medium none;display: block;background-image:url(../images/arrow_down_hover.png);}
.navbar-default .arrow:focus {border-top: medium none;display: block;}
.yashpal.col-sm-12{padding:0;float:left;}
.st_sharethis_large{display:none;}
.st_facebook_large1 .stLarge{background-image:url("../images/st-facebook.jpg") !important;background-repeat:no-repeat;width:32px;height:32px;}
.st_facebook_large1 .stLarge:hover{background-image:url("../images/st-facebook-hover.jpg") !important;background-repeat:no-repeat;width:32px;height:32px;opacity:1 !important;background-position:inherit !important;}
.st_linkedin_large1 .stLarge{background-image:url("../images/st_linkdin.jpg") !important;background-repeat:no-repeat;width:32px;height:32px;}
.st_linkedin_large1 .stLarge:hover{background-image:url("../images/st-linkdin-hover.jpg") !important;background-repeat:no-repeat;width:32px;height:32px;opacity:1 !important;background-position:inherit !important;}
.st_twitter_large1 .stLarge{background-image:url("../images/st_twitter.jpg") !important;background-repeat:no-repeat;width:32px;height:32px;}
.st_twitter_large1 .stLarge:hover{background-image:url("../images/st_twitter-hover.jpg") !important;background-repeat:no-repeat;width:32px;height:32px;opacity:1 !important;background-position:inherit !important;}
.slider-mobile{width:100%;float:left;background-size:cover;display:none;}
.bx-controls-direction{position:absolute;top:50%;z-index:101;}
.bx-pager-item{display:inline-block;text-align:center;line-height:20px;}
.bx-pager-item a{width:17px;height:17px;border-radius:100%;border:3px solid var(--white);margin:0 4px;text-indent:-99999px;display:inline-block;background:rgba(160,10,15,.1)}
.sliderCont{position:absolute;top:0px;left:0px;width:100%;background:transparent;height:100%;}
.sliderHeading{padding:32px 0;width:333px;border-radius:5px;}
.sliderHeading h1, .sliderHeading h2 {color:var(--white);font-size:40px;margin-bottom:0px;}
.navbar-user li:first-child {background-color: rgba(0, 0, 0, 0);}
.bannerPanel ul.bannerSlider li img {height: auto;width: 100%;background-size:cover;}
.bannerPanel img{width:100%;height:auto;margin:0 0 25px;max-height:320px;background-size:100% 100%;}
.bannerPanel .bx-controls{display:none;}
#quickSearchContent label {margin-bottom: 5px;margin-left:5px; line-height: 100%;}
.searchMap{padding-top:20px }
.fa-th-large,.fa-th-large {margin-right:10px;font-size:18px;}
.fa-file-text-o {font-size: 23px;margin-right: 10px;}
.searchTabBody{background:var(--white);border-top:0px;-moz-padding:10px 30px;-webkit-padding:10px 30px;padding:10px 30px;color:#000;}
.searchTabBody .form-group{width:100%;margin-bottom:14px;color:#000;}
.searchTabBody p{font-size:14px;margin-bottom:14px;margin-top:10px;color:#000;font-style:italic;}
.mapPanel{ overflow:hidden; }
.mapPanel img{height:auto;}
.fa-camera{font-size:16px;padding-right:5px;}
.fa-th-list{font-size:16px;padding-right:5px;}
.fa-th{font-size:16px;padding-right:5px;}
.total-search-for { width: 100%; margin: 10px 0; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
select.perPageDropDown { padding: 8px; border-radius: 8px; border: 1px solid var(--lgray-cc); font-size: 14px;}
.total-search-for p{width:100%;float:left;}
.total-search-for p{font-size:14px;font-weight:bold;height:auto !important;float:left;margin-bottom:0;}
.total-search-for p span{color:var(--lgray-66);font-size:12px;font-weight:normal;}
/* Agents-redesign patch 5, applied globally: bold "Total Results", oversized
   middot separator, "Show" label in front of the per-page dropdown -- same
   showRecordsFoundCounte() output used by ~10 pages. */
.total-search-for .count { font-weight: normal; color: var(--lgray-66) !important; font-size: 13px; }
.total-search-for .count strong { font-weight: 600; color: #333333 !important; }
.total-search-for .count .dot { font-size: 32px; line-height: 0; color: var(--lgray-66); vertical-align: middle; margin: 0 2px; display: inline-block; padding-bottom: 3px; }
.total-search-for .per-page { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lgray-66); font-weight: normal; }
.for-label{color:var(--lgray-66);font-size:14px;font-weight:normal;margin-top:10px;width:70px;}
.resource_right .int_cntnt_testimonial {background-color: var(--white);padding-top: 12px;text-align: justify;width: 100%;}
.client-testimonials{float:left;display:block;width:100%;background: var(--white);}
.fa.fa-quote-left {font-size: 0px;margin-right: 5px;color:var(--cgray);float:left;}
.fa.fa-quote-right {font-size: 0px;margin-left: 5px;color:var(--cgray);line-height:17px;padding-top: 7px;}
.testing{min-height:112px;}
.form-control { transition: border-color .15s ease, box-shadow .15s ease; }
.form-control:hover {border-color: var(--su-border-strong);}
.form-control:focus {outline: none; border-color: var(--front_primary_brand); box-shadow: 0 0 0 3px rgba(160,10,15,.10);}
.full_profilee{padding:0; margin-top: 12px;}
.f1{padding:8px 14px !important;}
.agentBioDescription { line-height: 1.6; }
.request-more-info{margin-left:4px !important;margin-right:4px !important;}
.profile-form li input[type="text"],.profile-form li input[type="tel"]{background-color:var(--white);border:1px solid var(--su-border);border-radius:4px;width:100%;padding:8px 10px;margin-top:5px;transition:border-color .15s ease, box-shadow .15s ease;}
.profile-form li input[type="text"]:hover,.profile-form li input[type="tel"]:hover{border-color:var(--su-border-strong);}
.profile-form li input[type="text"]:focus,.profile-form li input[type="tel"]:focus{outline:none;border-color:var(--front_primary_brand);box-shadow:0 0 0 3px rgba(160,10,15,.10);}
.profile-form li textarea{background-color:var(--white);border:1px solid var(--su-border);width:100%;padding:5px;height:130px;margin-top:5px;line-height:17px;transition:border-color .15s ease, box-shadow .15s ease;}
.profile-form li textarea:hover{border-color:var(--su-border-strong);}
.profile-form li textarea:focus{outline:none;border-color:var(--front_primary_brand);box-shadow:0 0 0 3px rgba(160,10,15,.10);}
.profile-form.request-more-info > form{float:left;padding-top:5px;}
.profile-submit, .profile-submit, .save-submit, .save-submitt {text-align:center;border-radius:5px;color:var(--white);border:none !important;}
.save-submit, .mcw-wrap .mcw-calculate-btn { margin: 5px auto; padding: 10px !important; display: block; max-width: 300px; }
.mcw-wrap .mcw-calculate-btn{ border-radius: 5px; }

#mc_embed_signup h2 { font-size:18px; font-weight: 600; margin-bottom: 10px;}
#mc_embed_signup .mc-field-group h2 { margin-top: 20px; }
#mc_embed_signup .button { background-color: var(--front_primary_brand);}
#mc_embed_signup .button:hover{ background-color: var(--front_primary_brand_hover); border-color: var(--front_primary_brand_hover);}
#mc_embed_signup .mc-field-group input, #mc_embed_signup .mc-field-group select, #mc_embed_signup .mc-field-group textarea { border: solid 1px var(--lgray-cc); width: 100%; text-indent: unset !important; padding: 8px; margin: 5px 0px 0px; }
#newslettersForm .mc-field-group>.mc-field-group { margin-bottom: 10px; }
#mc_embed_signup .mc-field-group input:hover, #mc_embed_signup .mc-field-group textarea:hover, #mc_embed_signup .mc-field-group select:hover{border-color: var(--su-border-strong);}
#mc_embed_signup .mc-field-group .asterisk{color:#f00;}
#mc_embed_signup .button{color:var(--white);padding:7px 22px;border-radius:5px;}
#mc_embed_signup { font-size:15px; }
#mc_embed_signup .mc-field-group label { margin: 0px; width: 100%;}

.mc_embed_mortgage h3{font-weight: bold !important;margin: 15px 0 !important;padding: 0 !important;text-transform: uppercase !important;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .fa.fa-quote-right {font-size: 0px;margin-left: 5px;color:var(--cgray);background-image:url(../images/text-open2.png);width:25px;height:18px;line-height:17px;padding-top: 15px !important;}
  .form-control:focus {border: 1px solid #515b62;}
  .form-control:hover {border: 1px solid #515b62;}
}
.close{display:block;}
.close a{text-decoration:none;font-size:14px;opacity:1;font-weight:normal;}
.close a:hover{color:#000;}
.resource{display:block;margin:0 0 30px;padding:0;}
.resource_right{width:100%;}
.resource_right > .page_title_heading h2, .resource_right > .back-agent h2{color:var(--white);font-size:20px;padding:14px 10px;text-transform:uppercase;width:75%;font-weight:bold;}
.page_title_heading, .resource_right .back-agent { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.resource_right p{font-size:14px;text-transform:initial;text-align:justify;}
.resource_right .int_cntnt, .resource_right .int_cntnt_testi { background-color:var(--white); width:100%; }
.resource_right .int_cntnt p{word-wrap:break-word;}
/* Business-directory-redesign patch, applied globally: sidebar card look
   (white card + shadow, gray inset header strip, edge-to-edge rows with a
   red active bar) -- shared includes/left.php sidebar used by ~8 pages.
   CSS-only; the dcjq-accordion plugin/JS driving expand-collapse is
   untouched. */
/* padding:24px (was 2px) -- .tool/.category-tree now bleed to this card's edges via negative margins instead of their own small padding */
.makeItFixOnScrollFront {
  background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.07); overflow: hidden; padding: 24px;
  position: relative; z-index: 2;
}
/* Gray backdrop panel, position/size synced live by syncSidebarFillFront() in js/login_register.js */
.category-tree_sub-fill{
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: var(--front_cat_tree_bg, #e5e5e5); border-radius: 12px; z-index: 1; pointer-events: none;
}
.tool{padding:0;}
/* margin:-24px -24px 0 bleeds the header flush to the card's edges (cancels the 24px card padding) */
.tool h2 {
  font-size: 19px; font-weight: 700; letter-spacing: .5px; padding: 0 24px 18px;
  text-transform: uppercase; color: #262626;
  background-color: var(--white); margin: -24px -24px 0;
  height: 93px; box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  border-radius: 12px 12px 0 0 !important;
}
/* margin:0 -24px -24px bleeds the row list to the card's edges; each row's own 24px padding keeps text position unchanged */
.category-tree #menu-sidebar-menu {
  margin: 0 -24px -24px; padding: 0; list-style: none; border-bottom: none !important;
}
.category-tree #menu-sidebar-menu li { border-bottom: 1px solid var(--front_cat_tree_border, #e5e5e5); }
.category-tree #menu-sidebar-menu li:last-child { border-bottom: none; }
.category-tree #menu-sidebar-menu li a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 18px 20px; font-size: 14px; font-weight: 600; color: #333333;
  border-left: 4px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.category-tree #menu-sidebar-menu li a:hover { background: var(--front_cat_tree_hover_open_bg, #f5f5f5); }
/* Click-feedback flash for a plain row (no submenu) that isn't already
   the active page -- :active is the moment between mousedown/touch and
   the browser actually leaving for the href. Matches the mockup; excludes
   parent rows (those expand/collapse, not navigate) and the active row
   (already showing this same look permanently). */
.category-tree #menu-sidebar-menu li:not(.dcjq-parent-li):not(.is-current-page) > a:active {
  color: var(--front_primary_brand);
}
/* .active is the dcjq-accordion plugin's own open/expand toggle (added on
   click regardless of which page is loaded) -- it must never drive this
   red current-page look. .is-current-page is set server-side in left.php's
   renderMenu() only for the leaf that matches the page actually loaded. */
.category-tree #menu-sidebar-menu li.is-current-page > a {
  background: var(--front_cat_tree_selected_bg, #a00a0f14); color: var(--front_primary_brand) !important; border-left-color: var(--front_primary_brand); font-weight: 700;
}
/* Open submenu panel fill -- a removed stale rule previously forced this white instead of gray */
.category-tree #menu-sidebar-menu .sub-menu { background: var(--front_cat_tree_hover_open_bg, #f5f5f5); }
/* Submenu rows (Mortgage Rates/Calculator/News, Miami/Coral Gables/...):
   indented with a vertical rule instead of the top-level rows' left-edge
   accent bar, matching .sidebar-nav .sidebar-submenu a exactly. border-top
   (not the outer li's own border-bottom, cancelled below since that rule
   would otherwise match these as descendants too) draws the divider
   flush with the vertical rule instead of spanning the empty indent. */
.category-tree #menu-sidebar-menu .sub-menu li { border-bottom: none; }
.category-tree #menu-sidebar-menu .sub-menu li a {
  position: relative; display: block; margin-left: 34px; border-left: 1px solid var(--front_cat_tree_border, #e5e5e5);
  padding: 18px 18px; font-size: 14px; font-weight: 500; color: #333333;
  background: none; transition: none; border-top: 1px solid var(--front_cat_tree_border, #e5e5e5);
}
.category-tree #menu-sidebar-menu .sub-menu li:first-child { border-top: 1px solid var(--front_cat_tree_border, #e5e5e5); }
.category-tree #menu-sidebar-menu .sub-menu li:first-child a { border-top: none; }
/* Submenu hover now matches :active (red text + triangle) -- was gray-background-only before */
.category-tree #menu-sidebar-menu .sub-menu li a:hover,
.category-tree #menu-sidebar-menu .sub-menu li a:active { color: var(--front_primary_brand); background: none; }
.category-tree #menu-sidebar-menu .sub-menu li a:hover::before,
.category-tree #menu-sidebar-menu .sub-menu li a:active::before,
.category-tree #menu-sidebar-menu .sub-menu li.is-current-page > a::before {
  content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 7px solid;
}
.category-tree{padding:0;} /* was 4px each side, now redundant with #menu-sidebar-menu's own bleed margin */
/* Proportional mobile scale-down: card padding 24px->16px -- every bleed margin drops to match. */
@media (max-width:480px){
  .makeItFixOnScrollFront{ padding:16px; }
  .tool h2{ margin:-16px -16px 0; }
  .category-tree #menu-sidebar-menu{ margin:0 -16px -16px; }
  .category-tree #menu-sidebar-menu li a{ padding:18px 16px; }
}
.left1-resource{float:left;width:100%;}
.left1-resource h2{background-color:var(--white);font-size:19px;text-transform:uppercase;margin:4px;font-weight:700;width:-webkit-fill-available;float:left; padding: 15px 0px;}
.left1-resource span {float: left;line-height: normal;padding-left:14px;}
.request-more-info-form{width:100%; float:left;position:relative; margin: auto;}
.request-more-info-form-scrolled{ position:fixed; margin:15px auto auto; width:100%; transition: top 0.3s ease-in-out;}
.request-more-info-form-scrolled.customTopPos{top: 115px;}
.page > a:hover {background-color: rgb(160, 10, 15);color: var(--white);float: left;text-align: center;border:none!important;}
.staticPanel > a {display: block;}
.staticPanel > img, .staticPanel > a > img {background-size: 100% 100%;width: 100%;}
.agent{background-color:var(--lgray-e5);margin:0px 0 20px 0;height:64px;}
.agent h2{color:var(--white);font-size:20px;padding:0 32px;text-transform:uppercase;width:50%;font-weight:bold;letter-spacing:.6px;display:flex;align-items:center;height:100%;}
.agent p{text-align:justify;font-size:15px;background-color:var(--white);padding:25px 0;line-height:25px;}
/* Filter card: matches agents-redesign-mockup-v2.html's actual current
   structure (Revision 13+) -- the card TITLE and the FIELD GRID are direct
   flex children of the same flat gray card, side by side, not a heading
   stacked above a separate boxed bar. Also used by Business Directory's
   category filter (see businessDirectory.php). */
.filter-card{
  background:#f5f5f5; border:1px solid rgba(0,0,0,.07); border-radius:12px; box-shadow:none;
  padding:18px 28px; margin-bottom:20px;
  display:flex; align-items:center; flex-wrap:wrap; gap:18px 24px;
  overflow:visible;
}
.filter-card h2.card-title{color:var(--front_primary_brand);font-size:18px;font-weight:600;letter-spacing:.3px;margin:0;flex:0 0 auto;white-space:nowrap;}
/* !important: a legacy form#agentSearchForm{display:inline-flex} rule
   (ID selector, further down this file) otherwise wins over this class
   rule regardless of source order, breaking the "title + .filter-grid as
   direct flex children of .filter-card" layout the grid math depends on. */
.filter-card-form{display:contents !important;}
/* Business Directory's own filter-card (Filter by Category + Add Your
   Business) uses slightly different values in its own mockup -- 2 items
   pushed to opposite ends and bottom-aligned, vs. Agents' title+grid
   centered row. */
.bd-filter-card{padding:14px 24px;gap:16px 20px;justify-content:space-between;align-items:flex-end;}
.filter-grid{flex:1 1 320px;min-width:280px;display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:16px;align-items:end;}
@media (max-width:860px){ .filter-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .filter-grid{grid-template-columns:1fr;} }
.field{display:flex;flex-direction:column;gap:6px;}
/* margin-bottom:0 cancels bootstrap.min.css's label{margin-bottom:5px} fallback, which otherwise stacks on top of this .field's own flex gap:6px for a doubled label-to-field gap. */
.field > label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#6b6b6b;font-weight:600;margin-bottom:0;}
.field input[type=text], .field select{
  height:48px; border:1px solid #e2e2e2;border-radius:8px;padding:0 16px;
  font-size:14px;font-family:inherit;color:#333333;background:#fff;
  outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  transition:border-color .15s, box-shadow .15s; width:100%;
}
.field input[type=text]::placeholder{color:#333333;opacity:1;font-family:inherit;}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;padding-right:34px;
}
.field input:hover, .field select:hover{border-color:var(--su-border-strong);}
.field input:focus, .field select:focus{border-color:var(--front_primary_brand);box-shadow:0 0 0 3px rgba(160,10,15,.10);}
.btn-reset{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--front_btn_secondary_bg, #ffffff);color:var(--front_btn_secondary_text, #a00a0f);border:1px solid var(--front_btn_secondary_border, #a00a0f) !important;
  border-radius:6px;padding:11px 22px;
  font-weight:600;font-size:13px;letter-spacing:.6px;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;transition:background .15s, color .15s;
}
.btn-reset:hover{background:var(--front_btn_secondary_bg_hover, #a00a0f14) !important;color:var(--front_btn_secondary_text_hover, #a00a0f);border-color:var(--front_btn_secondary_border_hover, #a00a0f) !important;}


.agent_categroies{margin:20px 0;}
.agentInfoDetailButtons { display: flex; gap: 8px; }
.agentInfoDetailButtons .btn-outline, .agentInfoDetailButtons .btn-solid {
  flex: 1 1 0; text-align: center; white-space: nowrap; border-radius: 6px;
  padding: 11px 10px; font-weight: 500; font-size: 12.5px; letter-spacing: .6px;
  text-transform: uppercase; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s; margin-top: 10px;
}
.agentInfoDetailButtons .btn-outline { background: var(--front_btn_secondary_bg, #ffffff); color: var(--front_btn_secondary_text, #a00a0f); border: 1px solid var(--front_btn_secondary_border, #a00a0f); }
.agentInfoDetailButtons .btn-outline:hover { background: var(--front_btn_secondary_bg_hover, #a00a0f14); color: var(--front_btn_secondary_text_hover, #a00a0f); border-color: var(--front_btn_secondary_border_hover, #a00a0f); }
.agentInfoDetailButtons .btn-solid { background: var(--front_btn_primary_bg, #a00a0f); color: var(--front_btn_primary_text, #ffffff); border: 1px solid var(--front_btn_primary_border, #a00a0f); }
.agentInfoDetailButtons .btn-solid:hover { background: var(--front_btn_primary_bg_hover, #900606); color: var(--front_btn_primary_text_hover, #ffffff); border-color: var(--front_btn_primary_border_hover, #900606); }

/* Agents-redesign v2: empty state shown in place of the agent grid when a
   search/filter combination returns zero agents. */
/* margin:20px 0 (not 10px) so the collapsed-margin gap above and below
   reads as equal: the elements this sits after (.filter-card,
   .agent_categroies, etc.) consistently use a 20px margin-bottom, and
   adjoining vertical margins collapse to whichever is larger -- at 10px
   the gap above was winning the collapse against that 20px neighbor
   while the gap below (usually 0 on the next element) stayed at this
   element's own smaller value, so the two visibly didn't match. */
.no-results-state{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 64px 24px; margin: 20px 0;
  background: #f7f7f7; border: 1px solid rgba(0,0,0,.07); border-radius: 12px;
}
/* property-search.php + SS search pages render this as the sole child of
   .thumb-view-left12's CSS grid, so without a column span it only fills
   one grid track. */
.thumb-view-left12 > .no-results-state{ grid-column: 1 / -1; }
/* .tab-content has its own margin-top:30px for spacing above real result
   cards; that has no counterpart below, so when no-results-state is the
   only content its own symmetric 20px margin sits on top of it, making
   the top gap 50px vs a 20px bottom gap. Zero it out in this case only.
   Scoped to the ACTIVE pane specifically (not :has(.no-results-state)
   alone) -- Photo/List View's hidden pane can contain a no-results-state
   while Map View is the one actually showing, and Map View has no
   no-results box of its own (just an empty map) to need this zeroing;
   without the > .tab-pane.active scope it wrongly zeroed Map View's top
   margin too, leaving it 0 on top vs its own 30px margin-bottom. */
.tab-content:has(> .tab-pane.active .no-results-state){ margin-top: 0; }
.no-results-state-icon{
  width: 56px; height: 56px; border-radius: 50%; background: rgba(160,10,15,.08);
  color: var(--front_primary_brand); display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.no-results-state-icon svg{ width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.no-results-state h3{ margin: 0 0 8px; font-size: 18px; color: #333333; font-weight: 700; }
.no-results-state p{ margin: 0 0 22px; font-size: 14px; color: #6b6b6b; }
.no-results-state .btn-solid{
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 12px 32px; border-radius: 6px; border: 1px solid var(--front_primary_brand);
  background: var(--front_primary_brand); color: #fff !important; font-weight: 600; font-size: 13px;
  letter-spacing: .6px; text-transform: uppercase; cursor: pointer; text-decoration: none;
}
.no-results-state .btn-solid:hover{ background: var(--front_primary_brand_hover); }
@media only screen and ( max-width: 480px){
  form#agentSearchForm { flex-direction: column; width: 100%; }
  form#agentSearchForm .agentser { flex: 1 1; align-items: center; text-align: center; }
  form#agentSearchForm .agentser input, form#agentSearchForm .agentser select { width: 100%; }
  /* Matches the mockup's .filter-card/.results-bar mobile rules. */
  .filter-card{ padding: 16px; }
  .total-search-for{ flex-direction: column; align-items: flex-start; }
}
@media only screen and (max-width: 600px){
  /* iOS Safari auto-zooms on a focused text input under 16px font-size.
     Must target the [type=text] attribute selector specifically -- a
     bare ".field input" here loses to the desktop ".field input[type=text]
     {font-size:14px}" rule's higher specificity (class+attribute+element
     beats class+element), even inside this media query, since specificity
     -- not source order -- decides ties between rules that both match. */
  .field input[type=text]{ font-size: 16px; }
}

.page{padding: 14px 10px;width: 100%;font-size: 14px;}
@-moz-document url-prefix() {.pull-right:-16px !important;}
.page > a {color: #605f5f;float: left;padding: 8px 10px 8px 10px !important;text-align: center;border-radius:5px;}
.show { margin: 5px 0; padding: 3px 5px; cursor: pointer; font: 15px/19px Arial,Helvetica,sans-serif; }
.show a { text-decoration: none; }
ul.setPaginate{ height:100%; }
.page > a{ float:right !important;}

.jointNow:hover, .selt_blue_txt:hover, .agent_lit:hover{border:1px solid var(--cred);border-radius:5px;background-color:var(--white) !important;color:var(--lgray-66);}
.selt_blue_txt {background-color: var(--front_primary_brand);color: var(--white) !important;float: left;height: 30px;margin-left: 10px;text-align: center;width: 30px;line-height:30px;border-radius:5px;}
.selt_blue_txt:hover{border-radius:4px;background-color:var(--white);border:solid 1px var(--cred);}
.multiselect {width:244px;height:34px;border:solid 1px #c0c0c0;overflow:auto;text-align:left;}
.multiselect label {display:block;height:18px;}
.multiselect input{margin:5px;}
.pagination ul {display: inline-block;*display: inline;*zoom: 1;margin-left: 0;margin-bottom: 0;}
.pagination li {display: inline;}
.pagination a {float: left;padding: 0 12px;line-height: 28px;text-decoration: none;border-left-width: 0;color:#605f5f;}
.pagination a:hover{border-radius:5px;color:var(--white);}
.pagination .active a {border-radius:5px;color:var(--white);cursor: default;}
.pagination .disabled span, .pagination .disabled a, .pagination .disabled a:hover {color: #999999;background-color: transparent;cursor: default;}
.pagination li:first-child a {border-radius: 5px;margin-right:10px;}
.pagination li:last-child a {border-radius: 5px;}
.pager {margin-left: 0;margin-bottom: 18px;list-style: none;text-align: center;*zoom: 1;}
.pager:before, .pager:after {display: table;content: "";}
.pager:after {clear: both;}
.pager li {display: inline;}
.pager a {display: inline-block;padding: 5px 14px;background-color: var(--white);border: 1px solid #ddd;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}
.pager a:hover {text-decoration: none;background-color: var(--white);}
.pager .next a {float: right;}
.pager .previous a {float: left;}
.pager .disabled a, .pager .disabled a:hover {color: #999999;background-color: var(--white);cursor: default;}
.contactus_left iframe{height:565px;margin-bottom:0;}
.contactus_form{background-color:#eee;border:solid 1px var(--lgray-cc);padding:5px;margin-top:15px;float:left;width:100%;}
.contactus_form_sub{background-color:var(--white);padding:25px 20px;float:left;width:100%;}
.loginBoxContainer label, .contactus_form_sub label, #newslettersForm label { color: unset; }
.contactus_form_sub label{width:100%;font-size:17px;margin-left:0; }
.contactus_form_sub textarea{border:solid 1px #b8b3b3;padding:5px;margin-top:5px;width:100%;height:175px;background-color:var(--white);border-radius: 5px;color:#000;}
.contactus_form_sub textarea:hover{border:solid 1px #000;}
.contactus_info_sub{width:100%;display:block;margin:10px 0px;float:left;}
.contactus_info_sub label{width:100%;font-size:17px;}
.contactus_info_sub input{border:solid 1px #b8b3b3;padding:5px;margin-top:7px;width:100%;height:36px;background-color:var(--white);border-radius: 5px;color:#000;}
.contactus_info_sub input .error{border:solid 1px #790000;padding:5px;margin-top:7px;width:100%;height:45px;background-color:#ffebe8;}
.contactus_info_sub textarea .error{border:solid 1px #790000;padding:5px;margin-top:7px;width:100%;height:45px;background-color:#ffebe8;}
.contactus_info_sub select{border:solid 1px #b8b3b3;padding:5px;margin-top:5px;width:100%;height:45px;background-color:var(--white);}
.contactus_info_sub select .error{border:solid 1px #790000;padding:5px;margin-top:7px;width:100%;height:45px;background-color:#ffebe8;}
.contactus_info_sub select:hover{border:solid 1px #000;}
.contactus_info_sub input[type="checkbox"]{margin-right: 10px;}
.contactus_info_sub p{font-size:12px;color:var(--lgray-66);width:89%;float:left;}


.newsPanel ul li{padding-left:12px;margin-bottom:10px;background:url(../images/news-line.jpg) no-repeat 2px 9px;padding-bottom:13px;border-bottom:dotted 1px var(--lgray-66);}
.newsPanel ul li#newsfeedloading{padding-left: 12px;margin-bottom: 14px;background:none;border-bottom:none;padding-bottom: 5px;width: 250px;text-align: center;margin-top: 3%;}
.newsletterPanel .form-control{background:var(--white);box-shadow:none;border-radius:1px;}
.cost{float:right;}
.flag{margin-right:2px;}
.submenu{background-color:var(--white);padding:10px 25px;}
.drop {display: block;width: 100%;padding: 10px 0 10px 0px;}
.drop a {color:#000;text-transform:uppercase;padding: 10px 0 10px 15px;}
#popup{cursor:pointer;text-align:left;}
.property_request_share_btn { max-width:440px; margin: 0px auto 24px;}
.feature-content-sub{width:100%;float:left;margin-top:20px;}
.int_cntnt_testimonial{width:100%;}
.somi-left{padding:0;}
.newsletter_box .newsletter_text { font-size: 13px; margin-bottom: 10px; }
.newsletter_box .newsletter_box_inner { padding: 5px; border: solid 1px var(--lgray-cc); }
.newsletter_box .newsletter_box_gray { background: var(--front_topbar_bg) !important; padding: 19px 15px; }
.dropdown-submenu .fa.fa-chevron-right { float:right; display:none !important; font-size:13px; margin-top:5px;}
@media only screen and (min-width:320px) {
  .gm-style-popup{padding:0;}
  .page.property-search{ margin-top:0px !important; }
  .menuu1{padding:0;}
  .navbar-default .navbar-nav > .active > a, 
  .navbar-default .navbar-nav > .active > a:hover, 
  .navbar-default .navbar-nav > .active > a:focus{border-top:none;}
  header .navbar-header{height:60px;}
  .feature-padding{padding:0;}
  #navbar-collapse { list-style: outside none none; margin: 0; }
  .bx-controls-direction{position:absolute;top:50%;z-index:101;}
  .bx-pager-item{display:inline-block;text-align:center;line-height:20px;}
  .bx-pager-item a{width:17px;height:17px;border-radius:100%;border:3px solid var(--white);margin:0 4px;text-indent:-99999px;display:inline-block;background:rgba(160,10,15,.1)}
  .sliderCont{position:absolute;top:91px;left:0px;height:auto;bottom:0;width:100%;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
  .sliderHeading{padding:32px 0;width:290px;border-radius:5px;}
  .searchTabBody{padding:0px;}
  .contactus_left iframe{height: 300px;margin-bottom:10px;}
  .bx-viewport{height:355px !important;}
  .mc-body{width:285px;}
  .thumb-view{padding:0;}
  #left, #right{width:100%;float:left;position:relative;}
  .request-more-info-form-scrolled{position:relative;margin-top:0;}
  .page > a{display:none;}
  .somi-left{padding:0 15px;}
}
@media (min-width:375px) {.sliderHeading{width:346px;} }
@media (min-width:414px) {.sliderHeading{width:385px;} }
@media (min-width:420px) {
  .newsPanel ul li#newsfeedloading{width: 350px;}
}
@media (min-width:420px) {
  .col-sm-6 {
    width: 50%;
    float: left;
  }
}

@media (min-width:600px) {
  .mapPanel{height:294px;overflow:hidden;}
  .newsPanel ul li#newsfeedloading{width: 530px;}
}
@media (min-width:768px) {
  .newsPanel ul li#newsfeedloading{width: 690px;}
  .sliderHeading{padding:32px 0;width:738px;border-radius:5px;}
  label{width:150px;display:inline-block;margin-left:5px;}
}
@media (min-width:992px){
  .col-md-4 { width: 33.33333333333333%; }
}
@media (min-width:980px) {
  .gm-style-popup{padding:0 15px;}
  #right{margin-top:0;}
  .page.property-search{margin-top:5px !important;}
  .menuu1{padding:0 15px;}
  .page > a{display:block;}
  .feature-padding{padding:0 28px;}
  #navbar-collapse { float:right; width:auto; padding-right: 5px;}
  #left{width:25%;float:left;position:absolute;}
  #right{width:75%;float:right;position:relative;min-height:1100px;}
  .category-tree_sub{display:block;}
  .total-search-for p{margin-bottom:0px;}
  .thumb-view{padding:0;}
  .mc-body{width:887px;}
  .matrices-widget{width:100%;float:left;}
  .matrices-widget iframe{width:568px;}
  .major-widget iframe{width:100%;height:500px;}
  .newsPanel ul li#newsfeedloading{width: 723px;}
  .contactus_info_sub p{font-size:12px;color:var(--lgray-66);width:94%;float:left;}
  .contactus_info_sub{margin:10px 0;}
  .bx-viewport{height:400px !important;}
  .contactus_left iframe{height:523px;}
  .mm{display:none;}
  .resource_right > .page_title_heading h2, .resource_right > .back-agent h2{ font-size:30px;line-height: 38px;}
  .dropdown-submenu .fa.fa-chevron-right { display:block !important;}
  .flag{margin-right:0;}
  .topPanel a.contactTop{display:inline-block;}
  .navbar-default .navbar-nav > .active > a, 
  .navbar-default .navbar-nav > .active > a:hover, 
  .navbar-default .navbar-nav > .active > a:focus {border-top: 3px solid;}
  .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {background:none;color:#000 !important;}
  .dropdown-submenu{position:relative;}
  .dropdown-submenu>.dropdown-menu a{display:block;padding-left:15px;}
  .dropdown-submenu>a:after{display:block;content:" ";width:162px;height:0;border-color:transparent;border-width:5px 0 5px 5px;}
  .dropdown-submenu:hover>a:after{border-left-color:#555;display:block;}
  ul.nav li.dropdown:hover > ul.dropdown-menu{display: block;background-color: rgba(255, 255, 255, 1);}
  .sliderHeading{padding:32px 0;width:613px;border-radius:5px;}
  .drop {display: block;width:100%;padding:0;}
  .drop a { color:#000;border-right:solid 1px #000;text-transform:uppercase;padding:0 12px;line-height:28px;border-left:solid 1px #000;}
  .drop a:hover { border-top:solid 3px var(--cred);}
  .navbar-default .dropdown.open .arrow {border-top: medium none;display: block;background-image:url(../images/arrow_down.png);display:none;}
  .arrow {display:none;}
  /*.preConsSearch.form-group.submitButtons { margin-top: 18px; }*/
}
@media (min-width:980px) {
  .sliderHeading{padding:32px 0;width:665px;border-radius:5px;}
  }
@media (min-width:1024px) and (max-width:1199px) {
  .sliderHeading{background:rgba(9, 9, 9, .3);padding:32px 0;width:685px;border-radius:5px;}
}
@media (min-width:1200px){
  .total-search-for p{margin-bottom:0px;}
  .thumb-view{padding:0;}
  .bx-viewport{height:555px !important;}
  .agent h2{color:var(--white);font-size:20px;padding:0 32px;text-transform:uppercase;width:50%;font-weight:bold;letter-spacing:.6px;display:flex;align-items:center;}
  .header .nav > li > .dropdown-menu open li {display:none;}
  .sliderHeading{width:74.9% !important;border-radius:5px;left:15% !important;right:15%!important;padding:2% 0;}
  .sliderHeading h1{font-size:60px;}
  .sliderHeading h2{font-size:58px;}
  .sliderPanel{max-height:549px;}
  .sliderPanel li{max-height:553px;}
  .sliderPanel li img{max-height:553px;}
  .sliderPanel .bx-pager{bottom:37px;}
  .sliderPanel span.slidrperv{left:25px;}
  .sliderPanel span.slidernext{right:25px;}
  .sliderPanel span.bannercontrol{top:50%;margin-top:-50px;}
  .searchMap{padding-top:0px; }
  #popup{cursor:pointer;text-align:left;}
  label{width:150px;display:inline-block;margin-left:5px;}
}
@media (min-width:320px) and (max-width:480px) {
  .slider-mobile {display: block;margin-bottom: 20px;margin-top: 88px;}
 .page > a {color: #605f5f;padding: 7px !important;float:left;margin-left:-1px;}
 .page {border-radius: 5px;float: left;font-size: 14px;padding: 14px 0;width: 100%;}
 .resource_right .int_cntnt_testimonial {background-color: var(--white);padding-top: 17px;text-align: justify;width: 100%;}
}
.page > a.right-pagination-arrow{padding:9px 11px 9px 10px !important;}
.navbar-default .navbar-nav > li:hover > a, .navbar-default .navbar-nav > li > a:hover {border-top: 3px solid var(--cred);}
.sliderPanel li{width:100%;text-align:center;height:100%;min-height:355px;}
.sliderPanel li img{background-attachment:fixed;}
.sliderPanel .bx-pager{position:absolute;bottom:16px;z-index:100;text-align:center;width:100%;margin:0 auto;}
.sliderPanel span.bannercontrol{width:50px;height:50px;display:inline-block;position:absolute;top:27%;z-index:110;margin-top:13px;}
.sliderPanel span.slidrperv{left:0px;}
.sliderPanel span.slidernext{right:0px;}
.sliderPanel span a {display:inline-block;text-indent:-9999px;width:50px;height:50px;}
.sliderPanel span a.bx-prev{background:rgba(0,0,0,.6) url(../images/slider-prev.png) no-repeat;display:none;}
.sliderPanel span a.bx-prev:hover{background:var(--cred) url(../images/slider-prev.png) no-repeat;display:none;}
.sliderPanel span a.bx-next{background:rgba(0,0,0,.6) url(../images/slider-next.png) no-repeat;display:none;}
.sliderPanel span a.bx-next:hover{background:var(--cred) url(../images/slider-next.png) no-repeat;display:none;}


.sticky {background-color:var(--white);float:left;position: fixed;top:0 !important;width: 100%;min-height: 90px; box-shadow: 0 0px 1px var(--lgray-66);}
.sliderContent{max-width: 780px;margin: 0 auto;background: rgba(9, 9, 9, 0.4);padding: 15px;border-radius: 15px;}
.sliderContent .sliderHeading {width: 100% !important;border-radius: 5px;left: 0% !important;right: 0%!important;padding:0px;}
.sliderHeading {background: transparent !important;}
.int_cntnt_testi iframe {width: 500px;}
input, button, select, textarea,body,label, span{font-family: var(--font-base) !important;}
.container .resource { display: flex; gap: 28px; }
/* zeroes the old .feature-padding inset here so it doesn't double up with the gap above */
#right > .feature-padding { padding-left: 0; }
.container .resource #left { width: 25%; min-width: 280px; float: none; position: initial;}
/* min-width:0 so #right can shrink below its content's width instead of overflowing */
.container .resource #right { width:75%; min-width: 0; float: none; position: initial;}
@media only screen and (min-width: 980px) {
  .feature-property_left1 .saveShareDrop ul.dropdown { left: min(calc(5vw - 78px), -15px); }
}
.profile-form li input.save-submit{margin: 0 auto !important;float: none !important;display: block; width: 100%;}
@media only screen and (max-width: 1200px) and (min-width: 992px) {
  .navbar-default .navbar-nav > li > a {padding: 0px 6px;font-size: 13px;}
  .search-result_right1 .tab-pane .form-group select.form-control{margin-top: 0px;}
}
@media only screen and (max-width: 1120px) and (min-width: 980px) {
  .left1-resource h2 { font-size: 14px; font-size: 1.5cqw; }
}
@media only screen and (max-width: 992px) and (min-width: 980px) {
  .navbar-default .navbar-nav > li > a {padding: 0px 6px;font-size: 13px;}
  .newspp span {margin-top: 5px;}
  .search-result_right1 .tab-pane .form-group select.form-control{margin-top: 0px;}
  .search-property-main1 .thumb-view { padding: 0px 15px; }
}
@media only screen and (max-width: 979px) {
  .navbar-default .navbar-nav > li > a:hover, 
  .navbar-default .navbar-nav > li.active > a{border-top:0!important;}
  .topPanel a {padding: 1px 15px;}
  .navbar-default .dropdown .arrow{top: 15px;}
  .newspp span {margin-top: 5px;}
  #mc_embed_signup .mc-field-group {width: 100% !important;}
  .profile-form.request-more-info > form {width: 100%;}
  #left, .category-tree_sub.search-property-leftbar {max-width: 100%;position: relative;height: initial !important;}
  .navbar-default .navbar-nav > li > a, header .navbar-default .navbar-nav>.active>a { padding: 0px 20px; font-size:13px; }
  .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{ background-color: transparent !important; }
  .navbar-nav .open .dropdown-menu>li>a{ width:100%!important; }
  .navbar-default .navbar-nav .open .dropdown-menu > .dropdown-submenu > .dropdown-menu > a{ font-size:13px; }
  .container .resource { flex-direction: column; gap: 0; } /* gap:0 avoids doubling up with .category-tree_sub's margin-bottom below */
  .category-tree_sub { margin-bottom: 15px; } /* matches .pd-page-header-bar's own margin-bottom, so the gap above the red header matches the gap below it */
  .container .resource #left, .container .resource #right { width:100%; }
  /* agentDetail.php's Contact Agent form moves below the main content on mobile, unlike the sitewide sidebar-on-top rule above */
  .container .resource:has(#contactAgentCard) .category-tree_sub { order: 2; margin-bottom: 0; margin-top: 32px; }
  .container .resource:has(#contactAgentCard) .noMobilePadding { order: 1; }
  .noMobilePadding { padding: 0px; }
  .contactus_right{ margin-top: 20px; }
  .contactus_form_sub{ padding:20px 5px }
  .singlePropertyPage .mortgageLegalText { text-align: center !important; }
}
@media only screen and (max-width: 767px) {
  ul#searchtabs3 { display: flex; width: 100%; justify-content: start; }
  .searchTabHead3 li { text-align: center; }
  .resource_right > .page_title_heading h2, .resource_right > .back-agent h2 { width: 65%; }
  .searchMap{ display: none; }
  /*#quickSearchContent .tab-content .searchRadioLabelBox { margin-top: 25px !important;}*/
  .singlePropertyPage .mortgageLegalText { text-align: justify !important; }
}
/* Matches v39 mockup's .sort-field/.view-toggle mobile rules -- sort dropdown goes full width first, so the row wraps cleanly instead of overflowing between 680-980px. */
@media only screen and (max-width: 680px) {
  .sortByDropDownContainer { width: 100%; }
  .sortByDropDownInput { flex: 1 1 auto; width: 100%; }
}
@media only screen and (max-width: 480px) {
  .forClosureChecks { padding: 10px 0px !important;}
  .saveShareDrop li ul.dropdown { left: min(calc(20vw - 85px), 0px) !important; }
}
@media (max-width: 670px) and (min-width: 320px){
  .slider-mobile {margin-top: 38px !important;}
}
img.newsletter-icon,.newspp h2 img {margin-right: 10px !important;font-size: 18px;height: 20px !important;width: auto;}
.contactus_left iframe {width: 100% !important;}
.loading {width: 100% !important;text-align: center;}
.loading::after {left: 50% !important;position: absolute;}
.loading h3 {position: absolute;top: 50px;color: var(--white);width: 100%;font-family: var(--font-base);line-height: 14px;}
.scrollTop { bottom: 80px !important;}
body .uwy.userway_p7 .uai.userway_dark, body .uwy.userway_p8 .uai.userway_dark {  bottom: 10px!important; left: 13px !important;}
ul.setPaginate {height: auto !important;}
.gm-style .map-labelssingle {background-image: url(../images/32.png);background-repeat: no-repeat;color: var(--cgray);float: right; font-size: 12px;height: 27px;line-height: 19px;text-align: center;width: 27px !important;position: relative;margin-top: -33px; margin-right: 5px;}
.gm-style .map-labelssingle > div {margin-top: 4px;margin-right: 2px;}
body .uwy.userway_p7 .uai#userwayAccessibilityIcon { position: fixed; }

#username_message { display:none; background: #f1f1f1; color: #000; position: relative; padding: 10px 15px; margin: 10px 0 0; }
#username_message p { padding: 5px 5px 5px 30px; font-size: 13px; margin:0; }
.valid:before { position: relative; content: "✔"; padding-right: 20px; margin-left: -30px; }
.invalid { color: red; }
.invalid:before { position: relative; content: "✖"; padding-right: 20px; margin-left: -30px; }
#unique_check{ display: none;font-weight: 600; }


/* Checkboxes: sitewide canonical style lives in admin/css/common-back-front.css. Radios keep this. */
input[type=radio] { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; width: 20px; height: 20px; overflow: hidden; border: 1px solid #adb8c0; background-color: var(--white); vertical-align: text-bottom; margin-right: .25rem; left: .25rem;  margin-top: 2px; min-width: 20px; border-radius: 5px;}
.ratings_stars { background: url('../images/star_blank.png') no-repeat; float: left; height: 28px; padding: 2px; width: 32px; }
.ratings_over { background: url('../images/star_overs.png') no-repeat; }
.product{ font: 10px verdana, sans-serif; margin: 0 auto 40px auto; width: 180px; height:200px; } 

.loginLoading span, .processingLoading span{color: white;font-size: 20px;position: relative;top: -50px;font-family: var(--font-base) !important;}
.loading { display: none; position: fixed; z-index: 9999; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }
.loading:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #00000091; }

.login-content{ background-color:var(--white); padding:0px 10px 15px;}
.login-heading{ border-top-left-radius:3px; border-top-right-radius:3px;}
.login-content a.navbar-brand img { max-width: 200px !important; margin: 0 auto; height: unset !important; }

.style1 {color: #FF0000}

.tab-content { margin-top: 20px; }
#quickSearchContent { margin-top: 20px; }
.single_property_detail_container #quickSearchContent { margin: 0px; }
#quickSearchContent .tab-content .searchGroupsHeading { color: var(--cgray); margin-bottom: 12px; margin-top: 14px; display: inline-block; line-height: 30px;}
.tab-content p { text-align:left; height:auto; padding:0; }
.tab-content .thumb-view h3, .tab-content .thumb-view h4 { color:var(--cgray);}
.birds-view{ width:100%; float:left; border-radius:12px; overflow:hidden;}
.birds-view img{ width:100%;}
.mcw-wrap_theme4 .mcw-form__block .mcw-form__title { color: var(--lgray-66) !important; }
.mcw-wrap_theme4 .mcw-calculate-btn { max-width: 200px; margin: 10px auto; box-shadow: none!important; }
.mcw-wrap_theme4{ border-radius: 0!important; margin: 3px!important; background: var(--white) !important; }
.mcw-wrap .mcw-form__title{ font-size: 14px!important; font-family: var(--font-base) !important; }
.mcw-wrap_theme4 .mcw-form__block .mcw-form__title { color: var(--lgray-33) !important; }
.mcw-wrap input.mcw-form__field{ font-size:14px!important; }
.mcw-wrap .mcw-form__symbol { font-size: 14px!important; color: #bbbbbb !important;}
.mcw-wrap .mcw__title{ visibility: hidden!important; font-size:1px!important; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid var(--cred) !important; color: var(--white) !important; }
/* Business-directory-redesign v3 listing card: .listing-card, .info-row,
   .icon-badge, .category-pill -- scoped under .listing-card so they can't
   collide with the same-named classes on the Agents page. */
.listing-grid { margin: 20px 0px; display: flex; flex-direction: column; gap: 24px; }
.listing-card {
  position: relative; padding: 28px;
  background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.07); overflow: hidden;
  display: flex; flex-direction: column;
}
@media (max-width: 640px) { .listing-card { padding: 22px; } }

.listing-top { display: flex; gap: 26px; margin-bottom: 22px; }
@media (max-width: 640px) { .listing-top { flex-direction: column; gap: 18px; } }

.listing-logo {
  flex: 0 0 auto; width: 260px; border-radius: 12px;
  background: #f5f5f5; border: 1px solid rgba(0,0,0,.07);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--lgray-66); font-weight: 700; font-size: 13.5px; letter-spacing: .4px;
  text-transform: uppercase; line-height: 1.5; padding: 10px;
}
.listing-logo img { max-width: 100%; max-height: 140px; }
@media (max-width: 640px) { .listing-logo { width: 100%; height: 220px; } }

.listing-body { flex: 1 1 auto; min-width: 0; }
.listing-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,.07); flex-wrap: wrap;
}
.listing-name { color: var(--front_primary_brand); font-weight: 600; font-size: 20px; margin: 0; letter-spacing: .2px; }
.category-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: rgba(160,10,15,.08); color: var(--front_primary_brand); border-radius: 999px;
  padding: 6px 14px 6px 10px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.category-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.listing-card .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
@media (max-width: 520px) { .listing-card .info-grid { grid-template-columns: 1fr; } }
.listing-card .info-row { display: flex; align-items: flex-start; gap: 12px; }
.listing-card .icon-badge {
  flex: 0 0 auto; width: 41px; height: 41px; border-radius: 50%; background: rgba(160,10,15,.08);
  color: var(--front_primary_brand); display: flex; align-items: center; justify-content: center;
}
.listing-card .icon-badge svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.listing-card .info-row .info-text { flex: 1 1 auto; min-width: 0; }
.listing-card .info-row .label {
  display: block; padding: 0; text-align: left; white-space: normal;
  font-size: 14px; line-height: 16px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--lgray-66); font-weight: 800; margin: 0 0 4px;
}
.listing-card .info-row .value { font-size: 15px; color: var(--lgray-66); font-weight: 400; margin: 0; line-height: 1.4; word-break: break-word; }
.listing-card .info-row .value.muted { font-style: italic; }

.listing-bottom { padding-top: 20px; border-top: 1px solid rgba(0,0,0,.07); }
.listing-section { margin-bottom: 16px; }
.listing-section:last-child { margin-bottom: 0; }
.listing-section h4 {
  font-size: 14px; line-height: 16px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--lgray-66); font-weight: 800; margin: 0 0 8px;
}
.listing-section p { font-size: 14px; color: #333333; line-height: 1.6; margin: 0; }
.promo-badge {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(160,10,15,.08); color: var(--front_primary_brand);
  border-radius: 8px; padding: 6px 12px; font-size: 14px; font-weight: 700;
}

/* View toggle (Photo/List/Map), moved here from css/somi-search.css so it's global -- used by mapsearch.php/mySavedProperties.php/ourFeaturedProperties.php/property-search.php in addition to the 4 SS search pages. Same Bootstrap data-toggle="tab" markup/JS everywhere, untouched. */
.searchTabHead3 { display: flex; gap: 8px; justify-content: end; align-items: center; }

.searchTabHead3 li { border-left: none; }
.searchTabHead3 li a {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--su-border-strong); border-radius: 6px;
  padding: 8px 18px; font-weight: 600; font-size: 12.5px; letter-spacing: .5px;
  text-transform: uppercase; background: #fff; color: var(--su-text);
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.searchTabHead3 li a svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--su-brand); transition: color .15s; }
.searchTabHead3 li a:hover,
.searchTabHead3 li.active a { background: var(--su-brand); border-color: var(--su-brand); color: #fff; }
.searchTabHead3 li a:hover svg,
.searchTabHead3 li.active a svg { color: #fff; }
/* Matches v39 mockup's .view-toggle mobile rule. Placed after the base
   rules above (not in the earlier max-width:480px block) so it actually
   wins the cascade -- same selector specificity, later wins on a tie.
   Targets the <li> (the ul's real flex item), not the <a> inside it --
   flex-basis on the <a> was a no-op since it isn't a direct flex child. */
@media only screen and (max-width: 480px) {
  .searchTabHead3 li { flex: 1 1 0; min-width: 0; }
  .searchTabHead3 li a { width: 100%; justify-content: center; padding: 7px 6px; font-size: 10.5px; gap: 5px; white-space: nowrap; }
}

/* Testimonials-redesign patch. Renders both on testimonials.php's own
   results grid and from agentDetail.php's "My Reviews" carousel (same
   getSingleTestimonialHTML() call, see includes/table_form_renders.php) --
   the carousel wrapper is .client-review, whose own legacy rules (line
   ~570/574 above) style ANY h3/span inside it (!important on the h3 color/
   background/font-size), which would otherwise bleed into this card's h3/
   span elements. Every selector below is scoped under .testimonial-card
   (not bare classes) specifically so it wins there regardless of which
   page rendered the card. .testimonial-card itself is self-contained (not
   built on a shared .card base) -- contact.php already uses a bare "card"
   class for its own Bootstrap-driven layout, so reusing that name would
   risk colliding with it. */
.filter-card .intro{ flex:1 1 260px; max-width:460px; }
.filter-card .intro p{ margin:0; font-size:14px; color:#333333; font-weight:600; line-height:1.4; }
.filter-card .intro span{ display:block; margin-top:2px; font-size:12.5px; color:var(--lgray-66); font-weight:400; }

.testimonial-grid{ display:flex; flex-direction:column; gap:24px; margin-bottom:8px; }
.testimonial-card{
  padding:26px 28px; background:#fff; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.07); overflow:hidden;
}
@media (max-width:640px){ .testimonial-card{ padding:20px; } }

.testimonial-card .testimonial-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.testimonial-card .testimonial-name{
  color:var(--front_primary_brand) !important; font-weight:700; font-size:18px !important; margin:0 !important;
  letter-spacing:.2px; background:none !important; float:none !important; width:auto !important;
}
/* color: !important -- .client-review span (used by agentDetail.php's
   carousel wrapper) forces every span inside it to brand-red !important;
   these two want gray. */
.testimonial-card .testimonial-date{ font-size:12px; color:var(--lgray-66) !important; white-space:nowrap; margin-top:2px; float:none; font-weight:400; }
.testimonial-card .testimonial-company{ font-size:13px; color:var(--lgray-66); margin:-4px 0 10px; }

.testimonial-card .testimonial-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 16px; margin-bottom:16px; }
.testimonial-card .testimonial-location{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--lgray-66) !important; font-weight:500; float:none; margin-top:0; }
.testimonial-card .testimonial-location svg{ width:15px; height:15px; flex:0 0 auto; fill:none; stroke:var(--lgray-66); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.testimonial-card .category-pill{ float:none; margin-top:0; }

.testimonial-card .star-row{ display:flex; align-items:center; gap:3px; margin-bottom:14px; }
.testimonial-card .star-row svg{ width:16px; height:16px; }
.testimonial-card .star-row .svgStar{ fill:var(--front_primary_brand); }
.testimonial-card .star-row .svgStarO{ fill:none; stroke:var(--lgray-cc); }

/* Quote marks bracket whichever paragraph is actually showing (the
   truncated preview or the expanded full review) via a descendant
   selector on the shared p, not two separate rules. */
.testimonial-card .testimonial-quote p{ margin:0; font-size:14.5px; color:#333333; line-height:1.65; font-style:italic; }
.testimonial-card .testimonial-quote p::before, .testimonial-card .testimonial-quote p::after{
  display:inline-block; font-size:40px; line-height:0; vertical-align:-14px;
  font-family:Georgia, serif; font-weight:700; font-style:normal; color:rgba(160,10,15,.25);
}
.testimonial-card .testimonial-quote p::before{ content:"\201C"; margin-right:3px; }
.testimonial-card .testimonial-quote p::after{ content:"\201D"; margin-left:3px; }
/* Full review revealed by .read-more-toggle via the same grid-template-rows
   0fr/1fr technique the sidebar's own accordion panels use (see
   includes/left.php's renderMenu()/.sidebar-submenu in this file). */
.testimonial-card .testimonial-full{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.testimonial-card .testimonial-full-inner{ overflow:hidden; }
.testimonial-card .testimonial-full p{ margin:8px 0 0; font-size:14.5px; color:#333333; line-height:1.65; font-style:italic; }
.testimonial-card.expanded .testimonial-full{ grid-template-rows:1fr; }
.testimonial-card.expanded .testimonial-preview{ display:none; }
.testimonial-card .read-more-toggle{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; margin-left:34px;
  background:none; border:none; padding:0; font-family:inherit; cursor:pointer;
  font-size:12.5px; font-weight:700; color:var(--front_primary_brand); text-transform:uppercase; letter-spacing:.4px; float:none;
}
.testimonial-card .read-more-toggle:hover{ color:var(--front_primary_brand_hover); }
.testimonial-card .read-more-toggle svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s ease; }
.testimonial-card.expanded .read-more-toggle svg{ transform:rotate(180deg); }
.testimonial-card .read-more-toggle span{ float:none; font-size:inherit; font-weight:inherit; margin-top:0; }
.testimonial-card .read-more-toggle .label-less{ display:none; }
.testimonial-card.expanded .read-more-toggle .label-more{ display:none; }
.testimonial-card.expanded .read-more-toggle .label-less{ display:inline; }

.real-estate{ float:left; display:block; width:100%;}
.real-estate-news{ float:left; display:block; width:100%; border-bottom:solid 1px var(--lgray-cc); padding:20px 0 10px 0; font-size:16px;}
.real-estate-news :lastchild{ float:left; display:block; width:100%; border-bottom:none; padding:20px 0 10px 0;}
.real-estate-news h1 { text-decoration:underline; font-size:16px; margin-bottom:10px;}
.real-estate-news h1 a{ text-decoration:underline; font-size:15px; font-weight:bold;}
.real-estate-news h2{ font-size:13px; background:none !important; color:#636161 !important; text-transform:none !important; font-weight:normal!important; padding:0;}
.real-estate-news .realtext{  font-size:16px; text-align:justify; padding:0; height:auto; margin-bottom:15px; line-height:26px; margin-top:20px !important; float:left; width:100%;}
.realtext img { float: left; margin-right: 10px; }
.realtext p { font-size:16px; text-align:justify; padding:0; height:auto;}
.real-estate-read-more{ float:right; text-align:right;}
.real-estate-read-more a{ text-transform:uppercase; font-size:14px; font-weight:600; padding:8px 20px; width:auto; border:1px solid var(--cred); line-height:13px; border-radius:5px;}
.fa fa-angle-right{ font-size:13px;}
.btn_add_new{ border: 0; color: var(--white); float: right; margin: 10px 5px 0; padding: 11px 25px; text-decoration: none !important; }
.addBusinessBtn { margin: 0px 0px 10px 0px; }
.admin-internal { background-color: var(--lgray-66); color: var(--white); font-weight: normal; font-size: 14px; }
.submit_form-msg{ padding: 10px 15px; background: #30ad23; color: var(--white); border-radius: 3px; max-width: 480px; margin: 0 auto; text-align: center; }
.resource_right .btn-primary:hover, .resource_right .btn-primary:focus, .resource_right .btn-primary:active, .resource_right .btn-primary.active{ border: 0; color: var(--white); }
.alert.alert-danger, .alert.alert-success { font-size: 14px; font-weight: 600; margin-bottom: 0px;}
.alertNotes.alert { width: fit-content; text-align: center; margin: 15px auto auto; }
.acountActivateMessage{ text-align:center !important; display: flex; align-items: center; justify-content: center; height: calc(100vh - 641px); }
.acountActivateMessage h5 { font-size: 18px; padding-top: 30px; }

body { top: 0px !important; }
#goog-gt-tt { display: none !important; }
.skiptranslate { position: relative; top: -100px; }
.skiptranslate iframe { top: -100px; position: absolute; }

body .uwy.userway_p7 .uai, body .uwy.userway_p8 .uai { top: auto!important; left: auto!important; right: 13px!important; bottom: 50px!important; }
.searchFilter { display: inline-block; width: 100%; }
/* Per-page / sort dropdowns sit in a horizontal controls bar next to a
   label, not a stacked form field -- must size to content like the native
   <select> they replace, not stretch full-width. Overrides the base
   .find-section .dropdown-trigger{width:100%} rule (same specificity,
   loaded after master.css) meant for SF/SI's stacked form fields. */
.su-select-enhance { display: inline-block; width: auto !important; }
.su-select-enhance .dropdown-trigger { width: auto !important; font-weight: 500 !important;}
.su-select-per-page .dropdown-trigger { height: 40px !important; }
/* Per-page always sits at the far-right edge of its row (results bar,
   filter card, etc.) -- the panel's default left:0 growth can overflow
   past the row/card's own right edge before the JS's viewport-only
   overflow guard ever kicks in (that guard only flips at the browser
   window edge, not the local container's). Right-anchor it unconditionally
   here instead, matching business-directory-redesign-mockup-v3.html's
   own .per-page .dropdown-panel{left:auto;right:0;} rule.
   !important: same specificity (2 classes) as .find-section .dropdown-panel
   in somi-shared.css, which loads AFTER master.css -- without !important
   that later, equal-specificity rule's left:0 silently wins regardless of
   this one, so the panel kept overflowing left despite this rule existing. */
.su-select-per-page .dropdown-panel { left: auto !important; right: 0 !important; }
.visually-hidden-select {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.field-category { flex: 1 1 260px; max-width: 360px; }
.field-add { flex: 0 0 auto; }
.field-add label { white-space: nowrap; }
.field-add .addBusinessBtn { margin: 0; float: none; display: inline-block; }
/* .btn-solid has no global definition -- this button's only other classes
   (.btn/.btn-primary/.btn_add_new) leave it unstyled (border-radius:0,
   font-weight:400, no border), so it never actually matched the mockup's
   .btn-solid spec despite carrying the class name. Scoped to .field-add so
   it can't affect the unrelated .agentInfoDetailButtons/.no-results-state
   .btn-solid buttons elsewhere on the site. */
.field-add .btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 6px; padding: 13px 26px;
  font-weight: 600; font-size: 13px; letter-spacing: .6px; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
  border: 1px solid var(--front_primary_brand) !important;
  background: var(--front_primary_brand); color: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.field-add .btn-solid:hover { background: var(--front_primary_brand_hover); border-color: var(--front_primary_brand_hover) !important; color: #fff; }
.field label .q-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; border-radius: 50%;
  background: #333333; color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help; flex: 0 0 auto; text-transform: none; letter-spacing: normal;
}
.field label .q-tip .bubble {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: 220px; text-align: left; background: #2b2b2b; color: #fff;
  font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45;
  padding: 9px 11px; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease; z-index: 30;
}
.field label .q-tip:hover .bubble, .field label .q-tip:focus .bubble { opacity: 1; visibility: visible; }


/* Pagination pill look (size/font/border/colors) is fully unified in
   admin/css/common-back-front.css, shared verbatim with the backend. Only this
   page-layout-specific override (outer <ul> auto-centered instead of float-left) stays here. */
ul.setPaginate { margin: auto !important; float: unset !important; width: fit-content; }
.ajaxResult { padding: 0px; }

.mc-fields select { width: 219px !important; }
.mc-fields input { width: 218px !important; }
.mc-title { text-decoration: none; text-transform: uppercase; margin: 20px 0; font-family: var(--font-base) !important; font-size: 18px !important; }
.mc-button { border: none !important; border-radius: 5px; font-weight: normal !important; width: 115px !important; }
.mcw-wrap_theme4 .mcw-form__block .mcw-form__title { color: var(--lgray-66) !important; }
.mcw-wrap_theme4 .mcw-calculate-btn { max-width: 200px; margin: 10px auto; box-shadow: none!important; }
.searchTabBody .select2-container { width: 100% !important; min-height: fit-content;}
.searchTabBody li.select2-selection__choice { width:auto; }
.searchTabBody textarea.select2-search__field { height: 26px !important; line-height: 30px; margin: 0px 5px !important; }
input[type="radio"]:checked, input[type="radio"]:focus, input[type="checkbox"]:checked, input[type="checkbox"]:focus { outline: none;}
.searchTabBody p { margin: 20px 0px; }
.search-result_right1 .searchTabBody { margin: 0px; background: transparent !important; padding: 0px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px;}
.sortByDropDownContainer { display: flex; align-items: center; gap: 10px;}
.total-search-for b { color: #000; }
.makeItalic { font-style:italic; }
.makeBold600 { font-weight:600; }
.select-language { display: flex; align-items: center; cursor: pointer; padding: 1px 23px; border-radius: 5px; transition: background-color 0.3s ease; font-size: 13px; }
.select-language img { margin-right: 8px; width: 20px; height: 15px; }
textarea.select2-search__field::placeholder { padding: 1px 13px; color: var(--lgray-66) !important;}

.language-box { position: relative; display: inline-block; font-family: var(--font-base); padding: 8px 0px; }
.translation-links { display: none; position: absolute; top: 31px; left: -12px; background-color: var(--white); border: 1px solid var(--lgray-cc); border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); list-style: none; padding: 0; margin: 0; width: 150px; z-index: 999; }
.translation-links li:first-child { border-top-right-radius: 10px; border-top-left-radius: 10px; }
.translation-links li:last-child { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
.translation-links li { padding: 10px; cursor: pointer; display: flex; align-items: center; transition: background-color 0.3s ease; }
.translation-links li:hover { background-color: #f1f1f1; }
.translation-links img { margin-right: 10px; width: 20px; height: 15px; }
.language-box:hover .translation-links { display: block; }
.markerLabelSingle, .markerLabelDouble { font-size: 11px !important; font-weight: 600; padding: 0 6px 0 2px; width: auto !important; text-align: center; zoom: 1; }
.markerLabelSingle { margin: -10px -3px 0 0px; }
.errorMessages #signup-error{ margin-bottom: 20px; }
.panel-footer{ border-radius: 0px; }
.gm-style-iw-chr { display: none; }
.gm-style-iw.gm-style-iw-c { padding: 0px; border-radius: 12px; }
.gm-style-iw-d { display: contents; }
.isScrollable{position: absolute !important; top: unset !important; bottom: 0; height: auto;}
.container .resource{align-items: stretch;}
.container .resource #left, .container .resource #right{height: auto;}
.singlePropertyPage .feature-padding { background: var(--white); }
.singlePropertyPage .save ul { display: flex; }
.singlePropertyPage .save ul li { flex: 1; float: none;}
.grecaptcha-badge { z-index: 9999; }
/* Patch 7: popup open (account-flow.js) - badge invisible but kept on the page (Google: visibility, never display:none) */
html.somi-popup-open .grecaptcha-badge { visibility: hidden !important; }
.forClosureChecks { padding-top: 17px; margin-bottom: 0px !important; }
.newPropSearchFilter .forClosureChecks { margin-top: 15px; height: 35px; padding: 0px !important; }
#request-more-info-form-highlighter .valid{ color: #000; }
.sliderCont .container { width: 100%; }
.contactAgentFormContainer-scrolled{position: fixed; transition: top 0.3s ease-in-out;}
.bannerSlider video{ min-width: 100vw; min-height: 100vh; filter:brightness(0.8); position: absolute; bottom: 0; left: 0; object-fit: cover; object-position: center; width: 100%; height: 100%; }
.padding_right_none, .noMobilePadding { padding-right: 0px !important; }
/* Bootstrap's .col-sm-9 has its own padding-left:15px -- the flex gap is the only intended gutter now, so zero it here too */
.noMobilePadding { padding-left: 0px !important; }
.loginSubmenu a, .userLogindetail a.dropdown-toggle { padding-right: 0px; }

#residentialsearch-form .jointNow2,
.thumb-view-left-content p,#businessModal .modal-header .close,.login-account a,
.login-account a:hover,.weak-password, .searchTabHead2 li a:hover,
header .nav > li > a.active,.searchtabb1 li a:hover,
.searchTabHead li a:hover { color: var(--white); }
form#agentSearchForm { display: inline-flex; gap: 10px; flex-wrap: wrap; }
form#agentSearchForm .agentser { width: auto; }
#agentSearchForm .field label { margin-bottom: 0px; }
.category-tree a { color: var(--lgray-66); }
.contactAgentFormContainer {margin-bottom: 4px;}
.searchFileds .form-control { height: 32px; }
.searchTabBody .select2-container--default .select2-selection--multiple .select2-selection__choice__display,
.searchTabBody .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { line-height: 19px; }
.panel-heading.login-heading .close { padding: 3px 0px; }
#mcwWidget .mcw-wrap { background: #fff; max-width: 600px; margin: auto; }
.singlePropertyPage #mcwWidget .mcw-wrap { max-width: 100%; }
.singlePropertyPage .mcw-wrap .mcw-form__title { max-width: 130px; }
.singlePropertyPage .mcw-wrap .mcw-form__title, .singlePropertyPage .mcw-wrap .mcw-form__field-group_sm {
    flex: 1 1 100%;
}
.pageEditorContent li { font-size: 15px; list-style: disc; margin-left: 15px; }
.major-widget iframe { max-width: 568px; }

.courtesyRow { display: flex; width: 100%; padding: 15px; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--lgray-cc); margin-top: 20px;}
.courtesyRow .courtesyText { font-size: 14px; color: var(--cgray); }
.courtesyRow img.miamiRealtorLogo { margin: 0px; }


@media(max-width: 520px){
  .courtesyRow { flex-direction: column; align-items: baseline;}
}

:root{
  --pc-text-dark: #333333;
  --pc-text-gray: #6b6b6b;
  --pc-border: #e2e2e2;
  --pc-border-faint: rgba(0,0,0,.04);
  --font-base: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { font-family: var(--font-base); }
/* Property card grid + list -- global (mapsearch.php/mySavedProperties.php/ourFeaturedProperties.php/property-search.php plus the 4 SS search pages). Ported from residential-search-redesign-preview-v39.html's .property-card/.list-row -- see getSinglePropertyThumbView()/getSinglePropertyListView() in includes/table_form_renders.php. Swiper slider/nav/pagination dots, .propLabel Featured/New Today badges, the imageCount photo-count badge, and the isInventory status dot are kept as-is. */
.thumb-view-left12{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
@media (max-width:1200px){ .thumb-view-left12{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:560px){ .thumb-view-left12{grid-template-columns:1fr;} }
.search-match{display:flex; flex-direction:column; gap:16px;}

.property-card{
  display:flex; flex-direction:column; min-width:0; background:#fff; overflow:hidden;
  border-radius:12px; border:1px solid var(--pc-border-faint); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.08);
  transition:box-shadow .2s ease, transform .2s ease;
}
/* hover: deeper shadow kept clear of the next card + 2px rise; mouse only, so a tapped card never stays dark */
@media (hover:hover){
  .property-card:hover{ box-shadow:0 2px 4px rgba(0,0,0,.08), 0 8px 16px -6px rgba(0,0,0,.24); transform:translateY(-2px); }
}
.property-card:has(:focus-visible){ outline:2px solid var(--front_primary_brand); outline-offset:2px; }
/* Applied briefly by js/map_search_new.js's highlightPropertyCard() when a
   map marker is clicked, so the matching Photo View card is easy to spot
   after the page scrolls to it. transition makes the ring fade in/out
   instead of popping on/off abruptly. */
.property-card.map-pin-highlight, .list-row.map-pin-highlight{ box-shadow:0 0 0 3px var(--front_primary_brand); transition:box-shadow .2s ease; }
.property-photo{ width:100%; height:210px; position:relative; overflow:hidden; background:#eee; }
.property-photo .swiperSlider, .property-photo .swiper, .property-photo .swiper-slide, .property-photo img{ width:100%; height:100%; }
.property-photo img{ object-fit:cover; display:block; }
/* Swiper raised above .property-photo-link, which was absorbing all touch/drag via a same-z-index stacking tie. */
.property-photo .swiperSlider{ position:relative; z-index:2; }
.property-photo-link{ position:absolute; inset:0; z-index:1; display:block; }
.map_count_pin { display: flex; align-items: center; justify-content: center; background: #ffffff; color: #fff; font-family: var(--font-base); border-radius: 26px; position: absolute; width: fit-content; border: 3px solid #000; min-width: 28px; z-index: 2; bottom: 7px; right: 5px; }
.map_count_pin::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; background: linear-gradient(-45deg, black 50%, transparent 50%); z-index: -1; }
.map_count_pin_text { white-space: nowrap; color: #000; line-height: 13px; padding: 5px; background: #fff; border-radius: 22px; text-align: center; min-width: 22px; z-index: 2; }
.property-photo .badge-count, .list-row-photo .badge-count{ position:absolute; bottom:10px; left:10px; background:rgba(0,0,0,.65); color:#fff; font-size:11px; font-weight:600; padding:3px 8px; border-radius:4px; z-index:2; }
.property-details{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; padding:18px; }
.property-address{ font-size:15px; font-weight:700; margin:0 0 2px; line-height:1.3; }
.property-address a{ color:var(--front_primary_brand); text-decoration:underline; }
.property-subaddress{ font-size:12.5px; color:var(--pc-text-gray); }
.property-subaddress:not(:has(~ .property-subaddress)){ margin:0 0 10px; }
.property-line{ font-size:12px; color:var(--pc-text-dark); margin:0px; line-height:1.8; }
.property-line .sep{ color:var(--pc-text-dark); opacity:.45; margin:0 5px; font-weight:400; }
.property-mls{ font-size:12px; color:var(--pc-text-dark); font-weight:400; line-height:1.8; margin:0px; }
.property-status-row{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  background:var(--front_topbar_bg); margin:auto -18px 14px; padding:10px 18px;
  font-size:11.5px; font-weight:500; color:var(--pc-text-dark);
  line-height: normal;
}
.is-project-card .property-status-row { margin-bottom: 6px; }
.is-project-card .property-price-row { margin-top: 8px; }
.property-status-row .status-label.is-development-phase,
.property-status-row .status-label.is-active,
.property-status-row .status-label.is-closed,
.property-status-row .status-label.is-coming-soon,
.property-status-row .status-label.is-pending{ font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.property-status-row .status-label.is-active, .property-status-row .status-label.is-development-phase{ color:#1e6b23; }
.property-status-row .status-label.is-closed{ color:var(--front_primary_brand); }
.property-status-row .status-label.is-coming-soon{ color:#1d5fae; }
.property-status-row .status-label.is-pending{ color:#8a6d00; }
.property-price-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; }
.property-price{ font-size:18px; font-weight:700; color:var(--front_primary_brand); margin:0; }
.property-price-row img{ width:64px; height:auto; flex:0 0 auto; display:block; }
.property-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.property-actions .propBoxButton{
  flex:1 1 112px; min-width:0; height:auto; width:auto; float:none; margin-top:0;
  padding:9px 2px; font-size:11.5px; font-weight:600; letter-spacing:normal; text-transform:none; line-height:1;
  display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; text-align:center;
  border-radius:6px; border:1px solid var(--front_btn_secondary_border, #a00a0f); background:var(--front_btn_secondary_bg, #ffffff); color:var(--front_btn_secondary_text, #a00a0f);
  transition:background .15s, color .15s;
}
.property-actions .propBoxButton:hover{ background:var(--front_btn_secondary_bg_hover, #a00a0f14); color:var(--front_btn_secondary_text_hover, #a00a0f); border-color:var(--front_btn_secondary_border_hover, #a00a0f); }
.property-actions .propBoxButton i.svg-icons{ width:14.5px; height:14.5px; flex-shrink:0; color:var(--front_btn_secondary_text, #a00a0f) !important; }
.property-actions .propBoxButton.view-details{ background:var(--front_btn_primary_bg, #a00a0f); color:var(--front_btn_primary_text, #ffffff); border-color:var(--front_btn_primary_border, #a00a0f); }
.property-actions .propBoxButton.view-details:hover{ background:var(--front_btn_primary_bg_hover, #900606); color:var(--front_btn_primary_text_hover, #ffffff); border-color:var(--front_btn_primary_border_hover, #900606); }
.property-actions .propBoxButton.view-details i.svg-icons{ color:var(--front_btn_primary_text, #ffffff) !important; }
@media (max-width:560px){
  .property-actions .propBoxButton{ padding:12px 8px; font-size:13px; gap:7px; }
}

.list-row{
  display:flex; gap:20px; background:#fff; border:1px solid var(--pc-border-faint);
  border-radius:12px; padding:14px; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.08); transition:box-shadow .2s ease;
}
@media (hover:hover){
  .list-row:hover{ box-shadow:0 2px 4px rgba(0,0,0,.08), 0 8px 16px -6px rgba(0,0,0,.24); }
}
.list-row:has(:focus-visible){ outline:2px solid var(--front_primary_brand); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .property-card, .property-card:hover{ transform:none; transition:box-shadow .2s ease; } }
.list-row-photo.property-photo{ flex:0 0 240px; width:240px; height:auto; align-self:stretch; border-radius:8px; }
.list-row-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:2px 0; }
.list-row-body .property-address{ font-size:16px; margin-bottom:3px; }
.list-row-body .property-status-row{ margin:6px 0 10px; padding:10px 0 0; background:none; border-top:1px solid var(--pc-border); }
.is-project-card .list-row-body .property-status-row {
    border-bottom: 1px solid var(--pc-border);
    padding-bottom: 10px;
}
.list-row-side{ flex:0 0 176px; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; text-align:right; gap:10px; padding:2px 0; }
.list-row-side .property-price-row{ flex-direction:column; align-items:flex-end; gap:8px; margin:0; }
.list-row-side .property-price{ font-size:19px; }
.list-row-side .property-price-row img{ width:80px; }
.list-row-side .property-actions{ flex-direction:column; width:100%; margin-top:0; }
.list-row-side .property-actions .propBoxButton{ flex:0 0 auto; padding:14px 12px; font-size:13px; gap:7px; }
.list-row-side .property-actions .propBoxButton i.svg-icons{ width:16px; height:16px; }

/* Show mobile tab on desktop when it's the only tab rendered (search pages) */


.newPropSearchFilter .filtersSearchBoxContainer { display: flex; justify-content: space-between; margin-bottom: 15px;}
.newPropSearchFilter .searchTabBody { background: transparent; border: 0px;}

.profile-form li .valid { color: #000; }

.svg-icons { width:22px; height:22px; display: inline-block; vertical-align: bottom; background-color: currentColor; }

.svg-heart {
  -webkit-mask: url("../images/svg/f-heart.svg") no-repeat center / contain;
  mask: url("../images/svg/f-heart.svg") no-repeat center / contain;
}
/* Outline (stroke) treatment for the property-card Save Property button,
   matching the mockup's .property-actions svg{fill:none;stroke:...} spec --
   distinct from the sidebar's solid .svg-heart since the mask technique
   can't represent both fill styles from one source file. */
.svg-heart-outline {
  -webkit-mask: url("../images/svg/f-heart-outline.svg") no-repeat center / contain;
  mask: url("../images/svg/f-heart-outline.svg") no-repeat center / contain;
}
/* Saved property: solid heart */
.save-home.auto-select .svg-heart-outline {
  -webkit-mask: url("../images/svg/f-heart.svg") no-repeat center / contain;
  mask: url("../images/svg/f-heart.svg") no-repeat center / contain;
}
.svg-eye {
  -webkit-mask: url("../images/svg/eye.svg") no-repeat center / contain;
  mask: url("../images/svg/eye.svg") no-repeat center / contain;
}
.svg-share {
  -webkit-mask: url("../images/svg/f-share.svg") no-repeat center / contain;
  mask: url("../images/svg/f-share.svg") no-repeat center / contain;
}
.svg-print {
  -webkit-mask: url("../images/svg/f-print.svg") no-repeat center / contain;
  mask: url("../images/svg/f-print.svg") no-repeat center / contain;
}
.svg-info-square {
  -webkit-mask: url("../images/svg/f-info-square.svg") no-repeat center / contain;
  mask: url("../images/svg/f-info-square.svg") no-repeat center / contain;
}

.svg-previous {
  -webkit-mask: url("../images/svg/angle-left-square.svg") no-repeat center / contain;
  mask: url("../images/svg/angle-left-square.svg") no-repeat center / contain;
}
.svg-next {
  -webkit-mask: url("../images/svg/angle-right-square.svg") no-repeat center / contain;
  mask: url("../images/svg/angle-right-square.svg") no-repeat center / contain;
}
.svg-caret-up {
  -webkit-mask: url("../images/svg/angle-up-square.svg") no-repeat center / contain;
  mask: url("../images/svg/angle-up-square.svg") no-repeat center / contain;
}
.svg-caret-down {
  -webkit-mask: url("../images/svg/angle-down-square.svg") no-repeat center / contain;
  mask: url("../images/svg/angle-down-square.svg") no-repeat center / contain;
}


.modal-dialog { margin:auto; }
.full_profilee .panel-heading.login-heading .close { padding: 0px; }



.mortgageLegalText { font-size: 13px !important; max-width: 500px !important; text-align: center; margin: auto !important; }
.singlePropertyPage .mortgageLegalText { text-align: justify; max-width: 100% !important; }
.mortgageLegalText.mortgageCalPage { margin-bottom: 10px !important; padding: 10px 0px; max-width: 100% !important; }
.formLegalText { text-align: justify;}
.formLegalText a { cursor: pointer; }
.singlePrevNextLinks { display: flex; justify-content: space-between; }
.singlePrevNextLinks a { display: block; margin: 15px 0px 30px; text-align: center; display: flex; align-items: center; gap: 10px; }
.singlePrevNextLinks a .svg-icons { width: 32px; height: 32px; }
.propertyTitleBar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.propertyTitleBar .propertyTitle h2 { color: #333333; margin-bottom: 6px; font-size: 24px; font-weight: 600; }
.propertyTitleBar .propertyTitle h3 { color: var(--cgray); margin-bottom: 0; font-size: 16px; font-weight: 400; }
.propertyTitleBar .propertyPrice h2 { margin-bottom: 0; font-size: 28px; font-weight: 700; text-align: right; color: var(--front_primary_brand); line-height: normal;}
.propertyTitleBar .feature-property-estimates { text-align: right; }


@media only screen and (max-width: 620px) {
  .newPropSearchFilter .filtersSearchBoxContainer { flex-direction: column; gap: 15px;}
}
@media only screen and (max-width: 520px) {
  .page_title_heading, .resource_right .back-agent { flex-direction: column; }
  .resource_right > .page_title_heading h2, .resource_right > .back-agent h2 { width: 100%; }
}
.adminPageSubHeadTitle { margin: 0px; display: inline-block; line-height: normal; padding-left: 5px; font-size: 16px;}
.closedInfo { font-size: 14px; font-weight: 600; }
.property-status-row .closedInfoWithheld {
    margin-bottom: 10px;
    color: var(--front_primary_brand);
    font-weight: 600;
    font-size: 13px;
}
.sideTopBtn i.svg-icons { height: 18px; vertical-align: middle; }

.virtual_tour { margin-top: 10px; }
.virtual_tour a { align-items: center; display: flex; gap: 5px; }
.virtual_tour a span { font-size: 13px; line-height: 13px; }
.virtual_tour i.svg-icons { width: 40px; height: 40px; }
.select2-container--default .select2-results>.select2-results__options { color: var(--lgray-66); }
#residentialsearch-form .searchSubmitButtonBox { float: right; }
#residentialsearch-form .searchButtonCenter { margin: auto; float: none; }
.searchForClosureBox.isHidden { display: none !important; }
.searchTabBody .chosen-container, .searchTabBody .form-control{ border-color: #aaa; float: none;}
.alert.alert-success.alert-contact { margin: 20px 0px; }
/* Property-card photo slider prev/next -- circular translucent buttons matching the
   homepage Featured carousel's .fp-photo-nav; always visible so people can see there are more photos. */
.swiperSlider.propertyList .swiper-button-next,
.swiperSlider.propertyList .swiper-button-prev {
  width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; padding: 0;
  background: rgba(0,0,0,.42) !important;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease, background .15s ease;
}
.swiperSlider.propertyList .swiper-button-prev { left: 8px; }
.swiperSlider.propertyList .swiper-button-next { right: 8px; }
.swiperSlider.propertyList .swiper-button-next:after,
.swiperSlider.propertyList .swiper-button-prev:after { font-size: 18px; font-weight: 700; color: #fff; }
.swiperSlider.propertyList .swiper-button-next:hover,
.swiperSlider.propertyList .swiper-button-prev:hover { background: rgba(0,0,0,.65) !important; }
/* Swiper sets pointer-events:none on disabled buttons, causing clicks to fall through to the slide link below. Keep pointer-events so the button absorbs the click instead. */
.swiperSlider.propertyList .swiper-button-next.swiper-button-disabled,
.swiperSlider.propertyList .swiper-button-prev.swiper-button-disabled { pointer-events: auto; opacity: .35; }

/* Detail page title bar: stack name/address and price on phones and small tablets */
@media only screen and (max-width: 767.98px) {
  .propertyTitleBar { flex-direction: column; align-items: stretch; gap: 20px; }
  .propertyTitleBar .propertyTitle,
  .propertyTitleBar .propertyPrice { width: 100%; }
  .propertyTitleBar .propertyPrice h2 { text-align: left; }
  .propertyTitleBar .feature-property-estimates { float: none; text-align: left; margin-top: 6px; }
  .propertyTitleBar .feature-property-estimates li { float: none; display: inline-block; }
}

/* ========== formerly css/new-master.css: kept after the rules above, so the cascade order is unchanged ========== */
/**========================= New optimized CSS ========================**/


.save li a.auto-select { color: var(--front_btn_primary_text, #ffffff) !important; background-color: var(--front_btn_primary_bg, #a00a0f) !important;}

.save .auto-select i.svg-icons { color: var(--white) !important;}
.save li a.auto-select .fa { color: var(--white) !important;}
.backdiv {position: fixed;width: 100%;height: 100%;display:none;top: 0;left: 0;z-index: 1000;opacity: 0.6;background-color:black;}
#divhide > h2 img{margin:13px 4px;}
span.price_unit { font-size: 75%; }
.mapSearchPage .mapSearchContainer { margin-top: 10px; }
.pageEditorContent { display: inline-block; width: 100%; color: var(--pc-text-dark);}
/* Swiper's built-in dynamicBullets mode fought this pill's fixed right-anchored position
   (it inline-transforms/resizes the container assuming it's free to recenter) -- pagination
   windowing is done manually instead (updateDotsWindow() in table_form_renders.php, same
   MAX_DOTS=5 clamped-centering logic as the homepage's fp-photo gallery), toggling
   .is-hidden on plain (non-dynamic) bullets. Container naturally shrinks to fit only the
   visible bullets via width:fit-content, same as .fp-dots. */
.swiperSlider .swiper-pagination-bullets.swiper-pagination-horizontal { position: absolute; top: 10px; right: 10px; left: auto; background: #00000061; z-index: 1; height: fit-content; padding: 10px; width: fit-content; border-radius: 20px; }
.inventoryPage .swiperSlider .swiper-pagination-bullets.swiper-pagination-horizontal { right: 40px; left: auto;}
.swiperSlider span.swiper-pagination-bullet {
  width: 7px; height: 7px; background: #ffffff;
  transition: width .2s ease, height .2s ease, opacity .2s ease, margin .2s ease;
}
/* Collapsed to zero width/opacity instead of display:none, so a dot leaving or entering
   the visible window shrinks/grows and the others slide over to fill the gap -- gives the
   window movement a visible animation instead of an instant jump. */
.swiperSlider span.swiper-pagination-bullet.is-hidden { width: 0; height: 0; margin-left: 0 !important; margin-right: 0 !important; opacity: 0; }
.swiperSlider span.swiper-pagination-bullet.swiper-pagination-bullet-active { width: 8px; height: 8px; }
.defaultPageBanner img{ width: 100%; padding:10px 0px; }
.propertySearchPage .int_cntnt { padding: 0px; }
.propertySearchPage .page_title_heading { margin-bottom: 15px; }
/* No heading text sits between the red header and the search tabs on these pages (unlike SS/SI, which have their own heading providing spacing) -- match the sidebar's own buttons-to-card gap instead of the shared component's default 8px.
   .propertySearchPage alone isn't specific enough -- it's also on the 4 SS pages (which get "singleSearchPage" too) and on ourFeaturedProperties.php (which gets "inventoryPage" too), both of which DO have their own heading and must keep the smaller default gap. */
.noHeadingAboveTabs .ss-page-header-bar { margin-bottom: 20px; }
.propertySearchPage .page_title_heading h2 { display: flex; gap: 5px; width: 100%; align-items: center; }
.propertySearchPage .page_title_heading svg { width: 40px; }
.propertySearchPage .search-properties-panel { width:100%; margin-top:0px; margin-bottom:24px; border-radius: 5px;}
.propertySearchPage .search-properties-panel-main { width:100%; background:var(--white); z-index:99 }
.propertySearchPage .search-properties-panel-mid { width:100%; background:var(--white); }
.propertySearchPage .defaultPageBanner img{ padding: 0px; margin-bottom: 15px; }
/* "View Rates" popup (propertyDetails.php): 568px widget + the 30px header gutters */
#mortgageRatesModal .modal-dialog { width: 100%; max-width: 628px; }
#mortgageRatesModal .modal-content { background: transparent; }
#mortgageRatesModal .panel.panel-default { width: 100%; }
#mortgageRatesModal .panel-body { padding: 20px 30px 30px; }
#mortgageRatesModal .major-widget { float: none; }
#mortgageRatesModal .major-widget iframe { display: block; width: 100%; max-width: none; border: 0; }

#agentInfoPopup .panel.login-screen { width: auto; }
/* caps modal height + scrolls the body so it can't clip off short screens */
#agentInfoPopup .panel.login-screen { max-height: 90vh; display: flex; flex-direction: column; }
#agentInfoPopup .panel-body.login-content { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* stacked/centered layout, matching the mockup (was a side-by-side flex row) */
#agentInfoPopup .agentProfilePic { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 7px solid #b4b4b4; transition: all ease-in-out 0.2s; margin: 0 auto 22px; }
#agentInfoPopup .agentProfilePic:hover { border-width:12px; }
#agentInfoPopup .agentProfilePic a { padding:0px; }
.agentProfilePic img { width: 100%; height: 100%; object-fit: cover; display: block; }
#agentInfoPopup img.img_brdr { width:100%; height:100%; display: block;}
@media (max-width: 560px) { #agentInfoPopup .agentProfilePic { width: 300px; height: 300px; margin: auto; } }
#agentInfoPopup .loginInputContainer { text-align: center; }
#agentInfoPopup .agentContanctInfo { width: 100%; }
#agentInfoPopup .modal-dialog { width: 100%; max-width: 480px; }
#agentInfoPopup .dataRow { font-size: 16px; }
#agentInfoPopup td.dataValue.emailAddress { word-break: break-word; }
#agentInfoPopup .agentContanctInfo .agentName { font-size: 26px; color: #a00a0f; border-bottom: 2px solid #80808054; width: 100%; padding: 0 0 20px; margin: 0px 0px 24px; font-weight: 700; text-align: center;}
#agentInfoPopup .loginBoxContainer { padding: 32px 15px 13px; }
#agentInfoPopup .testimonialInfo .dataRow { color: #000;  text-align: center;}
#agentInfoPopup .testimonialInfo { display: flex; flex-direction: column; gap: 10px; padding: 0px;}
#agentInfoPopup .testimonialCientName { font-size: 18px; color: var(--front_primary_brand); }
#agentInfoPopup .testimonialComment { text-align: left; }
#agentInfoPopup .testimonialRating i.fa { font-size: 20px; }
.testimonialRating { display: flex; align-items: center; gap: 5px; justify-content: center; font-size: 20px; }
.testimonialPanel .testimonialRating, .testimonialPanel .continueReading { margin-bottom:15px; }


.mapPanel { border-radius: 15px; }


a.readmore, a.viewall { border: 1px solid #999999; display: inline-block; font-size: 14px; border-radius: 5px; text-transform: uppercase; padding: 10px 30px; margin-top: 15px; text-transform:uppercase; }
a.readmore .fa, a.viewall .fa { margin-left:6px; }
.welcomePanel a.readmore { background-color: var(--home_welcome_btn_bg); color: var(--home_welcome_btn_text_border); border-color: var(--home_welcome_btn_text_border);}
.welcomePanel a.readmore:hover { background-color: var(--home_welcome_btn_bg_hover); color: var(--home_welcome_btn_text_border_hover); border-color: var(--home_welcome_btn_text_border_hover); }
.welcomePanel.welcomePanelHome{background-color: var(--home_welcome_bg) !important;}
.welcomePanel { background:var(--white); padding:30px 0 35px; text-align:center }
.welcomePanel p { text-align:left;font-size:18px;color:var(--lgray-33);line-height:28px;font-family: var(--font-base);}


.featuredPanel a.viewall { background-color: var(--home_featured_btn_bg); border-color: var(----home_featured_btn_text_border); color: var(--home_featured_btn_text_border); }
.featuredPanel a.viewall:hover{ background-color: var(--home_featured_btn_bg_hover); }

/* Home page CTA buttons share one SHAPE (silhouette only -- height/padding/
   radius/border-width/typography/transition), matching .sf-save-search-btn.
   Colors are deliberately NOT part of this shared rule: Welcome/Featured get
   white-bg/red-border/red-text below; Testimonial keeps its own original
   colors entirely (.testimonialPanelHome a.readmore rule
   further down, unchanged) -- white border/white text on a transparent bg,
   since it sits on a red background photo where red-on-red would vanish. */
.welcomePanel a.readmore,
.featuredPanel a.viewall,
.testimonialPanelHome a.readmore {
	height: 48px;
	padding: 0 20px 0 18px;
	border-radius: 8px;
	border-width: 1.5px;
	border-style: solid;
	font-weight: 700;
	letter-spacing: 0.05em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Template-level Learn More CTA, placed after the CMS-edited welcome content --
   28px matches the spacing convention the CMS content itself already uses
   above its own (soon to be removed) static button. */
.welcomePanel a.readmore { margin-top: 28px; }

.testimonialPanelHome .testimonialCont .clientName, 
.testimonialPanelHome h1, 
.testimonialPanelHome a, 
.testimonialPanelHome .fa-chevron-right, 
.testimonialPanelHome .testimonialCont {color: var(--home_testimonial_text) !important}
.testimonialPanelHome a.readmore { background-color: var(--home_testimonial_btn_bg); color: var(--home_testimonial_btn_text_border) !important; border-color: var(--home_testimonial_btn_text_border); }
.testimonialPanelHome a.readmore:hover { background-color: var(--home_testimonial_btn_bg_hover); border-color: var(--home_testimonial_btn_text_border_hover); color: var(--home_testimonial_btn_text_border_hover) !important; }
.testimonialPanelHome {
  background-image: var(--home_testimonial_bg_image) !important;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  background-attachment: scroll;
  background-color: rgba(0, 0, 0, 0); /* Optional if you want transparency */ 
}
/* overlay */
.testimonialPanelHome::before { content: ""; position: absolute; inset: 0; background: var(--home_testimonial_overlay); z-index: 0; }
/* keep text above overlay */
.testimonialPanelHome > * { position: relative; z-index: 1; }
.testimonialPanel{width:100%;overflow:hidden;background:url(../images/testimonial-bg.jpg) center bottom no-repeat ;text-align:center;position:relative;background-size:cover;background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;-webkit-background-size:cover;padding:30px 0 35px;text-align:center }
.testimonialPanel h1{text-align:center}
.testimonialPanel .testimonialCont { font-size:16px; margin: auto; }
.testimonialPanel .testimonialCont .clientText { text-align:center; padding:0px 5px; margin-bottom: 15px; line-height: 28px; }
.testimonialPanel .testimonialCont .clientText .textOpen,
.testimonialPanel .testimonialCont .clientText .textClose { width: 35px; height: 24px; display: inline-block; vertical-align: bottom; position: relative; }
.testimonialPanel .testimonialCont .clientText .textOpen  { background: url(../images/text-open.png) no-repeat; top: -10px; }
.testimonialPanel .testimonialCont .clientText .textClose { background: url(../images/text-close.png) no-repeat; top: 5px; }
.testimonialPanel .testimonialCont .clientName { font-size:16px; line-height:20px; }

/* Soft divider between the two home testimonials. Stacked columns (below the
   col-md-6 breakpoint at 992px) get a horizontal fade in normal flow; side-by-side
   columns (992px+) get a vertical fade positioned in the row's gutter.
   Mobile note: the divider's own margin-top is useless here -- clearing a float
   snaps the cleared box straight to the float's bottom edge regardless of its
   margin-top (clearance swallows it). The real top gap has to come from
   margin-bottom on the float itself, which the clearance calc DOES respect. */
@media (max-width:991px) {
	.testimonialPanelHome .testinmonailNumber_1 { margin-bottom: 24px; }
}
.testimonialPanelHome .testimonialDivider {
	clear: both;
	width: 70%;
	height: 2px;
	margin: 0 auto 24px;
	/*background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 15%, rgba(255,255,255,.55) 85%, rgba(255,255,255,0) 100%);*/
   background: linear-gradient(to bottom, #ffffff00 5%, #ffffff99 5%, #ffffff99 95%, #ffffff00 95%);
}
@media (min-width:992px) {
	.testimonialPanelHome .testimonialRow { position: relative; }
	.testimonialPanelHome .testimonialDivider {
		position: absolute;
		top: 50px;
		bottom: 4px;
		left: 50%;
		width: 2px;
		height: auto;
		margin: 0;
		transform: translateX(-50%);
      /*background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 15%, rgba(255,255,255,.55) 85%, rgba(255,255,255,0) 100%);*/
      background: linear-gradient(to bottom, #ffffff00 5%, #ffffff99 5%, #ffffff99 95%, #ffffff00 95%);
	}
}

.featuredPanel{padding:30px 0 35px;text-align:center;background:#f3f3f3 url(../images/graph-bg1.jpg) repeat;}
.featuredPanel h1.featureText { margin-bottom: 8px; }
.featuredPanel .featureSubText { font-size: 15px; margin-bottom: 15px; }

#cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--white); color: #000; padding: 10px; text-align: center; z-index: 1000; box-shadow: 0px 0px 10px #00000085; }
#cookie-banner button { background: #000; color: white; border: none; font-weight: 600; padding: 10px 20px; cursor: pointer; border-radius: 5px;}
.cookiesPopups .modal-content { background: transparent; }
.cookiesPopups .panel.panel-default { width: 100%; }
.cookiesPopups .cookiesInfo { text-align: left; font-size: 16px; padding: 20px 15px 5px; }
.cookiesPopups .cookiesInfo a { color: var(--front_primary_brand); padding: 0px; display: contents; }
.cookiesPopups .cookiesInfo a:hover { text-decoration: none; color: var(--front_primary_brand); }
.cookiesPopups .panel-footer { text-align: center; display: flex; background: #fff; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.cookiesPopups .panel-footer button { background-color: var(--front_btn_primary_bg, #a00a0f); color: var(--front_btn_primary_text, #ffffff); border: none; padding: 10px 30px; cursor: pointer; }
.cookiesPopups .panel-footer button:hover { background-color: var(--front_btn_primary_bg_hover, #900606); color: var(--front_btn_primary_text_hover, #ffffff); }
.cookieConainer { max-width: 1365px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 0px 70px; }
.consentButtons { display: flex; align-items: center; gap: 20px;  min-width: fit-content;}
.cookiesInfo { display: flex; flex-direction: column; gap: 20px; }
/* Popup X ink sits 13px inside its 44px button: pull it out so it lines up with the content edge */
.signUp-modal .panel-heading.login-heading button.close, #mapSearchInfoModal .modal-header button.close { margin-right: -13px !important; }
/* bootstrap.min-front-new.css forces .modal{overflow-y:scroll}: a second, empty scrollbar on desktop */
.signUp-modal.in { overflow-y: auto; }
.consentText { text-align: left; }
.cosentTypeRow h3 { margin-bottom: 5px; }
.cosentTypeRow span { color: var(--lgray-66); }
.cosentTypeRow { display: flex; justify-content: space-between; gap: 15px;}

.switch { display: inline-block; height: 26px; position: relative; width: 45px; min-width: 45px;}
.switch input { display:none; }
.switch .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; }
.switch .slider:before { background-color: #fff; bottom: 3px; content: ""; height: 20px; left: 3px; position: absolute; transition: .4s; width: 20px; }
.switch input:checked + .slider { background-color: #66bb6a; }
.switch input:checked + .slider:before { transform: translateX(18px); }
.switch .slider.round { border-radius: 34px; }
.switch .slider.round:before { border-radius: 50%; }

.footerTop { padding:35px 0 }
.footerTop h2 { font-size:16px; font-family: var(--font-base);color:var(--lgray-33);margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid var(--lgray-cc); font-weight:bold; }
.footerTop .svg-icons { color : var(--front_primary_brand) !important;  width:20px; height: 20px; }
.footerTop .newsPanel a { color : var(--front_primary_brand) !important;  font-size:14px; }
.footerTop .newsPanel a:hover { color : var(--front_primary_brand) !important; text-decoration:none; }
.footerTop .newsPanel ul { background-color: var(--front_topbar_bg) !important;  overflow-y:scroll; height:214px; padding:15px;}
.footerTop .newsPanel1 { height:227px; padding:5px; background-color:var(--white); border:solid 1px var(--lgray-cc); width: 100%; }

.feature-request a.auto-select { color: var(--front_btn_primary_text, #ffffff) !important;  background-color: var(--front_btn_primary_bg, #a00a0f) !important;}
.feature-request a.auto-select .fa,
.feature-request a.auto-select i.svg-icons,
.feature-request a:hover i.svg-icons,
.feature-request li:hover > a i.svg-icons,
.feature-request a:hover .fa,
.feature-request a:hover,
.feature-request li.shares:hover > a{ color: var(--white) !important;}
.feature-request i.svg-icons { color : var(--front_primary_brand) !important;}
.feature-request a .fa { color : var(--front_primary_brand) !important;}
.feature-request li.shares:hover > a,
.feature-request a:hover { background-color: var(--front_btn_primary_bg, #a00a0f) !important;}



.feature-request { width:100%;}
.feature-request a .fa { font-size:15px;}
.feature-request i.svg-icons { height: 18px; vertical-align: middle; }
.feature-request i.svg-icons.svg-info-square { height: 28px; width: 28px; margin-right: 3px; }
.feature-request a span { vertical-align: middle; }

.feature-request1 { width:100%; background-color:var(--white); margin-bottom:4px; text-align:center; }
.feature-request1 a{ font-size:15px; color:var(--cgray); font-weight:600; text-decoration:none; display:block; padding:12px 0;}
.feature-request1 a:hover{ font-size:15px; color:#000;text-decoration:none; display:block; background-color:var(--white); padding:12px 0;}


.saveShareDrop li { background-color:var(--white); text-align:center; position: relative;}
.saveShareDrop li:hover ul.dropdown { display: block; }
.saveShareDrop li ul.dropdown { background-color: var(--white);border-color: var(--lgray-cc);border-image: none;border-style: solid;border-width: 5px 1px 1px;display: none;min-width: 125px;position: absolute;z-index: 999;width: 100%; left: 0; right: 0px; }
.saveShareDrop li ul.dropdown::before { color: var(--front_secondary_brand) !important; content: ""; position: absolute; left: 50%; top: -7px; transform: translateY(-50%) rotate(-90deg); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid currentColor; }
.saveShareDrop li ul.dropdown li { display: block;height:auto;width:100%; box-shadow: 0px 0px 1px 0px;}
.saveShareDrop li ul.dropdown li a { display: block;height:auto;width:100%;padding:10px;text-align:left; line-height: inherit; font-weight: 600; font-size: 15px;}
.saveShareDrop li ul.dropdown li a .fa, .copyLinkButton .svg-copy { margin-right:5px; width:17px; line-height:17px; text-align:center;}
.saveShareDrop svg { height: 18px; vertical-align: middle; color : var(--front_primary_brand); fill : var(--front_primary_brand); position: relative; }
.saveShareDrop li.shares .copyLinkButton svg { height: 20px; margin-right: 8px; }
.saveShareDrop:not(.pd-sidebar-actions) li:hover > a > svg { color: var(--white); }

.save li a { text-decoration:none;color:var(--pc-text-dark); display:block;height:56px;width:100%;line-height:56px;}
.save li .fa { font-size:16px; margin-right:6px; line-height:5px;}
.save li:last-child { margin-right:0; }

.save i.svg-icons { height: 18px; vertical-align: middle; color : var(--front_primary_brand);}
.save:not(.pd-sidebar-actions) li:hover > a > i.svg-icons { color: var(--white) !important;}
.save:not(.pd-sidebar-actions) li:hover > a .fa { color: var(--white) !important;}
.save:not(.pd-sidebar-actions) li:hover > a { color: var(--white) !important; background-color: var(--front_primary_brand) !important;}
.save li a .fa { color : var(--front_primary_brand) !important;}


.feature-request2 { width:100%; display: flex; gap: 4px;}
.feature-request2 li { flex: 1; }
.feature-request2 li .fa { color : var(--front_primary_brand) !important; font-size:15px;}
.feature-request2 li a { text-align:center; color:var(--cgray); font-weight:600; font-size:15px; display:block; padding:12px 0;}
.feature-request2 li a:hover { text-align:center; color:#000; font-size:15px; display:block; background-color:var(--white); padding:12px 0;}


/* ── Desktop tab count-based responsive wrapping ───────────────────────────
   Mobile tabs use display:grid and stack naturally — no rules needed there.

   Math: each tab needs ~162px min (142px text + 10px padding each side) + 6px gap.
   5 tabs × 162 + 4 × 6 = 834px → wrap below 850px (with buffer).
   4 tabs × 162 + 3 × 6 = 666px → always fits at desktop min (768px), no rule needed.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width:980px) {
  .home_image header .nav > li > a.active,
  .home_image header .navbar-default .navbar-nav > .active > a,
  .home_image header .navbar-default .navbar-nav > .active > a:hover,
  .home_image header .navbar-default .navbar-nav > .active > a:focus { color : var(--white) !important; background: transparent;}

  .footerTop .newsPanel { padding-right:0px }
  .footerTop .newsletterPanel{padding-left:28px; }
}
@media (min-width:1200px){
  #divhide > h2 img{margin:13px 4px;}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .footerTop h2{margin-bottom:12px;}
  .footerTop .newsletterPanel h2{margin-bottom:10px;}
}


.adminDropdownContainer ul.dropdown-menu {
  border-radius: 9px;
}
.adminDropdownContainer ul.dropdown-menu li:first-child > a {
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}
.adminDropdownContainer ul.dropdown-menu li:last-child > a {
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}

@media (max-width: 979px) {
  .footerTop .newsletterPanel h2 { margin-top: 20px; }
  .isBridgeProperty .single_property_detail_container { margin-bottom: 32px; }
}
@media (max-width: 767px) {
  .cookieConainer { flex-direction: column; gap: 10px; padding: 0px; }
  .featuredPanel .featureSubText { text-align: left; }
}
@media (max-width: 480px) {
  #agentInfoPopup .testimonialInfo { padding: 0px; }
  .cookiesPopups .cookiesInfo { padding: 20px 0px 5px; }
  /* the header drops to 15px here (common-back-front.css): content follows it */
  .signUp-modal .login-screen.panel-default .panel-body .loginBoxContainer, #agentInfoPopup .loginBoxContainer { padding-left: 0; padding-right: 0; }
  #mortgageRatesModal .panel-body { padding: 15px; }
}
@media (max-width: 420px) {
  .contactus_info_sub .col-xs-12:nth-child(2) { margin-top: 20px; }
}

/* -- Slider inside featured property boxes (home + agent pages) -- */
.featuredBox .swiperSlider { position: relative; overflow: hidden; }
.featuredBox .swiperSlider .swiper-slide img { width: 100%; height: 195px; object-fit: cover; display: block; }
.prop-status-ring { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: #00000061; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: auto; }
.prop-status-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #fff;}
.prop-status-active { background: #22c55e; }
.prop-status-closed { background: #a00a0f; }
.prop-status-pending { background: #f59e0b; }
.prop-status-coming-soon { background: #3b82f6; }

@media (max-width: 767px) {
  .featuredSlider .swiperSlider.propertyList .swiper-wrapper {
    display: block;
    transform: none !important;
  }
  .featuredSlider .swiperSlider.propertyList .swiper-slide {
    display: none;
    width: 100% !important;
  }
  .featuredSlider .swiperSlider.propertyList .swiper-slide:first-child {
    display: block;
  }
  .featuredSlider .swiperSlider.propertyList .swiper-button-next,
  .featuredSlider .swiperSlider.propertyList .swiper-button-prev,
  .featuredSlider .swiperSlider.propertyList [class^="swiper_pagination_thumb_"] {
    display: none !important;
  }
  /* Hide prev/next arrows on all property sliders on mobile (search, map, featured) */
  .swiperSlider.propertyList .swiper-button-next,
  .swiperSlider.propertyList .swiper-button-prev {
    display: none !important;
  }
}

/* ===== Map tab loading overlay ===== */
.mapLoadingOverlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255,255,255,0.75);
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mapLoadingSpinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--lgray-cc);
  border-top-color: var(--front_primary_brand);
  border-radius: 50%;
  animation: mapSpin 0.75s linear infinite;
}
@keyframes mapSpin {
  to { transform: rotate(360deg); }
}
/* Wrapper scopes the overlay to exactly the map canvas */
.mapViewWrap {
  position: relative;
  height: 474px;
}

/* ===== Property Detail — Photo/Map/Aerial/Street tabs (matches sf-tab style) =====
   Mockup note: each tab is individually rounded (radius-input, 6px) rather than
   only the row's outer corners -- that "whole row as one clipped unit" look is
   exactly what the redesign moved away from, so :first-child/:last-child no
   longer get their own border-radius override. */
.propDetailTabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 0;
}
.propDetailTab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 14px;
  min-height: 118px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #333333;
  background: #e5e5e5;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.2;
  text-align: center;
}
.propDetailTab:hover  { background: #ddd; }
.propDetailTab.active { background: var(--front_primary_brand); color: #fff; }
.propDetailTab svg {
  width: 40px;
  height: 40px;
  fill: #333333;
  flex-shrink: 0;
  transition: fill 0.15s ease;
}
.propDetailTab.active svg { fill: #fff; }
@media (max-width: 1024px) {
  .propDetailTab { padding: 18px 10px; min-height: 100px; }
}
@media (max-width: 767px) {
  .propDetailTabs { gap: 3px; }
  .propDetailTab { padding: 14px 6px; min-height: 88px; font-size: 11px; letter-spacing: 0.04em; gap: 8px; }
  .propDetailTab svg { width: 28px; height: 28px; }
}
@media (max-width: 480px) {
  .propDetailTab { padding: 12px 4px; min-height: 80px; }
  .propDetailTab svg { width: 26px; height: 26px; }
}
@media (max-width: 360px) {
  .propDetailTab { padding: 10px 3px; min-height: 72px; gap: 6px; }
  .propDetailTab svg { width: 22px; height: 22px; }
}

/* Footer news + newsletter box redesign -- global, via includes/footer.inc.php */
.footerTop {
  --ft-radius-card: 12px;
  --ft-shadow-card: 0 4px 16px rgba(0,0,0,.10);
  --ft-shadow-soft: 0 6px 12px rgba(0,0,0,.10);
  --ft-info-box-height: 232px;
  --ft-info-box-padding: 20px 22px;
}
.footerTop .newsPanel,
.footerTop .newsletterPanel { display: flex; flex-direction: column; }
@media (max-width: 980px) {
  .footerTop .newsPanel { margin-bottom: 35px; }
}

.footerTop .section-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex: 0 0 auto; gap: 10px; }
.footerTop .section-header-row h2 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-base);
  font-size: 16px; color: var(--lgray-33); margin: 0; font-weight: 700;
  padding-bottom: 0; border-bottom: none;
}
.footerTop .section-header-row .section-icon { width: 22px; height: 22px; fill: none; stroke: var(--front_primary_brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.footerTop .section-header-row .more-link {
  font-size: 12px; font-weight: 700; color: var(--front_primary_brand) !important; text-transform: uppercase;
  letter-spacing: .3px; text-decoration: underline; flex: 0 0 auto; white-space: nowrap;
}
.footerTop .section-header-row .more-link:hover { color: var(--front_primary_brand_hover) !important; text-decoration: none; }

/* News box: fixed-height scroll list */
.footerTop .newsPanel1 {
  height: var(--ft-info-box-height); overflow-y: auto; padding: var(--ft-info-box-padding);
  border-radius: var(--ft-radius-card); background: var(--front_topbar_bg); box-shadow: var(--ft-shadow-soft);
  border: none; width: 100%; box-sizing: border-box;
  scrollbar-width: thin; scrollbar-color: var(--front_primary_brand) transparent;
}
.footerTop .newsPanel1::-webkit-scrollbar { width: 6px; }
.footerTop .newsPanel1::-webkit-scrollbar-track { background: transparent; }
.footerTop .newsPanel1::-webkit-scrollbar-thumb { background: var(--front_primary_brand); border-radius: 3px; }
.footerTop .news-item { padding: 9px 0; border-bottom: 1px solid var(--lgray-cc); font-size: 13px; color: var(--lgray-33); }
.footerTop .news-item:first-child { padding-top: 0; }
.footerTop .news-item:last-child { border-bottom: none; }
.footerTop .news-item a { color: rgba(160,10,15,.85) !important; font-weight: 500; font-size: 13px; text-decoration: underline; }
.footerTop .news-item a:hover { color: var(--front_primary_brand_hover) !important; text-decoration: none; }
.footerTop .news-item .src { color: var(--lgray-66); font-size: 12px; margin-left: 4px; }

/* Newsletter box: fixed height, matches news box */
.footerTop .newsletter_box {
  height: var(--ft-info-box-height); overflow: hidden; padding: var(--ft-info-box-padding);
  border-radius: var(--ft-radius-card); background: var(--front_topbar_bg); box-shadow: var(--ft-shadow-soft);
  display: flex; flex-direction: column; box-sizing: border-box;
}
.footerTop .newsletter_box_inner { padding: 0; border: none; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.footerTop .newsletter_box_gray { background: none !important; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.footerTop .newsletter_box .newsletter_text { font-size: 13px; color: var(--lgray-66); margin-bottom: 10px; }
.footerTop .newsletter_box .newsletter_text a { color: var(--front_primary_brand) !important; font-weight: 700; text-decoration: underline; }
.footerTop .newsletter_box .newsletter_text a:hover { color: var(--front_primary_brand_hover) !important; text-decoration: none; }

.footerTop #mc_embed_signup .mc-field-group input {
  width: 100%; border: 1px solid var(--su-border) !important; border-radius: 6px; padding: 11px 13px;
  font-size: 14px; font-family: inherit; color: var(--lgray-33); background: var(--white);
  box-sizing: border-box; outline: none !important; box-shadow: none; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.footerTop #mc_embed_signup .mc-field-group input:hover {
  border-color: var(--su-border-strong) !important;
}
.footerTop #mc_embed_signup .mc-field-group input:focus {
  border: 1px solid var(--front_primary_brand) !important; box-shadow: 0 0 0 3px rgba(160,10,15,.10) !important;
}
.footerTop #mc_embed_signup .optionalParent .clear.foot.join-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; margin-top: 4px;
}
.footerTop .newsletter-consent {
  font-size: 13px; color: var(--lgray-66); line-height: 1.4; margin: 0; flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.footerTop .newsletter-consent a { color: var(--front_primary_brand); text-decoration: underline; }
.footerTop .newsletter-consent a:hover { text-decoration: none; }
.footerTop #mc_embed_signup #mc-embedded-subscribe {
  background: var(--front_btn_primary_bg, #a00a0f); color: var(--front_btn_primary_text, #ffffff); border: none; border-radius: 6px;
  padding: 12px 20px; font-weight: 600; font-size: 13px; font-family: inherit; letter-spacing: .6px;
  text-transform: uppercase; cursor: pointer; -webkit-appearance: none; appearance: none; flex: 0 0 auto;
}
.footerTop #mc_embed_signup #mc-embedded-subscribe:hover { background: var(--front_btn_primary_bg_hover, #900606); color: var(--front_btn_primary_text_hover, #ffffff); }

.footerTop .newsletter_box .field { position: relative; }
.footerTop .newsletter_box .field .error-msg {
  display: none; align-items: center; gap: 5px; margin-top: 4px;
  color: var(--front_primary_brand); font-size: 12px; font-weight: 400; line-height: 1.4;
}
.footerTop .newsletter_box .field .error-msg::before {
  content: '!'; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 13px; height: 13px; border-radius: 50%; background: var(--front_primary_brand); color: #fff;
  font-size: 9px; font-weight: 800; line-height: 1;
}
.footerTop .newsletter_box .field .error-msg svg { display: none; }
.footerTop .newsletter_box div.mce_inline_error { display: none !important; }
/* Error state -- red border + faint tint, same as the sidebar request form's input.error.
   Selectors carry #mc_embed_signup so they out-specify the base input rule above (its
   border is !important). Covers both the blur-handler .has-error class and Mailchimp
   mc-validate.js's own input.mce_inline_error class. */
.footerTop #mc_embed_signup .mc-field-group.has-error input,
.footerTop #mc_embed_signup .mc-field-group input.mce_inline_error,
.footerTop .newsletter_box .field.has-error input {
  border: 1px solid var(--front_primary_brand) !important;
  background: rgba(160,10,15,.04) !important;
}
.footerTop .newsletter_box .field.has-error .error-msg { display: flex; }
.footerTop .newsletter_box.showing-error { height: auto; overflow: visible; }

@media (max-width: 979px) {
  .footerTop .newsletter_box { height: auto; overflow: visible; }
}
@media (max-width: 480px) {
  .footerTop #mc_embed_signup .optionalParent .clear.foot.join-row { flex-wrap: wrap; row-gap: 10px; }
  .footerTop .newsletter-consent { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* ===== Newsletter page (newsLetter.php) main Subscribe form -- matches
   newsletter-redesign-mockup.html. Everything scoped under #newslettersForm
   so it can't collide with the bare sitewide .field (a different, taller
   48px-input filter-form pattern used elsewhere) or with .footerTop's own
   separate newsletter widget in the site footer. ===== */
#newslettersForm.newsletter-form-card {
  background: #fff; border: 1px solid rgba(0,0,0,.07); box-shadow: 0 4px 16px rgba(0,0,0,.10);
  border-radius: 12px; padding: 36px; margin-bottom: 32px;
}
#newslettersForm h2 {
  color: var(--front_primary_brand); font-weight: 700; font-size: 24px; letter-spacing: .2px;
  margin: 0 0 10px; display: flex; align-items: center; gap: 12px;
}
#newslettersForm h2 svg { width: 30px; height: 30px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#newslettersForm .lede { margin: 0 0 24px; font-size: 14.5px; color: #6b6b6b; line-height: 1.55; max-width: 46em; }
@media (max-width: 480px) {
  #newslettersForm.newsletter-form-card { padding: 22px; }
  #newslettersForm h2 { font-size: 20px; gap: 10px; }
  #newslettersForm h2 svg { width: 26px; height: 26px; }
}

#newslettersForm .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { #newslettersForm .form-row { grid-template-columns: 1fr; } }

#newslettersForm .field { display: flex; flex-direction: column; gap: 6px; position: relative; margin-bottom: 14px; }
#newslettersForm #field-email { margin-bottom: 30px; }
#newslettersForm .field label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #6b6b6b; font-weight: 700; margin-bottom: 0; }
#newslettersForm .field .req { color: var(--front_primary_brand); }
#newslettersForm .field input[type=text], #newslettersForm .field input[type=email], #newslettersForm .field textarea {
  border: 1px solid var(--su-border); border-radius: 6px; padding: 11px 13px; font-size: 14px;
  font-family: inherit; color: #333333; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
  outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: auto;
}
#newslettersForm .field input[type=text]:hover, #newslettersForm .field input[type=email]:hover, #newslettersForm .field textarea:hover {
  border-color: var(--su-border-strong);
}
#newslettersForm .field input[type=text]:focus, #newslettersForm .field input[type=email]:focus, #newslettersForm .field textarea:focus {
  border-color: var(--front_primary_brand); box-shadow: 0 0 0 3px rgba(160,10,15,.10);
}
#newslettersForm .field textarea { resize: vertical; min-height: 64px; height: auto; }
#newslettersForm .field.has-error input, #newslettersForm .field.has-error textarea { border-color: var(--front_primary_brand); background: rgba(160,10,15,.04); }
#newslettersForm .field .error-msg { display: none; align-items: center; gap: 5px; margin-top: 4px; color: var(--front_primary_brand); font-size: 12px; font-weight: 400; line-height: 1.4; }
#newslettersForm .field .error-msg::before {
  content: '!'; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 13px; height: 13px; border-radius: 50%; background: var(--front_primary_brand); color: #fff;
  font-size: 9px; font-weight: 800; line-height: 1;
}
#newslettersForm .field .error-msg svg { display: none; }
#newslettersForm .field.has-error .error-msg { display: flex; }
@media (max-width: 600px) {
  #newslettersForm .field input[type=text], #newslettersForm .field input[type=email], #newslettersForm .field textarea { font-size: 16px; }
}

/* "Wait! / Why You Should Answer" tinted callout */
#newslettersForm .survey-intro { background: rgba(160,10,15,.05); border-left: 4px solid var(--front_primary_brand); border-radius: 6px; padding: 18px 20px; margin: 2px 0 20px; }
#newslettersForm .survey-intro h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #333333; display: flex; align-items: center; gap: 8px; }
#newslettersForm .survey-intro h3 svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--front_primary_brand); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#newslettersForm .survey-intro p { margin: 0 0 8px; font-size: 13.5px; color: #333333; line-height: 1.55; }
#newslettersForm .survey-intro p:last-child { margin-bottom: 0; }
#newslettersForm .survey-intro .why { display: inline-block; background: rgba(160,10,15,.12); color: var(--front_primary_brand); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 4px 10px; border-radius: 100px; margin: 0 0 8px; }

/* Survey question rows -- grid-row alignment so a row's two labels of
   different lengths still leave both controls starting on the same line
   (display:contents unwraps .field-question so label/control become direct
   grid children of .form-row-questions itself). */
#newslettersForm .field-question label { font-size: 13.5px !important; text-transform: none; letter-spacing: normal; color: #333333; font-weight: 700; margin-bottom: 8px; }
#newslettersForm .field-question label .optional { color: #6b6b6b; font-weight: 400; font-size: 12px; margin-left: 4px; }
#newslettersForm .form-row.form-row-questions { margin-bottom: 14px; }
#newslettersForm .form-row.form-row-questions.form-row-questions-last { margin-bottom: 8px; }
@media (min-width: 561px) {
  #newslettersForm .form-row.form-row-questions { column-gap: 20px; row-gap: 14px; }
  #newslettersForm .form-row-questions .field-question { display: contents; }
  #newslettersForm .form-row-questions .field-question label { grid-row: 1; margin-bottom: 0; }
  #newslettersForm .form-row-questions .field-question textarea,
  #newslettersForm .form-row-questions .field-question .nl-dropdown { grid-row: 2; }
}
@media (max-width: 560px) {
  #newslettersForm .form-row-questions .field-question { display: flex; flex-direction: column; gap: 6px; }
}

/* Custom dropdown (Q1/Q3) -- nl- prefixed, see the JS comment for why */
#newslettersForm .nl-dropdown { position: relative; }
#newslettersForm .nl-dropdown-trigger {
  height: 48px; width: 100%; padding: 0 16px; font-size: 14px; font-weight: 500; color: #1A1A1A;
  background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; font-family: inherit;
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
#newslettersForm .nl-dropdown-trigger:hover { border-color: var(--su-border-strong); }
#newslettersForm .nl-dropdown-trigger.open, #newslettersForm .nl-dropdown-trigger:focus { outline: none; border-color: var(--front_primary_brand); box-shadow: 0 0 0 3px rgba(160,10,15,.10); }
#newslettersForm .nl-dropdown-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#newslettersForm .nl-dropdown-chevron { width: 12px; height: 12px; margin-left: 8px; color: #6B7280; transition: transform .2s ease; flex-shrink: 0; }
#newslettersForm .nl-dropdown-trigger.open .nl-dropdown-chevron { transform: rotate(180deg); }
#newslettersForm .nl-dropdown-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: auto;
  min-width: 100%; width: max-content; max-width: calc(100vw - 48px);
  background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.10);
  padding: 14px; z-index: 200; display: none;
}
#newslettersForm .nl-dropdown-panel.open { display: block; }
#newslettersForm .nl-dropdown-options { max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#newslettersForm .nl-dropdown-option {
  padding: 10px 12px; font-size: 14px; color: #1A1A1A; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: background .1s ease;
  outline: none; white-space: nowrap;
}
#newslettersForm .nl-dropdown-option:hover, #newslettersForm .nl-dropdown-option:focus { background: #f5f5f5; }
#newslettersForm .nl-dropdown-option:focus-visible { box-shadow: inset 0 0 0 2px var(--front_primary_brand); background: rgba(160,10,15,.06); }
#newslettersForm .nl-dropdown-option.selected { background: rgba(160,10,15,.08); color: var(--front_primary_brand); font-weight: 500; }
#newslettersForm .nl-dropdown-option .check { width: 14px; height: 14px; color: var(--front_primary_brand); opacity: 0; flex-shrink: 0; }
#newslettersForm .nl-dropdown-option.selected .check { opacity: 1; }
#newslettersForm .nl-visually-hidden-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#newslettersForm .nl-dropdown.nl-dropdown-anchor-right .nl-dropdown-panel { left: auto; right: 0; }
@media (max-width: 600px) { #newslettersForm .nl-dropdown-trigger { font-size: 16px; } }

/* Join Now -- right-aligned, more space above; button's own typography
   (uppercase/600/13px/letter-spacing/6px radius) matched to the mockup's
   shared .btn-solid, since the existing primaryRedBg/... classes give it
   the right colors but not the right type treatment. */
#newslettersForm .form-actions { margin-top: 32px; display: flex; justify-content: flex-end; }
#newslettersForm #mc-embedded-subscribe {
  text-transform: uppercase; font-weight: 600; font-size: 13px; letter-spacing: .6px;
  border-radius: 6px; padding: 13px; width: 100%;
}
@media (min-width: 560px) { #newslettersForm #mc-embedded-subscribe { width: auto; padding: 13px 40px; } }

/* v84 Property Details redesign -- pd- prefixed, propertyDetails.php-only; mirrors css/somi-search.css's page-header-bar/sidebar-card recipe. */
.pd-page-header-bar {
  display: flex; align-items: stretch; width: 100%; min-height: 72px;
  box-sizing: border-box; border-radius: 12px; overflow: hidden; margin-bottom: 20px;
}
.pd-page-header-bar-main {
  display: flex; align-items: center; gap: 14px; flex: 1 1 auto;
  background: var(--front_primary_brand); color: #fff;
  padding: 0 28px; font-weight: 700; letter-spacing: 0.6px;
}
.pd-page-header-bar-main h2 { margin: 0; font-size: 22px; font-weight: 700; text-transform: uppercase; color: #fff; }
/* Icon badge, matches .ss-page-header-bar-main svg; optional, unused here. */
.pd-page-header-bar-main svg { width: 28px; height: 28px; flex: 0 0 auto; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pd-page-header-bar-aside { flex: 0 0 140px; background: #e5e5e5; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.pd-back-link { color: #2374db; font-size: 13px; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.pd-back-link:hover { text-decoration: none; }
@media (max-width: 768px) {
  .pd-page-header-bar-main { padding: 0 18px; gap: 10px; }
  .pd-page-header-bar-main h2 { font-size: 17px; }
  .pd-page-header-bar-main svg { width: 22px; height: 22px; }
  .pd-page-header-bar-aside { flex-basis: 90px; padding: 0 10px; }
}
@media (max-width: 480px) { .pd-page-header-bar-aside { flex-basis: 48px; } }
@media (max-width: 360px) { .pd-page-header-bar { min-height: 64px; } }

/* Save/Share/Print card -- flat <a> children, matching the mockup's button row */
.pd-sidebar-actions {
  display: flex; margin: 0 0 20px; padding: 0;
  background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(0, 0, 0, 0.07); overflow: hidden;
}
.pd-sidebar-actions > a {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; flex: 1 1 0; min-width: 0; height: 70px; box-sizing: border-box; padding: 14px 8px;
  font-size: 12px; letter-spacing: 0.3px; text-align: center; line-height: 1.25;
  background: #fff; color: var(--pc-text-dark); text-decoration: none;
  font-weight: 600; text-transform: uppercase;
  border-right: 1px solid #e2e2e2; transition: background 0.15s ease;
}
.pd-sidebar-actions > a:last-child { border-right: 0; }
.pd-sidebar-actions > a:hover { background: #f5f5f5; }
/* fill:currentColor so .auto-select below can still recolor the icon */
.pd-sidebar-actions > a svg { width: 24px; height: 24px; flex: 0 0 auto; fill: currentColor; stroke: none; color: var(--front_primary_brand); }
.pd-sidebar-actions > a.auto-select { color: var(--front_btn_primary_text, #ffffff) !important; background-color: var(--front_btn_primary_bg, #a00a0f) !important; }
.pd-sidebar-actions > a.auto-select svg { color: var(--white) !important; }
@media (max-width: 360px) {
  .pd-sidebar-actions > a { height: 64px; font-size: 11px; padding: 12px 6px; }
}

/* Loan Calculator / Request Info cards -- one bordered box, gray header bleeds in via negative margin. */
.pd-sidebar-card {
  --card-pad: 24px;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  border-radius: 12px; padding: var(--card-pad); overflow: hidden; margin-bottom: 0;
  max-width: 100%;
}
/* 32px gap down to Request Info, matching the mockup. */
.pd-sidebar-card.pd-mortgage-calc-card { margin-bottom: 32px; }
.pd-sidebar-card-head {
  background: #e5e5e5; height: 72px;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 20px !important; padding: 0 !important;
  border-radius: 12px 12px 0 0; overflow: hidden;
  /* width:auto overrides .left1-resource's sitewide width:100% */
  width: auto !important; float: none !important; display: block;
}
.pd-sidebar-card-head h2 {
  color: var(--font-base) !important;
  font-weight: 700 !important; font-size: 17px !important; letter-spacing: 0.4px;
  text-transform: uppercase;
  height: 100%; margin: 0 !important; padding: 0 20px !important; white-space: nowrap;
  display: flex; align-items: center; justify-content: space-between;
  width: auto !important; float: none !important; background: transparent !important;
}
.pd-sidebar-card-head span { float: none !important; padding: 0 !important; }
.pd-sidebar-card-body {
  background: transparent !important; border: none !important; box-shadow: none !important;
  border-radius: 0 !important; margin: 0 !important; padding: 0 !important;
}
.pd-sidebar-card-body.mcw-wrap_250 { padding: 0 !important; }
/* The mortgage-advice-online.org widget renders its own internal DOM at
   runtime (mcw-form__* classes) -- untouchable JS/settings, per project memory,
   but its rendered output can still be restyled like any other real DOM.
   Its own .mcw-form__block is flex-direction:row (title beside the input,
   one row) -- mockup's .field is label-above-input (two rows), matching
   every other field styling on this page (.field label above). */
#mcwWidget .mcw-form__block { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; }
#mcwWidget .mcw-form__title {
  font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .6px !important;
  color: #6b6b6b !important; font-weight: 600 !important; width: auto !important; margin-bottom: 6px !important;
}
#mcwWidget .mcw-form__field-group { width: 100% !important; }
/* .int_cntnt_testimonial is a shared "internal content" wrapper (used on many
   pages) that happens to sit directly after the header bar here, adding an
   extra 12px on top of .pd-page-header-bar's own 20px margin-bottom (32px
   total instead of the mockup's 20px). Scoped to only-when-preceded-by the
   header bar so no other page's use of .int_cntnt_testimonial is affected. */
.pd-page-header-bar ~ .int_cntnt_testimonial { padding-top: 0; }

/* Calculate + Request More Details buttons -- uppercase/bold/letter-spaced,
   matching the mockup's shared .btn-solid. #mcwWidget is unique to this page
   (safe to target directly); .save-submit is the SAME class ~20 other pages'
   renderRequestForm() also uses, so scoped via .pd-sidebar-card-body (this
   page's own wrapper) instead of touching .save-submit globally. */
#mcwWidget .mcw-calculate-btn {
  text-transform: uppercase !important; font-weight: 600 !important; font-size: 13px !important;
  letter-spacing: .6px !important; border-radius: 6px !important; padding: 13px !important;
}
.pd-sidebar-card-body .save-submit {
  text-transform: uppercase; font-weight: 600; font-size: 13px !important; letter-spacing: .6px;
  border-radius: 6px; padding: 13px !important;
}
/* Consent (.formLegalText, shared by ~20 pages' renderRequestForm() -- scoped
   to this page's own wrapper) + Loan Calculator disclaimer (.mortgageLegalText,
   the widget's own class, already has the mockup's exact wording built in --
   only its styling drifted). Both match the mockup's shared .consent/
   .mc-disclaimer spec: 11px, 1.5 line-height, 14px/16px margin. Color already
   matches (--cgray resolves to #545454, same as the mockup's literal value). */
.pd-sidebar-card-body .formLegalText { font-size: 11px; line-height: 1.5; }
#mcwWidget .mortgageLegalText { font-size: 11px !important; line-height: 1.5 !important; margin: 14px 0 16px !important; }

/* Spec sections (Property Description / Overview / Interior / Exterior / Other
   Info / Listing Info / Sale-Lease Info) -- new .card.detail-section/.spec-grid
   structure, replacing the old single-column .property-feature-info-sub <ul>.
   Class names/values match the mockup's .card/.detail-section/.spec-grid spec
   exactly; only used by propertyDetails.php's markup so this can't leak. */
.card.detail-section { background: #fff; border: 1px solid rgba(0,0,0,.07); box-shadow: 0 4px 16px rgba(0,0,0,.10); border-radius: 12px; padding: 0; margin-bottom: 20px; overflow: hidden; }
.card.detail-section > h2 { margin: 0; padding: 14px 20px; background: #f5f5f5; color: var(--front_primary_brand); font-weight: 700; font-size: 15px; letter-spacing: .5px; text-transform: uppercase; }
.detail-section-body { padding: 20px; }
.detail-description-text { margin: 0; font-size: 14px; line-height: 1.65; color: #333333; text-align: justify; overflow-wrap: break-word; word-break: break-word; padding: 0px; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.spec-col { display: flex; flex-direction: column; min-width: 0; }
.detail-section-body .spec-row:first-child { padding-top: 0; }
.detail-section-body .spec-row:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-row { display: flex; justify-content: flex-start; padding: 12px 0; border-bottom: 1px solid #e2e2e2; }
.spec-col .spec-row:last-child { border-bottom: 0; }
.spec-label { font-size: 13px; font-weight: 700; color: #333333; flex: 0 0 150px; overflow-wrap: break-word; word-break: break-word; }
.spec-value { font-size: 13px; color: #333333; text-align: left; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 640px) {
  .spec-grid { grid-template-columns: 1fr; }
  .spec-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .spec-label { flex: 0 0 auto; }
  /* The two .spec-col blocks stack into one flow here instead of sitting side by side,
     so the first column's last row now touches the second column's first row directly --
     restore the divider + spacing that .spec-col .spec-row:last-child / .detail-section-body
     .spec-row:last-child (above) correctly strip on desktop, where it really is the end. */
  .spec-col:not(:last-child) .spec-row:last-child {
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 12px;
  }
  .spec-col:not(:first-child) .spec-row:first-child {
    padding-top: 12px;
  }
}
.detail-courtesy { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; flex-wrap: wrap; border-top: 1px solid #e2e2e2; }
.detail-courtesy .courtesyText { margin: 0; font-size: 13px; color: #6b6b6b; }
.detail-courtesy .miamiRealtorLogo { width: 100px; height: auto; flex: 0 0 auto; display: block; }
/* .profile-form is on the SAME element as .pd-sidebar-card-body (not a descendant of it), so these scope off .pd-sidebar-card-body alone. */
.pd-sidebar-card-body form > li:not(:last-child) { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px !important; }
.pd-sidebar-card-body li > span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #6b6b6b !important; font-weight: 600; }
.pd-sidebar-card-body li > span:first-child .option { font-size: inherit; }
.pd-sidebar-card-body li input[type="text"],
.pd-sidebar-card-body li input[type="tel"],
.pd-sidebar-card-body li textarea {
  border: 1px solid var(--su-border) !important; border-radius: 6px !important; padding: 11px 13px !important; font-size: 14px;
  font-family: inherit; color: #333 !important; background: #fff !important; width: 100%; margin-top: 0 !important;
  transition: border-color .15s ease, box-shadow .15s ease; outline: none;
}
.pd-sidebar-card-body li input[type="text"]:hover,
.pd-sidebar-card-body li input[type="tel"]:hover,
.pd-sidebar-card-body li textarea:hover { border-color: var(--su-border-strong) !important; }
.pd-sidebar-card-body li input[type="text"]:focus,
.pd-sidebar-card-body li input[type="tel"]:focus,
.pd-sidebar-card-body li textarea:focus { border-color: var(--front_primary_brand) !important; box-shadow: 0 0 0 3px rgba(160,10,15,.10); }
.pd-sidebar-card-body li textarea { min-height: 80px; height: auto; resize: vertical; line-height: 1.4; }
.pd-sidebar-card-body li input.error,
.pd-sidebar-card-body li textarea.error { border-color: var(--front_primary_brand) !important; background: rgba(160,10,15,.04) !important; }
.pd-sidebar-card-body li label.error {
  display: flex !important; align-items: center; gap: 5px !important; margin: 6px 0 0 !important; padding: 0 !important; width: auto !important;
  background: transparent !important; color: var(--front_primary_brand) !important; font-size: 12px !important; font-weight: 400 !important; font-family: inherit;
}
.pd-sidebar-card-body li label.error::before {
  content: '!'; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 13px; height: 13px; border-radius: 50%; background: var(--front_primary_brand); color: #fff; font-size: 9px; font-weight: 800;
}
@media (max-width: 480px) {
  /* Just retarget --card-pad -- the header's calc() margin follows it and stays flush (no white sliver). */
  .pd-sidebar-card { --card-pad: 16px; }
  .pd-sidebar-card-head h2 { padding: 0 16px !important; font-size: 16px !important; }
  .pd-sidebar-card-head h2 svg { width: 24px; height: 24px; } 
}

@media (max-width: 600px) {
  .pd-sidebar-card-body li input,
  .pd-sidebar-card-body li textarea { font-size: 16px; }
}

/* Replaced by the synced .request-more-info-form-fill below; !important beats master.css's #left .feature-property_left !important rule. */
.feature-property_left#dean1 { background: transparent !important; border: 0; }
.request-more-info-form-fill {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: #e5e5e5; border-radius: 12px; z-index: 1; pointer-events: none;
}
.request-more-info-form, .request-more-info-form-scrolled { z-index: 2; background: #fff; border-radius: 12px; }
/* Mobile: syncSidebarFill()'s top:0 assumes the form wraps the whole sidebar (true on SS, not here) -- card isn't sticky on mobile anyway, just hide it. */
@media (max-width: 978px) {
  .feature-property_left#dean1 .request-more-info-form-fill { display: none !important; }
}

.remarkText.pageEditorContent { font-size: 14px; line-height: 1.65; color: #333; text-align: justify; }
/* Courtesy line -- nested inside Listing Info (or Sale/Leased Info on closed listings) as a divider row, matching the mockup's .detail-courtesy. */
.detail-courtesy {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; flex-wrap: wrap; border-top: 1px solid #e2e2e2;
}
.detail-courtesy .courtesyText { font-size: 13px; color: #6b6b6b; margin: 0; }
.detail-courtesy .miamiRealtorLogo { width: 100px; height: auto; flex: 0 0 auto; margin: 0; }
/* Fallback only, if no spec section rendered to attach it to. */
.courtesyRow {
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  border-radius: 12px; overflow: hidden; margin-top: 20px;
}
.courtesyRow > .detail-courtesy { border-top: 0; }

/* Recently Viewed strip, ported from the mockup's .recently-viewed/.rv-card. */
.recently-viewed-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #333; }
.recently-viewed-heading svg { width: 18px; height: 18px; fill: none; stroke: var(--front_primary_brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recently-viewed-track { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.rv-card {
  flex: 1 1 200px; min-width: 160px; background: #fff; border: 1px solid #e2e2e2;
  border-radius: 12px; overflow: hidden; text-decoration: none; display: block; transition: box-shadow .2s ease;
}
.rv-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); }
.rv-card-photo { width: 100%; height: 120px; position: relative; overflow: hidden; background: #eee; }
.rv-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-card-viewed, .rv-card-tag { position: absolute; bottom: 8px; left: 8px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 4px; }
.rv-card-body { padding: 10px 12px 12px; }
.rv-card-price { margin: 0 0 3px; font-size: 14.5px; font-weight: 700; color: var(--front_primary_brand); }
.rv-card-address { margin: 0; font-size: 12px; color: #333; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-card-sub { margin: 2px 0 0; font-size: 11px; color: #6b6b6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* MLS attribution on cards; wraps so a long office name is never cut */
.rv-card-courtesy { margin: 4px 0 0; font-size: 10px; color: #6b6b6b; line-height: 1.3; }
/* Similar Homes strip sits above Recently Viewed */
.similar-homes { margin-bottom: 24px; }

/* Main-column Request Info / Save-Share-Print -- split into two cards like the sidebar's .pd-sidebar-actions, Request Info as a solid-red button. */
.feature-request { border: 0 !important; padding: 0 !important; }
.feature-request1 {
  background: #fff !important; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  border-radius: 12px; overflow: hidden; margin-bottom: 12px !important; padding: 0 !important;
}
.feature-request1 a.highlightFormOnClick {
  display: flex !important; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 58px;
  background: var(--front_btn_primary_bg, #a00a0f) !important; color: var(--front_btn_primary_text, #ffffff) !important; font-weight: 700; font-size: 16px;
  letter-spacing: .4px; text-transform: uppercase; padding: 0 !important;
}
.feature-request1 a.highlightFormOnClick:hover { background: #7d0810 !important; }
.feature-request1 i.svg-icons.svg-info-square { width: 27px; height: 27px; color: #fff !important; margin-right: 0; }
.feature-request1 a span { color: #fff !important; }

/* No overflow:hidden -- clipped the Share dropdown; corners rounded per-button instead. */
.feature-request2.saveShareDrop {
  display: flex; margin: 0; padding: 0; list-style: none; gap: 0 !important;
  background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(0, 0, 0, 0.07);
   overflow: hidden;
}
.feature-request2.saveShareDrop > li { flex: 1 1 0; min-width: 0; border-right: 1px solid #e2e2e2; position: relative; }
.feature-request2.saveShareDrop > li:last-child { border-right: 0; }
.feature-request2.saveShareDrop > li > a {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; height: 84px; padding: 12px 8px !important;
  font-size: 14px !important; text-align: center; color: var(--cgray) !important; background: #fff !important;
  transition: background .15s ease;
}
.feature-request2.saveShareDrop > li:first-child > a { border-radius: 11px 0 0 11px; }
.feature-request2.saveShareDrop > li:last-child > a { border-radius: 0 11px 11px 0; }
.feature-request2.saveShareDrop > li > a:hover { background: #f5f5f5 !important; color: var(--cgray) !important; }
.feature-request2.saveShareDrop i.svg-icons { width: 22px; height: 22px; color: var(--front_primary_brand) !important; }
.feature-request2.saveShareDrop > li > a:hover i.svg-icons { color: var(--front_primary_brand) !important; }
/* Saved state: re-assert red bg + white icon over the white-card rules above. */
.feature-request2.saveShareDrop > li > a.auto-select,
.feature-request2.saveShareDrop > li > a.auto-select:hover { background: var(--front_btn_primary_bg, #a00a0f) !important; color: var(--front_btn_primary_text, #ffffff) !important; }
.feature-request2.saveShareDrop > li > a.auto-select i.svg-icons,
.feature-request2.saveShareDrop > li > a.auto-select:hover i.svg-icons { color: var(--white) !important; }

/* Loan Calculator widget -- radius/padding aren't in maoCalc.settings, so overridden directly on its own class names. */
#mcwWidget .mcw-wrap { padding: 0 !important; box-shadow: none !important; }
#mcwWidget .mcw-form__field-group {
  border: 1px solid var(--su-border) !important; border-radius: 6px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Border lives on the field-group wrapper (the widget's floating-label markup needs it
   surrounding label+input together), not the input itself -- :focus-within/:hover on the
   group is the only way to react to the actual <input> inside it being hovered/focused. */
#mcwWidget .mcw-form__field-group:hover { border-color: var(--su-border-strong) !important; }
#mcwWidget .mcw-form__field-group:focus-within {
  border-color: var(--front_primary_brand) !important;
  box-shadow: 0 0 0 3px rgba(160,10,15,.10) !important;
}
#mcwWidget .mcw-form__field { padding: 11px 13px !important; font-size: 14px !important; color: #333 !important; outline: none !important; }
#mcwWidget .mcw-calculate-btn { border-radius: 6px !important; }

/* Shared Share dropdown for both triggers -- click to open (not hover), positioned via JS, matches the mockup's .share-menu/.share-option/.share-ic. */
.pd-share-menu {
  position: fixed; min-width: 200px; background: #fff; border: 1px solid #e2e2e2; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); padding: 8px; z-index: 500; display: none;
}
.pd-share-menu.open { display: block; }
.pd-share-option {
  display: flex !important; align-items: center; gap: 12px; width: 100%; padding: 9px 10px !important; border-radius: 6px;
  color: #333 !important; font-size: 13.5px !important; font-weight: 600; cursor: pointer; text-decoration: none; background: none !important;
}
/* .showMobileOnly forces display:block!important on mobile (admin/css/common-back-front.css), which stacks this row's icon above its text -- restore flex here, more specific so it wins */
.pd-share-option.showMobileOnly { display: flex !important; }
.pd-share-option:hover { background: #f5f5f5 !important; }
.pd-share-ic { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-right: 0 !important; }
.pd-share-ic svg { width: 14px; height: 14px; fill: #fff; }
.pd-share-ic.ic-copy { background: var(--front_primary_brand); }
.pd-share-ic.ic-facebook { background: #1877F2; }
.pd-share-ic.ic-twitter { background: #000; }
.pd-share-ic.ic-linkedin { background: #0A66C2; }
.pd-share-ic.ic-pinterest { background: #E60023; }
.pd-share-ic.ic-instagram { background: #E4405F; color: #fff; }
.pd-share-ic.ic-instagram svg { width: 15px; height: 15px; }
/* Persistent highlight while the menu is open (click state, not just :hover); overrides the sitewide .feature-request/.saveShareDrop red-hover rules. */
.pd-share-trigger.pd-share-open { background: #f5f5f5 !important; color: inherit !important; }
.pd-share-trigger.pd-share-open i.svg-icons,
.pd-share-trigger.pd-share-open svg { color: var(--front_primary_brand) !important; }

/* Sidebar card header icons, matching .ss-sidebar-card-head. */
.pd-sidebar-card-head h2 svg {
  width: 22px; height: 22px; flex: 0 0 auto; opacity: 0.55; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; margin-left: auto;
}

/* AGENTS LIST PAGE (agents.php) -- photo-forward card grid + contact popup,
   matches agents-option-a-real-classes_20.html / agent-cards-contact-popup-
   handoff.html. Card CSS is additive under .pf/.pf-card (old .agent_categroies_colum
   card style in master.css is untouched); popup CSS replaces the old
   #agentInfoPopup markup outright for this page only (that shared modal/CSS
   stays intact for view-all-profile.php, which still uses it). */
.agent_categroies.pf { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 1199px) { .agent_categroies.pf { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767px) { .agent_categroies.pf { grid-template-columns: 1fr; gap: 16px; } }
.agent_categroies.pf .agent_categroies_br { display: contents; }

.agent_categroies_colum.pf-card { width: auto; margin: 0; padding: 0; float: none; }
.agent_categroies_colum.pf-card .agent_info_box {
  position: relative; padding: 0; border: none; border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.16); background: #e5e5e5;
  aspect-ratio: 3/4; display: block;
  transition: transform .3s ease, box-shadow .3s ease;
}
.agent_categroies_colum.pf-card .agent_info_box:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0,0,0,.24); }
.agent_categroies_colum.pf-card { animation: pfCardIn .55s ease both; }
.agent_categroies_colum.pf-card:nth-child(1) { animation-delay: .03s; }
.agent_categroies_colum.pf-card:nth-child(2) { animation-delay: .11s; }
.agent_categroies_colum.pf-card:nth-child(3) { animation-delay: .19s; }
.agent_categroies_colum.pf-card:nth-child(4) { animation-delay: .27s; }
.agent_categroies_colum.pf-card:nth-child(5) { animation-delay: .35s; }
.agent_categroies_colum.pf-card:nth-child(6) { animation-delay: .43s; }
@keyframes pfCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.agent_categroies_colum.pf-card .agent_categroies_columnpic { position: absolute; inset: 0; margin: 0; }
.agent_categroies_colum.pf-card .agent_categroies_columnpic a { display: block; height: 100%; }
.agent_categroies_colum.pf-card .agent_categroies_columnpic img.img_brdr {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0; border: none; display: block;
  filter: brightness(.97) saturate(1.02); transition: transform .4s ease, filter .4s ease;
}
.agent_categroies_colum.pf-card .mood-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,8,.16) 0%, rgba(10,8,8,.22) 45%, rgba(10,8,8,.42) 100%);
  transition: opacity .35s ease; pointer-events: none;
}
.agent_categroies_colum.pf-card .legibility-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
  background: linear-gradient(180deg, rgba(8,6,6,0) 0%, rgba(8,6,6,.58) 38%, rgba(8,6,6,.93) 100%);
  pointer-events: none;
}
.agent_categroies_colum.pf-card .agent_info_box:hover .mood-scrim { opacity: .25; }
.agent_categroies_colum.pf-card .agent_info_box:hover img.img_brdr { transform: scale(1.045); filter: brightness(1.04) saturate(1.05); }
.agent_categroies_colum.pf-card .agent_categroies_column { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; color: #fff; z-index: 2; }
.agent_categroies_colum.pf-card .agent_categroies_column h2 { color: #fff; font-size: 19px; font-weight: 600; margin: 0 0 2px 0; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.agent_categroies_colum.pf-card .agent_categroies_column h3 { color: rgba(255,255,255,.9); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; margin: 0 0 12px 0; }
.agent_categroies_colum.pf-card .agent-info { margin-bottom: 14px; }
.agent_categroies_colum.pf-card .info-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.agent_categroies_colum.pf-card .icon-badge {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; flex: none;
  border: 1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
}
.agent_categroies_colum.pf-card .icon-badge svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; display: block; }
.agent_categroies_colum.pf-card .info-text { display: flex; align-items: baseline; gap: 5px; }
.agent_categroies_colum.pf-card .info-text .label { display: none; }
.agent_categroies_colum.pf-card .info-text .value { color: #fff; font-size: 13.5px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.agent_categroies_colum.pf-card .agentInfoDetailButtons { display: flex; gap: 10px; margin-top: 4px; }
.agent_categroies_colum.pf-card .agentInfoDetailButtons .btn-outline,
.agent_categroies_colum.pf-card .agentInfoDetailButtons .btn-solid {
  flex: 1; text-align: center; border-radius: 6px; padding: 11px 12px; font-size: 13px; font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.agent_categroies_colum.pf-card .agentInfoDetailButtons .btn-outline {
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.agent_categroies_colum.pf-card .agentInfoDetailButtons .btn-outline:hover { background: rgba(255,255,255,.3); }
.agent_categroies_colum.pf-card .agentInfoDetailButtons .btn-solid { background: var(--front_btn_primary_bg, #a00a0f); color: var(--front_btn_primary_text, #ffffff); border: 1px solid var(--front_btn_primary_border, #a00a0f); }
.agent_categroies_colum.pf-card .agentInfoDetailButtons .btn-solid:hover { background: var(--front_btn_primary_bg_hover, #900606); color: var(--front_btn_primary_text_hover, #ffffff); border-color: var(--front_btn_primary_border_hover, #900606); }
.agent_categroies_colum.pf-card .agentInfoDetailButtons .btn-outline:focus-visible,
.agent_categroies_colum.pf-card .agentInfoDetailButtons .btn-solid:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) {
  .agent_categroies_colum.pf-card .agent_info_box { aspect-ratio: 4/5; max-width: 440px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .agent_categroies_colum.pf-card img.img_brdr,
  .agent_categroies_colum.pf-card .mood-scrim,
  .agent_categroies_colum.pf-card .agent_info_box { transition: none; }
  .agent_categroies_colum.pf-card { animation: none; }
  .contact-modal-overlay, .contact-modal, .contact-modal-link { transition: none; }
}

/* ===== Agents search loading state (agents.php showAgentsSkeleton()) =====
   Rendered in place of the real .ajaxResult contents while a search_agents fetch
   is in flight. Three matching skeleton zones: results row, pagination, card grid.
   Sized to the real layout so swapAjaxResultNoShift() barely shifts on the swap. */
@keyframes skeletonShimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

.agents-skeleton .clear { clear: both; }

/* -- results row (Total Results text + per-page dropdown) -- */
.agents-skeleton .sk-results-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.agents-skeleton .sk-bar,
.agents-skeleton .sk-field,
.agents-skeleton .sk-pill {
  background: linear-gradient(100deg, rgba(0,0,0,.06) 30%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.06) 70%);
  background-size: 200% 100%; animation: skeletonShimmer 1.4s ease-in-out infinite; border-radius: 4px;
}
.agents-skeleton .sk-bar-results { width: 230px; max-width: 60%; height: 15px; }
.agents-skeleton .sk-field { width: 116px; height: 38px; border-radius: 6px; }

/* -- pagination pills -- */
.agents-skeleton .sk-pagination { display: flex; justify-content: center; gap: 8px; margin: 0 0 24px; }
.agents-skeleton .sk-pill { width: 34px; height: 34px; }

/* -- card grid (mockup .skeleton-grid / .skeleton-card, matches .agent_categroies.pf) -- */
.skeleton-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 1199px) { .skeleton-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767px) { .skeleton-grid { grid-template-columns: 1fr; gap: 16px; } }
.skeleton-card {
  position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3/4;
  background: #e9e7e4; box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
@media (max-width: 767px) { .skeleton-card { aspect-ratio: 4/5; max-width: 440px; margin: 0 auto; } }
.skeleton-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  background-size: 200% 100%; animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-card .sk-lines { position: absolute; left: 22px; right: 22px; bottom: 20px; }
.skeleton-card .sk-line { height: 12px; border-radius: 4px; background: rgba(0,0,0,.09); margin-bottom: 10px; }
.skeleton-card .sk-line.sk-title { width: 55%; height: 17px; }
.skeleton-card .sk-line.sk-sub { width: 38%; height: 10px; }
.skeleton-card .sk-btns { display: flex; gap: 10px; margin-top: 14px; }
.skeleton-card .sk-btn { flex: 1; height: 36px; border-radius: 6px; background: rgba(0,0,0,.09); }
@media (prefers-reduced-motion: reduce) {
  .skeleton-card::after,
  .agents-skeleton .sk-bar, .agents-skeleton .sk-field, .agents-skeleton .sk-pill { animation: none; }
}

/* Contact Info popup -- replaces #agentInfoPopup outright for this page (see note above) */
.contact-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20,16,16,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
.contact-modal-overlay.is-open { opacity: 1; }
.contact-modal-overlay[hidden] { display: none; }
.contact-modal {
  background: #fff; border-radius: 20px; width: 100%; max-width: 440px;
  max-height: calc(100vh - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  text-align: left; position: relative;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  transform: translateY(10px) scale(.98); transition: transform .2s ease;
}
.contact-modal-overlay.is-open .contact-modal { transform: translateY(0) scale(1); }
/* border-radius here too (not just on .contact-modal) -- relying only on the
   parent's overflow-clip leaves the top corners square: .contact-modal has
   its own transform for the open/close scale animation, and a parent that's
   both border-radius+overflow-hidden AND transformed is a known browser
   rendering gap where the child's square corners can peek through. */
.contact-modal-hero { position: relative; height: 300px; background: #e5e5e5; overflow: hidden; border-radius: 20px 20px 0 0; }
/* border-radius on the photo/gradient too, not just the .contact-modal-hero
   wrapper -- some browsers (Safari in particular) don't reliably clip an
   <img> or absolutely-positioned pseudo-element to an ancestor's
   overflow:hidden + border-radius, so each layer that reaches the top
   corners needs its own matching radius as a fallback. */
.contact-modal-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 20px 20px 0 0; }
.contact-modal-hero::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, rgba(10,8,8,.05) 0%, rgba(10,8,8,.18) 45%, rgba(8,6,6,.88) 100%);
}
.contact-modal-hero-text { position: absolute; left: 24px; right: 24px; bottom: 18px; z-index: 2; }
.contact-modal-name { margin: 0 0 2px; font-size: 23px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.contact-modal-role { margin: 0; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.92); }
.contact-modal-close {
  position: absolute; top: 8px; right: 8px; z-index: 3; width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,0); border: 0; padding: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .18s ease;
}
.contact-modal-close:hover, .contact-modal-close:focus-visible { background: rgba(255,255,255,.16); }
.contact-modal-close svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); transition: transform .2s ease; }
.contact-modal-close:hover svg, .contact-modal-close:focus-visible svg { transform: rotate(90deg); }
.contact-modal-body { padding: 20px 22px }
@media (max-height: 480px) {
  .contact-modal-hero { height: 150px; }
  .contact-modal-name { font-size: 18px; }
  .contact-modal-role { font-size: 11px; }
  .contact-modal-body { padding: 14px 20px 16px; }
  .contact-modal-links { gap: 8px; margin-bottom: 10px; }
  .contact-modal-link { padding: 9px 12px; }
}
.contact-modal-links { display: flex; flex-direction: column; gap: 10px; }
.contact-modal-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
  background: #f8f7f6; border: 1px solid rgba(0,0,0,.07);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.contact-modal-link:hover { background: rgba(160,10,15,.08); border-color: rgba(160,10,15,.18); transform: translateX(2px); }
.contact-modal-icon {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(160,10,15,.08); color: var(--front_primary_brand); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.contact-modal-icon svg { width: 17px; height: 17px; }
.contact-modal-link-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.contact-modal-link-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--pc-text-gray); }
.contact-modal-link-value { font-size: 14.5px; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-modal-profile-link { display: block; text-align: center; font-size: 13px; font-weight: 700; color: var(--front_primary_brand); padding-top: 14px; border-top: 1px solid rgba(0,0,0,.07); margin-top: 14px; }
.contact-modal-profile-link:hover { text-decoration: underline !important; }
.contact-modal-close:focus-visible, .contact-modal-link:focus-visible, .contact-modal-profile-link:focus-visible { outline: 2px solid var(--front_primary_brand); outline-offset: 2px; }
.contact-modal-close:focus-visible { outline-color: #fff; }
/* :focus-visible fallback for older Safari (added support in 15.4) */
@supports not selector(:focus-visible) {
  .agent_categroies_colum.pf-card .agentInfoDetailButtons .btn-outline:focus,
  .agent_categroies_colum.pf-card .agentInfoDetailButtons .btn-solid:focus { outline: 2px solid #fff; outline-offset: 2px; }
  .contact-modal-close:focus { outline: 2px solid #fff; outline-offset: 2px; }
  .contact-modal-link:focus, .contact-modal-profile-link:focus { outline: 2px solid var(--front_primary_brand); outline-offset: 2px; }
}

/* AGENT PROFILE PAGE (agentDetail.php) -- matches agent-profile-redesign-mockup.html */

/* ---------- Contact Agent sidebar -- same .pd-sidebar-card recipe as Property Detail's Request More Info card, sticky on scroll ---------- */
#contactAgentCard { position: -webkit-sticky; position: sticky; top: 97px; }
@media (max-width: 860px) { #contactAgentCard { position: static; } }

/* ---------- Profile hero: split card -- photo fills a left-hand column,
   name/role/quick-facts/"My Contact Info" stack in a white right-hand
   panel. Matches agentprofileredesignmockup_7.html / agent-detail-profile-
   card-handoff.html (top card only). Fully self-contained, same as the
   handoff intended, so it doesn't depend on any other shared class. ---------- */
.profile-hero {
  display: flex; align-items: stretch; overflow: hidden; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10); background: #fff; border: 1px solid rgba(0,0,0,.07);
  margin-bottom: 32px; min-height: 280px;
}
.profile-hero-media {
  position: relative; flex: 0 0 42%; min-width: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--front_primary_brand_hover) 0%, var(--front_primary_brand) 55%, #c23a3f 100%);
  box-shadow: inset -16px 0 24px -20px rgba(0,0,0,.4);
}
.profile-hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
  filter: brightness(.97) saturate(1.02); transition: transform .4s ease, filter .4s ease;
}
.profile-hero.has-photo:hover .profile-hero-photo { transform: scale(1.045); filter: brightness(1.02) saturate(1.05); }
/* No-photo fallback: the same grey default_user.jpg silhouette used on the Our Agents
   list, on a neutral grey panel -- not the brand-red gradient. */
.profile-hero.no-photo .profile-hero-media { background: #e6e6e6; box-shadow: none; }
.profile-hero.no-photo .profile-hero-photo { object-position: center top; filter: none; }
.profile-hero-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 32px 36px; background: #fff; }
.profile-hero-name { margin: 0 0 2px; color: var(--front_primary_brand); font-weight: 700; font-size: 28px; letter-spacing: .2px; }
.profile-hero-role { margin: 0 0 2px; color: #4a4a4a; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.profile-hero-tagline { margin: 0; max-width: 46ch; color: #333333; font-size: 14px; line-height: 1.5; }
.profile-social { display: flex; align-items: center; gap: 10px; }
.profile-social a {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(160,10,15,.08); color: var(--front_primary_brand);
  display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background .15s, color .15s;
}
.profile-social a:hover { background: var(--front_primary_brand); color: #fff; }
.profile-social a svg { width: 16px; height: 16px; }
.profile-hero-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-fact-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(160,10,15,.08); color: var(--front_primary_brand); border-radius: 999px;
  padding: 6px 14px 6px 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.hero-fact-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-fact-pill:hover { background: rgba(160,10,15,.14); transform: translateY(-1px); }
/* .btn-solid has no global definition sitewide (matches the established pattern --
   see .no-results-state/.field-add's own scoped copies), so it's scoped here too. */
.profile-hero-cta.btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 6px; padding: 13px 26px; font-weight: 600; font-size: 13px;
  letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--front_btn_primary_border, #a00a0f); background: var(--front_btn_primary_bg, #a00a0f); color: var(--front_btn_primary_text, #ffffff);
  transition: background .15s, color .15s, border-color .15s; align-self: flex-start; margin-top: 2px;
}
.profile-hero-cta.btn-solid:hover { background: var(--front_btn_primary_bg_hover, #900606); color: var(--front_btn_primary_text_hover, #ffffff); border-color: var(--front_btn_primary_border_hover, #900606); }
.profile-hero-cta.btn-solid svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) {
  .profile-hero { flex-direction: column; min-height: 0; }
  .profile-hero-media { flex: 0 0 auto; width: 100%; height: 220px; box-shadow: inset 0 -16px 24px -20px rgba(0,0,0,.4); }
  .profile-hero-info { padding: 24px 22px; }
  .profile-hero-cta.btn-solid { align-self: stretch; }
}
@media (max-width: 560px) {
  .feature-content-sub { margin-top: 32px; }
  .property_request_share_btn,
  .card.detail-section { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { .profile-hero-photo { transition: none; } }

/* icon accent shared by every card header on this page */
.card.detail-section > h2, .section-heading-row h2 { display: flex; align-items: center; gap: 9px; }
.card.detail-section > h2 svg, .section-heading-row h2 svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 32px; }
.about-grid .card.detail-section { margin-bottom: 0; }
@media (max-width: 640px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }


/* My Listings / My Reviews -- gray-bar header only, no enclosing card */
.fp-section { margin-bottom: 32px; }
.fp-section.fp-reviews { margin: 0px; }
/* 3/2/1 tracks the actual available width (container query), not viewport -- the sidebar eats a fixed chunk so viewport breakpoints didn't match when cards actually got tight */
.fp-listings .featured-viewport { container-type: inline-size; }
.fp-listings .fp-card { flex-basis: calc((100% - var(--fp-card-gap) * 2) / 3); }
@container (max-width: 720px) { .fp-listings .fp-card { flex-basis: calc((100% - var(--fp-card-gap)) / 2); } }
@container (max-width: 480px) { .fp-listings .fp-card { flex-basis: 100%; } }
.section-heading-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 16px; padding: 14px 20px; background: #f5f5f5; border-radius: 12px;
}
.section-heading-row h2 { margin: 0; font-size: 15px; letter-spacing: .5px; text-transform: uppercase; color: var(--front_primary_brand); font-weight: 700; }
.section-heading-row a { font-size: 12px; font-weight: 700; color: var(--front_primary_brand); text-transform: uppercase; letter-spacing: .3px; text-decoration: underline; }
.section-heading-row a:hover { color: var(--front_primary_brand_hover); text-decoration: none; }

/* AGENT CONTACT INFO MODAL -- header/close button/photo size stay as live, only the body (name/divider/info-rows) is new */
#agentInfoPopup .info-row { display: flex; align-items: flex-start; gap: 14px; text-align: left; }
#agentInfoPopup .info-row + .info-row { margin-top: 20px; }
#agentInfoPopup .icon-badge {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: rgba(160,10,15,.08);
  color: var(--front_primary_brand); display: flex; align-items: center; justify-content: center;
}
#agentInfoPopup .icon-badge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#agentInfoPopup .info-row .label { font-size: 15px; line-height: 18px; text-transform: uppercase; letter-spacing: .6px; color: var(--pc-text-gray); font-weight: 800; margin: 0 0 4px; padding: 0px; }
#agentInfoPopup .info-row .value { font-size: 18px; color: #333333; font-weight: 400; margin: 0; line-height: 1.4; word-break: break-word; }
/* #agentInfoPopup above is shared with view-all-profile.php -- left untouched.
   This page's own "My Contact Info" popup now reuses the Our Agents list
   page's .contact-modal-* markup/CSS verbatim (see the "AGENTS LIST PAGE"
   section above) -- same popup on both pages, the only difference is this
   page omits the "View Full Profile" link since you're already on it. */

/* Sticky mobile Call/Email bar -- new, mobile-only */
.mobile-contact-bar { display: none; }
@media (max-width: 768px) {
  .mobile-contact-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid #e2e2e2;
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px;
  }
  .mobile-contact-bar a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 8px; border-radius: 6px; font-size: 13.5px; font-weight: 700; transition: background .15s;
  }
  .mobile-contact-bar a svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-contact-bar .call-link { background: var(--front_btn_primary_bg, #a00a0f); color: var(--front_btn_primary_text, #ffffff); border: 1px solid var(--front_btn_primary_border, #a00a0f); }
  .mobile-contact-bar .call-link:hover { background: var(--front_btn_primary_bg_hover, #900606); color: var(--front_btn_primary_text_hover, #ffffff); border-color: var(--front_btn_primary_border_hover, #900606); }
  .mobile-contact-bar .email-link { background: var(--front_btn_secondary_bg, #ffffff); color: var(--front_btn_secondary_text, #a00a0f); border: 1px solid var(--front_btn_secondary_border, #a00a0f); }
  .mobile-contact-bar .email-link:hover { background: var(--front_btn_secondary_bg_hover, #a00a0f14); color: var(--front_btn_secondary_text_hover, #a00a0f); border-color: var(--front_btn_secondary_border_hover, #a00a0f); }
  body:has(.mobile-contact-bar) { padding-bottom: 84px; }
}
/* iOS Safari auto-zooms on focus of any input/textarea under 16px. */
@media (max-width: 600px) {
  .pd-sidebar-card-body li input[type="text"], .pd-sidebar-card-body li input[type="tel"], .pd-sidebar-card-body li textarea { font-size: 16px; }
}


/* ============================================================
   Saved-search "update or save as new" decision popup + editing
   banner + confirmation toast. Rendered by renderSaveSearchForm().
   Wired in js/login_register.js. Kept visually distinct from the
   red-header #saveSearchModal on purpose (see the handoff).
   ============================================================ */
.ssd-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .18s ease;
}
.ssd-overlay.open { opacity: 1; visibility: visible; }
.ssd-card {
  width: 100%; max-width: 400px; background: #fff;
  border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.22);
  padding: 36px 32px 26px; position: relative; text-align: center;
  font-family: var(--font-base);
  transform: translateY(10px) scale(.98); transition: transform .18s ease;
}
.ssd-overlay.open .ssd-card { transform: none; }
.ssd-close {
  position: absolute; top: 10px; right: 18.5px; width: 40px; height: 40px;
  border: 0; background: transparent; border-radius: 999px; cursor: pointer;
  color: var(--lgray-66); display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease;
}
.ssd-close:hover { background: var(--lgray-f5); color: var(--lgray-33); }
.ssd-close svg { width: 22px; height: 22px; }
.ssd-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(160,10,15,.08); color: var(--front_primary_brand);
}
.ssd-icon svg { width: 24px; height: 24px; }
.ssd-title {
  margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--lgray-33);
  line-height: 1.4; text-wrap: balance;
}
.ssd-message {
  margin: 0 auto 22px; max-width: 34ch; font-size: 13.5px;
  color: var(--lgray-66); line-height: 1.55;
}
.ssd-message strong { color: var(--lgray-33); }
.ssd-actions { display: flex; flex-direction: column; gap: 10px; }
.ssd-btn-update, .ssd-btn-new {
  width: 100%; padding: 13px 18px; font-size: 13.5px; font-weight: 600;
  letter-spacing: .3px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s ease, border-color .15s ease;
}
.ssd-btn-update { background: var(--front_btn_primary_bg, #a00a0f); color: var(--front_btn_primary_text, #ffffff); border: 1px solid var(--front_btn_primary_border, #a00a0f); }
.ssd-btn-update:hover { background: var(--front_btn_primary_bg_hover, #900606); color: var(--front_btn_primary_text_hover, #ffffff); border-color: var(--front_btn_primary_border_hover, #900606); }
.ssd-btn-new { background: var(--front_btn_secondary_bg, #ffffff); color: var(--front_btn_secondary_text, #a00a0f); border: 1px solid var(--front_btn_secondary_border, #a00a0f); }
.ssd-btn-new:hover { background: var(--front_btn_secondary_bg_hover, #a00a0f14); color: var(--front_btn_secondary_text_hover, #a00a0f); border-color: var(--front_btn_secondary_border_hover, #a00a0f); }
.ssd-btn-update span { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssd-cancel {
  display: block; width: 100%; text-align: center; margin-top: 14px;
  background: none; border: 0; padding: 6px; font-size: 13px; font-weight: 600;
  color: var(--lgray-66); cursor: pointer;
}
.ssd-cancel:hover { color: var(--lgray-33); text-decoration: underline; }

.saved-search-editing-banner {
  display: flex; align-items: center; gap: 10px;
  background: #fbf2ec; border: 1px solid #f0dcc9; border-radius: 8px;
  padding: 10px 14px; margin: 0 0 16px; font-size: 13.5px; color: #6b4a2a;
  font-family: var(--font-base);
}
.saved-search-editing-banner[hidden] { display: none; }
.saved-search-editing-banner svg { width: 17px; height: 17px; flex-shrink: 0; stroke: #a06a2e; }
.saved-search-editing-banner .ssb-text { flex: 1 1 auto; }
.saved-search-editing-banner strong { color: #4a3115; }
.saved-search-editing-banner .ssb-close {
  background: none; border: 0; padding: 4px; margin: -4px; cursor: pointer;
  color: #a06a2e; flex-shrink: 0; line-height: 1;
}
.saved-search-editing-banner .ssb-close:hover { color: #6b4a2a; }

.save-search-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 100001;
  transform: translateX(-50%) translateY(12px);
  display: flex; align-items: center; gap: 10px;
  background: #243024; color: #fff; padding: 13px 20px; border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.22); font-size: 13.5px; font-weight: 600;
  font-family: var(--font-base); max-width: 90%;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.save-search-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.save-search-toast svg { width: 18px; height: 18px; stroke: #7fd67f; flex-shrink: 0; }

@media (max-width: 420px) {
  .ssd-card { padding: 30px 22px 22px; }
  .ssd-close { right: 8.5px; }
}

/* ============================================================
   Theme Manager -- frontend Red / White button sets.
   Overrides the bundled --front_primary_brand skin rules (css/master.css)
   for button elements only, so button colours are controllable
   independently of links, pagination and accents. Seeded to the
   current values -- no visual change except white-button hover
   (now the soft tint on every white button, was a solid-red fill
   on some).
   ============================================================ */
.contactus_info1 .submitt,
.searchTabBody .jointNow2, #residentialsearch-form .jointNow2,
.real-estate-read-more a,
.save-submit, .save-submitt, .profile-submit,
#businessModal .submit_btn,
#mc_embed_signup .button,
.mcw-calculate-btn, .mcw-wrap_theme4 .mcw-calculate-btn,
.mc-button, .btn_add_new, .addBusinessBtn {
  background-color: var(--front_btn_primary_bg, #a00a0f) !important;
  color: var(--front_btn_primary_text, #ffffff) !important;
  border-color: var(--front_btn_primary_border, #a00a0f) !important;
}
.contactus_info1 .submitt:hover,
.searchTabBody .jointNow2:hover, .searchTabBody .jointNow2:focus, .searchTabBody .jointNow2:active,
#residentialsearch-form .jointNow2:hover, #residentialsearch-form .jointNow2:focus, #residentialsearch-form .jointNow2:active,
.real-estate-read-more a:hover,
.save-submit:hover, .save-submitt:hover, .profile-submit:hover,
#businessModal .submit_btn:hover, #businessModal .submit_btn:focus,
#mc_embed_signup .button:hover,
.mcw-calculate-btn:hover, .mcw-wrap_theme4 .mcw-calculate-btn:hover,
.mc-button:hover, .btn_add_new:hover, .addBusinessBtn:hover {
  background-color: var(--front_btn_primary_bg_hover, #900606) !important;
  color: var(--front_btn_primary_text_hover, #ffffff) !important;
  border-color: var(--front_btn_primary_border_hover, #900606) !important;
}

/* Contact / Request More Details: confirmation replaces the form; failure alert sits above the kept form */
.form-confirmation { border: 1px solid #c8e6c9; background: #f1f8f2; border-radius: 8px; padding: 20px 24px; }
.form-confirmation h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: #1b5e20; }
.form-confirmation p { margin: 0; color: #333; }
.form-alert { border: 1px solid #f5c2c0; background: #fdecea; color: #8e1c1c; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; list-style: none; }
.form-alert a { color: inherit; font-weight: 600; text-decoration: underline; }