/* =====================================================
   Ô TÌM KIẾM CÓ TAB — For Rent | For Transfer | Project

   Thanh tab dính liền thành một khối với ô tìm kiếm.

   Mỗi trang đặt màu ô tìm kiếm khác nhau trong Elementor
   (trang chủ nền đen #1A1A1A bo 24px; trang danh sách nền
   ghi #F9F9F9 bo 16px có viền). Nên KHÔNG ghi cứng màu ở
   đây — jr-search.js đọc màu thật của ô rồi ghi vào các
   biến --jrs-skin-*, và gắn class .is-light-skin khi nền
   sáng để đảo chữ sang màu đen.

   Giá trị mặc định bên dưới chỉ dùng khi JS chưa chạy.
   ===================================================== */

.jr-search-tabs {
  /* JS ghi đè biến này theo màu ô tìm kiếm của từng trang. */
  --jrs-skin-bg: var(--justhome-second-color, #1a1a1a);

  /* Bo góc và viền do đây quy định, KHÔNG copy theo theme: mỗi trang theme đặt
     một kiểu (24px không viền / 16px viền #EBEBEB), nhìn không đều nhau. */
  --jrs-radius: 18px;
  --jrs-edge: rgba(255, 255, 255, .14);

  /* Bảng màu chữ cho nền TỐI. */
  --jrs-gold: var(--justhome-theme-color, #e7c873);
  --jrs-text: #ffffff;
  --jrs-text-dim: rgba(255, 255, 255, .6);
  --jrs-label: rgba(255, 255, 255, .55);
  --jrs-line: rgba(255, 255, 255, .12);
  --jrs-placeholder: rgba(255, 255, 255, .5);
  --jrs-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");

  --jrs-pad: 26px;

  width: 100%;
}

/* Nền sáng: đảo toàn bộ màu chữ, vạch ngăn và mũi tên select. */
.jr-search-tabs.is-light-skin {
  --jrs-edge: rgba(0, 0, 0, .08);
  --jrs-text: #1a1a1a;
  --jrs-text-dim: #7c766c;
  --jrs-label: #8a857c;
  --jrs-line: rgba(0, 0, 0, .1);
  --jrs-placeholder: #a9a49c;
  --jrs-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2377736c' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
}

.jr-search-tabs *,
.jr-search-tabs *::before,
.jr-search-tabs *::after {
  box-sizing: border-box;
}

/* Nhãn chỉ dành cho trình đọc màn hình. */
.jr-search-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* JS gắn class này lên ô Status của form theme cha để ẩn đi — tab đã thay
   nhiệm vụ chọn status. Dùng class riêng thay vì thuộc tính hidden vì các
   .list-item của Bootstrap có display do grid quy định, hidden sẽ bị đè. */
.jr-search-tabs .jr-search-hidden-field {
  display: none !important;
}

/* ===================== THANH TAB ===================== */

.jr-search-tabnav {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0 var(--jrs-pad);
  background: var(--jrs-skin-bg);
  border: 1px solid var(--jrs-edge);
  border-bottom: 1px solid var(--jrs-line);
  border-radius: var(--jrs-radius) var(--jrs-radius) 0 0;
}

.jr-search-tab {
  position: relative;
  margin: 0;
  padding: 15px 20px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--jrs-text-dim);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease;
}

/* Tab đầu thẳng hàng với nhãn ô nhập đầu tiên bên dưới. */
.jr-search-tab:first-child {
  padding-left: 0;
}

.jr-search-tab:hover,
.jr-search-tab:focus-visible,
.jr-search-tab.is-active {
  color: var(--jrs-text);
}

/* Gạch vàng nằm đè lên đường kẻ đáy của thanh tab. */
.jr-search-tab::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 2px;
  background: var(--jrs-gold);
  opacity: 0;
  transition: opacity .18s ease;
}

.jr-search-tab:first-child::after {
  left: 0;
}

.jr-search-tab.is-active::after {
  opacity: 1;
}

/* ===================== PANEL ===================== */

.jr-search-panel[hidden] {
  display: none;
}

/* Ô tìm kiếm của theme tự bo tròn cả 4 góc và mỗi trang một kiểu viền. Ép lại
   cho khớp với thanh tab: vuông 2 góc trên, bỏ viền trên (nếu không sẽ hở khấc
   và kẻ hai vạch ở chỗ nối), 2 góc dưới bo bằng --jrs-radius, viền nhạt đồng bộ.
   Rule của Elementor có 3 class nên phải !important mới đè được. */
.jr-search-tabs .jr-search-panel .search-form-inner {
  border: 1px solid var(--jrs-edge) !important;
  border-top-width: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--jrs-radius) !important;
  border-bottom-right-radius: var(--jrs-radius) !important;
}

/* ---------- Chia lại bề ngang form bất động sản ----------
   Theme chia cột Bootstrap cứng: Keyword 3 + Status 2 + Type 2 + Location 2 +
   nút 3 = 12. Ta ẩn ô Status vì tab đã thay nó, nên dư 2 cột trống bên phải.
   Ép các ô còn lại chia đều phần dư; nút giữ nguyên bề ngang của nó.
   Chỉ áp từ 992px trở lên — dưới mức đó theme xếp dọc, không có gì để chia. */
@media (min-width: 992px) {

  .jr-search-tabs .jr-search-panel .list-fileds > div {
    flex: 1 1 0;
    width: auto;
    max-width: none;
  }

  .jr-search-tabs .jr-search-panel .list-fileds > .form-group-search {
    flex: 0 0 auto;
    width: auto;
  }
}

/* ===================== FORM DỰ ÁN ===================== */

/* Cùng nền, cùng viền, cùng bo góc với ô bất động sản — chỉ bo 2 góc dưới để
   nối liền thanh tab. */
.jr-search-form {
  padding: 14px var(--jrs-pad) 18px;
  border: 1px solid var(--jrs-edge);
  border-top: 0;
  border-radius: 0 0 var(--jrs-radius) var(--jrs-radius);
  background: var(--jrs-skin-bg);
  color: var(--jrs-text);
}

/* 4 cột đều nhau như mẫu houseinhanoi. Số ô thay đổi theo dữ liệu (Cities,
   Districts, Handover Year tự ẩn khi chưa có term) nhưng lưới vẫn giữ 4 cột
   nên các ô luôn thẳng hàng, không co giãn lệch nhau. */
.jr-search-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.jr-search-field {
  min-width: 0;
  padding: 10px 20px;
  border-left: 1px solid var(--jrs-line);
}

/* Ô đầu mỗi hàng không có vạch ngăn bên trái. */
.jr-search-field:nth-child(4n + 1) {
  padding-left: 0;
  border-left: 0;
}

/* Nút luôn nằm ở cột cuối, giống mẫu. */
.jr-search-actions {
  grid-column: 4;
  padding-right: 0;
  border-left: 0;
}

.jr-search-field label {
  display: block;
  margin: 0 0 2px;
  color: var(--jrs-label);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

/* Ô nhập trong suốt, không viền — form bất động sản của theme cũng vậy,
   khung là các vạch ngăn chứ không phải viền từng ô. */
.jr-search-form input[type="text"],
.jr-search-form input[type="number"],
.jr-search-form select {
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--jrs-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 34px;
  appearance: none;
  -webkit-appearance: none;
}

.jr-search-form select {
  /* Mũi tên vẽ bằng SVG inline để không phụ thuộc font icon của theme. */
  background-image: var(--jrs-arrow);
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 10px 7px;
  padding-right: 20px;
  cursor: pointer;
}

/* Danh sách xổ ra do hệ điều hành vẽ, nền của form không áp vào được —
   ép lại màu chữ để option không bị trắng trên trắng ở một số trình duyệt. */
.jr-search-form select option {
  color: #1a1a1a;
  background: #fff;
}

.jr-search-form input:focus,
.jr-search-form select:focus {
  outline: none;
}

.jr-search-form input:focus-visible,
.jr-search-form select:focus-visible {
  outline: 2px solid var(--jrs-gold);
  outline-offset: 3px;
}

.jr-search-form input::placeholder {
  color: var(--jrs-placeholder);
  opacity: 1;
}

/* Bỏ nút tăng giảm của input number: khoảng giá gõ tay nhanh hơn bấm mũi tên. */
.jr-search-form input[type="number"]::-webkit-outer-spin-button,
.jr-search-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.jr-search-form input[type="number"] {
  -moz-appearance: textfield;
}

.jr-search-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jr-search-range-sep {
  flex: 0 0 auto;
  color: var(--jrs-label);
}

.jr-search-submit {
  width: 100%;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--jrs-gold);
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .18s ease;
}

.jr-search-submit:hover,
.jr-search-submit:focus-visible {
  filter: brightness(.93);
}

/* ===================== TIỆN ÍCH ===================== */

.jr-search-amenities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 16px 0 4px;
  border: 0;
  border-top: 1px solid var(--jrs-line);
}

.jr-search-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--jrs-text-dim);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}

.jr-search-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--jrs-gold);
  cursor: pointer;
}

.jr-search-check:hover {
  color: var(--jrs-text);
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 991px) {

  .jr-search-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jr-search-field {
    padding: 10px 16px;
  }

  .jr-search-field:nth-child(4n + 1) {
    padding-left: 16px;
    border-left: 1px solid var(--jrs-line);
  }

  .jr-search-field:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .jr-search-actions {
    grid-column: 2;
  }

  .jr-search-amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {

  .jr-search-tabs {
    --jrs-pad: 18px;
  }

  .jr-search-tabnav {
    flex-wrap: nowrap;
    padding: 0 var(--jrs-pad);
  }

  .jr-search-tab,
  .jr-search-tab:first-child {
    flex: 1 1 0;
    padding: 13px 6px;
    font-size: 13px;
    text-align: center;
  }

  .jr-search-tab::after,
  .jr-search-tab:first-child::after {
    left: 6px;
    right: 6px;
  }

  .jr-search-form {
    padding: 6px var(--jrs-pad) 18px;
  }

  .jr-search-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .jr-search-field,
  .jr-search-field:nth-child(4n + 1),
  .jr-search-field:nth-child(odd) {
    padding: 12px 0;
    border-left: 0;
  }

  /* Xếp dọc nên vạch ngăn phải nằm ngang. */
  .jr-search-field + .jr-search-field {
    border-top: 1px solid var(--jrs-line);
  }

  .jr-search-actions {
    grid-column: 1;
    border-top: 0;
    padding-bottom: 0;
  }

  .jr-search-amenities {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}