/* ===============================
    WCPA PLUGIN CSS ONLY
    (WooCommerce Custom Product Addons)
=============================== */

/* Khoảng cách từng item trong form */
.wcpa_form_outer .wcpa_form_item { margin: 10px 0 0 10px; }

/* Helptext của WCPA */
.wcpa_form_outer .wcpa_form_item .wcpa_helptext { font-size: 15px !important; color: #000; font-weight: bold; }
.wcpa_helptext { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 6px; font-size: 15px !important; color: #000; font-weight: bold; }

/* Ẩn text nhãn màu trong giỏ WCPA nếu có */
.wcpa_cart_type_color-group p span { display: none; }

/* Nút chọn màu trong nhóm color-group (Color, Size, Fit Type) */
.wcpa_form_outer .wcpa_form_item .color-group .wcpa_color label span.wcpa_clb_border {
    font-weight: 600;
    font-size: 18px; 
    /* ĐÃ XÓA border-radius VÀ border MẶC ĐỊNH ĐỂ GIỐNG HÌNH MỚI CỦA BẠN */
}
.wcpa_form_outer .wcpa_form_item .wcpa_color label span { font-size: 18px; }

/* Tô sáng ảnh khi chọn trong kiểu hiển thị của WCPA */
.wcpa_form_outer .wcpa_form_item .wcpa_disp_type_circle .wcpa_image input:checked + div img,
.wcpa_form_outer .wcpa_form_item .wcpa_disp_type_square .wcpa_image input:checked + div img,
.wcpa_form_outer .wcpa_form_item .wcpa_disp_type_squircle .wcpa_image input:checked + div img {
    box-shadow: 0 0 5px 1px #000;
}
/* Tô sáng cho các nút (Color, Size, Fit Type) - Giữ nguyên */
.wcpa_form_outer .wcpa_form_item .color-group .wcpa_color input:checked + label span {
    border: 2px solid #16A34A; /* Viền xanh lá khi chọn */
    box-shadow: 0 0 7px 1px rgb(14 14 14 / 16%); /* Hiệu ứng đổ bóng */
}


/* Nút trong block đoạn văn của WCPA */
.wcpa_paragraph_block .button,
.wcpa_paragraph_block .button.primary { font-size: 12px; background-color: #2268ac; }

/* Giá trị WCPA trong tóm tắt đơn hàng hiển thị inline */
dl.variation dd div.wcpa_cart_val { display: inline !important; margin: 0; padding: 0; }
/* Mobile: ép giá trị WCPA trong bảng review order hiển thị inline */
@media (max-width: 849px) {
    .woocommerce-checkout-review-order-table td.product-name dl.variation dd div.wcpa_cart_val { display: inline !important; }
}

/* ==========================================================
    SỬA LỖI WCPA: Ép hiển thị chữ trên các ô Size / Fit Type / Color có nền trắng
    (PHẦN QUAN TRỌNG NHẤT ĐỂ HIỂN THỊ CHỮ)
========================================================== */
.wcpa_form_item .color-group .wcpa_color span.label_inside[style*="background-color:#ffffff;"],
.wcpa_form_item .color-group .wcpa_color span.label_inside[style*="background-color:#ffffff00;"] {
    /* Ghi đè các quy tắc ẩn văn bản */
    text-indent: 0 !important;
    /* Ghi đè các quy tắc ẩn văn bản */
    font-size: 14px !important; /* Kích thước chữ (bạn có thể thay đổi) */
    /* Đảm bảo chữ luôn là màu đen (vì nền trắng) */
    color: #000 !important;
    /* Căn chữ ra giữa ô cho đẹp */
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.2 !important;
}
/* (Tùy chọn) Giữ viền đen khi chọn cho các ô này */
.wcpa_form_item .color-group .wcpa_color input:checked + label span.label_inside[style*="background-color:#ffffff;"],
.wcpa_form_item .color-group .wcpa_color input:checked + label span.label_inside[style*="background-color:#ffffff00;"] {
    border-width: 2px;
    border-color: #16A34A;
}

/* === BỔ SUNG MỚI: Layout chung & Icon Checkbox (Giữ lại từ file gộp) === */
.wcpa_form_outer {
    border-bottom: 1px solid #ececec;
    margin-bottom: 30px;
}
/* Checkbox color style with check icon */
.wcpa_form_outer .wcpa_form_item .checkbox-style .wcpa_color input:checked+label span.wcpa_clb_border.label_inside:after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -11px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='21' height='21' rx='10.5' fill='black'/%3E%3Cpath d='M5 10.5L9 14.5L15.5 8' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    transform: unset;
}
.wcpa_form_outer .wcpa_form_item .checkbox-style .wcpa_color input:checked+label span.wcpa_clb_border.label_inside {
    padding: 0px 10px 0px 34px;
}
.wcpa_form_outer .wcpa_form_item .checkbox-style .wcpa_color label span.wcpa_clb_border.label_inside {
    height: 40px!important;
    min-width: 40px!important;
    line-height: 38px!important;
    background: #fff!important;
    width: 100%!important;
    position: relative;
}
.wcpa_form_outer .wcpa_form_item .checkbox-style .wcpa_color label span.label_inside { padding: 0 10px; }

/* === BỔ SUNG MỚI: Chú thích (Caption) cho ảnh (Giữ lại từ file gộp) === */
.wcpa_image_desc,
.wcpa_image label {
    font-size: 11px;
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
    padding-top: 5px;
}

/* === BỔ SUNG MỚI: Dọn dẹp giá trị WCPA trong giỏ hàng (Giữ lại từ file gộp) === */
.wcpa_cart_val p { padding: 0; margin: 0!important; }
body .cart_item .wcpa_cart_val,
body .woocommerce-mini-cart-item .wcpa_cart_val { padding: 0; margin: 0!important; }

/* ===============================
    NON-WCPA CSS (PHẦN CÒN LẠI)
=============================== */
/* =================================================================
   GLOBAL / LAYOUT
================================================================= */
.woocommerce-ordering,
.woocommerce-result-count,
.woocommerce-pagination,
.shipping-calculator-button,
.woocommerce-shipping-destination,
.woocommerce-shipping-calculator,
.featured-title .page-title-bg { display: none !important; }

/* =================================================================
   TOPBAR
================================================================= */
.topbar-shipping {
    background: #8f0000;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 20px;
    box-sizing: border-box;
    /* Full-bleed — phá vỡ container */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

/* =================================================================
   HEADER NAV
================================================================= */
ul.header-nav-main li.menu-item a.nav-top-link {
    font-weight: 700;
    transition: color .3s ease;
}
ul.header-nav-main li.menu-item a.nav-top-link:hover,
ul.header-nav-main li.current-menu-item > a.nav-top-link {
    color: #f00 !important;
}

/* =================================================================
   SECTION TITLE (ẩn gạch, căn giữa)
================================================================= */
.section-title.section-title-center b { display: none !important; }

.section-title,
.section-title.section-title-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}
.section-title-main {
    text-align: center !important;
    margin: 0 auto !important;
}

/* =================================================================
   PRODUCT PAGE — GENERAL
================================================================= */
.single-product .product-info .price-wrapper { display: none; }
.product_title  { font-size: 22px; }
.product-info   { box-shadow: 1px 1px 1px 1px #eee; border: 1px solid #ececec; background: #f5f5f5; }
.inner-padding  { padding: 10px; }

label, legend   { font-size: 1em; }
ul.product_list_widget li dl { line-height: 1.6; font-size: .6em; }

/* =================================================================
   PRODUCT PAGE — ADD TO CART FORM
================================================================= */
.single-product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
}
.single-product form.cart .quantity { flex: 0 0 auto; min-width: 110px; }

.single-product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    height: 44px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    letter-spacing: .3px;
    background: #fff !important;
    border: 2px solid #d9534f !important;
    color: #d9534f !important;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.single-product form.cart .single_add_to_cart_button:hover {
    background: #d9534f !important;
    color: #fff !important;
}

.single-product form.cart .ux-buy-now-button {
    display: block !important;
    width: 100% !important;
    margin-top: 18px !important;
    height: 48px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: #d9534f !important;
    border: 2px solid #d9534f !important;
    color: #fff !important;
    transition: background .25s ease, border-color .25s ease;
}
.single-product form.cart .ux-buy-now-button:hover {
    background: #c94a46 !important;
    border-color: #c94a46 !important;
}

@media (max-width: 768px) {
    .single-product form.cart {
        align-items: stretch;
        gap: 10px;
    }
    .single-product form.cart .quantity              { flex: 0 0 90px; }
    .single-product form.cart .single_add_to_cart_button { flex: 1 1 calc(100% - 100px); }
    .single-product form.cart .ux-buy-now-button     { flex: 1 1 100%; margin-top: 10px !important; }
}

/* =================================================================
   PRODUCT PAGE — VARIATION (dl.variation)
================================================================= */
dl.variation {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: .9em;
    color: #555;
    margin: 5px 0;
    line-height: 1.6;
}
dl.variation dt,
dl.variation dd          { display: inline; margin: 0; padding: 0; line-height: 1.6; }
dl.variation dt          { font-weight: 600; margin-right: 4px; }
dl.variation dd          { margin-right: 8px; }
dl.variation dd p        { display: inline !important; margin: 0; padding: 0; }
dl.variation dd span[style*="font-size: 20px"] {
    font-size: 14px !important;
    vertical-align: middle;
    line-height: 1 !important;
    margin-top: -2px;
}

/* Checkout review table — mobile */
@media (max-width: 849px) {
    .woocommerce-checkout-review-order-table td.product-name dl.variation {
        display: flex !important;
        flex-wrap: wrap;
        align-items: baseline;
        margin-bottom: 5px;
        line-height: 1.6;
    }
    .woocommerce-checkout-review-order-table td.product-name dl.variation dt,
    .woocommerce-checkout-review-order-table td.product-name dl.variation dd {
        display: inline !important;
        width: auto !important;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
    }
    .woocommerce-checkout-review-order-table td.product-name dl.variation dd { margin-right: 8px !important; }
    .woocommerce-checkout-review-order-table td.product-name dl.variation dd p { display: inline !important; }
}

/* =================================================================
   PRODUCT PAGE — SIZE CHART / RADIO GROUP
================================================================= */
.size-chart-icon {
    cursor: pointer;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
    margin-left: 16px;
    background: none;
}
.radio-group { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 1em; }

/* =================================================================
   PRODUCT PAGE — CROSS-SELL / RELATED
================================================================= */
.cross-sell-by-tag { margin-top: 40px; }
.cross-sell-by-tag h4 { font-size: 1.3em; margin-bottom: 20px; text-align: left; }
.cross-sell-by-tag ul.products,
.ux-related-grid,
.ux-upsell-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 1024px) {
    .ux-related-grid,
    .ux-upsell-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}
@media (max-width: 768px) {
    .cross-sell-by-tag ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .ux-related-grid,
    .ux-upsell-grid     { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .ux-section-title   { font-size: 1.3em; margin-bottom: 12px; }
}

.ux-section-title { font-size: 1.6em; margin: 0 0 18px; text-align: left; font-weight: 600; }
.ux-related-by-slug,
.ux-upsell-by-tags { margin-top: 32px; padding: 8px 0 16px; border-top: 1px solid #eee; }

/* Cart recommendations */
.customdomain-related-wrapper { margin-bottom: 40px; clear: both; }
.customdomain-title {
    display: block;
    clear: both;
    font-size: 120%;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: #333;
    margin: 10px 0 15px;
}
/* Cart page overrides */
.woocommerce-cart .customdomain-title {
    font-size: 18px;
    text-transform: none;
    text-align: left;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.cart-recommendations-wrapper {
    margin-top: 50px;
    border-top: 1px solid #f1f1f1;
    padding-top: 30px;
}

/* WCPA color swatch */
.wcpa_cart_type_color-group .wcpa_cart_color.wcpa_clb_border { border: none !important; }

/* =================================================================
   WOOCOMMERCE NOTICES
================================================================= */
.woocommerce-message.message-wrapper,
.woocommerce-message.message-wrapper:focus,
.woocommerce-message.message-wrapper:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* =================================================================
   ACCORDION (Flatsome UX Builder)
================================================================= */
.accordion-title .toggle { display: none !important; }

.accordion-item {
    margin-bottom: 15px;
    border: 1px solid #eee !important;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.accordion-title.plain {
    background: #f7f7f7 !important;
    padding: 15px 20px !important;
    font-weight: 600;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, padding-left .3s ease;
}
.accordion-title.plain:hover          { background: #eaeaea !important; padding-left: 25px !important; }
.accordion-item.active .accordion-title.plain {
    background: #f0f0f0 !important;
    border-bottom-color: #eee;
}
.accordion-inner {
    padding: 20px !important;
    background: #fff;
}
/* Clearfix */
.accordion-inner::after { content: ""; display: table; clear: both; }

/* Responsive media */
.accordion-inner .wp-caption,
.accordion-inner figure,
.accordion-inner table,
.accordion-inner iframe,
.accordion-inner video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
}
.accordion-inner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px;
}
.accordion-inner .wp-caption-text,
.accordion-inner figcaption {
    text-align: center;
    font-size: .9em;
    color: #777;
    margin-top: 5px;
    font-style: italic;
    line-height: 1.4;
}
.accordion-inner ul,
.accordion-inner ol { margin-left: 20px; margin-bottom: 15px; }

