/* --- PHẦN CHUNG --- */
.bce-preferences-wrapper { 
    font-family: sans-serif; 
}

/* === START: UPGRADE - STYLE PROFILE TITLE === */
.bce-preferences-wrapper .bce-preferences-main-view h2 {
    font-size: 25px;
    font-weight: bold;
}
/* === END: UPGRADE - STYLE PROFILE TITLE === */

/* --- PHẦN DANH SÁCH DANH MỤC --- */
.bce-category-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
}
.bce-category-row:hover { 
    background-color: #f9f9f9; 
}

.bce-category-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.bce-category-icon { 
    width: 32px; 
    height: 32px;
    flex-shrink: 0;
}
.bce-category-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bce-category-info { 
    flex-grow: 1; 
}
.bce-category-name { 
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}
.bce-progress-bar { 
    background-color: #e0e0e0; 
    height: 4px;
    border-radius: 2px; 
    overflow: hidden; 
}
.bce-progress-bar-inner { 
    background-color: #4caf50; 
    height: 100%; 
    transition: width 0.3s ease; 
}
.bce-category-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}
.bce-category-count { 
    font-size: 0.9em; 
    color: #757575; 
}
.bce-category-arrow { 
    font-size: 1.5em; 
    color: #757575; 
}

/* --- PHẦN CHI TIẾT --- */
/* THÊM CSS CHO HEADER MỚI */
.bce-detail-back-row {
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}
.bce-detail-back-row:hover {
    background-color: #f9f9f9;
}

.bce-group-accordion { border-bottom: 1px solid #e0e0e0; }
.bce-group-header { display: flex; justify-content: space-between; padding: 15px 10px; cursor: pointer; font-weight: bold; }
.bce-group-content { padding: 0 10px 15px 10px; }
.bce-accordion-icon { transition: transform 0.2s ease; }
.bce-group-accordion.active .bce-accordion-icon { transform: rotate(90deg); }
.bce-group-note { font-size: 0.9em; color: #757575; }
.bce-criteria-list { display: flex; flex-wrap: wrap; gap: 10px; }

/* === START: CẬP NHẬT CUỐI CÙNG (FIX TEXT OVERFLOW) === */
.bce-criterion-btn { 
    /* --- Kích thước cố định --- */
    width: 143px !important;
    height: 50px !important;
    box-sizing: border-box !important; /* Đảm bảo padding và border nằm trong kích thước */

    /* --- Cấu hình Flexbox để căn chỉnh --- */
    display: flex !important; 
    flex-direction: row !important;      /* BUỘC icon và chữ xếp hàng ngang */
    align-items: center !important;      /* Căn giữa các mục theo chiều dọc */
    justify-content: center !important;  /* Căn giữa toàn bộ nội dung (icon + chữ) */
    gap: 8px !important; 

    /* --- Các style khác --- */
    padding: 8px !important;
    border: 1px solid #ccc !important;
    color: #000 !important;                 
    border-radius: 20px; 
    background-color: #fff !important; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    font-size: 13px !important;
}

/* --- [FIX] Cho phép text xuống dòng và không bị tràn --- */
.bce-criterion-btn .bce-criterion-name {
    flex-shrink: 1;                      /* Cho phép text co lại khi cần */
    white-space: normal !important;      /* Cho phép text tự động xuống dòng */
    word-break: break-word !important;   /* Bẻ gãy từ dài để chống tràn */
    text-align: left !important;         /* Căn lề trái cho text (đẹp hơn khi có nhiều dòng) */
    line-height: 1.2;                    /* Giãn cách dòng cho dễ đọc */
}

.bce-criterion-btn:hover { 
    border-color: #000 !important;          
    color: #000 !important;                 
}

.bce-criterion-btn.selected { 
    border-color: #000 !important;          
    color: #000 !important;                 
    background-color: #f5f5f5 !important; 
    font-weight: normal !important;
    border-width: 2px !important;
    /* Giảm padding đi 1px để bù lại cho viền dày 2px, giữ nguyên kích thước */
    padding: 7px !important;
}
/* === END: CẬP NHẬT CUỐI CÙNG (FIX TEXT OVERFLOW) === */

.bce-criterion-icon { 
    width: 24px; 
    height: 24px;
    flex-shrink: 0; /* Ngăn icon bị co lại */
    display: flex; /* Căn giữa icon bên trong */
    align-items: center;
    justify-content: center;
}

/* === [SỬA LỖI DỨT ĐIỂM] === */
/* Tăng độ ưu tiên và đảm bảo kích thước của hình ảnh trong icon */
.bce-criterion-btn .bce-criterion-icon img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* === KẾT THÚC PHẦN SỬA LỖI === */

.bce-detail-footer { text-align: center; padding: 20px; }

/* === CSS CHO CÁC NÚT DẠNG TEXT === */
.bce-detail-footer .bce-save-and-continue-btn {
    border: none !important;
    background: none !important;
    color: #000 !important;
    font-weight: bold !important;
    text-decoration: none !important;
    padding: 5px 0 !important;
    font-size: 1em !important;
    cursor: pointer !important;
}
.bce-detail-footer .bce-save-and-continue-btn:hover {
    text-decoration: underline !important;
}

/* === START: SỬA LỖI DỨT ĐIỂM CHO CUSTOM MY ACCOUNT === */
/* Quy tắc này ép khối bên trái (icon + tên) "lớn lên" 
  để đẩy khối bên phải (số lượng) về cuối.
  Nó sử dụng độ ưu tiên cao để ghi đè CSS của theme/woo.
*/
body.woocommerce .cma-layout-content .bce-preferences-wrapper .bce-category-left {
    flex-grow: 1;
}
/* === END: SỬA LỖI DỨT ĐIỂM === */


/* === START: SỬA LỖI KHOẢNG TRỐNG (FIX LẦN 2) === */
/* * Ngăn không cho TOÀN BỘ PLUGIN (wrapper) tự động "lớn lên" (flex-grow) 
 * khi nó nằm trong một container flex (như .cma-content-wrapper).
 * Điều này cho phép nội dung tùy chỉnh (văn bản) hiển thị ngay bên dưới.
*/
.cma-content-wrapper .bce-preferences-wrapper {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
}
/* === END: SỬA LỖI KHOẢNG TRỐNG === */


/* === START: UPGRADE - ADD PADDING ON MOBILE === */
@media (max-width: 768px) {
    .bce-preferences-wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* === END: UPGRADE - ADD PADDING ON MOBILE === */