/* =========== Container form chính =========== */
.custom-woo-filter {
    margin: 10px 0px 40px;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #ffffff;
}

/* =========== Nhóm filter (danh mục, thuộc tính) =========== */
.custom-woo-filter .filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    margin-bottom: 15px;
    border-bottom: 1px solid #e6e6e685;
    padding-bottom: 15px;
}

/* Label (tiêu đề các nhóm filter) */
.custom-woo-filter .filter-label {
    font-weight: 600;
    margin-right: 8px;
    font-size: 16px;
}

/* Select (dropdown chọn danh mục) */
.custom-woo-filter .filter-select {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Item checkbox (các lựa chọn thuộc tính) */
.custom-woo-filter .filter-item {
    font-weight: 500;
    font-size: 15px;
    margin: 0px 15px 0px 0px;
}

/* Checkbox Input bên trong item */
.custom-woo-filter .filter-input {
  margin-right: 4px;
  margin-bottom: unset;
}

/* Nhóm nút (lọc và reset) */
.custom-woo-filter .filter-actions {
    margin-left: auto;
    margin-bottom: unset;
    border-bottom: unset;
    padding-bottom: unset;
}

/* Nút chung (submit, reset) */
.custom-woo-filter .filter-button {
    padding: 2px 22px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    margin: 6px 0px;
    font-size: 14px;
    transition: .3s ease all;
}


/* Nút "Lọc" */
.custom-woo-filter .filter-submit {
  background: #007cba;
  color: #fff;
}

/* Nút "Xóa" (reset filter) */
.custom-woo-filter .filter-reset {
    background: transparent;
    color: rgb(226 0 30);
    border: 1px solid rgb(226 0 30);
    margin-left: 20px !important;
}


.custom-woo-filter .filter-reset:hover {
    background: rgb(226 0 30);
    color: white;
}

/* =========== Trạng thái Loading (dòng chữ đang tải bên dưới form) =========== */
.filter-loading {
  width: 100%;
  text-align: center;
  padding: 12px;
  margin: 12px 0;
  font-weight: bold;
  color: #007cba;
  background: rgba(0, 124, 186, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(0, 124, 186, 0.2);
}


.filter-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.filter-overlay.hidden {
  display: none;
}
.spinner {
  width: 50px; height: 50px;
  border: 5px solid #eee;
  border-top: 5px solid #007cba;
  border-radius: 50%;
  animation: spin 2.5s linear infinite;
  margin: 0 auto 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.filter-overlay .filter-loading {
  color: #fff;
  background: none;
  border: none;
  text-shadow: 0 1px 2px #222;
  margin-top: 20px;
  font-size: 1.15em;
}


h2.filter-title {
    color: #007db5;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-bottom: 1px solid #e6e6e685;
    padding-bottom: 15px;
    font-size: 26px;
    letter-spacing: .5px;
}


/* Thông báo lọc thành công */
.filter-success-msg {
  padding: 10px 15px;
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  margin-bottom: 15px;
  border-radius: 4px;
  text-align: center;

  /* chuẩn bị transition */
  opacity: 1;
  overflow: hidden;
  transition: opacity 3s ease, max-height 3s ease;
}

.filter-success-msg.hidden {
  /* ẩn mượt */
  opacity: 0;
  max-height: 0;
}





/*Mobile*/
@media screen and (max-width: 549px) {

h2.filter-title {
    font-size: 22px;
}

.custom-woo-filter {
    margin: 0px 0px 30px;
    padding: 20px 25px;
}

.custom-woo-filter .filter-label {
    margin-right: unset !important;
    font-size: 15px;
    width: 100%;
    display: block;
}


.custom-woo-filter .filter-input {
    margin-right: 8px;
    margin-bottom: 3px;
}


.custom-woo-filter .filter-item {
    font-size: 13px;
    margin: 8px 10px 0px 0px !important;
    display: flex;
    align-items: center;
}

.custom-woo-filter .filter-button {
    padding: 2px 18px;
    font-size: 12px;
}

.custom-woo-filter .filter-submit {
    border: 1px solid #007cba;
}

.custom-woo-filter .filter-reset {
    margin-left: 15px;
}

.custom-woo-filter .filter-group, h2.filter-title {
    margin-bottom: 13px;
    padding-bottom: 13px;
}

.custom-woo-filter .filter-actions {
    margin-bottom: unset !important;
    padding-bottom: unset !important;
}

}