/* =========================================
   Sidebar & Property Listing Styles
   ========================================= */

/* Sidebar Area */
.sidebar-area {
    padding-right: 30px;
}

@media (max-width: 991px) {
    .sidebar-area {
        padding-right: 0;
        margin-bottom: 40px;
    }
}

.sidebar-widget {
    background: #fff;
    padding: 0; /* Clean look from image */
}

/* Sidebar Headings */
.widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--primary-color);
}

.widget-group {
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 25px;
}

.widget-group:last-child {
    border-bottom: none;
}

.widget-subtitle {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--primary-color);
}

.widget-subtitle i {
    font-size: 0.8rem;
    color: var(--secondary-color); /* Use theme secondary or teal */
}

/* Search Box */
.search-box {
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--gray-200);
    border-radius: 5px;
    outline: none;
    font-size: 0.9rem;
    color: var(--gray-500);
}

.search-box button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
}

/* Checkboxes & Radios */
.check-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-checkbox, .custom-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-500);
    user-select: none;
    position: relative;
}

.custom-checkbox input, .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 3px;
    display: inline-block;
    position: relative;
    transition: all 0.2s;
}

/* Replacing Green with Orange */
/* Original: #00C194 -> New: var(--secondary-color) */
/* Original Light: #E0F7F4/#E8F7F5 -> New: #FFF5EB */

.custom-checkbox:hover input ~ .checkmark {
    border-color: var(--secondary-color);
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.radio-mark:after {
    background: var(--secondary-color);
}

.custom-radio input:checked ~ .radio-mark {
    border-color: var(--secondary-color);
}

.check-icon {
    color: var(--secondary-color);
}

.count {
    color: var(--secondary-color);
}

.slider::-webkit-slider-thumb {
    background: var(--secondary-color);
    box-shadow: 0 0 0 1px var(--secondary-color);
}

.slider::-moz-range-thumb {
    background: var(--secondary-color);
    box-shadow: 0 0 0 1px var(--secondary-color);
}

.reset-icon {
    color: var(--secondary-color);
}

.more-btn {
    color: var(--secondary-color);
}

.property-card-tag.rent {
    background-color: var(--secondary-color); 
}

.feature-item i {
    color: var(--secondary-color);
    background: #FFF5EB;
}

.property-price {
    color: var(--secondary-color);
}

.price-period {
    color: var(--secondary-color);
}

.action-btn {
    background: #FFF5EB;
    color: var(--secondary-color);
}

.action-btn:hover {
    background: var(--secondary-color);
}

.details-btn-list {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

.details-btn-list:hover {
    background-color: var(--secondary-color);
    box-shadow: 0 4px 10px rgba(253, 126, 20, 0.3);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Radio Button Style */
.radio-mark {
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.custom-radio input:checked ~ .radio-mark {
    border-color: var(--secondary-color);
}

.radio-mark:after {
    content: "";
    position: absolute;
    display: none;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--secondary-color);
}

.custom-radio input:checked ~ .radio-mark:after {
    display: block;
}

/* Icons in Labels */
.check-icon {
    color: var(--secondary-color);
    margin-right: 5px;
    width: 16px; 
    text-align: center;
}

/* Count Badge */
.count {
    margin-left: auto;
    color: var(--secondary-color);
    font-weight: 500;
}

/* Range Slider */
.price-range-slider {
    margin-top: 10px;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: #E8EBEB; /* Light gray track */
    border-radius: 5px;
    outline: none;
    margin-bottom: 20px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--secondary-color);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--secondary-color);
}

.slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--secondary-color);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--secondary-color);
}

/* Reset Link/Icon */
.reset-icon {
    font-size: 0.8rem;
    color: var(--secondary-color);
    margin-left: auto;
    margin-right: 10px;
    cursor: pointer;
}

/* More Button */
.more-btn {
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 5px;
}

/* Range Inputs */
.range-inputs {
    display: flex;
    gap: 15px;
}

.range-inputs input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.9rem;
    outline: none;
    color: var(--gray-500);
}


/* List View Card Style */
.property-card-list-style {
    display: flex;
    background: #fff;
    border: 1px solid #E4E4E4; 
    border-radius: 8px; /* Slightly sharper than main cards */
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 0; /* Handled by gy-30 */
    align-items: stretch;
}

.property-card-list-style:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: transparent;
}

.property-card-img {
    width: 35%; /* Reduced slightly for more content space */
    min-width: 250px;
    position: relative;
    overflow: hidden;
}

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

.property-card-list-style:hover .property-card-img img {
    transform: scale(1.05);
}

.property-card-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 5px 15px;
    border-radius: 4px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
}

.property-card-tag.rent {
    background-color: var(--secondary-color); /* Match design green/teal */
}

.property-card-tag.sell {
    background-color: var(--secondary-color); /* Match sell color */
}

/* Tag triangle imitation - simplified for now */
.property-card-tag:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid currentColor;
    opacity: 0.7;
    /* display: none;  Enable if hanging style desired */
}


.property-card-content {
    padding: 25px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.property-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.property-type-label {
    font-size: 0.85rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.property-meta-tags {
    display: flex;
    gap: 5px;
}

.p-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 3px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.p-tag.popular { background: #00B1FF; } /* Blue from image */
.p-tag.top { background: #007bff; }

.property-card-title {
    font-size: 1.4rem;
    margin-bottom: 8px;
    font-family: var(--font-heading);
    line-height: 1.3;
}

.property-card-title a {
    color: var(--primary-color);
}

.property-card-title a:hover {
    color: var(--secondary-color);
}

.property-card-location {
    color: var(--gray-500);
    font-size: 0.95rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.property-card-features {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.feature-item {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-item i {
    color: var(--secondary-color); /* Teal icon */
    background: #FFF5EB;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
}

.property-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.property-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.property-author img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.property-author span {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 500;
}

.property-price {
    font-size: 1.3rem;
    color: var(--secondary-color);
    font-weight: 700;
}

.price-period {
    font-size: 0.8rem;
    color: var(--secondary-color); /* Match price color usually or green */
    font-weight: 400;
}

/* Action Buttons (Heart, Share, etc.) */
.action-btns {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    /* In design, they are faint blue icons on top right of white card? 
       Or maybe inside the image? Let's check the image again.
       Ah, the image shows icons in the top right of the *Content* area: Heart, Compare, Search.
    */
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #E8F7F5; /* Light teal bg */
    border: none;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--secondary-color);
    color: #fff;
}

@media (max-width: 768px) {
    .property-card-list-style {
        flex-direction: column;
    }
    .property-card-img {
        width: 100%;
        min-width: 100%;
        height: 200px;
    }
    .property-card-content {
        width: 100%;
    }
}

/* List View Details Button */
.details-btn-list {
    display: inline-block;
    padding: 8px 20px;
    background-color: transparent;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
    text-decoration: none;
}

.details-btn-list:hover {
    background-color: var(--secondary-color);
    color: #fff;
    /* Removed rgba shadow for now as it needs a raw color */
    box-shadow: none; 
}