/* Property Detail Page Styles */
/* ============================================
   PROPERTY DETAILS PAGE
   ============================================ */
.property-details-page {
    padding-top: 80px;
    min-height: 100vh;
    background: white;
    position: relative;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Property Content Wrapper - for sidebar height calculation */
.property-content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

.page-breadcrumb {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #9A9A9A;
}

.page-breadcrumb a {
    color: #9A9A9A;
    text-decoration: none;
}

.page-breadcrumb a:hover {
    color: #083169;
}

/* Property Title Bar (above gallery) */
.property-title-bar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.property-title-left h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212121;
    margin-bottom: 0.25rem;
}

.property-title-left .property-location {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #868686;
    font-size: 0.9375rem;
}

.property-title-right {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.btn-text-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #212121;
    padding: 0.25rem 0;
    transition: color 0.2s;
}

.btn-text-icon:hover {
    color: #083169;
}

.btn-text-icon.active {
    color: #dc2626;
}

.btn-text-icon.btn-skip { color: #6b7280; }
.btn-text-icon.btn-skip:hover { color: #374151; }
.btn-text-icon.btn-undo-title { color: #d97706; }
.btn-text-icon.btn-undo-title:hover { color: #b45309; }

/* Not Interested Banner */
.skipped-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 var(--page-padding, 1.5rem) 16px;
    color: #92400e;
    font-size: 0.875rem;
}
.skipped-banner svg { flex-shrink: 0; color: #d97706; }
.skipped-banner span { flex: 1; }
.btn-undo-skip {
    background: #fff;
    border: 1px solid #d97706;
    color: #d97706;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.btn-undo-skip:hover { background: #d97706; color: #fff; }

/* Gallery - Bento Grid */
.gallery-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Bento Grid Gallery — matches Figma: 1224×416, main 700px, side 512px, gap 12px */
.gallery-bento {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    height: 416px;
    overflow: hidden;
    border-radius: 24px;
}

.gallery-bento-main {
    position: relative;
    flex: 0 0 57.2%;   /* 700/1224 ≈ 57.2% */
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: 24px 0 0 24px;
}

.gallery-bento-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    min-width: 100%;
    min-height: 100%;
}

.gallery-bento-side {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    overflow: hidden;
}

.gallery-bento-thumb {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.gallery-bento-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.gallery-bento-thumb:hover img {
    transform: scale(1.05);
}

/* === Adaptive layouts per image count === */

/* 1 image only: full-width, all corners rounded */
.bento-side-0 {
    border-radius: 24px;
}

.bento-side-0 .gallery-bento-main {
    flex: 1 1 100%;
    border-radius: 24px;
}

/* 2 images: main + 1 tall side */
.bento-side-1 .gallery-bento-thumb {
    width: 100%;
    height: 100%;
    border-radius: 0 24px 24px 0;
}

/* 3 images: main + 2 stacked vertically */
.bento-side-2 .gallery-bento-thumb {
    width: 100%;
    height: calc(50% - 6px);    /* (416 - 12) / 2 = 202 */
}

.bento-side-2 .gallery-bento-thumb:first-child {
    border-radius: 0 24px 0 0;
}

.bento-side-2 .gallery-bento-thumb:last-child {
    border-radius: 0 0 24px 0;
}

/* 4 images: main + 1 wide top + 2 small bottom */
.bento-side-3 .gallery-bento-thumb {
    height: calc(50% - 6px);    /* 202px */
}

.bento-side-3 .gallery-bento-thumb:nth-child(1) {
    width: 100%;
    border-radius: 0 24px 0 0;
}

.bento-side-3 .gallery-bento-thumb:nth-child(2),
.bento-side-3 .gallery-bento-thumb:nth-child(3) {
    width: calc(50% - 6px);
}

.bento-side-3 .gallery-bento-thumb:nth-child(3) {
    border-radius: 0 0 24px 0;
}

/* 5+ images: main + 2×2 grid (default — each ~250×202) */
.bento-side-4 .gallery-bento-thumb {
    width: calc(50% - 6px);     /* (512 - 12) / 2 = 250 */
    height: calc(50% - 6px);    /* (416 - 12) / 2 = 202 */
}

.bento-side-4 .gallery-bento-thumb:nth-child(2) {
    border-radius: 0 24px 0 0;
}

.bento-side-4 .gallery-bento-thumb:nth-child(4) {
    border-radius: 0 0 24px 0;
}

/* Dark overlay on right-column images 2 & 4 (matching Figma Rectangle 6 & 7) */
.bento-side-4 .gallery-bento-thumb:nth-child(2):not(.has-overlay)::after,
.bento-side-4 .gallery-bento-thumb:nth-child(4):not(.has-overlay)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* "See all photos" overlay on last thumb */
.gallery-bento-thumb.has-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 5;
}

.gallery-nav:hover {
    background: white;
    box-shadow: var(--shadow-md);
}

.gallery-nav.prev { left: 1rem; }
.gallery-nav.next { right: 1rem; }

.gallery-badge {
    position: absolute;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 5;
}

.gallery-badge.virtual-tour {
    top: 1rem;
    left: 1rem;
    color: var(--primary-blue);
}

.gallery-counter {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.see-all-photos-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 2;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.see-all-photos-overlay:hover {
    background: rgba(0, 0, 0, 0.8);
}

.see-all-photos-overlay svg {
    color: white;
}

.see-all-photos-overlay span {
    font-size: 0.875rem;
    font-weight: 600;
}

.no-image-placeholder {
    height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: var(--radius-xl);
    color: var(--text-light);
    gap: 1rem;
}

/* Property Header - now inside content grid */
.property-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.property-header-section {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.property-header-main h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212121;
    margin-bottom: 0.5rem;
}

.property-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #868686;
    font-size: 1rem;
}

.property-header-actions {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.property-price-box {
    text-align: right;
}

.price-label {
    display: block;
    font-size: 0.875rem;
    color: #9A9A9A;
}

.price-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: #083169;
}

.price-date {
    display: block;
    font-size: 0.8125rem;
    color: #AEAEAE;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-action {
    width: 44px;
    height: 44px;
    border: 1px solid #F3F3F3;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #868686;
}

.btn-action:hover {
    border-color: #083169;
    color: #083169;
}

.btn-action.active {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
}

/* Gallery overlay action buttons (share/save) */
.gallery-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 5;
}

.gallery-actions .btn-action {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: none;
    color: #212121;
}

.gallery-actions .btn-action:hover {
    background: white;
    color: #083169;
}

.gallery-actions .btn-action.active {
    background: #fee2e2;
    color: #dc2626;
}

/* Quick Stats - inside content grid */
.quick-stats-inline {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Quick Stats - Square Cards (legacy full-width) */
.quick-stats {
    max-width: 1400px;
    margin: 0 auto 2rem;
    padding: 0 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-item {
    flex: 1;
    min-width: 127px;
    max-width: 140px;
    aspect-ratio: 1;
    background: white;
    padding: 1rem;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #F3F3F3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stat-item:hover {
    border-color: #CED6E1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.stat-item svg {
    color: #083169;
    margin-bottom: 0.25rem;
    width: 28px;
    height: 28px;
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: #9A9A9A;
    margin-bottom: 0;
}

.stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #212121;
}

/* Property Content Grid */
.property-content-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2.5rem;
    position: relative;
    align-items: start;
}

.property-main-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.content-section {
    background: white;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid #F3F3F3;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.content-section h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #F3F3F3;
}

.description-text {
    color: #494949;
    line-height: 1.7;
}

.description-text.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-show-more {
    background: none;
    border: 1.5px solid var(--primary-blue, #083169);
    color: var(--primary-blue, #083169);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
}
.btn-show-more:hover {
    background: var(--primary-blue, #083169);
    color: white;
}
.btn-show-more:hover svg { stroke: white; }
[data-theme="dark"] .btn-show-more {
    border-color: #93c5fd;
    color: #93c5fd;
}
[data-theme="dark"] .btn-show-more:hover {
    background: #93c5fd;
    color: #0f172a;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #FAFAFA;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #212121;
    box-sizing: border-box;
    min-width: 0;
}

.feature-item svg {
    color: #059669;
    flex-shrink: 0;
}

/* Property Details Grid (Toronto Market fields) */
.property-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--neutral-100, #F3F3F3);
}

.detail-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #9A9A9A;
}

.detail-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212121;
    text-align: right;
}

/* Map Container */
.map-container {
    height: 300px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-light);
}

.map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-gray);
}

.map-placeholder svg {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.btn-view-map {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* Walk Score Section */
.walkscore-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.walkscore-legend {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.walkscore-view-btn {
    padding: 0.375rem 1rem;
    background: var(--neutral-100, #F3F3F3);
    color: var(--text-dark);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.walkscore-view-btn:hover {
    background: var(--neutral-200, #D7D7D7);
}

.walkscore-scores {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.walkscore-card {
    flex: 1;
    padding: 1rem 0.75rem;
    background: white;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    text-align: center;
    min-height: 107px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.walkscore-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.walkscore-label {
    font-size: 0.75rem;
    color: #9A9A9A;
    font-weight: 500;
}

.walkscore-desc {
    font-size: 0.6875rem;
    color: #AEAEAE;
    margin-top: 0.25rem;
}

.walkscore-map-preview {
    background: #1a1a2e;
    border-radius: 24px;
    overflow: hidden;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #868686;
    font-size: 0.875rem;
}

/* Nearby Photo Grid */
.nearby-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.nearby-photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #F3F3F3;
}

.nearby-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nearby-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--neutral-100) 0%, var(--neutral-200, #D7D7D7) 100%);
    color: var(--text-light);
}

.nearby-photo-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.625rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.nearby-photo-name {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nearby-photo-type {
    font-size: 0.625rem;
    opacity: 0.8;
}

/* Stats Tabs & Charts */
.stats-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stats-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.stats-tab.active {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

.stats-chart-container,
.price-history-chart {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.chart-header select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.chart-placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 0.875rem;
}

/* Price History Table */
.price-history-table {
    margin-top: 1rem;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    overflow: hidden;
}

.price-history-table table {
    width: 100%;
    border-collapse: collapse;
}

.price-history-table th,
.price-history-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #F3F3F3;
    font-size: 0.875rem;
}

.price-history-table th {
    font-weight: 600;
    color: #9A9A9A;
    background: #FAFAFA;
}

.price-history-table .positive { color: #059669; }
.price-history-table .negative { color: #dc2626; }

/* Comparables */
.comparables-filters {
    margin-bottom: 1rem;
}

.comparables-filters select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.comparables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.comparable-card {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

.comparable-card:hover {
    transform: translateY(-2px);
}

.comparable-image {
    position: relative;
    height: 120px;
}

.comparable-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comparable-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: #dc2626;
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.comparable-badge.sold { background: #6b7280; }
.comparable-badge.rent { background: #059669; }

.comparable-info {
    padding: 0.75rem;
}

.comparable-info h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.comparable-price {
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.comparable-specs {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-gray);
}

/* Schools */
.schools-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.school-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid #F3F3F3;
    border-radius: 12px;
}

.school-rating {
    width: 48px;
    height: 48px;
    background: #083169;
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.school-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 0.25rem;
}

.school-info p {
    font-size: 0.8125rem;
    color: #9A9A9A;
}

/* Mortgage Calculator */
.mortgage-calculator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.mortgage-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-group {
    position: relative;
}

.input-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
}

.input-suffix {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    color: var(--text-gray);
    font-size: 0.875rem;
}

.mortgage-result {
    background: #FAFAFA;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #F3F3F3;
}

.monthly-payment {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.monthly-payment .label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
}

.monthly-payment .value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.payment-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.breakdown-item span:first-child {
    color: var(--text-gray);
}

.breakdown-item span:last-child {
    font-weight: 600;
}

.breakdown-item.total {
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

.breakdown-item.total span:first-child {
    color: var(--text-dark, #1a1a2e);
}

/* Total Interest */
.total-interest {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.total-interest .label {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
}

.total-interest .value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: #F59E0B;
}

/* Save Scenario Button */
.btn-save-scenario {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border: 1.5px dashed var(--border-color);
    border-radius: var(--radius-md, 8px);
    color: var(--primary-blue, #3B82F6);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save-scenario:hover {
    background: rgba(59, 130, 246, 0.04);
    border-color: var(--primary-blue, #3B82F6);
}

/* Principal vs Interest Chart */
.mortgage-chart-section {
    margin-top: 2rem;
}

.mortgage-chart-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark, #1a1a2e);
}

.mortgage-chart-container {
    background: #FAFAFA;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #F3F3F3;
}

/* Amortization Schedule */
.amortization-section {
    margin-top: 1.5rem;
}

.btn-toggle-amortization {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #FAFAFA;
    border: 1px solid #F3F3F3;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark, #1a1a2e);
    transition: background 0.2s ease;
}

.btn-toggle-amortization:hover {
    background: #F0F0F0;
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.toggle-icon.rotated {
    transform: rotate(180deg);
}

.amortization-table-wrapper {
    margin-top: 0.75rem;
    overflow-x: auto;
    border: 1px solid #F3F3F3;
    border-radius: var(--radius-md, 8px);
}

.amortization-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.amortization-table thead {
    background: #FAFAFA;
}

.amortization-table th {
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-gray);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #F3F3F3;
    white-space: nowrap;
}

.amortization-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #F8F8F8;
    white-space: nowrap;
}

.amortization-table tbody tr:hover {
    background: #FAFAFA;
}

.amortization-table tbody tr:last-child td {
    border-bottom: none;
}

/* Scenario Comparison */
.scenario-comparison-section {
    margin-top: 1.5rem;
}

.scenario-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.scenario-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
    margin: 0;
}

.btn-compare {
    padding: 0.375rem 0.875rem;
    background: var(--primary-blue, #3B82F6);
    color: white;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-compare:hover {
    background: #2563EB;
}

.scenario-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.scenario-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
    background: #FAFAFA;
    border: 1px solid #F3F3F3;
    border-radius: var(--radius-md, 8px);
    font-size: 0.8125rem;
}

.scenario-chip-label {
    font-weight: 500;
    color: var(--text-dark, #1a1a2e);
}

.scenario-chip-value {
    color: var(--primary-blue, #3B82F6);
    font-weight: 600;
}

.btn-remove-scenario {
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.btn-remove-scenario:hover {
    color: #EF4444;
}

.scenario-compare-table-wrapper {
    overflow-x: auto;
    border: 1px solid #F3F3F3;
    border-radius: var(--radius-md, 8px);
}

.scenario-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.scenario-compare-table thead {
    background: #FAFAFA;
}

.scenario-compare-table th {
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-gray);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #F3F3F3;
    white-space: nowrap;
}

.scenario-compare-table th .btn-remove-scenario {
    margin-left: 0.5rem;
    font-size: 0.75rem;
}

.scenario-compare-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #F8F8F8;
    white-space: nowrap;
}

.scenario-compare-table td.highlight {
    font-weight: 700;
    color: var(--primary-blue, #3B82F6);
}

.scenario-compare-table tbody tr:hover {
    background: #FAFAFA;
}

.scenario-compare-table tbody tr:last-child td {
    border-bottom: none;
}

/* Neighborhood Stats */
.neighborhood-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.neighborhood-stat {
    text-align: center;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.neighborhood-stat .stat-change {
    font-size: 0.75rem;
    font-weight: 600;
}

.neighborhood-stat .stat-change.positive { color: #059669; }
.neighborhood-stat .stat-change.negative { color: #dc2626; }

/* Agent Contact Card (Sidebar) */
.property-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    align-self: start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.property-sidebar::-webkit-scrollbar {
    display: none;
}

.agent-contact-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #F3F3F3;
    padding: 1.5rem;
}

.agent-contact-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: #212121;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #F3F3F3;
}

.agent-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.agent-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #F3F3F3;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.agent-item:hover,
.agent-item.selected {
    border-color: #083169;
}

.agent-item .agent-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.agent-item .agent-info {
    flex: 1;
}

.agent-item .agent-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #212121;
}

.agent-item .agent-info p {
    font-size: 0.8125rem;
    color: #9A9A9A;
    margin-bottom: 0.25rem;
}

.agent-item .agent-languages {
    color: #9A9A9A;
    font-size: 0.8125rem;
}

.agent-item .view-profile {
    font-size: 0.8125rem;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s;
}

.agent-item .view-profile:hover {
    text-decoration: underline;
}

.agent-item .agent-bio {
    font-size: 0.8125rem;
    color: #494949;
    line-height: 1.5;
    margin-bottom: 0.375rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.contact-form-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #212121;
    margin: 1.25rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #F3F3F3;
}

.agent-item .agent-rating {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--primary-gold);
    margin-bottom: 0.25rem;
}

.agent-item .agent-rating .rating-text {
    color: var(--text-gray);
    margin-left: 0.25rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-form .input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #F3F3F3;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background: white;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: white;
    box-shadow: 0 0 0 3px rgba(8, 49, 105, 0.1);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #9ca3af;
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-contact-agent {
    width: 100%;
    padding: 1rem;
    background: #083169;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.btn-contact-agent:hover {
    background: #0a3d7a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(8, 49, 105, 0.2);
}

.btn-contact-agent:active {
    transform: translateY(0);
}

.btn-contact-agent:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.contact-options {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.contact-options span {
    font-size: 0.8125rem;
    color: var(--text-gray);
}

.btn-contact-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--text-dark);
}

.btn-contact-option:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: rgba(8, 49, 105, 0.02);
}

.alert {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.alert svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-success svg {
    color: #059669;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-error svg {
    color: #dc2626;
}

.mls-info {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-gray);
    display: flex;
    gap: 0.5rem;
}

.mls-info .mls-label {
    font-weight: 600;
}

.mls-info .mls-number {
    color: var(--text-dark);
}

/* Quick Info Card */
.quick-info-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #F3F3F3;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quick-info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.quick-info-item svg {
    color: var(--primary-blue);
    flex-shrink: 0;
}

.quick-info-item > div {
    display: flex;
    flex-direction: column;
}

.quick-info-label {
    font-size: 0.75rem;
    color: var(--text-gray);
}

.quick-info-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Sidebar Action Cards (Schedule Showing / Request Info) */
.sidebar-action-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    margin-top: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.sidebar-action-card:hover {
    border-color: #083169;
}

.sidebar-action-card .action-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #F3F3F3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #083169;
}

.sidebar-action-card .action-content {
    flex: 1;
}

.sidebar-action-card .action-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 0.125rem;
}

.sidebar-action-card .action-subtitle {
    font-size: 0.8125rem;
    color: #9A9A9A;
}

.sidebar-action-card .action-arrow {
    color: #9A9A9A;
    flex-shrink: 0;
}

/* Button Loading Spinner */
.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-loading .spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-contact-agent span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Mobile Agent Button */
.mobile-agent-btn {
    display: none;
    position: fixed;
    bottom: 5rem;
    left: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 95;
}

/* Loading & Error States */
.loading-container,
.error-container {
    max-width: 600px;
    margin: 4rem auto;
    text-align: center;
    padding: 3rem;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.error-container h2 {
    margin-bottom: 1rem;
}

.error-container p {
    color: var(--text-gray);
    margin-bottom: 1.5rem;
}

.btn-primary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}


/* ============================================
   PROPERTY DETAILS - NEW SECTIONS
   ============================================ */

/* School Ratings Section */
.school-ratings-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.school-item {
    background: white;
    border: 1px solid #F3F3F3;
    border-radius: 12px;
    padding: 1.5rem;
    transition: border-color 0.2s;
}

.school-item:hover {
    border-color: #CED6E1;
}

.school-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.school-rating-circle {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
}

.school-rating-circle .rating-number {
    font-size: 1.25rem;
    font-weight: 800;
}

.school-rating-circle .rating-of-ten {
    font-size: 0.6rem;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 1px;
}

.school-rating-circle .rating-dash {
    font-size: 1.25rem;
    font-weight: 600;
    opacity: 0.7;
}

.school-type-badge {
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.school-not-rated {
    font-size: 0.8rem;
    color: #9CA3AF;
    font-style: italic;
    padding-left: 66px;
}

.school-info {
    flex: 1;
    min-width: 0;
}

.school-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 0.25rem;
}

.school-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #9A9A9A;
    align-items: center;
}

.school-distance {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.school-distance svg {
    color: #083169;
}

.school-district {
    color: #6b7280;
    font-size: 0.8rem;
}

.school-website-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #083169;
    text-decoration: none;
    margin-top: 0.25rem;
}

.school-website-link:hover {
    text-decoration: underline;
}

.school-quality-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 66px;
}

.quality-label {
    font-size: 0.875rem;
    color: var(--text-gray);
    min-width: 100px;
}

.quality-progress {
    flex: 1;
    height: 8px;
    background: var(--bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.quality-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    transition: width 0.3s;
}

.quality-score {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-blue);
    min-width: 40px;
    text-align: right;
}

@media (max-width: 480px) {
    .school-item {
        padding: 1rem;
    }
    .school-rating-circle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 8px;
    }
    .school-rating-circle .rating-number {
        font-size: 1.1rem;
    }
    .school-header {
        gap: 0.75rem;
    }
    .school-info h4 {
        font-size: 0.85rem;
    }
    .school-meta {
        gap: 0.5rem;
        font-size: 0.75rem;
    }
    .school-quality-bar {
        padding-left: 0;
        gap: 0.5rem;
    }
    .school-not-rated {
        padding-left: 0;
        font-size: 0.75rem;
    }
    .quality-label {
        min-width: 70px;
        font-size: 0.75rem;
    }
}

/* Cash Flow Analysis Section */
.cash-flow-analysis {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.cash-flow-grid {
    display: grid;
    gap: 1rem;
}

.cash-flow-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bg-light);
}

.cash-flow-item.total {
    border-top: 2px solid var(--border-color);
    border-bottom: none;
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.cash-flow-label {
    font-size: 0.9375rem;
    color: var(--text-gray);
}

.cash-flow-item.total .cash-flow-label {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1rem;
}

.cash-flow-value {
    font-weight: 600;
    color: var(--text-dark);
}

.cash-flow-value.positive {
    color: #4CAF50;
}

.cash-flow-value.negative {
    color: #F44336;
}

.cash-flow-item.total .cash-flow-value {
    font-size: 1.125rem;
}

/* Comparable Sales Section (US-074) */
.comparables-summary {
    margin-bottom: 1.5rem;
}

.comparable-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.comparable-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: #FAFAFA;
    border-radius: 12px;
    text-align: center;
}

.comparable-stat-label {
    font-size: 0.8125rem;
    color: #9A9A9A;
}

.comparable-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #083169;
}

.comparables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.comparable-card {
    background: white;
    border: 1px solid #F3F3F3;
    border-radius: 12px;
    padding: 1.25rem;
    transition: border-color 0.2s;
}

.comparable-card:hover {
    border-color: #CED6E1;
}

.comparable-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.comparable-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: #083169;
}

.comparable-date {
    font-size: 0.75rem;
    color: #9A9A9A;
}

.comparable-address {
    font-size: 0.875rem;
    color: #212121;
    margin-bottom: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comparable-specs {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: #9A9A9A;
    margin-bottom: 0.75rem;
}

.comparable-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid #F3F3F3;
}

.comparable-distance {
    font-size: 0.75rem;
    color: #9A9A9A;
}

.comparable-similarity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #212121;
    font-weight: 500;
}

.similarity-bar {
    width: 40px;
    height: 4px;
    background: #F3F3F3;
    border-radius: 2px;
    overflow: hidden;
}

.similarity-fill {
    height: 100%;
    background: #083169;
    border-radius: 2px;
}

.comparables-placeholder {
    text-align: center;
    padding: 2rem 1rem;
}

.comparables-placeholder svg {
    margin-bottom: 1rem;
}

.placeholder-title {
    font-size: 1rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 0.25rem;
}

.placeholder-text {
    font-size: 0.875rem;
    color: #9A9A9A;
}

/* Comparable Market Analysis */
.cma-table-wrapper {
    overflow-x: auto;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    margin-bottom: 1.25rem;
}

.cma-table {
    width: 100%;
    border-collapse: collapse;
}

.cma-table th {
    background: #FAFAFA;
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #9A9A9A;
    border-bottom: 1px solid #F3F3F3;
}

.cma-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #F3F3F3;
    font-size: 0.875rem;
    color: #212121;
}

.cma-table tr:last-child td {
    border-bottom: none;
}

.cma-address {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cma-price {
    font-weight: 700;
    color: #083169;
}

.cma-match {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.cma-match-bar {
    width: 48px;
    height: 4px;
    background: #F3F3F3;
    border-radius: 2px;
    overflow: hidden;
}

.cma-match-fill {
    height: 100%;
    background: #083169;
    border-radius: 2px;
}

.cma-chart-placeholder {
    background: #1a1a2e;
    border-radius: 24px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #868686;
    font-size: 0.875rem;
}

/* Sale History (minimal timeline) */
.sale-history-minimal {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-left: 1rem;
    position: relative;
}

.sale-history-minimal::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #F3F3F3;
}

.sale-history-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    position: relative;
}

.sale-history-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #083169;
    flex-shrink: 0;
    margin-top: 4px;
    z-index: 1;
}

.sale-history-dot.sold {
    background: #059669;
}

.sale-history-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sale-history-date {
    font-size: 0.8125rem;
    color: #9A9A9A;
}

.sale-history-event {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212121;
}

.sale-history-price {
    font-size: 1rem;
    font-weight: 700;
    color: #083169;
}

/* Neighborhood Insights Section */
.neighborhood-section {
    background: white;
    padding: 3rem 0;
}

.neighborhood-section .section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.neighborhood-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
    border: 1px solid #F3F3F3;
    border-radius: 24px;
    padding: 2rem;
}

.neighborhood-demographics h3,
.neighborhood-amenities h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.demo-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.demo-stat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.demo-label {
    font-size: 0.875rem;
    color: #9A9A9A;
}

.demo-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #083169;
}

.age-distribution h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 1rem;
}

.age-chart-simple {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.age-bar {
    background: #083169;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 150px;
}

.amenities-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    color: var(--text-dark);
}

.amenity-item svg {
    color: var(--primary-blue);
    flex-shrink: 0;
}

/* Comparison Section */
.comparison-section {
    background: white;
    padding: 3rem 0;
    border-top: 1px solid #F3F3F3;
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin-top: 2rem;
    background: white;
    border-radius: 16px;
    border: 1px solid #F3F3F3;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th {
    background: #FAFAFA;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #212121;
    font-size: 0.875rem;
    border-bottom: 2px solid #F3F3F3;
    white-space: nowrap;
}

.comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #F3F3F3;
    font-size: 0.9375rem;
    color: #212121;
}

.comparison-table tr.current-neighborhood {
    background: rgba(33, 150, 243, 0.05);
}

.comparison-table tr.current-neighborhood td {
    font-weight: 600;
}

.table-rating {
    display: flex;
    gap: 0.25rem;
}

.table-rating svg {
    color: #FFA500;
}

/* Expandable Comparison Table */
.comparison-subtitle {
    color: #9A9A9A;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.comparison-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.comparison-row:hover {
    background: rgba(33, 150, 243, 0.03);
}

.expand-cell {
    width: 32px;
    text-align: center;
}

.expand-chevron {
    transition: transform 0.2s ease;
    color: #9A9A9A;
}

.expand-chevron.rotated {
    transform: rotate(180deg);
}

.current-badge {
    display: inline-block;
    background: #2563EB;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.comparison-detail-row td {
    padding: 0 !important;
    border-bottom: 1px solid #F3F3F3;
}

.comparison-detail-grid {
    display: flex;
    gap: 2rem;
    padding: 1.25rem 1.5rem;
    background: #FAFBFC;
    border-top: 1px dashed #E5E7EB;
}

.comparison-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 80px;
}

.detail-score {
    font-size: 1.25rem;
    font-weight: 700;
    color: #083169;
}

.detail-score-label {
    font-size: 0.75rem;
    color: #9A9A9A;
    font-weight: 500;
}

/* Crime Safety Card */
.crime-stats-card {
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    background: #FAFBFC;
}

.crime-stats-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.crime-grade-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.crime-grade-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.crime-grade-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.crime-grade-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212121;
}

.crime-grade-detail {
    font-size: 0.8125rem;
    color: #6B7280;
}

.crime-categories {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.crime-category-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.crime-cat-name {
    font-size: 0.8125rem;
    color: #374151;
    min-width: 110px;
    flex-shrink: 0;
}

.crime-cat-bar-track {
    flex: 1;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
}

.crime-cat-bar {
    height: 100%;
    background: #083169;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.crime-cat-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #212121;
    min-width: 36px;
    text-align: right;
}

.crime-trend {
    margin-bottom: 0.75rem;
}

.crime-trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
}

.crime-trend-badge.trend-down {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.crime-trend-badge.trend-up {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

.crime-source {
    font-size: 0.75rem;
    color: #9CA3AF;
    font-style: italic;
}

.crime-stats-na {
    text-align: center;
}

.crime-na-msg {
    font-size: 0.875rem;
    color: #6B7280;
}

/* Transit Stops Section */
.transit-section {
    background: white;
    padding: 3rem 0;
    border-top: 1px solid #F3F3F3;
}

.transit-subtitle {
    color: #9A9A9A;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.transit-stops-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.transit-stop-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: #FAFBFC;
    border: 1px solid #F3F3F3;
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.transit-stop-item:hover {
    border-color: #E5E7EB;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.transit-stop-badge {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.transit-stop-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.transit-stop-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212121;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transit-stop-type {
    font-size: 0.8125rem;
    color: #9A9A9A;
}

.transit-stop-distance {
    font-size: 0.875rem;
    font-weight: 600;
    color: #083169;
    white-space: nowrap;
}

/* Age Donut Chart */
.age-donut-chart {
    margin-top: 0.5rem;
}

/* Responsive for new sections */
@media (max-width: 768px) {
    .transit-stops-list {
        grid-template-columns: 1fr;
    }

    .comparison-detail-grid {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem;
    }

    .comparison-detail-item {
        min-width: 60px;
    }

    .crime-cat-name {
        min-width: 80px;
        font-size: 0.75rem;
    }
}

/* ─── US-118: Tax Assessment History Section ─── */
.tax-assessment-section {
    background: white;
    padding: 3rem 0;
    border-top: 1px solid #F3F3F3;
}

.tax-assessment-section .section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.tax-assessment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.tax-assessment-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212121;
    margin: 0;
}

.tax-assessment-subtitle {
    color: #9A9A9A;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.btn-download-csv {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-download-csv:hover {
    background: #F9FAFB;
    border-color: #083169;
    color: #083169;
}

/* Summary Cards */
.tax-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.tax-summary-card {
    background: #FAFBFC;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tax-summary-label {
    font-size: 0.8125rem;
    color: #9A9A9A;
    font-weight: 500;
}

.tax-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #083169;
}

.tax-summary-value.positive {
    color: #059669;
}

.tax-summary-value.negative {
    color: #DC2626;
}

.tax-summary-year,
.tax-summary-percent {
    font-size: 0.8125rem;
    color: #6B7280;
}

/* Chart Container */
.tax-chart-container {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    background: white;
}

/* Assessment Table */
.tax-table-wrapper {
    overflow-x: auto;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    background: white;
    margin-bottom: 1rem;
}

.tax-assessment-table {
    width: 100%;
    border-collapse: collapse;
}

.tax-assessment-table th {
    background: #FAFAFA;
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #212121;
    font-size: 0.875rem;
    border-bottom: 2px solid #F3F3F3;
    white-space: nowrap;
}

.tax-assessment-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #F3F3F3;
    font-size: 0.9375rem;
    color: #212121;
}

.tax-assessment-table tbody tr:hover {
    background: rgba(8, 49, 105, 0.02);
}

.tax-assessment-table tbody tr:last-child td {
    border-bottom: none;
}

.yoy-change {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.yoy-change.positive {
    background: #ECFDF5;
    color: #059669;
}

.yoy-change.negative {
    background: #FEF2F2;
    color: #DC2626;
}

.yoy-change.neutral {
    color: #9A9A9A;
}

.sale-price-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 0.8125rem;
    font-weight: 600;
}

.no-sale {
    color: #D1D5DB;
}

.tax-attribution {
    text-align: right;
    font-size: 0.8125rem;
    color: #9A9A9A;
    padding: 0.5rem 0;
}

.tax-attribution a {
    color: #083169;
    text-decoration: none;
}

.tax-attribution a:hover {
    text-decoration: underline;
}

/* Responsive: Tax Assessment */
@media (max-width: 768px) {
    .tax-assessment-header {
        flex-direction: column;
        gap: 1rem;
    }

    .tax-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .tax-summary-value {
        font-size: 1.25rem;
    }

    .tax-assessment-table th,
    .tax-assessment-table td {
        padding: 0.75rem 0.625rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .tax-summary-cards {
        grid-template-columns: 1fr;
    }
}

/* Dark mode: Tax Assessment */
[data-theme="dark"] .tax-assessment-section {
    background: #0f172a;
    border-top-color: #1e293b;
}

[data-theme="dark"] .tax-assessment-header h2 {
    color: #e2e8f0;
}

[data-theme="dark"] .tax-summary-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .tax-summary-value {
    color: #93c5fd;
}

[data-theme="dark"] .tax-chart-container {
    border-color: #334155;
    background: #1e293b;
}

[data-theme="dark"] .tax-table-wrapper {
    border-color: #334155;
    background: #1e293b;
}

[data-theme="dark"] .tax-assessment-table th {
    background: #0f172a;
    color: #e2e8f0;
    border-bottom-color: #334155;
}

[data-theme="dark"] .tax-assessment-table td {
    color: #cbd5e1;
    border-bottom-color: #1e293b;
}

[data-theme="dark"] .tax-assessment-table tbody tr:hover {
    background: rgba(147, 197, 253, 0.05);
}

[data-theme="dark"] .btn-download-csv {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-download-csv:hover {
    background: #334155;
    color: #93c5fd;
}

[data-theme="dark"] .yoy-change.positive {
    background: rgba(5, 150, 105, 0.15);
}

[data-theme="dark"] .yoy-change.negative {
    background: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .sale-price-badge {
    background: rgba(37, 99, 235, 0.15);
    color: #93c5fd;
}

[data-theme="dark"] .tax-attribution {
    color: #64748b;
}

[data-theme="dark"] .tax-attribution a {
    color: #93c5fd;
}

/* Dark mode for new sections */
[data-theme="dark"] .crime-stats-card {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .crime-stats-card h3 {
    color: #e2e8f0;
}

[data-theme="dark"] .crime-grade-label {
    color: #e2e8f0;
}

[data-theme="dark"] .crime-grade-detail {
    color: #94a3b8;
}

[data-theme="dark"] .crime-cat-name {
    color: #94a3b8;
}

[data-theme="dark"] .crime-cat-bar-track {
    background: #334155;
}

[data-theme="dark"] .crime-cat-count {
    color: #e2e8f0;
}

[data-theme="dark"] .transit-section {
    background: #111827;
    border-top-color: #334155;
}

[data-theme="dark"] .transit-stop-item {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .transit-stop-name {
    color: #e2e8f0;
}

[data-theme="dark"] .transit-stop-type {
    color: #94a3b8;
}

[data-theme="dark"] .transit-stop-distance {
    color: #60a5fa;
}

[data-theme="dark"] .comparison-detail-grid {
    background: #0f172a;
    border-top-color: #334155;
}

[data-theme="dark"] .detail-score {
    color: #60a5fa;
}

[data-theme="dark"] .detail-score-label {
    color: #94a3b8;
}

[data-theme="dark"] .comparison-detail-row td {
    border-bottom-color: #334155;
}

[data-theme="dark"] .current-badge {
    background: #1d4ed8;
}

/* Property Features/Amenities */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #FAFAFA;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #212121;
    transition: background 0.2s;
}

.feature-item:hover {
    background: #F0F0F0;
}

.feature-icon {
    color: #059669;
    flex-shrink: 0;
}

.feature-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.feature-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212121;
}

.feature-value {
    font-size: 0.875rem;
    color: #9A9A9A;
}

/* Agent Rating Stars */
.agent-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.rating-stars {
    display: flex;
    gap: 0.125rem;
}

.rating-stars .star-filled {
    color: #FFA500;
}

.rating-stars .star-empty {
    color: #E0E0E0;
}

.rating-stars .star-half {
    color: #FFA500;
}

.rating-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
}

.agent-languages {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin-top: 0.25rem;
}

/* Share Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content {
    background: white;
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.share-modal {
    max-width: 600px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.btn-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.btn-close:hover {
    background: var(--bg-light);
}

.modal-body {
    padding: 1.5rem;
}

.share-social {
    margin-bottom: 2rem;
}

.share-social h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.social-share-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: white;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.2s;
}

.share-btn:hover {
    background: var(--bg-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.share-btn.facebook {
    color: #1877F2;
}

.share-btn.twitter {
    color: #1DA1F2;
}

.share-btn.whatsapp {
    color: #25D366;
}

.share-btn.email {
    color: #666;
}

.share-link h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.copy-link-container {
    display: flex;
    gap: 0.75rem;
}

.link-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: var(--text-gray);
    background: var(--bg-light);
}

.btn-copy {
    padding: 0.75rem 1.5rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-copy:hover {
    background: #1976D2;
    transform: translateY(-1px);
}

/* QR Code Section in Share Modal */
.share-qr-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.share-qr-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.share-qr-hint {
    font-size: 0.8125rem;
    color: var(--text-gray);
    margin-bottom: 1rem;
}

.share-qr-image-wrapper {
    display: inline-flex;
    padding: 1rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.share-qr-image {
    display: block;
    width: 200px;
    height: 200px;
}

/* Enhanced Contact Direct Actions */
.contact-direct-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.btn-call-agent {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-call-agent:hover {
    background: #062a58;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: white;
}

.btn-call-agent svg {
    flex-shrink: 0;
}

.btn-live-chat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: white;
    color: #25D366;
    border: 2px solid #25D366;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-live-chat:hover {
    background: #25D366;
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-live-chat svg {
    flex-shrink: 0;
}

/* Toast Notification (for Live Chat fallback) */
.toast-notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #333;
    color: white;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    max-width: 90%;
    text-align: center;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Responsive: stack call/chat buttons on small screens */
@media (max-width: 480px) {
    .contact-direct-actions {
        flex-direction: column;
    }
}

/* Full Gallery Modal */
.gallery-modal-overlay {
    background: rgba(0, 0, 0, 0.95);
    padding: 0;
}

.gallery-modal-content {
    background: black;
    border-radius: 0;
    max-width: 100%;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gallery-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.8);
}

.gallery-counter-large {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
}

.btn-close-gallery {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    color: white;
}

.btn-close-gallery:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gallery-modal-main {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.gallery-modal-image-container {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-modal-image-container img {
    max-width: 100%;
    max-height: calc(100vh - 250px);
    object-fit: contain;
}

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.gallery-nav-btn:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.gallery-nav-btn.prev {
    left: 2rem;
}

.gallery-nav-btn.next {
    right: 2rem;
}

.gallery-modal-thumbs {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.8);
    overflow-x: auto;
    max-width: 100%;
}

.gallery-modal-thumbs::-webkit-scrollbar {
    height: 6px;
}

.gallery-modal-thumbs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.gallery-modal-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.gallery-modal-thumb {
    flex-shrink: 0;
    width: 100px;
    height: 70px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.gallery-modal-thumb:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.gallery-modal-thumb.active {
    border-color: white;
}

.gallery-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* See All Photos Overlay - defined in gallery section above */

/* Responsive */
@media (max-width: 768px) {
    .neighborhood-grid {
        grid-template-columns: 1fr;
    }

    .demo-stats {
        grid-template-columns: 1fr;
    }

    .social-share-buttons {
        grid-template-columns: 1fr;
    }

    .comparison-table-wrapper {
        border-radius: 0;
    }

    .gallery-nav-btn {
        width: 40px;
        height: 40px;
    }

    .gallery-nav-btn.prev {
        left: 0.5rem;
    }

    .gallery-nav-btn.next {
        right: 0.5rem;
    }

    .gallery-modal-thumbs {
        padding: 0.75rem;
    }

    .gallery-modal-thumb {
        width: 70px;
        height: 50px;
    }
}

/* Section Container for New Sections */
.section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Similar Properties & Recommendations Section */
.similar-properties-section,
.recommendations-section {
    background: white;
    padding: 3rem 0;
    border-top: 1px solid #F3F3F3;
}

.similar-properties-section h2,
.recommendations-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212121;
    margin-bottom: 1.5rem;
}

.similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(253px, 1fr));
    gap: 1rem;
}

.similar-card {
    background: white;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.similar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: #CED6E1;
}

.similar-image {
    position: relative;
    width: 100%;
    height: 188px;
    overflow: hidden;
    margin: 12px 12px 0;
    width: calc(100% - 24px);
    border-radius: 8px;
}

.similar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.similar-card:hover .similar-image img {
    transform: scale(1.05);
}

.similar-badge {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    background: #DCF0DB;
    color: #212121;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.similar-favorite {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: background 0.2s;
    z-index: 2;
}

.similar-favorite:hover {
    background: rgba(255, 255, 255, 0.5);
}

.similar-carousel-dots {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
}

.carousel-dot {
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.2s, width 0.2s;
}

.carousel-dot.active {
    background: white;
}

.similar-info {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.similar-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #212121;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.similar-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: #083169;
    margin: 0;
}

.similar-features {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-gray);
}

.similar-features span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.similar-city {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.similar-city::before {
    content: '';
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center;
}

/* User Reviews Section */
.reviews-section {
    background: var(--bg-light, #FAFAFA);
    padding: 3.5rem 0;
    border-top: 1px solid #E5E7EB;
}

.reviews-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212121;
    margin-bottom: 0;
}

.reviews-subtitle-text {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin-top: 0.25rem;
}

.reviews-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.reviews-header-left {
    display: flex;
    flex-direction: column;
}

.reviews-summary {
    display: flex;
    align-items: center;
}

.reviews-avg-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.avg-rating-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
}

.avg-rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.avg-rating-count {
    font-size: 0.875rem;
    color: var(--text-gray);
}

.review-star {
    color: #ccc;
}

.review-star.star-full {
    color: #F5A623;
}

.review-star.star-half {
    color: #F5A623;
}

.review-star.star-empty {
    color: #ddd;
}

/* Review Cards */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-card {
    background: white;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    padding: 1.5rem;
}

.review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-author-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

.review-author-info {
    display: flex;
    flex-direction: column;
}

.review-author-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 4px;
}

.verified-badge {
    flex-shrink: 0;
}

.review-date {
    font-size: 0.8125rem;
    color: var(--text-gray);
}

.review-rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.review-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.review-comment {
    font-size: 0.9375rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

/* Detail Ratings (bar chart) */
.review-detail-ratings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--neutral-100, #F3F3F3);
}

.review-detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-detail-label {
    font-size: 0.8125rem;
    color: var(--text-gray);
    min-width: 110px;
    flex-shrink: 0;
}

.review-detail-bar {
    flex: 1;
    height: 6px;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
}

.review-detail-fill {
    height: 100%;
    background: #F5A623;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.review-detail-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
    min-width: 16px;
    text-align: right;
}

/* Agent Response */
.review-agent-response {
    background: var(--bg-light);
    border-radius: var(--radius-md, 8px);
    padding: 1rem;
    margin-top: 0.75rem;
}

.review-agent-response-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.review-response-date {
    font-weight: 400;
    color: var(--text-gray);
    margin-left: auto;
}

.review-agent-response p {
    font-size: 0.875rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
}

/* Show All Reviews Button */
.btn-show-all-reviews {
    display: block;
    width: 100%;
    padding: 0.875rem;
    margin-top: 1rem;
    background: white;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary-blue);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-show-all-reviews:hover {
    background: var(--bg-light);
    border-color: var(--primary-blue);
}

/* Placeholder (no reviews) */
.reviews-placeholder {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
}

.reviews-placeholder-icon {
    color: #D1D5DB;
    margin-bottom: 1rem;
}

.review-avatar-stack {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    border: 2px solid white;
    margin-left: -8px;
}

.review-avatar:first-child {
    margin-left: 0;
}

.reviews-coming-soon {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.reviews-subtitle {
    font-size: 0.875rem;
    color: var(--text-gray);
}

/* Reviews responsive */
@media (max-width: 768px) {
    .reviews-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-detail-ratings {
        grid-template-columns: 1fr;
    }

    .review-card-header {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Review Tabs */
.reviews-tabs {
    display: flex;
    gap: 0;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.review-tab {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray);
    background: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-tab svg {
    opacity: 0.5;
}

.review-tab.active svg {
    opacity: 1;
}

.review-tab:not(:last-child) {
    border-right: 1px solid #E5E7EB;
}

.review-tab.active {
    background: var(--primary-blue);
    color: white;
}

.review-tab-count {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

.review-tab.active .review-tab-count {
    background: rgba(255, 255, 255, 0.2);
}

/* Write Review Button */
.btn-write-review {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-write-review:hover {
    background: #062550;
}

.reviews-summary {
    justify-content: space-between;
}

/* Write Review Form */
.write-review-form {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.write-review-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.write-review-form-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.write-review-close {
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.write-review-close:hover {
    color: var(--text-dark);
    background: var(--bg-light, #F5F5F5);
}

.write-review-form h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.25rem;
}

.review-form-row {
    display: flex;
    gap: 1rem;
}

.review-form-group-flex {
    flex: 1;
}

.optional-label {
    font-weight: 400;
    color: var(--text-gray);
    font-size: 0.8125rem;
}

.detail-ratings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 2rem;
}

.review-form-group {
    margin-bottom: 1rem;
}

.review-form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.375rem;
}

.review-form-group input,
.review-form-group textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.875rem;
    font-family: inherit;
    background: white;
    color: var(--text-dark);
    transition: border-color 0.2s ease;
}

.review-form-group input:focus,
.review-form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
}

/* Rating Picker */
.rating-picker {
    display: flex;
    gap: 4px;
}

.rating-star {
    color: #ddd;
    transition: color 0.15s ease;
}

.rating-star.star-selected {
    color: #F5A623;
}

.rating-star-sm {
    color: #ddd;
    transition: color 0.15s ease;
}

.rating-star-sm.star-selected {
    color: #F5A623;
}

/* Detail Ratings Form */
.review-detail-ratings-form {
    margin-bottom: 1rem;
}

.review-detail-ratings-form > label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.detail-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0;
}

.detail-rating-row span {
    font-size: 0.8125rem;
    color: var(--text-gray);
    min-width: 80px;
}

.detail-rating-picker {
    display: flex;
    gap: 2px;
}

/* Review Form Actions */
.review-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* Review Alert Messages */
.review-alert {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.review-alert-success {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.review-alert-error {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

/* Report Review Button */
.review-card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.btn-report-review {
    background: none;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.btn-report-review:hover {
    color: #EF4444;
    background: #FEF2F2;
}

/* ── Write Review Modal (property detail) ───────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-box {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.review-modal-box { max-width: 520px; }
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 0.25rem;
}
.modal-box h3 { font-size: 1.1rem; font-weight: 700; color: #0f172a; margin: 0 0 1.5rem; }
.review-form { display: flex; flex-direction: column; gap: 1rem; }
.review-form .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: #334155; margin-bottom: 0.35rem; }
.star-picker { display: flex; gap: 0.25rem; }
.star-pick { background: none; border: none; cursor: pointer; padding: 0; }
.star-pick.lit svg { filter: drop-shadow(0 1px 2px rgba(245,158,11,0.3)); }
.form-input { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.9rem; outline: none; box-sizing: border-box; font-family: inherit; }
.form-input:focus { border-color: #083169; }
.btn-submit-review {
    width: 100%;
    padding: 0.75rem;
    background: #083169;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn-submit-review:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-submit-review:hover:not(:disabled) { background: #062756; }

/* Detail ratings in modal */
.detail-ratings-section label { display: block; font-size: 0.85rem; font-weight: 600; color: #334155; margin-bottom: 0.5rem; }
.detail-ratings-grid-modal { display: flex; flex-direction: column; gap: 0.5rem; }
.detail-rating-row-modal { display: flex; align-items: center; justify-content: space-between; }
.detail-rating-row-modal span { font-size: 0.85rem; color: #475569; min-width: 80px; }
.star-picker-sm { display: flex; gap: 0.15rem; }
.star-pick-sm { background: none; border: none; cursor: pointer; padding: 0; }
.star-pick-sm.lit svg { filter: drop-shadow(0 1px 2px rgba(245,158,11,0.3)); }

/* ── Detail Page Toast ─────────────────────────── */
.detail-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    z-index: 10001;
    animation: detail-toast-in 0.3s ease-out;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    max-width: 420px;
    cursor: pointer;
    opacity: 1;
}
.detail-toast.success { background: #059669; color: white; }
.detail-toast.error { background: #dc2626; color: white; }
@keyframes detail-toast-in { from { transform: translateY(1rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 768px) {
    .reviews-tabs {
        width: 100%;
    }

    .review-tab {
        flex: 1;
        justify-content: center;
    }

    .write-review-form {
        padding: 1.25rem;
    }

    .detail-ratings-grid {
        grid-template-columns: 1fr;
    }

    .detail-rating-row {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .review-card-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }

    .review-form-row {
        flex-direction: column;
    }
}

/* Property Timeline Section */
.timeline-section {
    background: white;
    padding: 3rem 0;
    border-top: 1px solid #F3F3F3;
}

.timeline-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212121;
    margin-bottom: 1.5rem;
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 0;
}

.timeline-item {
    display: flex;
    gap: 1.5rem;
    position: relative;
    padding-left: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 0.625rem;
    top: 2rem;
    bottom: -1.5rem;
    width: 2px;
    background: var(--border-color);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 2px var(--border-color);
    flex-shrink: 0;
    z-index: 1;
}

.timeline-dot.green {
    background: #4CAF50;
    box-shadow: 0 0 0 2px #4CAF50;
}

.timeline-dot.blue {
    background: var(--primary-blue);
    box-shadow: 0 0 0 2px var(--primary-blue);
}

.timeline-dot.orange {
    background: #FF9800;
    box-shadow: 0 0 0 2px #FF9800;
}

.timeline-dot.red {
    background: #F44336;
    box-shadow: 0 0 0 2px #F44336;
}

.timeline-dot.gray {
    background: #9E9E9E;
    box-shadow: 0 0 0 2px #9E9E9E;
}

.timeline-content {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timeline-date {
    font-size: 0.875rem;
    color: var(--text-gray);
    font-weight: 500;
}

.timeline-event {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.timeline-detail {
    font-size: 0.9375rem;
    color: var(--text-gray);
    background: var(--bg-light);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    display: inline-block;
    align-self: flex-start;
}

.timeline-desc {
    font-size: 0.9375rem;
    color: var(--text-gray);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .section-container {
        padding: 0 1rem;
    }

    .similar-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .similar-properties-section,
    .recommendations-section,
    .timeline-section {
        padding: 2rem 0;
    }

    .similar-properties-section h2,
    .recommendations-section h2,
    .timeline-section h2 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .timeline-item {
        padding-left: 1.5rem;
    }
}


/* ===== Property Detail Page - Mobile Responsive ===== */
@media (max-width: 768px) {
    /* Breadcrumb — hide long property title, prevent overflow */
    .page-breadcrumb {
        padding: 0.5rem 1rem;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .page-breadcrumb span:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    /* Title bar */
    .property-title-bar {
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .property-title-left {
        width: 100%;
    }

    .property-title-left h1 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .property-title-right {
        width: 100%;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    /* Gallery bento → single image on mobile */
    .gallery-section {
        padding: 0;
    }

    .gallery-bento {
        flex-direction: column;
        height: auto;
        border-radius: 0;
        gap: 0;
    }

    .gallery-bento-main {
        flex: unset;
        width: 100%;
        height: 260px;
        border-radius: 0;
    }

    .gallery-bento-side {
        display: none;
    }

    /* Quick stats */
    .quick-stats {
        padding: 0 1rem;
        flex-wrap: wrap;
    }

    .stat-item {
        min-width: 80px;
        max-width: unset;
        aspect-ratio: unset;
        flex: 1 1 calc(33% - 0.5rem);
        padding: 0.75rem 0.5rem;
    }

    .stat-value {
        font-size: 1rem;
    }

    /* Content grid → single column, sidebar moves below */
    .property-content-grid {
        grid-template-columns: 1fr;
        padding: 1rem 1rem 3rem;
        gap: 1.5rem;
    }

    .property-sidebar {
        position: static;
        top: unset;
        width: 100%;
    }

    /* Agent contact card sidebar — fix overflow */
    .agent-contact-card {
        width: 100%;
        box-sizing: border-box;
    }

    .contact-form .input-row {
        grid-template-columns: 1fr;
    }

    /* Content sections */
    .content-section {
        padding: 1rem;
        border-radius: 12px;
        overflow: hidden;
    }

    .content-section h2 {
        font-size: 1rem;
    }

    /* Sections outside grid (full-width sections) */
    .similar-properties-section .section-container,
    .recommendations-section .section-container,
    .timeline-section .section-container,
    .tax-assessment-section .section-container,
    .neighborhood-section .section-container {
        padding: 0 1rem;
    }

    /* Map — override inline height */
    #detail-property-map,
    #detail-street-view {
        height: 280px !important;
        border-radius: 0 12px 12px 12px !important;
    }

    /* Map layers panel — prevent overflow off-screen */
    .map-layers-panel {
        min-width: 200px;
        right: 0;
        left: auto;
        max-width: calc(100vw - 2rem);
    }
}

@media (max-width: 480px) {
    .page-breadcrumb {
        display: none;
    }

    .property-title-left h1 {
        font-size: 1rem;
    }

    .gallery-bento-main {
        height: 220px;
    }

    .stat-item {
        min-width: 60px;
        flex: 1 1 calc(33% - 0.5rem);
    }

    .quick-stats {
        gap: 0.5rem;
    }

    .property-content-grid {
        padding: 0.75rem 0.75rem 3rem;
    }

    .content-section {
        padding: 0.875rem;
    }
}

/* ===== Property Detail Page - Dark Mode ===== */
[data-theme="dark"] .content-section {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .content-section h2 {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

[data-theme="dark"] .property-header-main h1 {
    color: #e2e8f0;
}

[data-theme="dark"] .property-location {
    color: #94a3b8;
}

[data-theme="dark"] .price-value {
    color: #60a5fa;
}

[data-theme="dark"] .price-label,
[data-theme="dark"] .price-date {
    color: #94a3b8;
}

[data-theme="dark"] .stat-item {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .stat-item svg {
    color: #60a5fa;
}

[data-theme="dark"] .stat-value {
    color: #e2e8f0;
}

[data-theme="dark"] .stat-label {
    color: #94a3b8;
}

[data-theme="dark"] .description-text {
    color: #94a3b8;
}

[data-theme="dark"] .detail-item {
    border-bottom-color: #334155;
}

[data-theme="dark"] .detail-label {
    color: #94a3b8;
}

[data-theme="dark"] .detail-value {
    color: #e2e8f0;
}

[data-theme="dark"] .feature-item {
    background: #0f172a;
    color: #e2e8f0;
}
[data-theme="dark"] .feature-label {
    color: #e2e8f0;
}
[data-theme="dark"] .feature-value {
    color: #94a3b8;
}
[data-theme="dark"] .feature-item:hover {
    background: #1e293b;
}

[data-theme="dark"] .btn-action {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .btn-action:hover {
    border-color: #60a5fa;
    color: #60a5fa;
}

/* Sidebar dark mode */
[data-theme="dark"] .agent-contact-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .agent-contact-card h3 {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

[data-theme="dark"] .agent-item {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .agent-item:hover,
[data-theme="dark"] .agent-item.selected {
    border-color: #60a5fa;
}

[data-theme="dark"] .agent-item .agent-info h4 {
    color: #e2e8f0;
}

[data-theme="dark"] .agent-item .agent-info p,
[data-theme="dark"] .agent-item .agent-languages {
    color: #94a3b8;
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .contact-form textarea {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .btn-contact-agent {
    background: #1d4ed8;
}

[data-theme="dark"] .btn-contact-agent:hover {
    background: #2563eb;
}

[data-theme="dark"] .quick-info-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .mls-info {
    background: #0f172a;
    color: #94a3b8;
}

/* Sidebar action cards dark mode */
[data-theme="dark"] .sidebar-action-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .sidebar-action-card:hover {
    border-color: #60a5fa;
}

[data-theme="dark"] .sidebar-action-card .action-avatar {
    background: #334155;
    color: #60a5fa;
}

[data-theme="dark"] .sidebar-action-card .action-title {
    color: #e2e8f0;
}

[data-theme="dark"] .sidebar-action-card .action-subtitle {
    color: #94a3b8;
}

[data-theme="dark"] .sidebar-action-card .action-arrow {
    color: #94a3b8;
}

/* Gallery actions dark mode */
[data-theme="dark"] .gallery-actions .btn-action {
    background: rgba(30, 41, 59, 0.9);
    color: #e2e8f0;
    border: none;
}

[data-theme="dark"] .gallery-actions .btn-action:hover {
    background: #1e293b;
    color: #60a5fa;
}

[data-theme="dark"] .gallery-actions .btn-action.active {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

/* Walk Score dark mode */
[data-theme="dark"] .walkscore-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .walkscore-label {
    color: #94a3b8;
}

[data-theme="dark"] .walkscore-map-preview {
    background: #0f172a;
}

/* School dark mode */
[data-theme="dark"] .school-item {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .school-info h4 {
    color: #e2e8f0;
}

[data-theme="dark"] .school-meta {
    color: #94a3b8;
}

/* Mortgage dark mode */
[data-theme="dark"] .mortgage-result {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .monthly-payment .label {
    color: #94a3b8;
}

[data-theme="dark"] .monthly-payment .value {
    color: #60a5fa;
}

[data-theme="dark"] .monthly-payment {
    border-bottom-color: #334155;
}

[data-theme="dark"] .input-group label {
    color: #94a3b8;
}

[data-theme="dark"] .input-group input,
[data-theme="dark"] .input-group select {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .total-interest {
    border-bottom-color: #334155;
}

[data-theme="dark"] .total-interest .label {
    color: #94a3b8;
}

[data-theme="dark"] .total-interest .value {
    color: #FBBF24;
}

[data-theme="dark"] .breakdown-item.total {
    border-top-color: #334155;
}

[data-theme="dark"] .breakdown-item.total span:first-child {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-save-scenario {
    border-color: #334155;
    color: #60a5fa;
}

[data-theme="dark"] .btn-save-scenario:hover {
    background: rgba(96, 165, 250, 0.08);
    border-color: #60a5fa;
}

[data-theme="dark"] .mortgage-chart-container {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .mortgage-chart-section h3 {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-toggle-amortization {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .btn-toggle-amortization:hover {
    background: #1e293b;
}

[data-theme="dark"] .amortization-table-wrapper {
    border-color: #334155;
}

[data-theme="dark"] .amortization-table thead {
    background: #0f172a;
}

[data-theme="dark"] .amortization-table th {
    color: #94a3b8;
    border-bottom-color: #334155;
}

[data-theme="dark"] .amortization-table td {
    border-bottom-color: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .amortization-table tbody tr:hover {
    background: #1e293b;
}

[data-theme="dark"] .scenario-header h3 {
    color: #e2e8f0;
}

[data-theme="dark"] .scenario-chip {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .scenario-chip-label {
    color: #e2e8f0;
}

[data-theme="dark"] .scenario-chip-value {
    color: #60a5fa;
}

[data-theme="dark"] .scenario-compare-table-wrapper {
    border-color: #334155;
}

[data-theme="dark"] .scenario-compare-table thead {
    background: #0f172a;
}

[data-theme="dark"] .scenario-compare-table th {
    color: #94a3b8;
    border-bottom-color: #334155;
}

[data-theme="dark"] .scenario-compare-table td {
    border-bottom-color: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .scenario-compare-table td.highlight {
    color: #60a5fa;
}

[data-theme="dark"] .scenario-compare-table tbody tr:hover {
    background: #1e293b;
}

/* Cash Flow dark mode */
[data-theme="dark"] .cash-flow-analysis {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .cash-flow-item {
    border-bottom-color: #334155;
}

[data-theme="dark"] .cash-flow-label {
    color: #94a3b8;
}

[data-theme="dark"] .cash-flow-value {
    color: #e2e8f0;
}

/* Comparable Sales dark mode */
[data-theme="dark"] .comparable-stat {
    background: #0f172a;
}

[data-theme="dark"] .comparable-stat-label {
    color: #94a3b8;
}

[data-theme="dark"] .comparable-stat-value {
    color: #60a5fa;
}

[data-theme="dark"] .comparable-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .comparable-price,
[data-theme="dark"] .cma-price {
    color: #60a5fa;
}

[data-theme="dark"] .comparable-address {
    color: #e2e8f0;
}

[data-theme="dark"] .comparable-specs,
[data-theme="dark"] .comparable-date,
[data-theme="dark"] .comparable-distance {
    color: #94a3b8;
}

[data-theme="dark"] .comparable-footer {
    border-top-color: #334155;
}

[data-theme="dark"] .similarity-bar,
[data-theme="dark"] .cma-match-bar {
    background: #334155;
}

[data-theme="dark"] .similarity-fill,
[data-theme="dark"] .cma-match-fill {
    background: #60a5fa;
}

/* CMA table dark mode */
[data-theme="dark"] .cma-table-wrapper {
    border-color: #334155;
}

[data-theme="dark"] .cma-table th {
    background: #0f172a;
    color: #94a3b8;
    border-bottom-color: #334155;
}

[data-theme="dark"] .cma-table td {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

[data-theme="dark"] .cma-chart-placeholder {
    background: #0f172a;
}

/* Sale History dark mode */
[data-theme="dark"] .sale-history-minimal::before {
    background: #334155;
}

[data-theme="dark"] .sale-history-dot {
    background: #60a5fa;
}

[data-theme="dark"] .sale-history-date {
    color: #94a3b8;
}

[data-theme="dark"] .sale-history-event {
    color: #e2e8f0;
}

[data-theme="dark"] .sale-history-price {
    color: #60a5fa;
}

/* Price History table dark mode */
[data-theme="dark"] .price-history-table {
    border-color: #334155;
}

[data-theme="dark"] .price-history-table th {
    background: #0f172a;
    color: #94a3b8;
}

[data-theme="dark"] .price-history-table th,
[data-theme="dark"] .price-history-table td {
    border-bottom-color: #334155;
    color: #e2e8f0;
}

/* Neighborhood dark mode */
[data-theme="dark"] .neighborhood-section {
    background: #111827;
}

[data-theme="dark"] .neighborhood-grid {
    border-color: #334155;
}

[data-theme="dark"] .neighborhood-demographics h3,
[data-theme="dark"] .neighborhood-amenities h3 {
    color: #e2e8f0;
}

[data-theme="dark"] .demo-label {
    color: #94a3b8;
}

[data-theme="dark"] .demo-value {
    color: #60a5fa;
}

[data-theme="dark"] .age-distribution h4 {
    color: #e2e8f0;
}

[data-theme="dark"] .amenity-item {
    background: #0f172a;
    color: #e2e8f0;
}

/* Comparison table dark mode */
[data-theme="dark"] .comparison-section {
    background: #111827;
    border-top-color: #334155;
}

[data-theme="dark"] .comparison-table-wrapper {
    border-color: #334155;
}

[data-theme="dark"] .comparison-table th {
    background: #0f172a;
    color: #94a3b8;
    border-bottom-color: #334155;
}

[data-theme="dark"] .comparison-table td {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

[data-theme="dark"] .comparison-table tr.current-neighborhood {
    background: rgba(96, 165, 250, 0.1);
}

/* Reviews dark mode */
[data-theme="dark"] .reviews-section {
    background: #111827;
    border-top-color: #334155;
}

[data-theme="dark"] .reviews-section h2 {
    color: #e2e8f0;
}

[data-theme="dark"] .review-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .review-author-name {
    color: #e2e8f0;
}

[data-theme="dark"] .review-date {
    color: #94a3b8;
}

[data-theme="dark"] .review-comment {
    color: #94a3b8;
}

[data-theme="dark"] .reviews-placeholder {
    background: #1e293b;
    border-color: #334155;
}

/* Similar Properties dark mode */
[data-theme="dark"] .similar-properties-section,
[data-theme="dark"] .recommendations-section {
    background: #111827;
    border-top-color: #334155;
}

[data-theme="dark"] .similar-properties-section h2,
[data-theme="dark"] .recommendations-section h2 {
    color: #e2e8f0;
}

[data-theme="dark"] .similar-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .similar-info h4 {
    color: #e2e8f0;
}

[data-theme="dark"] .similar-price {
    color: #60a5fa;
}

/* Gallery dark mode */
[data-theme="dark"] .gallery-bento-main,
[data-theme="dark"] .gallery-bento-thumb {
    background: #0f172a;
}

/* Full-width section borders */
[data-theme="dark"] .walkscore-header .legend-item {
    color: #e2e8f0;
}

[data-theme="dark"] .placeholder-title {
    color: #e2e8f0;
}

[data-theme="dark"] .placeholder-text {
    color: #94a3b8;
}


/* ============================================
   SHARE EMAIL FORM (US-113)
   ============================================ */
.share-email-form {
    padding: 1rem 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin: 1rem 0;
}

.share-email-form h4 {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #083169;
}

.email-recipients-container,
.email-message-container {
    margin-bottom: 0.75rem;
}

.email-recipients-container label,
.email-message-container label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.share-email-form .form-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.share-email-form .form-input:focus {
    outline: none;
    border-color: #083169;
    box-shadow: 0 0 0 3px rgba(8, 49, 105, 0.1);
}

.share-email-form textarea.form-input {
    resize: vertical;
    min-height: 60px;
}

.share-email-form .btn-primary {
    width: 100%;
    padding: 0.625rem 1rem;
    background: #083169;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'DM Sans', sans-serif;
}

.share-email-form .btn-primary:hover:not(:disabled) {
    background: #0a4a9e;
}

.share-email-form .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.share-email-form .alert-success {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #dcfce7;
    color: #166534;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.share-email-form .alert-error {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

[data-theme="dark"] .share-email-form {
    border-color: #334155;
}

[data-theme="dark"] .share-email-form h4 {
    color: #e2e8f0;
}

[data-theme="dark"] .email-recipients-container label,
[data-theme="dark"] .email-message-container label {
    color: #cbd5e1;
}

[data-theme="dark"] .share-email-form .form-input {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .share-email-form .form-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}