/*
Theme Name: Blocksy Child
Description: Child theme for Blocksy
Author: Your Name
Template: blocksy
Version: 1.0
*/

.gift-builder-wrapper{
max-width:1200px;
margin:auto;
padding:60px 20px;
}

.gift-progress{
display:flex;
gap:10px;
margin-bottom:40px;
}

.gift-step{
flex:1;
text-align:center;
padding:12px;
background:#eee;
border-radius:6px;
}

.gift-step.active{
background:#e53935;
color:#fff;
}

.gift-step-content{
display:none;
}

.gift-step-content.active{
display:block;
}

.gift-products{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:20px;
}

.gift-product{
background:#fff;
border-radius:12px;
padding:15px;
cursor:pointer;
text-align:center;
transition:0.3s;
border:2px solid transparent;
}

.gift-product:hover{
transform:scale(.95);
}

.gift-product img{
width:100%;
height:200px;
object-fit:cover;
margin-bottom:10px;
}

.gift-product.selected{
border:2px solid #f36ae5;
}

.gift-summary{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#000;
color:#fff;
text-align:center;
padding:15px;
font-size:18px;
}

.gift-card-form{
margin-top:25px;
max-width:500px;
}

.gift-card-form textarea,
.gift-card-form input{
width:100%;
padding:10px;
margin-top:10px;
border-radius:6px;
border:1px solid #ddd;
}

.gift-next,
.gift-back,
.gift-complete{
margin-top:20px;
padding:10px 20px;
background:#e53935;
border:none;
color:white;
border-radius:6px;
cursor:pointer;
}
.gift-next:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}
/* Căn giữa cụm điều hướng */
.gift-navigation {
    display: flex;
    justify-content: center; /* Đưa nội dung vào giữa theo chiều ngang */
    align-items: center;    /* Căn giữa theo chiều dọc */
    gap: 20px;             /* Khoảng cách giữa 2 nút */
    margin-top: 40px;      /* Khoảng cách với phần sản phẩm phía trên */
    margin-bottom: 80px;   /* Khoảng cách với thanh tổng tiền ở dưới cùng */
    width: 100%;
}

/* Tùy chỉnh chung cho các nút để trông cân đối hơn */
.gift-next, 
.gift-back, 
.gift-complete {
    min-width: 150px;      /* Độ rộng tối thiểu của nút */
    padding: 12px 30px;    /* Độ dày của nút */
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* Hiệu ứng khi rê chuột vào nút */
.gift-next:not(:disabled):hover, 
.gift-back:hover, 
.gift-complete:hover {
    transform: translateY(-2px); /* Nhấc nhẹ nút lên */
    box-shadow: 0 5px 15px rgba(229, 57, 53, 0.3);
    opacity: 0.9;
}

/* Tùy chỉnh riêng cho nút Quay lại nếu muốn màu khác biệt */
.gift-back {
    background-color: #757575; /* Màu xám cho nút quay lại */
    color: white;
}

/* Đảm bảo trên điện thoại các nút vẫn ổn định */
@media (max-width: 480px) {
    .gift-navigation {
        flex-direction: column-reverse; /* Trên mobile nút Tiếp tục nằm trên, Quay lại nằm dưới */
        gap: 10px;
    }
    .gift-next, .gift-back {
        width: 100%; /* Nút dài full màn hình trên mobile */
    }
}
/* Bố cục chia 2 cột cho Bước 2 */
.gift-builder-container {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    margin-top: 20px;
}

/* Sidebar lọc */
.gift-sidebar {
    flex: 0 0 240px; /* Độ rộng sidebar cố định 240px */
    position: sticky; /* Giữ bộ lọc luôn thấy khi cuộn sản phẩm */
    top: 20px;
    background: #fff;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
}

/* Danh sách sản phẩm */
.gift-products {
    flex: 1; /* Tự động chiếm hết phần diện tích còn lại */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Chia 3 cột sản phẩm */
    gap: 20px;
}

/* Style cho các mục lọc */
.filter-section {
    margin-bottom: 25px;
}

.filter-section h4 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 8px;
}

.filter-items label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    cursor: pointer;
    color: #666;
}

.filter-items input {
    margin-right: 8px;
}

/* Mobile responsive: Chuyển về 1 cột trên điện thoại */
@media (max-width: 768px) {
    .gift-builder-container {
        flex-direction: column;
    }
    .gift-sidebar {
        flex: 1;
        width: 100%;
        position: relative;
    }
}
.gift-search-wrapper {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}

#gift-product-search {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid #eee;
    border-radius: 25px; /* Bo tròn hiện đại */
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

#gift-product-search:focus {
    border-color: #ba68c8; /* Màu tím thương hiệu của bạn */
    box-shadow: 0 0 5px rgba(186, 104, 200, 0.2);
}

.search-icon {
    position: absolute;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    pointer-events: none;
}
.gift-product {
    /* ... giữ các style cũ khác ... */
    position: relative; /* Để có thể căn chỉnh nút */
    padding-bottom: 50px; /* Chừa chỗ cho nút */
}

/* 1. Trạng thái mặc định: Nút ẩn đi */
.gift-product .add-to-box-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(20px); /* Đẩy nút xuống thấp hơn 20px */
    width: 90%;
    background-color: #f36ae5;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0; /* Làm trong suốt */
    visibility: hidden; /* Ẩn hoàn toàn để không bấm nhầm */
    transition: all 0.3s ease-in-out; /* Tạo hiệu ứng mượt mà 0.3 giây */
    z-index: 10;
}

/* 2. Khi rê chuột vào thẻ sản phẩm (.gift-product) */
.gift-product:hover .add-to-box-btn {
    opacity: 1; /* Hiện rõ */
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Trượt lên vị trí chuẩn */
}

/* 3. Tinh chỉnh khung sản phẩm để không bị che khuất */
.gift-product {
    position: relative;
    overflow: hidden; /* Để nút không bị lòi ra ngoài khi đang ẩn */
    transition: box-shadow 0.3s ease;
}

.gift-product:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Thêm đổ bóng nhẹ khi hover cho giống Teamo */
}
/* Style cho modal (nền đen mờ) */
.modal.gift-builder-modal {
    display: none; /* Ẩn theo mặc định */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

/* Nội dung modal (hộp trắng) */
.gift-builder-modal .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px; /* Giới hạn chiều rộng */
    border-radius: 8px;
    position: relative;
}

/* Nút đóng (X) */
.gift-builder-modal .close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

.gift-builder-modal .close-modal:hover,
.gift-builder-modal .close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Bố cục bên trong modal */
.modal-body-content {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.modal-body-content img {
    max-width: 45%;
    border-radius: 8px;
}

/* Container chứa ảnh */
.product-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 200px; /* Khớp với chiều cao ảnh cũ của bạn */
    margin-bottom: 10px;
}

/* Style chung cho cả 2 ảnh */
.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out; /* Hiệu ứng fade mượt mà */
}

/* Ảnh thứ 2 mặc định sẽ ẩn và nằm đè lên ảnh 1 */
.secondary-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
}

/* Khi rê chuột vào thẻ sản phẩm (.gift-product) */
.gift-product:hover .secondary-image {
    opacity: 1; /* Hiện ảnh thứ 2 */
}

.gift-product:hover .primary-image {
    opacity: 0.7; /* Làm mờ nhẹ ảnh 1 (tùy chọn) */
}