/**
 * Frontend Styles - PERFECT VERSION
 * Matching Original Website Exactly
 * Houzez Advanced Search Pro - Version 1.3.0
 * Author: Muhammad Shoaib
 */

/* ========================================
   SEARCH BAR - ORANGE
======================================== */
.hasp-search-wrapper {
    background: linear-gradient(90deg, #ff9a56 0%, #ff7a3d 100%);
    padding: 18px 0;
    margin: 0;
    width: 100%;
    box-shadow: 0 2px 10px rgba(255, 122, 61, 0.2);
}

.hasp-search-form {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.hasp-search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.hasp-field,
.hasp-field-status,
.hasp-field-select,
.hasp-field-buttons {
    position: relative;
    flex: 0 1 auto;
}

.hasp-field-status {
    min-width: 140px;
}

.hasp-field-select {
    min-width: 120px;
    max-width: 180px;
    flex: 1;
}

.hasp-field-buttons {
    flex: 0 0 auto;
}

/* Status Toggle */
.hasp-status-toggle {
    display: flex;
    gap: 0;
    background: #ffffff;
    border-radius: 25px;
    padding: 3px;
    height: 44px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hasp-status-btn {
    margin: 0;
    cursor: pointer;
    flex: 1;
}

.hasp-status-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hasp-status-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    border-radius: 22px;
    background: transparent;
    color: #666;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

.hasp-status-btn.active span,
.hasp-status-btn input:checked + span {
    background: linear-gradient(90deg, #ff9a56 0%, #ff7a3d 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 122, 61, 0.3);
}

.hasp-status-btn:hover span {
    color: #ff7a3d;
}

/* Dropdowns */
.hasp-select,
.hasp-input {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 16px;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    color: #333;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    outline: none;
    cursor: pointer;
    appearance: none;
    font-weight: 500;
}

.hasp-input {
    cursor: text;
}

.hasp-select:hover,
.hasp-input:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hasp-select:focus,
.hasp-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.2);
}

.hasp-input::placeholder {
    color: #999;
}

.hasp-field-select::after {
    content: '▼';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 10px;
    pointer-events: none;
    z-index: 1;
}

/* Search Button */
.hasp-btn-search {
    height: 44px;
    padding: 0 32px;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    background: #ffffff;
    color: #ff7a3d;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
    min-width: 110px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hasp-btn-search:hover {
    background: #ff7a3d;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(255, 122, 61, 0.3);
    transform: translateY(-1px);
}

/* Spinner */
.hasp-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 122, 61, 0.3);
    border-top-color: #ff7a3d;
    border-radius: 50%;
    display: inline-block;
    animation: hasp-spin 0.8s linear infinite;
}

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

/* Loading */
.hasp-loading {
    text-align: center;
    padding: 50px;
    background: #ffffff;
    border-radius: 12px;
    margin-top: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.hasp-loading p {
    margin-top: 20px;
    color: #666;
    font-size: 16px;
    font-weight: 500;
}

/* ========================================
   RESULTS SECTION - PERFECT MATCH
======================================== */
.hasp-search-results-wrapper {
    width: 100%;
    margin-top: 40px;
}

/* Page Header */
.hasp-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.hasp-page-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    padding: 0;
}

.hasp-results-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hasp-results-count {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* ========================================
   PROPERTIES GRID - 3 COLUMNS LIKE IMAGE 1
======================================== */
.hasp-properties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

/* ========================================
   PROPERTY CARD - EXACTLY LIKE IMAGE 1
======================================== */
.hasp-property-card {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.hasp-property-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

/* ========================================
   IMAGE SECTION
======================================== */
.hasp-property-image-wrap {
    position: relative;
    overflow: hidden;
    height: 220px;
    background: #f5f5f5;
}

.hasp-property-img-link {
    display: block;
    height: 100%;
    width: 100%;
}

.hasp-property-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.hasp-property-card:hover .hasp-property-main-img {
    transform: scale(1.08);
}

.hasp-no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    color: #999;
    font-size: 14px;
}

/* ========================================
   BADGES - NO DUPLICATES, PROPER ARRANGEMENT
======================================== */
.hasp-badges-wrap {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 3;
    max-width: 70%;
}

.hasp-badge {
    padding: 5px 14px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* Buy/Rent Badge - BLUE like Image 1 */
.hasp-badge-buy,
.hasp-badge-rent {
    background: #4A90E2;
}

/* Featured Badge - ORANGE like Image 1 */
.hasp-badge-featured {
    background: #ff7a3d;
}

/* HOT SALE Badge - RED like Image 1 */
.hasp-badge-hot {
    background: #ff5722;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

/* Custom Label Badge */
.hasp-badge-custom {
    background: #ff9800;
}

/* For Sale/For Rent Badge - ORANGE */
.hasp-badge-status {
    background: #ff7a3d;
}

/* ========================================
   IMAGES COUNT - TOP RIGHT
======================================== */
.hasp-img-count {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hasp-img-count i {
    font-size: 11px;
}

/* ========================================
   FAVORITE BUTTON - BOTTOM RIGHT
======================================== */
.hasp-fav-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 3;
}

.hasp-fav-btn i {
    color: #ff7a3d;
    font-size: 18px;
}

.hasp-fav-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 15px rgba(255, 122, 61, 0.4);
}

.hasp-fav-btn.active i {
    color: #ff7a3d;
}

/* ========================================
   PROPERTY DETAILS - EXACTLY LIKE IMAGE 1
======================================== */
.hasp-property-details {
    padding: 18px;
}

/* Title */
.hasp-prop-title {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    line-height: 1.4;
    height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hasp-prop-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.hasp-prop-title a:hover {
    color: #ff7a3d;
}

/* Location - ORANGE ICON, MUST SHOW */
.hasp-prop-location {
    font-size: 13px;
    color: #ff7a3d;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    line-height: 1.4;
}

.hasp-prop-location i {
    margin-right: 6px;
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Property Type - ORANGE, MUST SHOW */
.hasp-prop-type {
    font-size: 13px;
    color: #ff7a3d;
    font-weight: 600;
    margin-bottom: 10px;
}

/* ========================================
   PRICE - EXACTLY LIKE IMAGE 1
======================================== */
.hasp-prop-price {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Old Price - STRIKETHROUGH */
.hasp-price-old {
    font-size: 15px;
    font-weight: 500;
    color: #999;
    text-decoration: line-through;
}

/* Current Price - BOLD */
.hasp-price-current {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Price Postfix */
.hasp-price-post {
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

/* ========================================
   PROPERTY META - ORANGE ICONS
======================================== */
.hasp-prop-meta {
    display: flex;
    gap: 18px;
    margin-bottom: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

.hasp-meta-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

/* Orange SVG Icons - EXACTLY LIKE IMAGE 1 */
.hasp-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.hasp-icon-bed {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23ff7a3d' d='M32 32c17.7 0 32 14.3 32 32V320H288V160c0-17.7 14.3-32 32-32H544c53 0 96 43 96 96V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V416H64v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V64C0 46.3 14.3 32 32 32z'/%3E%3C/svg%3E");
}

.hasp-icon-bath {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff7a3d' d='M96 77.3c0-7.3 5.9-13.3 13.3-13.3c3.5 0 6.9 1.4 9.4 3.9l14.9 14.9C130 91.8 128 101.7 128 112c0 19.9 7.2 38 19.2 52c-5.3 9.2-4 21.2 3.8 29c9.4 9.4 24.6 9.4 33.9 0L289 89c9.4-9.4 9.4-24.6 0-33.9c-7.8-7.8-19.8-9.1-29-3.8C246 39.2 227.9 32 208 32c-10.3 0-20.2 2-29.2 5.5L163.9 22.6C149.4 8.1 129.7 0 109.3 0C66.6 0 32 34.6 32 77.3V256c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H96V77.3zM32 352v16c0 28.4 12.4 54 32 71.6V480c0 17.7 14.3 32 32 32s32-14.3 32-32V464H384v16c0 17.7 14.3 32 32 32s32-14.3 32-32V439.6c19.6-17.6 32-43.1 32-71.6V352H32z'/%3E%3C/svg%3E");
}

.hasp-icon-area {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff7a3d' d='M200 32H56C42.7 32 32 42.7 32 56V200c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l40-40 79 79L112 336l-40 40c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H232c13.3 0 24-10.7 24-24V248c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2l-40 40-79-79L176 112l40-40c6.9-6.9 8.9-17.2 5.2-26.2S208.7 32 200 32zM287.1 96L480 288.9V96H287.1zM480 416H352L480 288V416z'/%3E%3C/svg%3E");
}

/* Added Date */
.hasp-prop-date {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

/* ========================================
   NO RESULTS
======================================== */
.hasp-no-results {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-top: 30px;
}

.hasp-no-results h3 {
    font-size: 26px;
    color: #333;
    margin-bottom: 15px;
}

.hasp-no-results p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* ========================================
   PAGINATION
======================================== */
.hasp-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 40px 0;
}

.hasp-pagination-btn {
    min-width: 40px;
    padding: 10px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    background: #ffffff;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hasp-pagination-btn:hover {
    border-color: #ff7a3d;
    color: #ff7a3d;
    transform: translateY(-2px);
}

.hasp-pagination-btn.active {
    background: linear-gradient(90deg, #ff9a56 0%, #ff7a3d 100%);
    border-color: #ff7a3d;
    color: #ffffff;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1400px) {
    .hasp-properties-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 1200px) {
    .hasp-properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hasp-search-container {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .hasp-properties-grid {
        grid-template-columns: 1fr;
    }
    
    .hasp-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .hasp-page-title {
        font-size: 24px;
    }
    
    .hasp-search-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hasp-field,
    .hasp-field-status,
    .hasp-field-select,
    .hasp-field-buttons {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .hasp-property-image-wrap {
        height: 200px;
    }
    
    .hasp-page-title {
        font-size: 20px;
    }
    
    .hasp-select,
    .hasp-input,
    .hasp-btn-search {
        font-size: 16px;
        height: 48px;
    }
}