/*
Theme Name: Cosmetics
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {
    --fs-color-white: #ffffff;
    --fs-color-black: #000000;
    --transform-origin-start: left;
    --transform-origin-end: right;
}

.wp-child-theme-cosmetics .nav-size-xlarge {
    font-size: 1.5rem;
    line-height: 1;
}

.wp-child-theme-cosmetics .nav-line-bottom>li>a:before,
.wp-child-theme-cosmetics .nav-line-grow>li>a:before,
.wp-child-theme-cosmetics .nav-line>li>a:before {
    background-color: var(--fs-color-black);
    height: 1px;
}

.wp-child-theme-cosmetics .button {
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-size: 101% 101%, 0 101%;
    background-position: right;
    background-repeat: no-repeat;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
    transition:
        background-size .45s cubic-bezier(.785, .135, .15, .86),
        background-position .45s step-end,
        color .45s cubic-bezier(.785, .135, .15, .86),
        border .45s cubic-bezier(.785, .135, .15, .86);
    -webkit-appearance: none;
    appearance: none;
}


.wp-child-theme-cosmetics .button.primary,
.wp-child-theme-cosmetics .button.single_add_to_cart_button {
    border-color: var(--fs-color-primary);
    color: var(--fs-color-white);
    background-color: transparent;
    background-image: linear-gradient(var(--fs-color-primary), var(--fs-color-primary)), linear-gradient(var(--fs-color-white), var(--fs-color-white));
}

.wp-child-theme-cosmetics .button.primary:hover,
.wp-child-theme-cosmetics .button.single_add_to_cart_button:hover {
    box-shadow: none;
    color: var(--fs-color-primary);
    border-color: var(--fs-color-primary);
    background-size: 0 101%, 101% 101%;
    background-position: left;
}

/* button white */
.wp-child-theme-cosmetics .button.white {
    color: var(--fs-color-black) !important;
    border-color: var(--fs-color-white) !important;
    background-color: transparent !important;

    /* Lớp 1: trắng (fill) – Lớp 2: trong suốt */
    background-image:
        linear-gradient(var(--fs-color-white), var(--fs-color-white)),
        linear-gradient(transparent, transparent) !important;

    background-size: 101% 101%, 0 101%;
    background-position: right;
    background-repeat: no-repeat;
}

.wp-child-theme-cosmetics .button.white:hover {
    box-shadow: none !important;
    color: var(--fs-color-white) !important;
    border-color: var(--fs-color-white) !important;

    background-size: 0 101%, 101% 101% !important;
    background-position: left;
}

/* product box */
.wp-child-theme-cosmetics .product-title a{
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--fs-color-black);
    
}

/* Post item */
.wp-child-theme-cosmetics .post-item .button{
    background-color: var(--fs-color-white) !important;
    background-image: none;
    color: var(--fs-color-black) !important;
    border: none !important;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 0;
}
.wp-child-theme-cosmetics .post-item .button::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: var(--fs-color-black);
    transition: width 0.3s ease;
}
.wp-child-theme-cosmetics .post-item:hover .button::after{
    width: 100%;
}

.wp-child-theme-cosmetics .ux-quantity {
    background-color: var(--fs-color-white) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid #DADADA !important;
}

.wp-child-theme-cosmetics .ux-quantity .ux-quantity__button{
    background-color: var(--fs-color-white) !important;
    color: var(--fs-color-black) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 40px !important;
    line-height: 1 !important;
    width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    text-shadow: none !important;
}

.wp-child-theme-cosmetics .ux-quantity .input-text{
    background-color: var(--fs-color-white) !important;
    color: var(--fs-color-black) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 40px !important;
    line-height: 1 !important;
    width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    text-shadow: none !important;
}
/* --- 1. Cấu hình Layout Form Cart: Xếp dọc --- */
.wp-child-theme-cosmetics form.cart {
    display: flex !important;
    flex-direction: column !important; /* Xếp các phần tử theo chiều dọc */
    align-items: flex-start !important;
    gap: 15px !important; /* Khoảng cách giữa các dòng */
}

/* --- 2. Cấu hình từng phần tử chiếm 1 dòng riêng --- */
/* Input số lượng */
.wp-child-theme-cosmetics form.cart .ux-quantity {
    width: auto !important; /* Giữ kích thước tự nhiên, không kéo giãn full màn hình */
    margin-right: auto !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
}

/* Các nút bấm (Button) */
.wp-child-theme-cosmetics form.cart .single_add_to_cart_button,
.wp-child-theme-cosmetics form.cart .ux-buy-now-button {
    width: 100% !important; /* Nút rộng full dòng */
    margin-left: 0 !important; /* Reset margin mặc định của flatsome */
    margin-right: 0 !important;
    flex: 0 0 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --- 3. Style nút Thêm vào giỏ hàng (OUTLINE - FILL LEFT TO RIGHT) --- */

/* Style mặc định (Bình thường) */
.wp-child-theme-cosmetics.single-product form.cart .single_add_to_cart_button,
.wp-child-theme-cosmetics .woocommerce-mini-cart__buttons a:first-child {
    background-color: transparent !important; /* Nền gốc trong suốt */
    border: 1px solid var(--fs-color-primary, #000) !important;
    color: var(--fs-color-primary, #000) !important;
    box-shadow: none !important;
    
    /* CẤU HÌNH BACKGROUND ĐỂ CHẠY TỪ TRÁI */
    /* 1. Tạo lớp nền màu chủ đạo */
    background-image: linear-gradient(var(--fs-color-primary, #000), var(--fs-color-primary, #000));
    background-repeat: no-repeat;
    
    /* 2. QUAN TRỌNG: Neo vị trí nền ở bên TRÁI */
    background-position: left center !important;
    
    /* 3. Ban đầu chiều rộng bằng 0 */
    background-size: 0% 100% !important;
    
    /* 4. Hiệu ứng chuyển động mượt */
    transition: background-size 0.4s ease-in-out, color 0.4s ease-in-out !important;
}

/* Style khi di chuột (Hover) */
.wp-child-theme-cosmetics.single-product form.cart .single_add_to_cart_button:hover,
.wp-child-theme-cosmetics .woocommerce-mini-cart__buttons a:first-child:hover {
    color: #fff !important; /* Đổi màu chữ thành trắng */
    border-color: var(--fs-color-primary, #000) !important;
    
    /* 5. Tăng chiều rộng nền lên 100% (Sẽ chạy từ trái qua phải do đã neo bên trái) */
    background-size: 100% 100% !important;
}
/* --- 4. Style nút Mua ngay (Giữ nguyên - chỉ fix margin) --- */
.wp-child-theme-cosmetics form.cart .ux-buy-now-button.ml-half {
    margin-left: 0 !important; /* Xóa class margin-left của Flatsome */
}

.wp-child-theme-cosmetics.sticky-add-to-cart--active{
    background-color: var(--fs-color-white) !important;
}

/* --- 1. Xếp ngang hàng & Reset chiều rộng --- */
.wp-child-theme-cosmetics .sticky-add-to-cart--active form.cart {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important; /* Khoảng cách giữa các nút */
    background-color: var(--fs-color-white) !important;
}

/* Reset nút không cho full width */
.wp-child-theme-cosmetics .sticky-add-to-cart--active button.single_add_to_cart_button,
.wp-child-theme-cosmetics .sticky-add-to-cart--active button.ux-buy-now-button {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* --- 2. Đồng bộ chiều cao (40px) --- */
/* Áp dụng cho nút Mua ngay, Thêm giỏ, và cả cụm ô số lượng */
.wp-child-theme-cosmetics .sticky-add-to-cart--active .quantity,
.wp-child-theme-cosmetics .sticky-add-to-cart--active .quantity .input-text,
.wp-child-theme-cosmetics .sticky-add-to-cart--active .quantity .ux-quantity__button,
.wp-child-theme-cosmetics .sticky-add-to-cart--active button.single_add_to_cart_button,
.wp-child-theme-cosmetics .sticky-add-to-cart--active button.ux-buy-now-button {
    height: 40px !important;
    min-height: 40px !important;
    line-height: 1 !important; /* Reset dòng để canh giữa tốt hơn */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* --- 3. Mobile: Ẩn nút Mua ngay --- */
@media (max-width: 767px) {
    /* Ẩn nút Mua ngay */
    .wp-child-theme-cosmetics .sticky-add-to-cart--active button.ux-buy-now-button {
        display: none !important;
    }

    /* (Tùy chọn) Cho nút Thêm vào giỏ dài ra lấp khoảng trống trên mobile */
    .wp-child-theme-cosmetics .sticky-add-to-cart--active button.single_add_to_cart_button {
        flex-grow: 1 !important;
    }
}

/* Container bao ngoài */
.simple-sub-form {
    max-width: 100%;
    width: 100%;
}

/* Tinh chỉnh ô nhập liệu (Input E-mail) */
.simple-sub-form input[type="email"] {
    background-color: #ffffff !important;
    border: 1px solid #dddddd !important; /* Viền xám mỏng */
    color: #666666;
    font-size: 16px;
    padding: 12px 15px !important;
    height: 45px !important; /* Cố định chiều cao */
    box-shadow: none !important; /* Bỏ bóng mặc định của Flatsome */
    border-radius: 0px !important; /* Vuông góc */
    margin-bottom: 20px !important; /* Khoảng cách xuống nút bấm */
}

/* Màu chữ placeholder (chữ mờ E-mail) */
.simple-sub-form input[type="email"]::placeholder {
    color: #a5a5a5;
    font-weight: 400;
}



/* Đảm bảo form hiển thị tốt trên Flatsome */
.simple-sub-form p {
    margin-bottom: 0;
}
@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}