/*
 Theme Name:   WpResidence child theme
 Theme URI:    https://themeforest.net/item/wp-residence-real-estate-wordpress-theme/7896392
 Description:  WpResidence child theme
 Author:       WpEstate
 Author URI:   http://wpestate.org
 Template:     wpresidence
 Version:      5.1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/



/* ============================================================
   BẮT ĐẦU: CHIA 2 CỘT MOBILE & BO VIỀN (GIỮ HIỆU ỨNG GỐC)
============================================================ */

/* --- 1. CHIA 2 CỘT CHO BỘ LỌC TÌM KIẾM TRÊN MOBILE --- */
@media (max-width: 768px) {
  .wpresidence_note_half_search.row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important; /* Khoảng cách giữa 2 cột */
  }

  /* Ép mỗi ô lọc chiếm nửa chiều rộng (50% trừ đi khoảng hở) */
  .wpresidence_note_half_search .col-md-3,
  .wpresidence_note_half_search .col-md-9,
  .wpresidence_note_half_search .slider_radius_wrap {
    flex: 0 0 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    width: 100% !important; 
  }

  /* Riêng cột Vị trí chiếm toàn bộ 100% không gian */
  .wpresidence_note_half_search .col-md-12,
  .wpresidence_note_half_search .radius_wrap {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Nút và khối hạ xuống đồng bộ 100% khung chứa */
  .wpresidence_note_half_search .btn-group,
  .wpresidence_note_half_search .dropdown {
    width: 100% !important;
  }
}

/* --- 2. BO VIỀN KHUNG TÌM KIẾM & CHỈNH KHOẢNG CÁCH --- */
.wpresidence_dropdown .btn.dropdown-toggle {
    border: 1px solid #e0e0e0 !important; /* Viền xám mỏng nhẹ */
    border-radius: 6px !important; /* Bo góc */
    padding: 10px 20px !important; /* Đẩy chữ và mũi tên lùi sâu vào trong cho cân đối */
    color: #333333 !important; /* Chữ mặc định màu tối */
    transition: all 0.2s ease;
}

/* --- 3. TRẢ LẠI HIỆU ỨNG GỐC KHI RÊ CHUỘT / CLICK --- */
.wpresidence_dropdown .btn.dropdown-toggle:hover,
.wpresidence_dropdown .btn.dropdown-toggle:focus,
.wpresidence_dropdown .btn.dropdown-toggle[aria-expanded="true"] {
    background-color: #0474f4 !important; /* Chuyển nền xanh */
    color: #ffffff !important; /* Chữ chuyển màu trắng */
    border-color: #0474f4 !important; /* Viền màu xanh đồng bộ */
}

/* --- 4. KHỐI DANH SÁCH XỔ XUỐNG --- */
.wpresidence_dropdown .dropdown-menu {
    border: 1px solid #0474f4 !important; /* Viền xanh dương */
    border-radius: 6px !important; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important; /* Bóng đổ nhẹ */
    margin-top: 6px !important; 
}

/* Khắc phục lỗi chữ tàng hình bên trong danh sách (nếu có) */
.wpresidence_dropdown .dropdown-menu li:hover,
.wpresidence_dropdown .dropdown-menu li.active {
    background-color: #0474f4 !important;
    color: #ffffff !important;
}

/* ============================================================
   KẾT THÚC: CHIA 2 CỘT MOBILE & BO VIỀN
============================================================ */
/* ============================================================
📦 BẮT ĐẦU: CĂN CHỈNH KHOẢNG CÁCH KHỐI .single-content
============================================================ */

/* Đẩy toàn bộ khối single-content xuống 20px */
.single-content {
  margin-top: 20px !important; /* tạo khoảng cách dưới phần filter */
}

/* Nếu có padding trên theme gốc quá nhỏ hoặc bị đè */
.single-content .vc_row {
  margin-top: 0 !important; /* giữ sạch layout bên trong */
}

/* ============================================================
✅ KẾT THÚC: CĂN CHỈNH KHOẢNG CÁCH KHỐI .single-content
============================================================ */

/* ============================================================
1️⃣ BẮT ĐẦU: Ô TÌM KIẾM VỊ TRÍ + ICON ĐỊNH VỊ
============================================================ */

/* ⚪ Ô tìm kiếm vị trí mặc định */
.radius_wrap input#geolocation_search {
  border: 1px solid #000;
  border-radius: 3px;
  background-color: #fff;
  transition: all 0.25s ease;
  box-shadow: none;
  padding: 10px 14px;
  font-size: 15px;
  color: #222;
}

/* 🖱 Khi di chuột vào */
.radius_wrap input#geolocation_search:hover {
  border-color: #999;
}

/* 🔳 Khi click vào (focus) → nổi hẳn lên */
.radius_wrap input#geolocation_search:focus {
  border-color: #aaa;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* bóng đổ xám thật */
  transform: translateY(-1px);                /* nổi nhẹ lên trên */
  outline: none;
}

/* 💬 Placeholder */
.radius_wrap input#geolocation_search::placeholder {
  color: #888;
  font-style: italic;
}

/* 1️⃣ Ẩn icon gốc trong input */
.geolocation_search_item {
  background-image: none !important;
}

/* 2️⃣ Thêm icon định vị đỏ rõ nét ở góc phải */
.col-md-12.radius_wrap {
  position: relative;
}

.col-md-12.radius_wrap::after {
  content: "";
  position: absolute;
  right: 14px; /* chỉnh gần – xa biên input */
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-image: url("https://cdn-icons-png.flaticon.com/512/1483/1483336.png"); /* icon màu đỏ */
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none;
  z-index: 9999;
}

/* ============================================================
✅ KẾT THÚC: Ô TÌM KIẾM VỊ TRÍ + ICON ĐỊNH VỊ
============================================================ */
/* ============================================================
   BẮT ĐẦU ĐOẠN MÃ: Responsive Layout cho màn hình nhỏ (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {

  /* Khung hiển thị ngang */
  .property_listing,
  .listing_wrapper.property_listing {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 130px !important; 
  }

  /* Ảnh bên trái full khung */
  .property_listing .listing-unit-img-wrapper {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    height: 100% !important;
  }

  .property_listing .listing-unit-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Ẩn các lớp thừa */
  .property_listing .featured_gradient,
  .property_listing .listing_actions,
  .property_listing .icon-fav {
    display: none !important;
  }

  /* Phần nội dung bên phải */
  .property_listing .property-unit-information-wrapper {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    height: 100% !important;
    min-height: 100px !important;
    /* ĐÃ XÓA overflow: hidden ở đây để cho không gian tự nhiên */
  }

  /* Tiêu đề cắt sau 2 dòng, tự động căn đều */
  .property_listing h4 a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    font-size: 15px !important;
    color: #222 !important;
    min-height: 40px !important; 
  }

  /* ===================================================
     TỐI ƯU HÀNG ICON (GIƯỜNG, TẮM, DIỆN TÍCH) - ĐỂ TỰ NHIÊN
     =================================================== */
  .property_listing .property_listing_details_v2,
  .property_listing .property_location {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* QUAN TRỌNG: Đổi thành wrap, chật quá tự rớt dòng chứ không cắt */
    justify-content: flex-start !important; 
    align-items: center !important; 
    gap: 8px 12px !important; /* Khoảng cách ngang 12px, nếu rớt dòng thì cách dọc 8px */
    margin-top: 8px !important;
    width: 100% !important;
    /* ĐÃ XÓA overflow: hidden !important; để trả tự do cho số 2 hiển thị đầy đủ */
  }

  /* Tinh chỉnh từng cụm nhỏ bên trong (ảnh icon + số) */
  .property_listing .property_listing_details_v2 span,
  .property_listing .property_listing_details_v2 div {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important; 
    font-size: 13px !important; 
    white-space: nowrap !important; /* Chữ và icon đi liền với nhau, không bao giờ tách rời */
    margin: 0 !important; 
    padding: 0 !important;
    overflow: visible !important; /* Đảm bảo 100% không bị xén viền */
  }
}

/* ============================================================
   KẾT THÚC ĐOẠN MÃ: Responsive Layout cho màn hình nhỏ
   ============================================================ */
/* ============================================================
   BẮT ĐẦU ĐOẠN MÃ: Ẩn nút Gửi email & Gửi tin nhắn đại lý
   ============================================================ */
a.wpresidence_button.send_email_agent,
a.wpresidence_button.agent_submit_class,
.wpresidence_button.agent_submit_class,
.agent_submit_class {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* ============================================================
   KẾT THÚC ĐOẠN MÃ: Ẩn nút Gửi email & Gửi tin nhắn đại lý
   ============================================================ */

/* ============================================================
   BẮT ĐẦU ĐOẠN MÃ: Thông báo trên mobile cho Google Map
   ============================================================ */
@media (max-width: 768px) {
  #google_map_prop_list_wrapper {
    position: relative !important;
  }

  #google_map_prop_list_wrapper::after {
    content: "📍 Dùng hai ngón tay để di chuyển bản đồ";
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px;
    z-index: 99999;
    pointer-events: none;
    white-space: nowrap;
    opacity: 1;
    animation: fadeOutNotice 15s ease-in-out forwards;
  }
}

@keyframes fadeOutNotice {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
/* ============================================================
   KẾT THÚC ĐOẠN MÃ: Thông báo trên mobile cho Google Map
   ============================================================ */
  /* ============================================================
   BẮT ĐẦU ĐOẠN MÃ: Đổi màu tất cả giá tiền trên trang
   ============================================================ */
.listing_unit_price_wrapper,
.price_area,
.price_area .second_price_area {
    color: #e60000 !important; /* Màu đỏ tươi */
    font-weight: 600;          /* làm đậm chữ, tuỳ chọn */
}
/* ============================================================
   KẾT THÚC ĐOẠN MÃ: Đổi màu tất cả giá tiền trên trang
   ============================================================ */



/* ===============================
   BẮT ĐẦU: Footer / Chữ bản quyền căn giữa
   =============================== */

/* Đảm bảo override mọi CSS khác */
.sub_footer .sub_footer_content {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
}

/* ===============================
   KẾT THÚC: Footer / Chữ bản quyền căn giữa
   =============================== */
/* ============================================================
   BẮT ĐẦU ĐOẠN MÃ: Ẩn credit bản đồ Leaflet
   ============================================================ */
.leaflet-control-attribution {
  display: none !important;
}
/* ============================================================
   KẾT THÚC ĐOẠN MÃ: Ẩn credit bản đồ Leaflet
   ============================================================ */

/* ============================================================
   BẮT ĐẦU ĐOẠN MÃ: Ẩn thẻ .featured_gradient
   ============================================================ */

.featured_gradient {
  display: none !important;
}
/* ============================================================
   KẾT THÚC ĐOẠN MÃ: Ẩn thẻ .featured_gradient
   ============================================================ */
   /* =========================
   BẮT ĐẦU: Viền xanh và bóng nổi cho khung bao ngoài tìm kiếm
========================= */

.search_wrapper.search_wr_elementor {
    border: 1px solid #0474f4 !important; /* Tạo viền mỏng màu xanh */
    border-radius: 6px !important; /* Bo cong các góc mức độ 6px */
    background-color: #ffffff !important; /* Đảm bảo nền màu trắng */
    padding: 15px 10px !important; /* Tạo khoảng cách từ viền vào nội dung bên trong */
    transition: all 0.3s ease; /* Hiệu ứng chuyển động mượt mà */
}

/* Hiệu ứng khi di chuột (hover) vào toàn bộ khung */
.search_wrapper.search_wr_elementor:hover {
    box-shadow: 0 8px 25px rgba(4, 116, 244, 0.15) !important; /* Bóng nổi rõ hơn và hơi có ánh xanh khi đưa chuột vào */
    transform: translateY(-2px); /* Khung hơi nhích lên một chút tạo cảm giác nổi 3D */
}

/* =========================
   KẾT THÚC: Viền xanh và bóng nổi cho khung bao ngoài tìm kiếm
========================= */
/* =========================
   BẮT ĐẦU: Bo viền nhẹ ô Khu vực, Thể loại
========================= */

/* 1. Viền nhẹ khung nút bấm và đẩy chữ/mũi tên lùi vào trong */
.wpresidence_dropdown .btn.dropdown-toggle {
    border: 1px solid #e0e0e0 !important; /* Viền xám mỏng nhẹ */
    border-radius: 6px !important; /* Bo góc 6px */
    background-color: #ffffff !important;
    /* Dòng dưới đây là cốt lõi: Trên/dưới cách 10px, Trái/phải cách 20px */
    padding: 10px 20px !important; 
}

/* 2. Khối danh sách xổ xuống (Viền màu xanh dương và nổi nhẹ) */
.wpresidence_dropdown .dropdown-menu {
    border: 1px solid #0474f4 !important; /* Viền MÀU XANH dương */
    border-radius: 6px !important; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important; /* Bóng đổ nhẹ */
    margin-top: 6px !important; /* Hạ khối xuống một chút cho thoáng */
}

/* =========================
   KẾT THÚC: Bo viền nhẹ ô Khu vực, Thể loại
========================= */
/* ===========================
   BẮT ĐẦU: TỪ - ĐẾN TRONG TÌM KIẾM NÂNG CAO
=========================== */

#price_low_wrapper::before {
  content: var(--min-price-text, "Từ ");
  color: #ffffff !important; /* Đổi luôn thành chữ trắng cố định */
  font-size: 14px;
}

#price_max_wrapper::before {
  content: var(--max-price-text, "Đến ");
  color: #ffffff !important; /* Đổi luôn thành chữ trắng cố định */
  font-size: 14px;
}

/* Đảm bảo button đủ chiều cao */
#price_low_wrapper,
#price_max_wrapper {
  min-height: 40px;
  text-align: left;
}

/* ===========================
   KẾT THÚC : TỪ - ĐẾN TRONG TÌM KIẾM NÂNG CAO
=========================== */