/**
 * Property Custom Fields Component Styles
 */

/* Section styling */
.property-custom-fields-section {
    padding: 2rem 0;
    background-color: #fff;
    margin-bottom: 2rem;
}

.property-custom-fields-section .section-heading {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: var(--k-0);
    background-color: var(--era-red);
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    text-align: center;
    width: 100%;
    display: block;
}

@media (min-width: 768px) {
    .property-custom-fields-section .section-heading {
        font-size: 2.25rem;
    }
}

/* Table styling */
.custom-fields-table {
    margin-bottom: 1.5rem;
}

.custom-fields-table .table {
    margin-bottom: 0;
}

.custom-fields-table .table th {
    width: 40%;
    font-weight: 600;
    color: #555;
    vertical-align: middle;
}

.custom-fields-table .table td {
    vertical-align: middle;
}

/* Value list styling */
.field-value-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.field-value-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.25rem;
}

.field-value-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color: #007bff;
    border-radius: 50%;
}

/* Search input styling */
.property-details-search {
    position: relative;
}

.property-details-search .form-control {
    padding-left: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1rem;
}

/* Table row hover effects */
.property-custom-fields-section table tbody tr {
    transition: background-color 0.2s ease;
}

.property-custom-fields-section table tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

.property-custom-fields-section table th.field-label,
.property-custom-fields-section table td.field-value {
    vertical-align: top !important;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .custom-fields-table .table th {
        width: 50%;
    }
}