/* Property Card */
.property-card {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-light);
}

.property-card.selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color), var(--shadow-md);
}

.card-image-container {
    height: 220px;
    min-height: 220px;
    flex-shrink: 0;
    position: relative;
    background: #e2e8f0;
}

.card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}


.checkbox-container {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    line-height: 0;
}

.card-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--accent-color);
}

.card-price-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 1.1rem;
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-sm);
}

.no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

.card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
    line-height: 1.3;
    /* One line, so every card in the grid is the same height and titles of wildly
       different lengths stop pushing the features row out of alignment. The full title
       stays available via the element's title attribute on hover, and in View Details. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-features {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
}

.card-features span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-features i {
    color: var(--accent-color);
}

.card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.card-source {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-view-details {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-view-details:hover {
    background: var(--accent-light);
}