/**
 * community-property.css v6.3
 *
 * v6.3 CHANGES (from v5.44):
 * - LIGHTBOX REDESIGN: Dark overlay, fixed arrows with white circle border,
 *   bare X close icon, fixed counter — same as single-property v8.5.3
 * - Old .spc-lightbox styles preserved for backward compat; new styles override via
 *   higher specificity + !important
 * - ALL other styles UNCHANGED from v5.44 — wala babawasan
 *
 * v5.44 (preserved): Unit Card Hover Overlay + Gradient Fix
 * v5.43 (preserved): Community Explore spacing
 * v5.42 (preserved): FAQ section
 * v5.41 (preserved): Badge pills + unit badges
 * v5.40 (preserved): MAP V2
 * v5.36 (preserved): Tab buttons, arrows, dots Figma spec
 */

@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@300;400;500;600&display=swap');

.spc-page {
    --spc-primary: #5A4F42;
    --spc-light-text: #766C61;
    --spc-100: #F5F3F0;
    --spc-200: #EFEDEB;
    --spc-300: #E8E5DF;
    --spc-400: #CCC8C0;
    --spc-white: #FFFFFF;
    --spc-font-heading: 'Sofia Pro', 'Roboto', sans-serif;
    --spc-font-body: 'Afacad Flux', sans-serif;
    --spc-content-width: 1200px;
    width: 100%;
    background: var(--spc-white);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================================ BREADCRUMB */
.spc-breadcrumb { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); background: var(--spc-200); display: flex; justify-content: center; }
.spc-breadcrumb-inner { width: 100%; max-width: var(--spc-content-width); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 5px; box-sizing: border-box; }
.spc-breadcrumb-link { color: var(--spc-primary); font-family: var(--spc-font-body); font-size: 14px; font-weight: 300; text-decoration: none; }
.spc-breadcrumb-link:hover { opacity: 0.7; color: #928572 !important; }
.spc-breadcrumb-separator, .spc-breadcrumb-current { color: var(--spc-primary); font-family: var(--spc-font-body); font-size: 14px; font-weight: 300; }
.spc-breadcrumb-current { font-weight: 400; }

/* ============================================================ HERO */
.spc-hero { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); height: auto; min-height: 500px; max-height: 70vh; overflow: hidden; }
.spc-hero-image { width: 100%; height: 100%; min-height: 500px; max-height: 70vh; position: absolute; top: 0; left: 0; }
.spc-hero-image img { width: 100%; height: 100%; min-height: 500px; max-height: 70vh; object-fit: cover; object-position: center; }
.spc-hero-overlay { width: 100%; height: auto; min-height: 180px; position: absolute; bottom: 0; left: 0; background: rgba(63,63,70,0.70); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: center; z-index: 10; padding: 28px 0; }
.spc-hero-overlay-content { width: 100%; max-width: var(--spc-content-width); padding: 0; display: flex; justify-content: space-between; align-items: center; }
.spc-hero-info-group { display: flex; align-items: center; gap: 112px; justify-content: flex-start; }
.spc-hero-info, .spc-hero-details { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.spc-hero-info-inner, .spc-hero-details-inner { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left; }
.spc-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.spc-hero-title { color: var(--spc-white); font-family: var(--spc-font-body); font-size: 36px; font-weight: 400; line-height: 1.2; margin: 0; text-align: left; }
.spc-hero-address { color: var(--spc-white); font-family: var(--spc-font-body); font-size: 18px; font-weight: 300; margin: 0; text-align: left; }

/* Hero Badges */
.spc-hero-badge { padding: 5px 20px; border-radius: 50px; display: inline-flex; justify-content: center; align-items: center; font-family: var(--spc-font-body); font-size: 16px; font-weight: 400; white-space: nowrap; }
.spc-hero-badge-move-in-ready  { background: #928572 !important; color: #FFFFFF !important; }
.spc-hero-badge-near-completion{ background: #928572 !important; color: #FFFFFF !important; }
.spc-hero-badge-off-market-lot { background: #928572 !important; color: #FFFFFF !important; }
.spc-hero-badge-future-phases  { background: #6A8375 !important; color: #FFFFFF !important; }
.spc-hero-badge-for-sale       { background: #6A8375 !important; color: #FFFFFF !important; }
.spc-hero-badge-plan-ready     { background: #6B6D80 !important; color: #FFFFFF !important; }
.spc-hero-badge-in-construction{ background: #FFFFFF !important; color: #5A4F42 !important; outline: 1px solid #5A4F42 !important; outline-offset: -1px !important; }
.spc-hero-badge-under-contract { background: #666666 !important; color: #FFFFFF !important; }
.spc-hero-badge-sold           { background: #EEEEEE !important; color: #5A4F42 !important; }
.spc-hero-badge-coming-soon    { background: #EEEEEE !important; border-radius: 50px !important; outline: none !important; border: none !important; color: #5A4F42 !important; }
.spc-hero-badge-estimated      { background: transparent !important; outline: 1px solid #FFFFFF !important; color: #FFFFFF !important; }
.spc-hero-badge-promo          { background: transparent !important; outline: 1px solid #FFFFFF !important; color: #FFFFFF !important; }
.spc-hero-badge-default        { background: #EEEEEE !important; color: #5A4F42 !important; }

/* ============================================================ PROPERTY INFO */
.spc-property-info-section { width: 100%; max-width: var(--spc-content-width); margin: 0 auto; padding: 40px 0; }
.spc-property-info-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.spc-property-info-left { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.spc-property-info-right { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.spc-property-badges-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.spc-property-header-info { display: flex; flex-direction: column; gap: 10px; }
.spc-property-name-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; }
.spc-property-title { color: #2A2A2A; font-size: 32px; font-family: 'Sofia Pro','Sofia Sans',sans-serif; font-weight: 400; margin: 0; line-height: 1.3; }
.spc-property-name-separator { width: 4px; height: 4px; background: #2A2A2A; border-radius: 9999px; display: inline-block; margin: 0 12px; vertical-align: middle; position: relative; top: -2px; }
.spc-property-location-highlight { color: #666666; font-size: 20px; font-family: 'Afacad Flux',sans-serif; font-weight: 400; line-height: 1.3; }
.spc-property-address { color: #666666; font-size: 20px; font-family: 'Afacad Flux',sans-serif; font-weight: 300; }
.spc-property-price-section { display: flex; align-items: baseline; gap: 8px; }
.spc-price-label { color: #666666; font-size: 18px; font-family: 'Sofia Pro','Sofia Sans',sans-serif; font-weight: 400; }
.spc-price-value { color: #2A2A2A; font-size: 32px; font-family: 'Sofia Pro','Sofia Sans',sans-serif; font-weight: 400; }
.spc-property-actions { display: flex; flex-direction: row; gap: 12px; align-items: center; }
.spc-action-btn { display: flex; padding: 10px 25px; justify-content: center; align-items: center; gap: 10px; border-radius: 50px; text-decoration: none; font-family: 'Afacad Flux',sans-serif; font-size: 18px; font-weight: 400; text-transform: capitalize; transition: all 0.3s ease; cursor: pointer; border: none; white-space: nowrap; }
.spc-action-primary { background: var(--spc-primary); color: #FFFFFF; }
.spc-action-primary:hover { background: #928572; }
.spc-action-btn-icon { display: flex; align-items: center; }
.spc-action-btn-icon .material-symbols-outlined { color: white; font-size: 20px; }
.spc-action-brochure { background: transparent; color: #2A2A2A; border: 1px solid #2A2A2A; }
.spc-action-brochure:hover { background: var(--spc-primary); color: #FFFFFF; border-color: var(--spc-primary); }

/* ============================================================ KEY FEATURES */
.spc-key-features-section { width: 100%; background: var(--spc-white); display: flex; justify-content: center; padding: 60px 0 60px; }
.spc-key-features-inner { width: 100%; max-width: var(--spc-content-width); }
.spc-key-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 32px; }
.spc-kf-item { display: flex; align-items: center; gap: 12px; }
.spc-kf-icon { font-size: 22px; color: var(--spc-primary); flex-shrink: 0; line-height: 1; }
.spc-kf-icon-placeholder { width: 22px; height: 22px; flex-shrink: 0; }
.spc-kf-text { color: #2A2A2A; font-family: 'Afacad Flux', sans-serif; font-size: 17px; font-weight: 300; line-height: 1.4; }

/* ============================================================ SECTION DIVIDER */
.spc-section-divider-wrapper { width: 100%; max-width: var(--spc-content-width); margin: 0 auto; padding: 0; }
.spc-section-divider { width: 100%; height: 0; border: none; border-top: 1px solid var(--spc-300); margin: 0; }

/* ============================================================ HOME FEATURES */
.spc-home-features-section { width: 100%; background: var(--spc-white); display: flex; justify-content: center; padding: 60px 0 80px; }
.spc-home-features-inner { width: 100%; max-width: var(--spc-content-width); display: flex; flex-direction: column; gap: 20px; }
.spc-hf-heading { color: #2A2A2A; font-family: 'Sofia Pro','Sofia Sans',sans-serif; font-size: 30px; font-weight: 400; margin: 0; }
.spc-hf-tabs { display: inline-flex; align-items: center; gap: 10px; }
.spc-hf-tab { display: flex !important; padding: 10px 20px !important; justify-content: center !important; align-items: center !important; gap: 10px !important; border-radius: 50px !important; border: none !important; background: #EFEDEB !important; color: #928A80 !important; font-family: 'Afacad Flux', sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: normal !important; text-transform: capitalize !important; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; white-space: nowrap; }
.spc-hf-tab:hover:not(.active) { background: #E8E5DF !important; color: #5A4F42 !important; }
.spc-hf-tab.active { background: #5A4F42 !important; color: #FFFFFF !important; }
.spc-hf-panel { display: none; }
.spc-hf-panel.active { display: block; }
.spc-hd-slider { width: 100%; height: 550px; position: relative; overflow: hidden; border-radius: 8px; background: var(--spc-200); }
.spc-hd-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.spc-hd-slide.active { opacity: 1; pointer-events: auto; }
.spc-hd-slide-img { width: 100%; height: 100%; background-size: cover !important; background-position: center 50% !important; position: relative; }
.spc-hd-slide-img img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.spc-hd-slide-empty { background: var(--spc-200) !important; display: flex; align-items: center; justify-content: center; }
.spc-hd-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: flex !important; width: 35.178px !important; height: 35.178px !important; padding: 0 !important; justify-content: center !important; align-items: center !important; gap: 10px !important; box-sizing: border-box !important; border: none !important; border-top: 0.5px solid #FFFFFF !important; border-right: 0.5px solid #FFFFFF !important; border-radius: 50px !important; background: rgba(255, 255, 255, 0.50) !important; backdrop-filter: blur(2.5px) !important; -webkit-backdrop-filter: blur(2.5px) !important; cursor: pointer; z-index: 10; flex-shrink: 0; }
.spc-hd-arrow-prev { left: 16px; }
.spc-hd-arrow-next { right: 16px; }
.spc-hd-arrow .material-symbols-outlined { font-size: 20px; color: #2A2A2A; line-height: 1; flex-shrink: 0; }
.spc-hd-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 10; }
.spc-hd-dot { width: 9.381px !important; height: 9.381px !important; aspect-ratio: 1/1; border-radius: 50% !important; background: rgba(255, 255, 255, 0.50) !important; border: none !important; cursor: pointer; padding: 0; transition: background 0.2s; flex-shrink: 0; }
.spc-hd-dot.active { background: #FFFFFF !important; }
.spc-hd-badge { position: absolute; bottom: 14px; right: 20px; padding: 5px 20px !important; background: rgba(255, 255, 255, 0.50) !important; border-top: 0.5px solid #FFFFFF !important; border-right: 0.5px solid #FFFFFF !important; border-radius: 50px !important; backdrop-filter: blur(2.5px) !important; color: #2A2A2A !important; font-family: 'Afacad Flux', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; white-space: nowrap; z-index: 10; }
.spc-hd-content { display: none; margin-top: 28px; color: #2A2A2A; font-family: 'Afacad Flux', sans-serif; font-size: 18px; font-weight: 300; line-height: 1.7; }
.spc-hd-content.active { display: block; }
.spc-hd-content p { margin: 0 0 16px 0; }
.spc-hd-content p:last-child { margin-bottom: 0; }
.spc-hd-content h2 { font-family: 'Sofia Pro','Sofia Sans',sans-serif; font-size: 24px; font-weight: 400; margin: 0 0 16px 0; }
.spc-hd-content h3 { font-family: 'Sofia Pro','Sofia Sans',sans-serif; font-size: 20px; font-weight: 400; margin: 24px 0 12px 0; }
.spc-hd-content h3:first-child { margin-top: 0; }
.spc-hd-content ul, .spc-hd-content ol { margin: 0 0 14px 0; padding-left: 20px; }
.spc-hd-content li { margin-bottom: 6px; }
.spc-hd-content strong { font-weight: 500; }
.spc-hf-feat-description { display: flex; flex-direction: column; gap: 28px; color: #2A2A2A; font-family: 'Afacad Flux', sans-serif; font-size: 18px; font-weight: 300; line-height: 1.8; }
.spc-hf-feat-description h2, .spc-hf-feat-description h3 { font-family: 'Afacad Flux', sans-serif; font-size: 24px; font-weight: 400; color: #2A2A2A; margin: 0; text-transform: capitalize; }
.spc-hf-feat-description p { margin: 0; }
.spc-hf-feat-description ul, .spc-hf-feat-description ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 80px; }
.spc-hf-feat-description li { display: flex; align-items: flex-start; gap: 10px; font-size: 18px; font-weight: 300; line-height: 1.8; color: #2A2A2A; text-transform: capitalize; break-inside: avoid; -webkit-column-break-inside: avoid; }
.spc-hf-feat-description li::before { content: '•'; color: #2A2A2A; flex-shrink: 0; font-size: 18px; line-height: 1.8; }
.spc-hf-feat-description strong { font-weight: 500; }

/* ============================================================ SHARED */
.spc-section-heading { color: #2A2A2A; font-family: 'Sofia Pro','Sofia Sans',sans-serif; font-size: 30px; font-weight: 400; margin: 0; padding-bottom: 30px; }
.spc-content { width: 100%; max-width: var(--spc-content-width); margin: 0 auto; padding-top: 20px; }
.spc-divider-wrapper { width: 100%; background: var(--spc-white); display: flex; justify-content: center; padding: 0; }
.spc-divider { width: 100%; max-width: var(--spc-content-width); height: 0; border: none; border-top: 1px solid var(--spc-300); margin: 0; }
.spc-section { padding: 80px 0; }

/* ============================================================ FLOOR PLANS */
.spc-floorplan-section { padding: 80px 0; }
.spc-floorplan-container { display: flex; flex-direction: column; gap: 28px; }
.spc-floorplan-header { display: flex; justify-content: space-between; align-items: center; }
.spc-floorplan-header .spc-section-heading { margin: 0; }
.spc-floorplan-dropdown-container { width: 192px; position: relative; }
.spc-floorplan-dropdown { width: 100%; height: 40px; padding: 8px 10px; background: var(--spc-white); border: none; border-radius: 3px; outline: 1px var(--spc-300) solid; color: #2A2A2A; font-size: 14px; font-family: 'Afacad Flux',sans-serif; cursor: pointer; appearance: none; }
.spc-floorplan-dropdown-container::after { content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #2A2A2A; pointer-events: none; }
.spc-floorplan-display-container { padding: 14px 240px; background: var(--spc-white); outline: 1px var(--spc-400) solid; display: flex; justify-content: center; }
.spc-floorplan-item { display: none; width: 715px; max-width: 100%; }
.spc-floorplan-item.active { display: block; }
.spc-floorplan-image { width: 100%; max-height: 550px; object-fit: contain; display: block; }
.spc-floorplan-pdf { width: 100%; }
.spc-floorplan-pdf embed { width: 100%; height: 550px; border: none; }
.spc-floorplan-pdf-fallback { margin-top: 10px; text-align: center; }
.spc-floorplan-pdf-link { display: inline-flex; align-items: center; gap: 8px; color: var(--spc-primary); text-decoration: none; font-family: var(--spc-font-body); font-size: 16px; }
.spc-floorplan-pdf-link:hover { text-decoration: underline; }
.spc-floorplan-pdf-link .material-symbols-outlined { font-size: 20px; }
.spc-floorplan-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 80px 20px; text-align: center; }
.spc-floorplan-placeholder svg { width: 30px; height: 30px; }
.spc-floorplan-placeholder-text { color: var(--spc-light-text); font-family: var(--spc-font-body); font-size: 16px; font-weight: 300; }

/* ============================================================ UNITS */
.spc-units-section { padding: 80px 0; }
.spc-phase-block { display: flex; flex-direction: column; gap: 28px; }
.spc-phase-block + .spc-phase-block { margin-top: 0; }
.spc-phase-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.spc-phase-header-left { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.spc-phase-heading { color: #2A2A2A; font-family: 'Sofia Pro','Sofia Sans',sans-serif; font-size: 30px; font-weight: 400; margin: 0; }
.spc-phase-tabs { display: inline-flex; align-items: center; gap: 10px; }
.spc-phase-tab { display: flex !important; padding: 10px 20px !important; justify-content: center !important; align-items: center !important; gap: 10px !important; border-radius: 50px !important; border: none !important; background: #EFEDEB !important; color: #928A80 !important; font-family: 'Afacad Flux', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: normal !important; text-transform: capitalize !important; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; white-space: nowrap; }
.spc-phase-tab.active { background: #5A4F42 !important; color: #FFFFFF !important; }
.spc-view-all-units-btn { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; transition: all 0.3s ease; align-self: flex-start; margin-top: 8px; }
.spc-view-all-units-btn:hover .spc-view-all-units-text { color: #928572; }
.spc-view-all-units-btn:hover .spc-view-all-units-icon { background: #928572; }
.spc-view-all-units-text { color: var(--spc-primary); font-family: var(--spc-font-body); font-size: 18px; font-weight: 400; text-transform: capitalize; }
.spc-view-all-units-icon { width: 36px; height: 36px; background: var(--spc-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; flex-shrink: 0; }
.spc-view-all-units-icon .material-symbols-outlined { font-size: 16px; color: #FFFFFF; }
.spc-units-grid-v2 { display: flex; flex-direction: column; gap: 24px; }
.spc-units-row { display: flex; justify-content: flex-start; gap: 24px; }
.spc-phase-panel { }
.spc-phase-panel-fp .spc-floorplan-display-container { margin-top: 0; }
.spc-unit-card { width: calc(50% - 12px); height: 320px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.3s ease; }
.spc-unit-card:hover { transform: translateY(-4px); }
.spc-unit-card-link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; position: relative; }
.spc-unit-card-img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.spc-unit-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.spc-unit-card:hover .spc-unit-card-img img { transform: scale(1.05); }
.spc-unit-card-overlay { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0,0,0,0.70) 0%, rgba(102,102,102,0.00) 100%); z-index: 2; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.spc-unit-card-placeholder { background: linear-gradient(270deg, rgba(0,0,0,0.60) 0%, rgba(102,102,102,0.60) 100%); }
.spc-unit-card-placeholder-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
.spc-unit-card-placeholder-icon .material-symbols-outlined { font-size: 28px; color: #FFFFFF; }
.spc-unit-card-badges { display: flex; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.spc-unit-badge { padding: 5px 14px; background: #FFFFFF; border-radius: 50px; outline: 1px solid var(--spc-300); outline-offset: -1px; font-family: 'Afacad Flux', sans-serif; font-size: 14px; font-weight: 400; color: #2A2A2A; text-transform: capitalize; white-space: nowrap; display: inline-flex; align-items: center; }
.spc-unit-card-info { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.spc-unit-card-info-left { display: flex; flex-direction: column; gap: 5px; }
.spc-unit-card-name { color: #FFFFFF; font-family: 'Afacad Flux', sans-serif; font-size: 18px; font-weight: 400; text-transform: capitalize; margin: 0; }
.spc-unit-card-price { color: #FFFFFF; font-family: 'Afacad Flux', sans-serif; font-size: 18px; font-weight: 400; text-transform: capitalize; margin: 0; }
.spc-unit-card-info-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.spc-unit-card-specs { display: flex; align-items: center; gap: 10px; }
.spc-unit-card-spec { color: #FFFFFF; font-family: 'Afacad Flux', sans-serif; font-size: 16px; font-weight: 300; text-transform: capitalize; }
.spc-unit-card-sqft { color: #FFFFFF; font-family: 'Afacad Flux', sans-serif; font-size: 16px; font-weight: 300; text-align: right; }
.spc-phase-dots { display: flex; justify-content: center; align-items: center; gap: 14px; padding-top: 24px; }
.spc-phase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--spc-300); border: none; cursor: pointer; padding: 0; transition: background 0.2s; }
.spc-phase-dot.active { background: var(--spc-primary); }
.spc-badge { padding: 5px 14px; border-radius: 50px; display: inline-flex; justify-content: center; align-items: center; font-family: var(--spc-font-body); font-size: 12px; font-weight: 400; white-space: nowrap; }
.spc-badge-move-in-ready, .spc-badge-near-completion, .spc-badge-off-market-lot, .spc-badge-future-phases, .spc-badge-for-sale, .spc-badge-plan-ready-lot, .spc-badge-in-construction, .spc-badge-under-contract, .spc-badge-sold, .spc-badge-coming-soon, .spc-badge-estimated, .spc-badge-promo, .spc-badge-default { background: #FFFFFF !important; color: #2A2A2A !important; outline: 1px solid var(--spc-300) !important; }
.spc-badge-coming-soon { border: none !important; }
.spc-phase-divider { width: 100%; height: 0; border: none; border-top: 1px solid var(--spc-300); margin: 0; }

/* ============================================================ SITEMAP */
.spc-sitemap-section { padding: 80px 0; }
.spc-sitemap-wrapper { width: 100%; padding: 14px 240px; background: var(--spc-white); outline: 1px solid var(--spc-400); }
.spc-sitemap-inner { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.spc-sitemap-image img { width: 100%; height: auto; display: block; }

/* ============================================================ VIRTUAL TOUR */
.spc-virtual-tour-section { padding: 80px 0; }
.spc-tour-container-wrapper { display: flex; flex-direction: column; gap: 28px; }
.spc-tour-container-wrapper .spc-section-heading { padding-bottom: 0; }
.spc-tour-container { width: 100%; height: 700px; position: relative; background: #000; overflow: hidden; }
.spc-tour-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.spc-tour-iframe, .spc-tour-content iframe { width: 100%; height: 100%; border: none; display: block; }
.spc-tour-controls { width: 144px; height: 40px; padding: 5px 6px; position: absolute; bottom: 79px; right: 53px; background: rgba(48,48,48,0.60); border-radius: 50px; backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: center; gap: 3px; z-index: 10; }
.spc-tour-control-btn { padding: 5px 10px; background: transparent; border: none; border-radius: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: var(--spc-white); text-decoration: none; transition: background 0.2s ease; }
.spc-tour-control-btn:hover { background: rgba(255,255,255,0.10); }
.spc-tour-control-btn .material-symbols-outlined { font-size: 20px; color: var(--spc-white); }

/* ============================================================ MAP */
.spc-map-section { padding: 80px 0; }
.spc-map-container { width: 100%; height: 500px; position: relative; overflow: hidden; z-index: 1; }
.spc-map-leaflet { width: 100%; height: 100%; z-index: 1; }
.spc-map-zoom { width: 40px; height: 80px; position: absolute; right: 20px; bottom: 20px; background: var(--spc-white); border-radius: 4px; box-shadow: 0 4px 20px rgba(0,0,0,0.10); display: flex; flex-direction: column; z-index: 10; }
.spc-map-zoom-btn { flex: 1; display: flex; justify-content: center; align-items: center; background: none; border: none; cursor: pointer; }
.spc-map-zoom-btn:hover { background: var(--spc-100); }
.spc-map-zoom-btn:first-child { border-radius: 4px 4px 0 0; }
.spc-map-zoom-btn:last-child { border-radius: 0 0 4px 4px; }
.spc-map-zoom-btn .material-symbols-outlined { font-size: 24px; color: var(--spc-primary); }
.spc-leaflet-marker { width: 28px !important; height: 28px !important; background: #778869 !important; border-radius: 50% !important; border: 3px solid #FFFFFF !important; box-shadow: 3px 5px 6px 2px rgba(0,0,0,0.40) !important; }
.spc-map-leaflet .leaflet-control-zoom, .spc-map-leaflet .leaflet-control-attribution { display: none !important; }

/* ============================================================ COMMUNITY EXPLORE */
.spc-community-explore-section { padding: 80px 0; }
.spc-community-explore-inner { display: flex; flex-direction: column; gap: 28px; }
.spc-community-explore-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.spc-community-explore-text { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.spc-community-explore-title { color: #2A2A2A; font-family: 'Sofia Pro','Sofia Sans',sans-serif; font-size: 30px; font-weight: 400; margin: 0; }
.spc-community-explore-desc { color: #666666; font-family: 'Afacad Flux',sans-serif; font-size: 18px; font-weight: 300; margin: 0; }

/* ============================================================ CTA BANNER */
.spc-cta-banner-section { width: 100%; background: var(--spc-white); display: flex; justify-content: center; padding: 40px 0 80px; }
.spc-cta-banner-container { width: 100%; max-width: var(--spc-content-width); min-height: 320px; display: flex; background: var(--spc-200); overflow: hidden; }
.spc-cta-banner-accent { width: 10px; background: var(--spc-primary); flex-shrink: 0; }
.spc-cta-banner-content { flex: 1; padding: 40px 56px; display: flex; justify-content: space-between; align-items: center; gap: 60px; }
.spc-cta-banner-text { flex: 1; display: flex; flex-direction: column; gap: 32px; max-width: 500px; }
.spc-cta-banner-info { display: flex; flex-direction: column; gap: 14px; }
.spc-cta-banner-title { color: #2A2A2A; font-size: 30px; font-family: 'Sofia Pro',sans-serif; font-weight: 400; margin: 0; }
.spc-cta-banner-description { color: #2A2A2A; font-size: 18px; font-family: 'Afacad Flux',sans-serif; font-weight: 300; margin: 0; }
.spc-cta-banner-btn { display: inline-flex; padding: 10px 24px; background: var(--spc-white); border-radius: 50px; outline: 1px solid #2A2A2A; align-items: center; gap: 10px; text-decoration: none; color: #2A2A2A; font-size: 18px; font-family: 'Afacad Flux',sans-serif; font-weight: 400; text-transform: capitalize; width: fit-content; transition: all 0.3s ease; }
.spc-cta-banner-btn:hover { background: var(--spc-primary); color: var(--spc-white); }
.spc-cta-banner-btn .material-symbols-outlined { font-size: 20px; }
.spc-cta-banner-image { width: 350px; height: 240px; object-fit: cover; border-radius: 8px; }

/* ============================================================ OLD LIGHTBOX (kept for backward compat — overridden by v6.3 below) */
.spc-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--spc-white); z-index: 99999; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 40px; padding: 40px; }
.spc-lightbox.active { display: flex; }
.spc-lightbox-close { position: absolute; top: 40px; right: 40px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.spc-lightbox-close:hover { transform: scale(1.1); }
.spc-lightbox-close .material-symbols-outlined { font-size: 40px; color: var(--spc-primary); }
.spc-lightbox-image { max-width: 1200px; max-height: 800px; width: 100%; display: flex; justify-content: center; align-items: center; }
.spc-lightbox-image img { max-width: 100%; max-height: 800px; object-fit: contain; }
.spc-lightbox-controls { display: flex; justify-content: center; align-items: center; gap: 60px; }
.spc-lightbox-nav { width: 40px; height: 40px; background: none; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.spc-lightbox-nav:hover:not(:disabled) { transform: scale(1.1); }
.spc-lightbox-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.spc-lightbox-nav .material-symbols-outlined { font-size: 40px; color: var(--spc-primary); }
.spc-lightbox-counter { display: flex; justify-content: center; align-items: center; gap: 15px; }
.spc-lightbox-counter span { color: var(--spc-primary); font-family: var(--spc-font-body); font-size: 18px; font-weight: 400; }

/* ============================================================ GALLERY GRID */
.spc-gallery-grid-section { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }
.spc-gallery-grid-container { width: 100%; max-width: var(--spc-content-width); margin: 0 auto; padding: 20px 0; }
.spc-gallery-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; height: 500px; }
.spc-gallery-grid-main { cursor: pointer; overflow: hidden; border-radius: 8px 0 0 8px; }
.spc-gallery-grid-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.spc-gallery-grid-main:hover img { transform: scale(1.02); }
.spc-gallery-grid-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.spc-gallery-grid-thumb { cursor: pointer; overflow: hidden; position: relative; }
.spc-gallery-grid-thumb:nth-child(2) { border-radius: 0 8px 0 0; }
.spc-gallery-grid-thumb:nth-child(4) { border-radius: 0 0 8px 0; }
.spc-gallery-grid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.spc-gallery-grid-thumb:hover img { transform: scale(1.05); }
.spc-gallery-see-all-overlay { position: absolute; bottom: 16px; right: 16px; }
.spc-gallery-see-all-btn { padding: 10px 20px; background: var(--spc-white); border: none; border-radius: 50px; cursor: pointer; font-family: var(--spc-font-body); font-size: 14px; color: var(--spc-primary); transition: all 0.3s ease; }
.spc-gallery-see-all-btn:hover { background: var(--spc-primary); color: var(--spc-white); }
.spc-gallery-grid-placeholder { background: var(--spc-100); display: flex; align-items: center; justify-content: center; }
.spc-gallery-grid-empty { width: 100%; height: 400px; background: var(--spc-100); display: flex; align-items: center; justify-content: center; border-radius: 8px; }

/* ============================================================ COMING SOON */
.spc-coming-soon-info { width: 100%; max-width: var(--spc-content-width); margin: 0 auto; padding: 60px 0 40px; text-align: center; }
.spc-coming-soon-info-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.spc-coming-soon-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.spc-coming-soon-title { color: #2A2A2A; font-family: 'Sofia Pro',sans-serif; font-size: 36px; font-weight: 400; margin: 0; }
.spc-coming-soon-location { color: #666666; font-family: var(--spc-font-body); font-size: 20px; font-weight: 300; margin: 0; }
.spc-coming-soon-illustration { width: 100%; max-width: var(--spc-content-width); margin: 0 auto; padding: 40px 0 80px; text-align: center; }
.spc-coming-soon-illustration-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.spc-coming-soon-img { max-width: 300px; height: auto; }
.spc-coming-soon-heading { color: #2A2A2A; font-family: 'Sofia Pro',sans-serif; font-size: 28px; font-weight: 400; margin: 0; }
.spc-coming-soon-description { color: #666666; font-family: var(--spc-font-body); font-size: 18px; font-weight: 300; max-width: 500px; margin: 0; }
.footer-spacer { height: 80px; }

/* ============================================================ RESPONSIVE — 1439px */
@media (max-width: 1439px) { .spc-breadcrumb-inner { padding: 14px 80px; } .spc-hero-overlay-content { padding: 0 80px; } .spc-key-features-inner, .spc-home-features-inner, .spc-section-divider-wrapper { padding: 0 80px; } .spc-content { padding: 20px 80px 0; } .spc-property-info-section { padding: 40px 80px; } .spc-sitemap-wrapper { padding: 14px 120px; } .spc-floorplan-display-container { padding: 14px 120px; } .spc-gallery-grid-container { padding: 20px 80px; } }

/* ============================================================ RESPONSIVE — 1199px */
@media (max-width: 1199px) { .spc-breadcrumb-inner { padding: 14px 60px; } .spc-hero { min-height: 400px; max-height: 65vh; } .spc-hero-image, .spc-hero-image img { min-height: 400px; max-height: 65vh; } .spc-hero-overlay-content { padding: 0 60px; flex-wrap: wrap; gap: 24px; } .spc-key-features-inner, .spc-home-features-inner, .spc-section-divider-wrapper { padding: 0 60px; } .spc-content { padding: 20px 60px 0; } .spc-property-info-section { padding: 40px 60px; } .spc-property-info-container { flex-direction: column; gap: 24px; } .spc-property-info-right { align-items: flex-start; } .spc-sitemap-wrapper { padding: 14px 60px; } .spc-floorplan-display-container { padding: 14px 60px; } .spc-gallery-grid-container { padding: 20px 60px; } .spc-gallery-grid { height: 400px; } .spc-cta-banner-section { padding: 40px 0 60px; } .spc-cta-banner-content { flex-direction: column; padding: 40px; } .spc-cta-banner-text { max-width: 100%; } .spc-cta-banner-image { width: 100%; height: 220px; } .spc-tour-container { height: 500px; } .spc-tour-controls { bottom: 20px; right: 20px; } .spc-key-features-grid { grid-template-columns: repeat(3, 1fr); } .spc-hd-slider { height: 460px; } }

/* ============================================================ RESPONSIVE — 1023px */
@media (max-width: 1023px) { .spc-breadcrumb-inner { padding: 12px 40px; } .spc-hero { min-height: 350px; max-height: 60vh; } .spc-hero-image, .spc-hero-image img { min-height: 350px; max-height: 60vh; } .spc-hero-overlay-content { padding: 0 40px; } .spc-key-features-inner, .spc-home-features-inner, .spc-section-divider-wrapper { padding: 0 40px; } .spc-content { padding: 20px 40px 0; } .spc-property-info-section { padding: 30px 40px; } .spc-units-row { flex-direction: column; } .spc-unit-card { width: 100%; height: 280px; } .spc-sitemap-wrapper { padding: 14px 40px; } .spc-floorplan-display-container { padding: 14px 40px; } .spc-gallery-grid-container { padding: 20px 40px; } .spc-gallery-grid { grid-template-columns: 1fr; height: auto; } .spc-gallery-grid-main { height: 300px; border-radius: 8px 8px 0 0; } .spc-gallery-grid-side { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; } .spc-gallery-grid-thumb { height: 150px; border-radius: 0; } .spc-gallery-grid-thumb:nth-child(4) { border-radius: 0 0 8px 8px; } .spc-section { padding: 60px 0; } .spc-floorplan-section, .spc-units-section, .spc-sitemap-section, .spc-virtual-tour-section, .spc-map-section { padding: 60px 0; } .spc-tour-container { height: 420px; } .spc-tour-controls { width: 120px; height: 36px; bottom: 15px; right: 15px; } .spc-cta-banner-section { padding: 40px 0 60px; } .spc-key-features-grid { grid-template-columns: repeat(2, 1fr); } .spc-hd-slider { height: 400px; } }

/* ============================================================ RESPONSIVE — 767px */
@media (max-width: 767px) { .spc-breadcrumb-inner { padding: 10px 20px; } .spc-hero { min-height: 300px; max-height: 55vh; } .spc-hero-image, .spc-hero-image img { min-height: 300px; max-height: 55vh; } .spc-hero-overlay-content { padding: 0 20px; } .spc-hero-title { font-size: 24px; } .spc-key-features-inner, .spc-home-features-inner, .spc-section-divider-wrapper { padding: 0 20px; } .spc-key-features-section { padding: 40px 0 40px; } .spc-home-features-section { padding: 40px 0 60px; } .spc-hf-heading { font-size: 24px; } .spc-hf-tab { font-size: 13px; padding: 8px 16px; } .spc-key-features-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; } .spc-hd-slider { height: 320px; } .spc-hd-arrow { width: 32px !important; height: 32px !important; } .spc-hd-arrow .material-symbols-outlined { font-size: 18px; } .spc-hf-feat-description li { max-width: 100%; } .spc-hf-feat-description ul, .spc-hf-feat-description ol { columns: 1; column-gap: 0; } .spc-section-heading { font-size: 24px; } .spc-content { padding: 20px 20px 0; } .spc-property-info-section { padding: 24px 20px; } .spc-property-title { font-size: 24px; } .spc-price-value { font-size: 24px; } .spc-property-actions { flex-direction: column; gap: 12px; align-items: flex-start; } .spc-section { padding: 40px 0; } .spc-floorplan-section, .spc-units-section, .spc-sitemap-section, .spc-virtual-tour-section, .spc-map-section { padding: 40px 0; } .spc-floorplan-header { flex-direction: column; align-items: flex-start; gap: 20px; } .spc-floorplan-dropdown-container { width: 100%; max-width: 300px; } .spc-floorplan-display-container { padding: 15px 20px; } .spc-sitemap-wrapper { padding: 14px 20px; } .spc-gallery-grid-container { padding: 16px 20px; } .spc-gallery-grid-main { height: 250px; } .spc-gallery-grid-side { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } .spc-gallery-grid-thumb { height: 120px; } .spc-map-container { height: 350px; } .spc-tour-container { height: 350px; } .spc-tour-controls { width: 110px; height: 34px; bottom: 12px; right: 12px; } .spc-cta-banner-section { padding: 24px 0 40px; } .spc-cta-banner-content { padding: 24px 20px; } .spc-cta-banner-title { font-size: 24px; } .spc-cta-banner-image { height: 180px; } }

/* ============================================================ RESPONSIVE — 480px */
@media (max-width: 480px) { .spc-breadcrumb-inner { padding: 8px 16px; } .spc-hero { min-height: 280px; max-height: 50vh; } .spc-hero-image, .spc-hero-image img { min-height: 280px; max-height: 50vh; } .spc-hero-overlay-content { padding: 0 16px; } .spc-hero-title { font-size: 20px; } .spc-hero-badge { font-size: 12px; padding: 4px 12px; } .spc-key-features-inner, .spc-home-features-inner, .spc-section-divider-wrapper { padding: 0 16px; } .spc-key-features-grid { grid-template-columns: 1fr 1fr; gap: 14px 16px; } .spc-kf-text { font-size: 14px; } .spc-hd-slider { height: 260px; } .spc-hd-badge { font-size: 12px; padding: 4px 12px; } .spc-hf-heading { font-size: 20px; } .spc-hf-tab { font-size: 12px; padding: 7px 14px; } .spc-section-heading { font-size: 20px; } .spc-content { padding: 20px 16px 0; } .spc-property-info-section { padding: 20px 16px; } .spc-property-title { font-size: 22px; } .spc-property-name-separator { margin: 0 8px; } .spc-property-location-highlight { font-size: 16px; } .spc-price-value { font-size: 22px; } .spc-action-btn { padding: 10px 20px; font-size: 16px; } .spc-property-actions { flex-direction: column; gap: 12px; align-items: flex-start; } .spc-section { padding: 30px 0; } .spc-floorplan-section, .spc-units-section, .spc-sitemap-section, .spc-virtual-tour-section, .spc-map-section { padding: 30px 0; } .spc-phase-header { flex-direction: column; gap: 16px; align-items: flex-start; } .spc-unit-card { height: 240px; } .spc-unit-card-overlay { padding: 20px; } .spc-unit-card-name, .spc-unit-card-price { font-size: 16px; } .spc-unit-card-spec, .spc-unit-card-sqft { font-size: 13px; } .spc-floorplan-display-container { padding: 10px 16px; } .spc-sitemap-wrapper { padding: 10px 16px; } .spc-gallery-grid-container { padding: 12px 16px; } .spc-gallery-grid-main { height: 200px; } .spc-gallery-grid-thumb { height: 100px; } .spc-map-container { height: 280px; } .spc-tour-container { height: 280px; } .spc-tour-controls { width: 100px; height: 32px; bottom: 10px; right: 10px; } .spc-unit-specs { flex-wrap: wrap; height: auto; } .spc-unit-spec { flex: 1 1 50%; min-width: 50%; } .spc-unit-spec-beds, .spc-unit-spec-baths { flex: 1 1 50%; width: auto; } .footer-spacer { height: 40px; } .spc-cta-banner-section { padding: 20px 0 40px; } .spc-cta-banner-title { font-size: 22px; } .spc-cta-banner-image { height: 160px; } }

/* ============================================================ MAP V2 */
.spc-map-v2 { padding: 80px 0; }
.spc-map-v2-container { display: flex; flex-direction: row; width: 100%; min-height: 500px; overflow: hidden; border-radius: 8px; border: 1px solid var(--spc-300); background: var(--spc-100); }
.spc-map-sidebar { width: 320px; min-width: 320px; max-width: 320px; background: var(--spc-100); padding: 18px 21px; display: flex; flex-direction: column; gap: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; flex-shrink: 0; box-sizing: border-box; }
.spc-map-sidebar-item { display: flex; align-items: center; gap: 20px; padding: 0; cursor: pointer; transition: opacity 0.2s ease; }
.spc-map-sidebar-item:hover { opacity: 0.75; }
.spc-map-sidebar-info { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.spc-map-sidebar-category { font-family: 'Afacad Flux', sans-serif; font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: normal; }
.spc-map-sidebar-name { color: var(--spc-primary); font-family: 'Afacad Flux', sans-serif; font-size: 18px; font-weight: 500; line-height: normal; }
.spc-map-sidebar-meta { display: flex; flex-direction: column; gap: 5px; }
.spc-map-sidebar-address { color: var(--spc-light-text); font-family: 'Afacad Flux', sans-serif; font-size: 14px; font-weight: 400; line-height: normal; }
.spc-map-sidebar-distance { color: var(--spc-light-text); font-family: 'Afacad Flux', sans-serif; font-size: 14px; font-weight: 400; line-height: normal; }
.spc-map-sidebar-dot { display: none; }
.spc-map-sidebar-divider { width: 100%; height: 0; border: none; border-top: 1px solid var(--spc-300); margin: 20px 0; }
.spc-map-marker-icon { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; }
.spc-map-marker-icon svg { display: block; flex-shrink: 0; }
.spc-marker-home { width: 28px; height: 28px; padding: 6px; background: var(--spc-primary); border-radius: 16px; box-shadow: 3px 5px 6px 2px rgba(0, 0, 0, 0.40); outline: 2px solid var(--spc-light-text); outline-offset: -2px; box-sizing: border-box; }
.spc-marker-entertainment, .spc-marker-restaurants, .spc-marker-shopping { width: 24px; height: 24px; padding: 5px; background: var(--spc-400); border-radius: 12px; box-sizing: border-box; }
.spc-marker-fitness { width: 24px; height: 24px; padding: 5px; background: #8B5CF6; border-radius: 12px; box-sizing: border-box; }
.spc-map-v2-map-wrap { flex: 1; position: relative; min-height: 500px; }
.spc-map-v2-map-wrap .spc-map-leaflet { width: 100%; height: 100%; min-height: 500px; z-index: 1; }
.spc-map-v2-map-wrap .spc-map-zoom { position: absolute; right: 20px; bottom: 20px; z-index: 10; }
.spc-map-v2 .leaflet-control-zoom, .spc-map-v2 .leaflet-control-attribution { display: none !important; }

@media (max-width: 1439px) { .spc-map-sidebar { width: 300px; min-width: 300px; max-width: 300px; padding: 18px 20px; } }
@media (max-width: 1199px) { .spc-map-v2-container { min-height: 450px; } .spc-map-sidebar { width: 280px; min-width: 280px; max-width: 280px; padding: 16px 18px; } .spc-map-v2-map-wrap { min-height: 450px; } .spc-map-v2-map-wrap .spc-map-leaflet { min-height: 450px; } }
@media (max-width: 1023px) { .spc-map-v2-container { flex-direction: column; min-height: auto; border-radius: 8px; } .spc-map-sidebar { width: 100%; min-width: 100%; max-width: 100%; max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px; border-bottom: 1px solid var(--spc-300); border-radius: 8px 8px 0 0; } .spc-map-v2-map-wrap { min-height: 400px; height: 400px; } .spc-map-v2-map-wrap .spc-map-leaflet { min-height: 400px; height: 100%; } }
@media (max-width: 767px) { .spc-map-v2 { padding: 40px 0; } .spc-map-v2-container { flex-direction: column; min-height: auto; border-radius: 8px; } .spc-map-sidebar { width: 100%; min-width: 100%; max-width: 100%; max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; border-bottom: 1px solid var(--spc-300); } .spc-map-sidebar-name { font-size: 16px; } .spc-map-sidebar-divider { margin: 16px 0; } .spc-map-v2-map-wrap { min-height: 350px; height: 350px; } .spc-map-v2-map-wrap .spc-map-leaflet { min-height: 350px; height: 100%; } .spc-map-v2-map-wrap .spc-map-zoom { right: 12px; bottom: 12px; } }
@media (max-width: 480px) { .spc-map-v2 { padding: 30px 0; } .spc-map-v2-container { border-radius: 8px; } .spc-map-sidebar { max-height: 240px; padding: 14px 16px; } .spc-map-sidebar-name { font-size: 15px; } .spc-map-sidebar-category { font-size: 12px; } .spc-map-sidebar-address, .spc-map-sidebar-distance { font-size: 13px; } .spc-map-sidebar-divider { margin: 14px 0; } .spc-map-v2-map-wrap { min-height: 300px; height: 300px; } .spc-map-v2-map-wrap .spc-map-leaflet { min-height: 300px; height: 100%; } .spc-map-v2-map-wrap .spc-map-zoom { right: 10px; bottom: 10px; } }

/* ============================================================ v5.41 — Badge Pills */
.spc-property-badge-pill { display: inline-flex; padding: 5px 20px; align-items: center; gap: 10px; border-radius: 50px; border: 1px solid var(--spc-300, #E8E5DF); background: var(--spc-white, #FFFFFF); color: #2A2A2A; font-family: 'Afacad Flux', sans-serif; font-size: 16px; font-weight: 400; white-space: nowrap; }
.spc-property-badge-pill.spc-property-badge-estimated { background: var(--spc-100, #FAF9F7); }
.spc-property-badge-label { font-weight: 400; color: #2A2A2A; }
.spc-property-badge-bold { font-weight: 500; color: #2A2A2A; }
@media (max-width: 767px) { .spc-property-badge-pill { padding: 4px 16px; font-size: 14px; } }
@media (max-width: 480px) { .spc-property-badge-pill { padding: 4px 12px; font-size: 13px; } }

/* v5.41 Unit Badges */
.spc-unit-badge { padding: 5px 14px !important; background: #FFFFFF !important; border-radius: 50px !important; outline: 1px solid var(--spc-300, #E8E5DF) !important; outline-offset: -1px !important; font-family: 'Afacad Flux', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #2A2A2A !important; text-transform: capitalize !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; }
.spc-unit-badge.spc-unit-badge-frosted { background: rgba(255, 255, 255, 0.50) !important; backdrop-filter: blur(2.5px) !important; -webkit-backdrop-filter: blur(2.5px) !important; }

/* ============================================================ v5.42 — FAQ */
.spc-faq-section { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); background: var(--spc-white, #FFFFFF); padding: 60px 0; display: flex; justify-content: center; }
.spc-faq-inner { width: 100%; max-width: var(--spc-content-width, 1200px); display: flex; flex-direction: column; align-items: center; gap: 56px; }
.spc-faq-heading { width: 100%; color: #2A2A2A; font-family: 'Sofia Pro', 'Sofia Sans', sans-serif; font-size: 36px; font-weight: 400; margin: 0; }
.spc-faq-list { width: 867px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.spc-faq-divider { width: 1000px; max-width: 100%; height: 0; border: none; border-top: 1px solid var(--spc-400, #CCC8C0); }
.spc-faq-item { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.spc-faq-question-row { width: 100%; display: flex; align-items: center; gap: 20px; }
.spc-faq-number { color: #2A2A2A; font-family: 'Afacad Flux', sans-serif; font-size: 18px; font-weight: 400; white-space: nowrap; flex-shrink: 0; }
.spc-faq-question { color: #2A2A2A; font-family: 'Afacad Flux', sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; flex: 1; }
.spc-faq-answer { width: 100%; color: #2A2A2A; font-family: 'Afacad Flux', sans-serif; font-size: 18px; font-weight: 300; line-height: 1.7; }
.spc-faq-answer p { margin: 0 0 12px 0; }
.spc-faq-answer p:last-child { margin-bottom: 0; }
@media (max-width: 1439px) { .spc-faq-inner { padding: 0 80px; } }
@media (max-width: 1199px) { .spc-faq-inner { padding: 0 60px; } .spc-faq-list { width: 100%; } .spc-faq-divider { width: 100%; } }
@media (max-width: 1023px) { .spc-faq-section { padding: 50px 0; } .spc-faq-inner { padding: 0 40px; gap: 40px; } }
@media (max-width: 767px) { .spc-faq-section { padding: 40px 0; } .spc-faq-inner { padding: 0 20px; gap: 32px; } .spc-faq-heading { font-size: 28px; } .spc-faq-list { gap: 24px; } .spc-faq-question { font-size: 20px; } .spc-faq-number { font-size: 16px; } .spc-faq-answer { font-size: 16px; } }
@media (max-width: 480px) { .spc-faq-section { padding: 30px 0; } .spc-faq-inner { padding: 0 16px; gap: 28px; } .spc-faq-heading { font-size: 24px; } .spc-faq-list { gap: 20px; } .spc-faq-question-row { gap: 14px; } .spc-faq-question { font-size: 18px; } .spc-faq-number { font-size: 14px; } .spc-faq-answer { font-size: 15px; } }

/* ============================================================ v5.43 — Community Explore Spacing */
.spc-community-explore-section { padding: 80px 0 0 0; }
.spc-community-explore-section .fhv5-section.fhv5-parent-mode { padding: 30px 0 80px 0; }
.spc-community-explore-section .spc-community-explore-inner { gap: 0; }
.spc-community-explore-section .spc-community-explore-header { padding-bottom: 0; }
.spc-community-explore-section .fhv5-section .al-heading-section { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }

/* ============================================================ v5.44 — Unit Card Hover + Gradient Fix */
.spc-unit-card-overlay { background: linear-gradient(to top, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.50) 25%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 65%, rgba(0,0,0,0) 100%) !important; }
.spc-unit-card { cursor: default !important; }
.spc-unit-card:hover { transform: none !important; }
.spc-unit-card:hover .spc-unit-card-img img { transform: none !important; }
.spc-unit-card.spc-unit-hover-active .spc-unit-card-img img { transform: scale(1.05) !important; }
.spc-unit-card .spc-unit-card-overlay { pointer-events: none !important; }
.spc-unit-hover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0000004D; opacity: 0; pointer-events: none; z-index: 3; display: flex; align-items: center; justify-content: center; transition: opacity 0.25s ease; }
.spc-unit-card.spc-unit-hover-active .spc-unit-hover-overlay { opacity: 1; pointer-events: auto; }
.spc-unit-view-home-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 25px; border-radius: 50px; border: 0.5px solid #2A2A2A; background: #FFFFFF; color: #2A2A2A; font-family: 'Afacad Flux', sans-serif; font-size: 18px; font-weight: 400; text-transform: capitalize; text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; z-index: 4; transition: background 0.2s ease, color 0.2s ease; }
.spc-unit-view-home-btn:hover { background: #5A4F42; color: #FFFFFF; }
@media (max-width: 1199px) and (min-width: 1024px) { .spc-unit-view-home-btn { font-size: 16px; padding: 9px 22px; } }
@media (max-width: 1023px) { .spc-unit-view-home-btn { font-size: 16px; padding: 9px 22px; } }
@media (max-width: 767px) { .spc-unit-view-home-btn { font-size: 16px; padding: 9px 20px; } }
@media (max-width: 480px) { .spc-unit-view-home-btn { font-size: 15px; padding: 8px 18px; } }


/* ============================================================
   v6.3 — LIGHTBOX REDESIGN (Figma Final)
   Same as single-property v8.5.3
   Overrides old .spc-lightbox via higher specificity + !important
   ============================================================ */
.spc-lightbox { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0,0,0,0.80) !important; backdrop-filter: blur(2.5px) !important; -webkit-backdrop-filter: blur(2.5px) !important; z-index: 99999 !important; display: none !important; margin: 0 !important; padding: 0 !important; }
.spc-lightbox.active { display: block !important; }

/* Close — bare X icon, 40x40 tap area */
.spc-lightbox .spc-lightbox-close { position: fixed !important; top: 34px !important; right: 35px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; cursor: pointer !important; display: flex !important; justify-content: center !important; align-items: center !important; z-index: 100001 !important; opacity: 1 !important; visibility: visible !important; -webkit-tap-highlight-color: transparent !important; transition: opacity 0.2s ease !important; transform: none !important; }
.spc-lightbox .spc-lightbox-close:hover, .spc-lightbox .spc-lightbox-close:focus, .spc-lightbox .spc-lightbox-close:active { opacity: 0.7 !important; outline: none !important; border: none !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
.spc-lightbox .spc-lightbox-close .material-symbols-outlined { display: none !important; }
.spc-lightbox .spc-lightbox-close svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; display: block !important; }

/* Arrows — 40x40 circle, 1px white border */
.spc-lightbox .spc-lightbox-nav { position: fixed !important; top: 50% !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 8px !important; margin: 0 !important; background: transparent !important; border: 1px solid #FFFFFF !important; border-radius: 20px !important; outline: none !important; box-shadow: none !important; cursor: pointer !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; z-index: 100001 !important; opacity: 1 !important; visibility: visible !important; -webkit-tap-highlight-color: transparent !important; -webkit-appearance: none !important; appearance: none !important; }
.spc-lightbox .spc-lightbox-nav:hover, .spc-lightbox .spc-lightbox-nav:focus, .spc-lightbox .spc-lightbox-nav:active, .spc-lightbox .spc-lightbox-nav:focus-visible, .spc-lightbox .spc-lightbox-nav:disabled { background: transparent !important; border: 1px solid #FFFFFF !important; outline: none !important; box-shadow: none !important; opacity: 1 !important; transform: translateY(-50%) !important; }
.spc-lightbox .spc-lightbox-prev { left: 36px !important; right: auto !important; }
.spc-lightbox .spc-lightbox-next { right: 36px !important; left: auto !important; }
.spc-lightbox .spc-lightbox-nav .material-symbols-outlined { display: none !important; }
.spc-lightbox .spc-lightbox-nav svg { width: 24px !important; height: 24px !important; flex-shrink: 0 !important; display: block !important; }

/* Image — centered, max bounds */
.spc-lightbox .spc-lightbox-image { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; max-width: 1200px !important; max-height: 800px !important; width: calc(100% - 200px) !important; height: calc(100% - 200px) !important; display: flex !important; justify-content: center !important; align-items: center !important; z-index: 100000 !important; padding: 0 !important; }
.spc-lightbox .spc-lightbox-image img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; display: block !important; }

/* Counter — fixed bottom center */
.spc-lightbox .spc-lightbox-counter { position: fixed !important; bottom: 40px !important; left: 50% !important; transform: translateX(-50%) !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 15px !important; z-index: 100001 !important; }
.spc-lightbox .spc-lightbox-counter span { color: #FFFFFF !important; font-size: 18px !important; font-family: 'Afacad Flux', sans-serif !important; font-weight: 400 !important; }

/* Hide old controls wrapper */
.spc-lightbox .spc-lightbox-controls { display: none !important; }

/* Lightbox responsive — 1023px */
@media (max-width: 1023px) { .spc-lightbox .spc-lightbox-image { width: calc(100% - 160px) !important; height: calc(100% - 180px) !important; } .spc-lightbox .spc-lightbox-prev { left: 20px !important; } .spc-lightbox .spc-lightbox-next { right: 20px !important; } .spc-lightbox .spc-lightbox-close { top: 20px !important; right: 20px !important; } .spc-lightbox .spc-lightbox-counter { bottom: 28px !important; } }

/* Lightbox responsive — 767px */
@media (max-width: 767px) { .spc-lightbox .spc-lightbox-image { width: calc(100% - 110px) !important; height: calc(100% - 160px) !important; } .spc-lightbox .spc-lightbox-prev { left: 10px !important; } .spc-lightbox .spc-lightbox-next { right: 10px !important; } .spc-lightbox .spc-lightbox-nav { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 6px !important; border: 1px solid #FFFFFF !important; border-radius: 18px !important; } .spc-lightbox .spc-lightbox-nav:hover, .spc-lightbox .spc-lightbox-nav:focus, .spc-lightbox .spc-lightbox-nav:active { border: 1px solid #FFFFFF !important; } .spc-lightbox .spc-lightbox-nav svg { width: 20px !important; height: 20px !important; } .spc-lightbox .spc-lightbox-close { top: 14px !important; right: 14px !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } .spc-lightbox .spc-lightbox-close svg { width: 12px !important; height: 12px !important; } .spc-lightbox .spc-lightbox-counter { bottom: 20px !important; } .spc-lightbox .spc-lightbox-counter span { font-size: 16px !important; } }

/* Lightbox responsive — 480px */
@media (max-width: 480px) { .spc-lightbox .spc-lightbox-image { width: calc(100% - 90px) !important; height: calc(100% - 140px) !important; } .spc-lightbox .spc-lightbox-prev { left: 8px !important; } .spc-lightbox .spc-lightbox-next { right: 8px !important; } .spc-lightbox .spc-lightbox-nav { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; padding: 5px !important; border: 1px solid #FFFFFF !important; border-radius: 16px !important; } .spc-lightbox .spc-lightbox-nav:hover, .spc-lightbox .spc-lightbox-nav:focus, .spc-lightbox .spc-lightbox-nav:active { border: 1px solid #FFFFFF !important; } .spc-lightbox .spc-lightbox-nav svg { width: 18px !important; height: 18px !important; } .spc-lightbox .spc-lightbox-close { top: 10px !important; right: 10px !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } .spc-lightbox .spc-lightbox-close svg { width: 10px !important; height: 10px !important; } .spc-lightbox .spc-lightbox-counter { bottom: 16px !important; } .spc-lightbox .spc-lightbox-counter span { font-size: 14px !important; } }

/* Lightbox responsive — 375px */
@media (max-width: 375px) { .spc-lightbox .spc-lightbox-image { width: calc(100% - 76px) !important; height: calc(100% - 120px) !important; } .spc-lightbox .spc-lightbox-prev { left: 6px !important; } .spc-lightbox .spc-lightbox-next { right: 6px !important; } .spc-lightbox .spc-lightbox-nav { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; padding: 4px !important; border: 1px solid #FFFFFF !important; border-radius: 15px !important; } .spc-lightbox .spc-lightbox-nav:hover, .spc-lightbox .spc-lightbox-nav:focus, .spc-lightbox .spc-lightbox-nav:active { border: 1px solid #FFFFFF !important; } .spc-lightbox .spc-lightbox-nav svg { width: 16px !important; height: 16px !important; } .spc-lightbox .spc-lightbox-close { top: 8px !important; right: 8px !important; width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; } .spc-lightbox .spc-lightbox-close svg { width: 10px !important; height: 10px !important; } .spc-lightbox .spc-lightbox-counter { bottom: 12px !important; } .spc-lightbox .spc-lightbox-counter span { font-size: 13px !important; } }

/* Lightbox responsive — 320px */
@media (max-width: 320px) { .spc-lightbox .spc-lightbox-image { width: calc(100% - 66px) !important; height: calc(100% - 110px) !important; } .spc-lightbox .spc-lightbox-prev { left: 4px !important; } .spc-lightbox .spc-lightbox-next { right: 4px !important; } .spc-lightbox .spc-lightbox-nav { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; padding: 3px !important; border: 1px solid #FFFFFF !important; border-radius: 14px !important; } .spc-lightbox .spc-lightbox-nav:hover, .spc-lightbox .spc-lightbox-nav:focus, .spc-lightbox .spc-lightbox-nav:active { border: 1px solid #FFFFFF !important; } .spc-lightbox .spc-lightbox-nav svg { width: 14px !important; height: 14px !important; } .spc-lightbox .spc-lightbox-close { top: 6px !important; right: 6px !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; } .spc-lightbox .spc-lightbox-close svg { width: 10px !important; height: 10px !important; } .spc-lightbox .spc-lightbox-counter { bottom: 10px !important; } .spc-lightbox .spc-lightbox-counter span { font-size: 12px !important; } }