/* ===================================
   MODERN SINGLE PROPERTY STYLES
   Clean, professional MLS listing layout
   =================================== */

/* Container & Main Layout */
.sp-single-property-container,
.mnp-sp-single-property-container {
    background: #fff;
    min-height: 100vh;

}

.sp-property-single-modern {
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    overflow: visible; /* Allow sticky child to break out */
}

/* Mobile: Remove overflow-x to allow sticky positioning and prevent white space issue */
@media (width <= 768px) {
    .sp-single-property-container,
    .sp-property-single-modern {
        max-width: 100%;
    }
}

/* Force Light Mode - Override any dark theme preferences */
.sp-property-single-modern,
.sp-single-property-container {
    background: #fff !important;
    color: #333 !important;
}

.property-hero-section,
.property-title-section,
.property-main-content section,
.contact-agent-card,
.property-quick-facts,
.property-hero-info-card {
    background: #fff !important;
    color: #333 !important;
}

.section-title,
.property-title {
    color: #333 !important;
}

/* ===================================
   CONDO NAME SECTION - Single Property Header
   Matching taxonomy-location.php desktop styling with STICKY
   =================================== */

.sp-condo-name-section {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, rgb(52 152 219 / 95%) 50%, rgb(41 128 185 / 95%) 100%);
    padding-top: 20px;
    padding-bottom: 10px;
    animation: heroGlow 12s ease-in-out infinite;
    display: block; /* Visible on desktop by default */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Override .ast-container padding for full-width effect */
.ast-container .sp-condo-name-section,
article .sp-condo-name-section {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Mobile-specific fixes for sticky and horizontal scroll */
@media (width <= 768px) {
    .sp-single-property-container,
    .mnp-sp-single-property-container,
    .sp-property-single-modern {

    }

    .sp-condo-name-section {
        position: sticky !important;
        top: 0 !important;      /* matches what you're seeing */
  z-index: 99999 !important;
        left: 0;
        right: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding: 10px 0;
        box-sizing: border-box;
        background: linear-gradient(135deg, rgb(52 152 219 / 95%) 50%, rgb(41 128 185 / 95%) 100%);
    }

    /* Override .ast-container padding on mobile */
    .ast-container .sp-condo-name-section,
    article .sp-condo-name-section,
    .entry-content .sp-condo-name-section {
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Ensure inner content doesn't overflow */
    .sp-condo-name-section * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Ensure parent containers don't restrict sticky positioning */
    body,
    #page,
    #content,
    .site-content,
    .ast-container,
    article,
    .entry-content {
overflow: visible !important;
    }
}


@keyframes heroGlow {
    0%, 100% {
        box-shadow: inset 0 0 30px rgb(255 255 255 / 8%);
    }

    50% {
        box-shadow: inset 0 0 40px rgb(255 255 255 / 12%);
    }
}

.sp-condo-name-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgb(255 255 255 / 5%) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgb(255 255 255 / 5%) 0%, transparent 50%);
    pointer-events: none;
}

.sp-condo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.sp-breadcrumb-navigation {
    margin-bottom: 10px;
    font-size: 0.9rem;
    opacity: 0.8;
    color: rgb(255 255 255 / 90%);
}

/* Left Column - Property Info */
.hp-sticky-hero-col-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hp-sticky-hero-project-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-sticky-hero-address-subtitle {
    font-size: 14px;
    color: rgb(255 255 255 / 90%);
    margin-top: 0.5rem;
    text-align: left;
}

/* Property Stats with Icons */
.hp-sticky-hero-property-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.75rem;
    font-size: 13px;
    color: rgb(255 255 255 / 95%);
}

.hp-sticky-hero-property-stats .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.hp-sticky-hero-property-stats .stat-item svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.hp-sticky-hero-property-stats .stat-separator {
    color: rgb(255 255 255 / 60%);
    font-weight: 300;
}

.hp-sticky-hero-location-description {
    color: rgb(255 255 255 / 90%);
    font-size: 14px;
    margin-top: 0.5rem;
}

.hp-sticky-hero-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}

.hp-sticky-hero-coming-soon {
    background: #F4A261;
    color: #fff;
}

/* Right Column - Sticky Hero Content (Agent Info) */
.hp-sticky-hero-content {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
}

/* Left side wrapper - stacks info and CTAs */
.the-left-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hp-sticky-hero-image {
    flex-shrink: 0;
}

.hp-sticky-hero-image img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgb(255 255 255 / 100%);
    box-shadow: 0 4px 15px rgb(0 0 0 / 20%);
}

.hp-sticky-hero-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
}

.hp-sticky-hero-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #fff;
}

.hp-sticky-realtor-name {
    color: rgb(255 255 255 / 85%);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.hp-sticky-hero-ctas {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-left: auto;
}

.hp-sticky-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: all 0.3s ease;
    border: 2px solid;
    text-align: center;
    white-space: nowrap;
}

.hp-sticky-btn-secondary {
    background: transparent;
    color: #fff;
    border-color: rgb(255 255 255 / 80%);
}

.hp-sticky-btn-secondary:hover {
    background: rgb(255 255 255 / 10%);
    color: #fff;
    border-color: rgb(255 255 255 / 100%);
}

.hp-sticky-btn-warning {
    background: #F4A261;
    color: #fff;
    border-color: white;
}

.hp-sticky-btn-warning:hover {
    background: #F4A261;
    border-color: white;
}

/* Responsive - Hide/Show Contact Buttons */
.hp-sticky-contact-desktop {
    display: inline-flex;
}

.hp-sticky-contact-mobile {
    display: none;
}


/* Property Key Features */
.property-key-features {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.feature-icon {
    font-size: 1.1rem;
}

.feature-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
}

/* Property Pricing - Inside header */
.sp-property-price-info {
    margin-top: 10px;
}

.sp-property-price {
    margin-bottom: 10px;
}

.sp-price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    line-height: 1;
}

.sp-price-unit {
    font-size: 1.3rem;
    color: rgb(255 255 255 / 90%);
    font-weight: 700;

}

.sp-price-label {
    font-size: 1.3rem;
    color: rgb(255 255 255 / 90%);
    font-weight: 700;
    margin-left: 8px;
}

.sp-property-badges {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ===================================
   CONDO MENU NAVIGATION - Sticky positioned below header
   =================================== */

.sp-condo-menu-info {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
    position: sticky;
    top: 150px;
    z-index: 99;
    margin-bottom: 30px;
    margin-top: 20px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.sp-condo-menu-nav {
    width: 100%;
}

.sp-condo-menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
}

.sp-condo-menu-item {
    margin: 0;
    position: relative;
    flex: 1;
}

.sp-condo-menu-link {
    display: block;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 0;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    text-align: center;
}

.sp-condo-menu-link:hover {
    color: #2c5aa0;
    background-color: rgb(44 90 160 / 5%);
    border-bottom-color: #2c5aa0;
    text-decoration: none;
}

.sp-condo-menu-link:focus {
    outline: 2px solid #2c5aa0;
    outline-offset: 2px;
}

.sp-condo-menu-link.active {
    color: #2c5aa0;
    background-color: rgb(44 90 160 / 10%);
    border-bottom-color: #2c5aa0;
}

/* Project Title Item - Special styling */
.sp-condo-project-title-item .sp-condo-menu-link {
    font-weight: 700;
    color: #1a1a1a;
    background-color: rgb(44 90 160 / 10%);
    border-bottom-color: #2c5aa0;
}

.sp-condo-project-title-item .sp-condo-menu-link:hover {
    background-color: rgb(44 90 160 / 15%);
}

/* ===================================
   MAIN CONTENT LAYOUT - Full Width Sections
   =================================== */

/* Override Astra's flex container that causes horizontal layout */
.single-property .ast-container {
    display: block !important;
    flex-direction: column !important;
    width: 100% !important;

}

/* Full-width horizontal sections that stack vertically */
.sp-content-section {
    width: 100%;
    background: #fff;
    display: block;
    clear: both;
}

.sp-content-section:last-of-type {
    border-bottom: none;
}

/* Inner container with max-width for content */
.sp-section-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.sp-section-inner h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f3f4;
}

/* Legacy support - keep these for backward compatibility */
.sp-condo-main-layout {
    display: flex;
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
    background-color: #fff !important;
}

.sp-condo-content-area {
    flex: 1;
    width: 100%;
    background: #fff;
}

.sp-condo-content-area h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f3f4;
}

/* Two Column Layout for Property Details and Room Details */
.sp-two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.sp-two-column-layout .sp-column {
    min-width: 0; /* Prevent overflow */
}

.sp-two-column-layout .sp-column h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f3f4;
}

/* Property Details Grid with SVG Icons */
.property-details-grid,
.sp-property-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.property-detail-item,
.sp-property-detail-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f8f9fa;
    gap: 15px;
    transition: background-color 0.2s ease;
}

.property-detail-item:hover,
.sp-property-detail-item:hover {
    background-color: rgb(44 90 160 / 2%);
}

.property-detail-item:last-child,
.sp-property-detail-item:last-child {
    border-bottom: none;
}

.detail-icon-label,
.sp-detail-icon-label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.detail-icon,
.sp-detail-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.detail-icon-svg,
.sp-detail-icon-svg {
    width: 100%;
    height: 100%;
}

.detail-label-container,
.sp-detail-label-container {
    flex: 1;
}

.detail-label,
.sp-detail-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #6c757d;
    margin: 0;
}

.detail-value-container,
.sp-detail-value-container {
    flex: 0 0 auto;
    text-align: right;
    max-width: 60%;
    overflow-wrap: break-word;
}

.detail-value,
.sp-detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

#sp-room-by-room-breakdown {
    margin-bottom: 40px;
}

#sp-parking-storage {
    margin-bottom: 40px;
}

#sp-building-association {
    margin-bottom: 40px;
}

/* Grey out N/A values to de-emphasize */
.detail-value.na-value,
.sp-detail-value.na-value {
    color: var(--color-gray-text);
    font-weight: 500;
    opacity: 0.7;
}

/* Property Detail Separator - Visual divider between logical groups */
.property-detail-separator {
    height: 1px;
    background: linear-gradient(to right, transparent 0%, #e5e7eb 20%, #e5e7eb 80%, transparent 100%);
    margin: 20px 0;
    position: relative;
}

.property-detail-separator::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 8px;
    background: #f8f9fa;
    border-left: 2px solid #e5e7eb;
    border-right: 2px solid #e5e7eb;
}

/* Property Features/Amenities Section */
.sp-condo-amenities-area {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #f1f3f4;
    background: #fff;
}

.sp-condo-amenities-area h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f3f4;
}

/* ===================================
   SIDEBAR - HIDDEN
   =================================== */

.sp-condo-sidebar {
    display: none;
}

/* Agent CTA Area - Consolidated */
.agent-cta-area,
.sp-agent-cta-area {
    background: #fff;
    padding: 25px;
    text-align: center;
}

.agent-card,
.sp-agent-card {
    width: 100%;
}

.agent-name,
.sp-agent-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px;
}

.agent-title,
.sp-agent-title {
    color: #6c757d;
    margin-bottom: 20px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.agent-contact,
.sp-agent-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-contact-item,
.sp-agent-contact-item {
    width: 100%;
}

.agent-phone-btn,
.agent-email-btn,
.sp-agent-phone-btn,
.sp-agent-email-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.agent-phone-btn,
.sp-agent-phone-btn {
    background: #007cba;
    color: white;
}

.agent-phone-btn:hover,
.sp-agent-phone-btn:hover {
    background: #005a87;
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
}

.agent-email-btn,
.sp-agent-email-btn {
    background: #28a745;
    color: white;
}

.agent-email-btn:hover,
.sp-agent-email-btn:hover {
    background: #1e7e34;
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Free Evaluation Form - Consolidated */
.free-evaluation-form,
.sp-free-evaluation-form {
    background: #fff;
    padding: 25px;
}

.free-evaluation-form h3,
.sp-free-evaluation-form h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f3f4;
    text-align: center;
}

.evaluation-form,
.sp-evaluation-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row,
.sp-form-row {
    display: flex;
    gap: 10px;
}

.form-row.single,
.sp-form-row.sp-single {
    flex-direction: column;
    width: 100%;
}

.form-row.dual,
.sp-form-row.sp-dual {
    flex-direction: row;
    width: 100%;
}

.form-row.dual input,
.sp-form-row.sp-dual input {
    flex: 1;
}

.evaluation-form input,
.evaluation-form textarea,
.sp-evaluation-form input,
.sp-evaluation-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff !important;
    color: #333 !important;
    box-sizing: border-box;
    font-family: inherit;
}

.evaluation-form input:focus,
.evaluation-form textarea:focus,
.sp-evaluation-form input:focus,
.sp-evaluation-form textarea:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgb(0 124 186 / 10%);
}

.evaluation-form textarea,
.sp-evaluation-form textarea {
    resize: vertical;
    min-height: 80px;
}

.eval-submit-btn,
.sp-eval-submit-btn {
    background: #007cba;
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    width: 100%;
}

.eval-submit-btn:hover,
.sp-eval-submit-btn:hover {
    background: #005a87;
    transform: translateY(-1px);
}

/* ===================================
   PROPERTY SECTION - Nearby Properties (Styled like Active Properties)
   =================================== */

.property-section,
.sp-property-section {
    padding: 40px 0;
    background-color: #fff !important;
    margin: 0 auto;
    max-width: 1280px;
}

.property-section h2,
.sp-property-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 30px;
    padding: 0 20px;
    text-align: center;
}

/* Property Filters - Matching Active Properties Style from property-archive.css */
.property-filters,
.sp-property-filters,
.sp-nearby-properties-filter,
.sp-similar-properties-filter {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
    margin-bottom: 20px;
    position: relative;
}

.property-filters h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f3f4;
    text-align: center;
}

/* Filter Toggle Button - Hidden on Desktop */
.filter-toggle-mobile {
    display: none;
    width: 100%;
    padding: 12px 16px;
    background: #6b7280;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
    align-items: center;
    justify-content: space-between;
    transition: background 0.3s ease;
}

.filter-toggle-mobile:hover {
    background: #4b5563;
}

.filter-toggle-icon {
    transition: transform 0.3s ease;
    display: inline-block;
}

.filter-toggle-mobile[aria-expanded="true"] .filter-toggle-icon {
    transform: rotate(180deg);
}

.filter-row,
.sp-filter-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: flex-end;
}

.filter-group,
.sp-filter-group {
    flex: 1;
    min-width: 120px;
}

.filter-group label,
.sp-filter-group label {
    display: none;
}

.filter-group select,
.filter-group input.price-input,
.sp-filter-group select,
.sp-filter-group input,
.sp-filter-group .sp-price-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

.filter-group select:focus,
.filter-group input:focus,
.sp-filter-group select:focus,
.sp-filter-group input:focus {
    outline: none;
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px rgb(var(--primary-color-rgb, 0, 123, 255), 0.1);
}

/* Filter Buttons - Matching Active Properties Style */
.filter-buttons,
.sp-filter-buttons {
    display: flex;
    gap: 10px;
    margin-left: 10px;
}

.filter-button,
.reset-button,
.sp-filter-button,
.sp-reset-button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
    font-weight: 500;
}

.filter-button,
.sp-filter-button {
    background: #007bff;
    color: white;
}

.filter-button:hover,
.sp-filter-button:hover {
    background: #0069d9;
}

.reset-button,
.sp-reset-button {
    background: #6c757d;
    color: white;
}

.reset-button:hover,
.sp-reset-button:hover {
    background: #5a6268;
}

/* Disabled state for buttons */
button:disabled,
.filter-button:disabled,
.sp-filter-button:disabled,
.reset-button:disabled,
.sp-reset-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Properties Grid - Matching Active Properties Style */
.properties-grid,
.sp-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.sp-no-properties,
.no-properties {
    text-align: center;
    padding: 20px;
    color: #6c757d;
    grid-column: 1 / -1;
}

/* Load More Button - Matching Active Properties Style */
.sp-load-more,
.load-more {
    display: block;
    margin: 0 auto;
    padding: 12px 25px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}

.sp-load-more:hover,
.load-more:hover {
    background: #5a6268;
}

/* ===================================
   MODERN PROPERTY CARD STYLES (Matching taxonomy-location.php)
   =================================== */

/* Modern Property Card Styles */
.modern-property-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 6px rgb(0 0 0 / 2%);
    transition: all 0.25s ease-out;
    position: relative;
    border: 1px solid #f1f3f4;
    min-width: 0;
    width: 100%;
}

.modern-property-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(0 0 0 / 6%), 0 2px 6px rgb(0 0 0 / 4%);
    border-color: #e8eaed;
}

.modern-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.modern-card-link:hover,
.modern-card-link:focus {
    text-decoration: none;
    color: inherit;
}

.modern-card-image {
    position: relative;
    overflow: hidden;
    background: #f9fafb;
}

.modern-image-wrapper {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.modern-property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

.modern-property-card:hover .modern-property-image {
    transform: scale(1.02);
}

.modern-image-placeholder {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-text);
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.placeholder-icon {
    opacity: 0.7;
}

.placeholder-text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Status Badges */
.modern-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.modern-badges-right {
    left: auto;
    right: 12px;
}

.modern-badges-top {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.modern-badges-bottom {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
    z-index: 2;
    top: auto !important;
}

.modern-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / 20%);
}

.badge-new {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgb(16 185 129 / 30%);
}

.badge-type {
    background: rgb(255 255 255 / 95%);
    color: #374151;
    border-color: rgb(0 0 0 / 10%);
}

.modern-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modern-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Property Price */
.modern-price-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.modern-price {
    flex: 1;
}

.price-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
    display: block;
}

.price-on-request .price-value {
    font-size: 1.25rem;
    color: var(--color-gray-text);
    font-weight: 600;
}

.modern-mls {
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--color-gray-text);
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid #e5e7eb;
}

/* Property Features */
.modern-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fafbfc;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #5f6368;
    font-weight: 500;
    transition: all 0.2s ease;
}

.feature-pill:hover {
    background: #f1f3f4;
    border-color: #dadce0;
    color: #3c4043;
}

.feature-pill svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Property Card Accessibility Enhancements */
.modern-property-card:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.modern-card-link:focus {
    outline: none;
}

#nearby-condos{
max-width: 1280px;
margin: 0 auto;
}

/* Property Card Responsive Adjustments */
@media (width <= 1024px) {
    .modern-title {
        font-size: 1rem;
    }

    .modern-features {
        gap: 6px;
    }

    .feature-pill {
        padding: 5px 10px;
        font-size: 0.8125rem;
    }

    .modern-badges {
        top: 10px;
        left: 10px;
        gap: 6px;
    }

    .modern-badge {
        padding: 3px 10px;
        font-size: 0.6875rem;
    }
}

@media (width <= 480px) {
    .modern-card-content {
        padding: 14px;
        gap: 10px;
    }

    .modern-price-section {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .modern-mls {
        align-self: flex-start;
    }

    .price-value {
        font-size: 1.25rem;
    }

    .modern-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .feature-pill {
        justify-content: center;
    }

    .modern-title {
        font-size: 0.9375rem;
        -webkit-line-clamp: 1;
    }
}

/* Property Card High Contrast Support */
@media (prefers-contrast: high) {
    .modern-property-card {
        border: 2px solid;
    }

    .modern-badge,
    .feature-pill,
    .modern-mls {
        border: 2px solid;
    }
}

/* Property Card Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .modern-property-card,
    .modern-property-image,
    .feature-pill {
        transition: none;
    }

    .modern-property-card:hover {
        transform: none;
    }

    .modern-property-card:hover .modern-property-image {
        transform: none;
    }
}

/* ===================================
   GALLERY & VISUAL ELEMENTS
   =================================== */

.sp-gallery-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgb(0 0 0 / 80%);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.sp-video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(255 255 255 / 90%);
    color: #333;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    pointer-events: none;
}

.sp-property-no-image {
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
}

.sp-no-image-placeholder {
    text-align: center;
    color: #6c757d;
}

.sp-no-image-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
}

.sp-no-image-text {
    font-size: 0.9rem;
}

/* ===================================
   ROOM-BY-ROOM BREAKDOWN TABLE
   Responsive, sortable table with alternating grey rows
   =================================== */

.sp-room-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sp-room-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.95rem;
}

.sp-room-table thead {
    background: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sp-room-table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
    cursor: default;
}

.sp-room-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.sp-room-table th.sortable:hover {
    background: #e9ecef;
}

.sp-room-table th.sortable .sort-icon {
    margin-left: 5px;
    opacity: 0.4;
    font-size: 0.9em;
}

.sp-room-table th.sortable:hover .sort-icon {
    opacity: 0.7;
}

.sp-room-table th.sortable.sorted-asc .sort-icon::before {
    content: '↑';
    opacity: 1;
}

.sp-room-table th.sortable.sorted-desc .sort-icon::before {
    content: '↓';
    opacity: 1;
}

.sp-room-table tbody tr {
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
}

/* Alternating grey row backgrounds */
.sp-room-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.sp-room-table tbody tr:nth-child(odd) {
    background: #fff;
}

.sp-room-table tbody tr:hover {
    background: #e9ecef;
}

.sp-room-table td {
    padding: 12px 15px;
    color: #495057;
    vertical-align: top;
}

.sp-room-table td[data-value] {
    font-weight: 500;
}

/* Responsive: Stack table on mobile */
@media (width <= 768px) {
    .sp-room-table-wrapper {
        border: none;
    }

    .sp-room-table {
        font-size: 0.9rem;
        border: none !important;
    }

    .sp-room-table thead {
        display: none;
    }

    .sp-room-table tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #dee2e6 !important;
        border-radius: 8px;
        padding: 10px;
    }

    .sp-room-table tbody tr:nth-child(even) {
        background: #f8f9fa;
    }

    .sp-room-table tbody tr:nth-child(odd) {
        background: #fff;
    }

    .sp-room-table td {
        display: block;
        text-align: left;
        padding: 8px 10px;
        border: none !important;
    }

    .sp-room-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        display: block;
        margin-bottom: 5px;
    }

    .sp-room-table td:first-child {
        font-size: 1.1em;
        font-weight: 600;
        color: #333;
        border-bottom: 1px solid #dee2e6 !important;
        margin-bottom: 5px;
        padding-bottom: 10px;
    }

    .sp-condo-name-section {
        padding-top: 20px;
        padding-bottom: 0;
    }

}

@media (width <= 480px) {
    .sp-room-table {
        font-size: 0.85rem;
    }

    .sp-room-table td {
        padding: 6px 8px;
    }
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Smooth scrolling behavior for anchor links */
html {
    scroll-behavior: smooth;
}

/* Section highlighting for navigation */
section[id] {
    scroll-margin-top: 80px;
}

/* ===================================
   MOBILE HERO STYLES
   Styles for hp-mobile-sticky-hero-* classes
   Match mobile version from taxonomy-location.php
   =================================== */

.hp-mobile-sticky-hero-content {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
}

.hp-mobile-sticky-hero-image {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.hp-mobile-sticky-hero-image img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgb(255 255 255 / 100%);
    box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
    display: block;
}

.hp-mobile-sticky-hero-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    align-items: flex-end;
    text-align: right;
}

.hp-mobile-sticky-hero-name {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-mobile-sticky-realtor-name {
    color: rgb(255 255 255 / 85%);
    font-size: 11px;
    font-weight: 500;
    margin: 0;
}

.hp-mobile-sticky-hero-ctas {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.hp-mobile-sticky-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid white;
    white-space: nowrap;
}

.hp-mobile-sticky-btn-secondary {
    background: transparent;
    color: #fff;
    border-color: rgb(255 255 255 / 100%);
}

.hp-mobile-sticky-btn-secondary:hover {
    background: rgb(255 255 255 / 15%);
    border-color: rgb(255 255 255 / 100%);
}

.hp-mobile-sticky-btn-warning {
    background: #F4A261;
    color: #fff;
    border-color: white;
}

.hp-mobile-sticky-btn-warning:hover {
    background: #e89553;
    border-color: white;
}

.hp-mobile-sticky-contact-desktop {
    display: none;
}

.hp-mobile-sticky-contact-mobile {
    display: inline-flex;
}

/* Mobile Hero Col Left - Project Info */
.hp-mobile-sticky-hero-col-left {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    border-top: 1px solid rgb(255 255 255 / 30%);
    padding: 10px;
}

.hp-mobile-sticky-hero-project-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-mobile-breadcrumb-navigation {
    margin-bottom: 10px;
    font-size: 0.9rem;
    opacity: 0.8;
    color: rgb(255 255 255 / 90%);
    text-align: center;
}

/* Mobile Property Stats */
.hp-mobile-sticky-hero-property-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.5rem;
    font-size: 13px;
    color: rgb(255 255 255 / 95%);
    justify-content: center;
}

.hp-mobile-sticky-hero-property-stats .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.hp-mobile-sticky-hero-property-stats .stat-item svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.hp-mobile-sticky-hero-property-stats .stat-separator {
    color: rgb(255 255 255 / 60%);
    font-weight: 300;
}

/* Hide the 4th stat item (Condo apartment) on mobile */
.hp-mobile-sticky-hero-property-stats .stat-item:nth-child(7),
.hp-mobile-sticky-hero-property-stats .stat-separator:nth-child(6) {
    display: none;
}

/* Hide the 5th stat item (Condo apartment) on mobile */
.hp-mobile-sticky-hero-property-stats .stat-item:nth-child(9),
.hp-mobile-sticky-hero-property-stats .stat-separator:nth-child(8) {
    display: none;
}

/* Mobile Property Pricing */
.sp-mobile-property-price-info {
    margin-top: 0.25rem;
    text-align: center;
}

.sp-mobile-property-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
}

.sp-mobile-price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    line-height: 1;
}

.sp-mobile-price-unit {
    font-size: 2rem;
    color: rgb(255 255 255 / 90%);
    font-weight: 700;
}

.sp-mobile-price-label {
    font-size: 2rem;
    color: rgb(255 255 255 / 90%);
    font-weight: 700;
}

/* Hide 3rd price item on mobile - show only first 2 */
.sp-mobile-property-price > *:nth-child(n+3) {
    display: none;
}

/* Extra small screens - even more compact */
@media (width <= 480px) {
    .hp-mobile-sticky-hero-content {
        padding: 8px;
        gap: 8px;
    }

    .hp-mobile-sticky-hero-image img {
        width: 45px;
        height: 45px;
    }

    .hp-mobile-sticky-hero-name {
        font-size: 14px;
    }

    .hp-mobile-sticky-realtor-name {
        font-size: 10px;
    }

    .hp-mobile-sticky-hero-ctas {
        gap: 6px;
    }

    .hp-mobile-sticky-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
}

/* ===================================
   HEADER VISIBILITY CONTROL
   Show/hide desktop vs mobile headers based on breakpoint
   Match taxonomy-location.php approach
   =================================== */

/* Desktop: Show sp-condo-header, hide sp-mobile-condo-header */
.sp-condo-header {
    display: flex;
}

.sp-mobile-condo-header {
    display: none;
}

/* Desktop: Show sp-estimation-column, hide sp-estimation-column-mobile */
.sp-estimation-column {
    display: flex;
}

.sp-estimation-column-mobile {
    display: none;
}

/* Mobile: Hide sp-condo-header, show sp-mobile-condo-header */
@media (width <= 768px) {
    .sp-condo-header {
        display: none;
    }

    .sp-mobile-condo-header {
        display: block;
    }

    .sp-condo-menu-info {
        display: none;
    }

    /* Mobile: Hide sp-estimation-column, show sp-estimation-column-mobile */
    .sp-estimation-column {
        display: none;
    }

    .sp-estimation-column-mobile {
        display: flex;
    }
}

@media (width <= 1024px) {
    .sp-condo-header {
        flex-direction: column;
        gap: 20px;
    }

    .sp-condo-header-left,
    .sp-condo-header-right {
        max-width: 100%;
        min-width: auto;
    }

\n
    .sp-condo-header-right {
        align-items: flex-start;
        width: 100%;
    }

    .property-price {
        text-align: left;
    }

    .property-date-line {
        text-align: left;
    }

    .sp-condo-main-layout {
        flex-direction: column;
        gap: 20px;
    }

    .sp-condo-content-area,
    .sp-condo-sidebar {
        flex: 1;
        width: 100%;
    }

    .sp-condo-content-area {
        padding: 25px;
    }

    .agent-cta-area,
    .sp-agent-cta-area,
    .free-evaluation-form,
    .sp-free-evaluation-form {
        padding: 20px;
    }

    .agent-contact,
    .sp-agent-contact {
        flex-direction: row;
        gap: 10px;
    }

    .sp-condo-menu-list {
        justify-content: flex-start;
        gap: 0;
    }

    .sp-condo-menu-link {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .filter-row,
    .sp-nearby-properties-filter .sp-filter-row {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }

    .properties-grid,
    .sp-properties-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }
}

@media (width <= 768px) {
    /* Make two-column layout single column on mobile */
    .sp-two-column-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sp-condo-menu-nav {
        padding: 0 10px;
    }

    .sp-condo-menu-list {
        flex-direction: column;
        width: 100%;
    }

    .sp-condo-menu-item {
        width: 100%;
        border-bottom: 1px solid #e9ecef;
    }

    .sp-condo-menu-item:last-child {
        border-bottom: none;
    }

    .sp-condo-menu-link {
        padding: 14px 16px;
        width: 100%;
        border-bottom: none;
        border-left: 3px solid transparent;
    }

    .sp-condo-menu-link:hover,
    .sp-condo-menu-link.active {
        border-left-color: #2c5aa0;
        border-bottom-color: transparent;
    }

    .sp-condo-project-title-item .sp-condo-menu-link {
        background-color: rgb(44 90 160 / 15%);
        border-left-color: #2c5aa0;
    }

    .sp-condo-main-layout {
        padding: 20px 10px;
    }

    .sp-condo-content-area {
        padding: 20px;
    }

    .detail-icon-label,
    .sp-detail-icon-label {
        gap: 10px;
    }

    .property-detail-item,
    .sp-property-detail-item {
        padding: 12px 0;
    }

    .agent-contact,
    .sp-agent-contact {
        flex-direction: column;
        gap: 8px;
    }

    .form-row.dual,
    .sp-form-row.sp-dual {
        flex-direction: column;
        gap: 10px;
    }

    .form-row.dual input,
    .sp-form-row.sp-dual input {
        width: 100%;
    }

    .property-section,
    .sp-property-section {
        padding: 30px 0;
    }

    .property-section h2,
    .sp-property-section h2 {
        font-size: 1.8rem;
        padding: 0 10px;
    }

    .property-filters,
    .sp-property-filters,
    .sp-similar-properties-filter {
        margin: 0 10px 20px;
        padding: 20px;
    }

    /* Show toggle button on mobile */
    .filter-toggle-mobile {
        display: flex;
    }

    /* Collapse filter row by default on mobile */
    .filter-row,
    .sp-filter-row {
        flex-direction: column;
        gap: 10px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
        margin-top: 0;
    }

    /* Expanded state */
    .property-filters.expanded .filter-row,
    .sp-similar-properties-filter.expanded .sp-filter-row {
        max-height: 1000px;
        opacity: 1;
        margin-top: 15px;
    }

    .filter-group,
    .sp-filter-group {
        min-width: 100%;
    }

    .filter-buttons,
    .sp-filter-buttons {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }

    .filter-button,
    .reset-button,
    .sp-filter-button,
    .sp-reset-button {
        width: 100%;
    }

    .properties-grid,
    .sp-properties-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 10px;
    }
}

@media (width <= 480px) {
    .sp-condo-menu-link {
        padding: 12px 14px;
        font-size: 0.8rem;
    }

    .sp-condo-content-area h3 {
        font-size: 1.3rem;
    }

    .property-detail-item,
    .sp-property-detail-item {
        align-items: flex-start;
        gap: 10px;
    }

    .detail-value-container,
    .sp-detail-value-container {
        text-align: left;
        margin-top: 5px;
    }

    .agent-name,
    .sp-agent-name {
        font-size: 1.2rem;
    }

    .agent-phone-btn,
    .agent-email-btn,
    .sp-agent-phone-btn,
    .sp-agent-email-btn {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .property-section h2,
    .sp-property-section h2 {
        font-size: 1.6rem;
    }

    .property-filters,
    .sp-property-filters {
        padding: 15px;
    }

    .filter-buttons,
    .sp-filter-buttons {
        flex-direction: column;
        gap: 8px;
    }
}

/* ===================================
   ACCESSIBILITY IMPROVEMENTS
   =================================== */

.agent-phone-btn:focus,
.agent-email-btn:focus,
.eval-submit-btn:focus,
.sp-agent-phone-btn:focus,
.sp-agent-email-btn:focus,
.sp-eval-submit-btn:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.property-detail-item:focus-within,
.sp-property-detail-item:focus-within {
    background-color: rgb(44 90 160 / 5%);
}

.filter-button:focus,
.reset-button:focus,
.sp-filter-button:focus,
.sp-reset-button:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    .sp-condo-sidebar,
    .agent-contact,
    .sp-agent-contact {
        display: none;
    }

    .sp-condo-main-layout {
        display: block;
    }

    .sp-condo-content-area {
        width: 100%;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ===================================
   HIGH CONTRAST MODE
   =================================== */

@media (prefers-contrast: high) {
    .sp-condo-content-area,
    .sp-condo-amenities-area,
    .agent-cta-area,
    .sp-agent-cta-area,
    .free-evaluation-form,
    .sp-free-evaluation-form {
        border: 2px solid #000;
    }
}

/* ===================================
   REDUCED MOTION
   =================================== */

@media (prefers-reduced-motion: reduce) {
    .agent-phone-btn,
    .agent-email-btn,
    .eval-submit-btn,
    .sp-agent-phone-btn,
    .sp-agent-email-btn,
    .sp-eval-submit-btn {
        transition: none;
    }

    .agent-phone-btn:hover,
    .agent-email-btn:hover,
    .eval-submit-btn:hover,
    .sp-agent-phone-btn:hover,
    .sp-agent-email-btn:hover,
    .sp-eval-submit-btn:hover {
        transform: none;
    }
}

/* ===================================
   LOCATION & CONTACT SECTION
   Combined map and contact form section
   =================================== */

#sp-location-contact{
    max-width:1280px;
    margin:0 auto;
    padding-bottom: 40px;
}

.sp-location-contact-row {
    display: flex;
    gap: 30px;
    width: 100%;
}

/* Estimation Column - 70% width on desktop */
.sp-estimation-column {
    flex: 0 0 70%;
    min-width: 0;
}

.sp-location-map {
    width: 100%;
    height: 800px;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

/* Contact Column - 30% width on desktop */
.sp-contact-column {
    flex: 0 0 calc(30% - 30px);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sp-contact-column h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f3f4;
}

.sp-estimation-column h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f3f4;
}

/* Mobile: Stack vertically, map on top, form below */
@media (width <= 768px) {
    .sp-location-contact-row {
        flex-direction: column;
        gap: 20px;
    }

    .sp-estimation-column,
    .sp-contact-column {
        flex: 1 1 100%;
        width: 100%;
    }

    .sp-location-map {
        max-height: 300px;
        object-fit: cover;
    }
}

/* ===================================
   VALUE PROPERTY SECTION
   Property valuation estimator section
   =================================== */

.value-property-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 40px 20px;
    margin-bottom: 20px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.value-property-container {
    max-width: 1240px;
    margin: 0 auto;
}

.value-property-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 24px;
    text-align: center;
}

.value-property-content {
    margin-top: 24px;
}

/* Two-column split layout */
.value-property-split {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.value-property-column {
    flex: 1;
    min-width: 0;
}

/* Responsive design for value property section */
@media (width <= 768px) {
    .value-property-section {
        padding: 30px 15px;
    }

    .value-property-title {
        font-size: 1.5rem;
    }

    /* Stack columns vertically on mobile */
    .value-property-split {
        flex-direction: column;
        gap: 20px;
    }

    .value-property-column {
        width: 100%;
        max-width: 100%;
    }
}

@media (width <= 480px) {
    .value-property-section {
        padding: 25px 10px;
    }

    .value-property-title {
        font-size: 1.3rem;
    }
}

/* ===================================
   COMPARABLE PROPERTY CARD
   Wrapper for property cards in comparison section
   =================================== */

.comparable-property-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Force comparable cards and their children to respect container width on mobile */
@media (width <= 768px) {
    .comparable-property-card,
    .comparable-property-card .modern-property-card,
    .comparable-property-card * {
        max-width: 373px; !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Reset width for inner content that shouldn't be 100% */
    .comparable-property-card .modern-card-content,
    .comparable-property-card .modern-card-content * {
        width: auto !important;
    }
}

/* ===================================
   PROPERTY CARD BLUR OVERLAY
   For non-active comparable properties
   =================================== */

/* Property Card Blur Overlay for Non-Active Properties */
.property-card-blurred {
    position: relative;
}

.property-card-blurred .modern-card-link,
.property-card-blurred .property-action-buttons {
    pointer-events: none;
}

.property-card-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(255 255 255 / 5%);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

.blur-overlay-content {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
}

.blur-overlay-message {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 16px;
}

.blur-overlay-content a {
    display: inline-block;
    padding: 12px 24px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.blur-overlay-content a:hover {
    background: #0056b3;
}

/* ===================================
   SECONDARY CTA BANNER
   Lighter themed banner with different design
   =================================== */

.realestate-cta-banner-secondary {
    width: 100%;
    max-width: 1280px;
    margin: 80px auto 40px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px solid #e2e8f0;
    padding: 60px 40px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px rgb(0 0 0 / 8%);
}

.realestate-cta-banner-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="secondary-dots" width="16" height="16" patternUnits="userSpaceOnUse"><circle cx="8" cy="8" r="1.5" fill="%23007bff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23secondary-dots)"/></svg>');
    opacity: 0.6;
}

.cta-banner-secondary-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.cta-banner-secondary-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta-banner-secondary-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px;
    line-height: 1.2;
}

.cta-banner-secondary-subtitle {
    font-size: 1.1rem;
    color: #475569;
    margin: 0 0 32px;
    line-height: 1.6;
    opacity: 0.9;
}

.cta-banner-secondary-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
}

.cta-secondary-primary-btn {
    display: inline-block;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 16px 32px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgb(16 185 129 / 30%);
    border: none;
    cursor: pointer;
}

.cta-secondary-primary-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgb(16 185 129 / 40%);
    color: #fff;
    text-decoration: none;
}

.cta-secondary-secondary-btn {
    display: inline-block;
    background: #fff;
    color: #1e293b;
    padding: 16px 32px;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.cta-secondary-secondary-btn:hover {
    background: #1e293b;
    color: #fff;
    border-color: #1e293b;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgb(30 41 59 / 20%);
    text-decoration: none;
}

.cta-banner-secondary-stats {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 50px;
    padding-top: 32px;
    border-top: 1px solid rgb(203 213 225 / 60%);
}

.cta-secondary-stat-item {
    text-align: center;
}

.cta-secondary-stat-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 6px;
}

.cta-secondary-stat-label {
    font-size: 0.9rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* Responsive design for secondary CTA banner */
@media (width <= 768px) {
    .realestate-cta-banner-secondary {
        padding: 50px 30px;
        margin: 60px auto 30px;
    }

    .cta-banner-secondary-container {
        padding: 0 15px;
    }

    .cta-banner-secondary-title {
        font-size: 2rem;
        margin-bottom: 14px;
    }

    .cta-banner-secondary-subtitle {
        font-size: 1rem;
        margin-bottom: 28px;
    }

    .cta-banner-secondary-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 28px;
    }

    .cta-secondary-primary-btn,
    .cta-secondary-secondary-btn {
        width: 100%;
        max-width: 280px;
        padding: 14px 24px;
        font-size: 0.95rem;
    }

    .cta-banner-secondary-stats {
        flex-direction: column;
        gap: 25px;
        margin-top: 35px;
        padding-top: 25px;
    }

    .cta-secondary-stat-number {
        font-size: 1.9rem;
    }

    .cta-secondary-stat-label {
        font-size: 0.85rem;
    }
}

@media (width <= 480px) {
    .realestate-cta-banner-secondary {
        padding: 40px 20px;
        border-radius: 12px;
    }

    .cta-banner-secondary-title {
        font-size: 1.7rem;
    }

    .cta-banner-secondary-subtitle {
        font-size: 0.95rem;
    }

    .cta-secondary-primary-btn,
    .cta-secondary-secondary-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .cta-secondary-stat-number {
        font-size: 1.6rem;
    }
}