/* ============================================================
   Julyem · Giỏ hàng & Thanh toán (dark / gold)
   Toàn bộ scope trong .jl-cc (bọc qua hook trong inc/cart-checkout.php)
   để khớp tone với trang Sản phẩm / Danh mục, không ảnh hưởng phần khác.
   ============================================================ */

.jl-cc {
    --jlcc-navy-1: #07294a;
    --jlcc-navy-2: #04203c;
    --jlcc-panel:  #0b3056;
    --jlcc-panel-2:#0a2b4c;
    --jlcc-field:  #0e2c52;
    --jlcc-gold:   #cfa56a;
    --jlcc-gold-2: #e7c690;
    --jlcc-gold-soft: rgba(207, 165, 106, .16);
    --jlcc-line:   rgba(207, 165, 106, .26);
    --jlcc-line-soft: rgba(255, 255, 255, .08);
    --jlcc-heading:#f0e2c6;
    --jlcc-text:   #d9e3ee;
    --jlcc-muted:  #8ea2b6;

    /* nền tối tràn viền màn hình */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background:
        radial-gradient(900px 460px at 85% 0%, rgba(207, 165, 106, .12), transparent 60%),
        linear-gradient(180deg, var(--jlcc-navy-1) 0%, var(--jlcc-navy-2) 100%);
    color: var(--jlcc-text);
    padding: clamp(26px, 4vw, 52px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 72px);
    line-height: 1.6;
}
.jl-cc *, .jl-cc *::before, .jl-cc *::after { box-sizing: border-box; }

/* Khung nội dung bên trong giữ max-width + canh giữa */
.jl-cc > .row,
.jl-cc > form > .row { max-width: 1280px; margin-left: auto; margin-right: auto; float: none; }

/* Nền tối backstop cho cả vùng content (phòng khi có khoảng trắng quanh) */
body.woocommerce-cart #content,
body.woocommerce-checkout #content {
    background: var(--jlcc-navy-2) !important;
}
/* Bỏ padding trên/dưới của khung trang (nền tối .jl-cc đã có padding riêng) */
body.woocommerce-cart .page-wrapper,
body.woocommerce-checkout .page-wrapper,
body.woocommerce-cart .cart-container,
body.woocommerce-checkout .page-checkout {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Ẩn tiêu đề trang mặc định (đã có thanh các bước Giỏ hàng > Thanh toán...) */
body.woocommerce-cart .shop-page-title,
body.woocommerce-checkout .shop-page-title,
body.woocommerce-cart .page-title,
body.woocommerce-checkout .page-title { display: none !important; }

/* Vạch chia dọc giữa 2 cột (Flatsome .row-divided) -> mảnh & vàng nhạt */
.jl-cc.row-divided > .col + .col::before,
.jl-cc .row-divided > .col + .col::before { background-color: var(--jlcc-line-soft) !important; }

/* ---------- Liên kết & tiêu đề ---------- */
.jl-cc a:not(.button) { color: var(--jlcc-gold); transition: color .2s; }
.jl-cc a:not(.button):hover { color: var(--jlcc-gold-2); }
.jl-cc h1, .jl-cc h2, .jl-cc h3, .jl-cc h4 { color: var(--jlcc-heading); }

/* ============================================================
   THÔNG BÁO (notices / coupon toggle / login)
   ============================================================ */
.jl-cc .woocommerce-message,
.jl-cc .woocommerce-info,
.jl-cc .woocommerce-error,
.jl-cc .woocommerce-form-coupon-toggle .woocommerce-info {
    background: var(--jlcc-panel) !important;
    border: 1px solid var(--jlcc-line);
    border-left: 3px solid var(--jlcc-gold);
    border-radius: 12px;
    color: var(--jlcc-text) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.jl-cc .woocommerce-form-coupon-toggle { display: block; margin-bottom: 24px; }
.jl-cc .woocommerce-notices-wrapper { display: block; margin-bottom: 24px; }
.jl-cc .woocommerce-notices-wrapper:empty { margin-bottom: 0; }
.jl-cc .woocommerce-NoticeGroup-checkout,
.jl-cc .woocommerce-form-coupon-toggle,
.jl-cc .woocommerce-notices-wrapper {
    border-radius: 12px;
    overflow: hidden;
}
.jl-cc .woocommerce-message::before,
.jl-cc .woocommerce-info::before { color: var(--jlcc-gold); }
.jl-cc .woocommerce-error::before { color: #e88; }

/* ============================================================
   Ô NHẬP LIỆU (input / select / textarea)
   ============================================================ */
.jl-cc input[type="text"],
.jl-cc input[type="email"],
.jl-cc input[type="tel"],
.jl-cc input[type="number"],
.jl-cc input[type="password"],
.jl-cc input.input-text,
.jl-cc textarea,
.jl-cc select {
    background: var(--jlcc-field) !important;
    color: var(--jlcc-heading) !important;
    border: 1px solid var(--jlcc-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    height: 48px !important;
    padding: 0 14px !important;
    line-height: 1.4;
    margin: 0 0 4px;
}
.jl-cc select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cfa56a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 38px;
}
.jl-cc select option { color: #0b3f66; background: #fff; }
.jl-cc textarea { height: auto !important; min-height: 104px; padding: 12px 14px !important; }
.jl-cc input::placeholder,
.jl-cc textarea::placeholder { color: var(--jlcc-muted); opacity: 1; }
.jl-cc input:focus,
.jl-cc textarea:focus,
.jl-cc select:focus {
    border-color: var(--jlcc-gold) !important;
    box-shadow: 0 0 0 1px var(--jlcc-gold) !important;
    outline: none;
}

/* Select2 (dropdown nâng cao của WooCommerce) */
.jl-cc .select2-container--default .select2-selection--single {
    background: var(--jlcc-field);
    border: 1px solid var(--jlcc-line);
    border-radius: 10px;
    height: 48px;
}
.jl-cc .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--jlcc-heading);
    line-height: 46px;
    padding-left: 14px;
}
.jl-cc .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; }

/* ============================================================
   NÚT (buttons) - trừ nút +/- của ô số lượng
   ============================================================ */
.jl-cc .button:not(.minus):not(.plus):not(.ux-quantity__button),
.jl-cc button.button:not(.minus):not(.plus):not(.ux-quantity__button),
.jl-cc input.button:not(.minus):not(.plus):not(.ux-quantity__button) {
    background: transparent;
    color: var(--jlcc-gold-2);
    border: 1px solid var(--jlcc-line);
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: .03em;
    text-transform: none;
    padding: 10px 18px;
    box-shadow: none;
    transition: background .2s, border-color .2s, box-shadow .2s, color .2s, transform .15s;
}
.jl-cc .button:not(.minus):not(.plus):not(.ux-quantity__button):hover,
.jl-cc button.button:not(.minus):not(.plus):not(.ux-quantity__button):hover {
    background: var(--jlcc-gold-soft);
    border-color: var(--jlcc-gold);
    color: var(--jlcc-gold-2);
}
.jl-cc .button:active { transform: translateY(1px); }

/* Nút chính (gradient vàng): checkout, đặt hàng, áp dụng mã */
.jl-cc .checkout-button,
.jl-cc #place_order,
.jl-cc .button.alt,
.jl-cc .coupon button,
.jl-cc button[name="apply_coupon"] {
    background: linear-gradient(135deg, var(--jlcc-gold-2), var(--jlcc-gold)) !important;
    color: #2a1c06 !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(207, 165, 106, .25);
}
.jl-cc .checkout-button:hover,
.jl-cc #place_order:hover,
.jl-cc .button.alt:hover,
.jl-cc .coupon button:hover {
    color: #2a1c06 !important;
    box-shadow: 0 16px 34px rgba(207, 165, 106, .42);
}

/* ============================================================
   Ô SỐ LƯỢNG (gộp thành 1 khối gọn)
   ============================================================ */
.jl-cc .quantity,
.jl-cc .ux-quantity {
    display: inline-flex !important;
    align-items: stretch;
    height: 46px;
    width: auto;
    max-width: 150px;
    border: 1px solid var(--jlcc-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--jlcc-field);
}
.jl-cc .quantity .minus,
.jl-cc .quantity .plus,
.jl-cc .ux-quantity__button {
    flex: 0 0 auto;
    width: 42px !important;
    height: auto !important;
    min-height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--jlcc-gold-2) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .2s;
}
.jl-cc .quantity .minus:hover,
.jl-cc .quantity .plus:hover,
.jl-cc .ux-quantity__button:hover { background: rgba(207, 165, 106, .14) !important; }
.jl-cc .quantity .qty {
    flex: 1 1 auto;
    width: 54px !important;
    height: auto !important;
    text-align: center;
    border: none !important;
    border-left: 1px solid var(--jlcc-line-soft) !important;
    border-right: 1px solid var(--jlcc-line-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--jlcc-heading) !important;
    font-size: 15px;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
    appearance: textfield;
}
.jl-cc .quantity .qty:focus { box-shadow: none !important; outline: none; }
.jl-cc .quantity .qty::-webkit-outer-spin-button,
.jl-cc .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   GIỎ HÀNG · bảng sản phẩm
   ============================================================ */
.jl-cc table.shop_table.cart {
    background: var(--jlcc-panel);
    border: 1px solid var(--jlcc-line-soft);
    border-radius: 16px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
    margin-bottom: 0;
}
.jl-cc table.shop_table.cart thead th {
    background: rgba(255, 255, 255, .03);
    color: var(--jlcc-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 18px 16px;
    border: none;
    border-bottom: 1px solid var(--jlcc-line);
}
.jl-cc table.shop_table.cart td {
    padding: 18px 16px;
    border-top: 1px solid var(--jlcc-line-soft);
    color: var(--jlcc-text);
    vertical-align: middle;
    background: transparent;
}
.jl-cc table.shop_table.cart .product-thumbnail img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--jlcc-line-soft);
}
.jl-cc table.shop_table.cart td.product-name > a {
    color: var(--jlcc-heading);
    font-weight: 500;
}
.jl-cc table.shop_table.cart td.product-name > a:hover { color: var(--jlcc-gold-2); }
.jl-cc table.shop_table.cart .product-name .variation,
.jl-cc table.shop_table.cart .product-name dl { color: var(--jlcc-muted); font-size: 13px; margin: 6px 0 0; }
.jl-cc table.shop_table.cart .product-name .variation dt,
.jl-cc table.shop_table.cart .product-name dl dt { font-weight: 600; color: var(--jlcc-text); }
.jl-cc .amount { color: var(--jlcc-heading); }
.jl-cc .product-subtotal .amount { color: var(--jlcc-gold-2); font-weight: 700; }

/* Nút xóa sản phẩm (×) */
.jl-cc a.remove {
    color: var(--jlcc-gold) !important;
    border: 1px solid var(--jlcc-line);
    background: rgba(207, 165, 106, .08) !important;
    width: 26px;
    height: 26px;
    line-height: 24px;
    border-radius: 50%;
    font-weight: 600;
    text-align: center;
}
.jl-cc a.remove:hover {
    color: #fff !important;
    background: #c0392b !important;
    border-color: #c0392b;
}

/* Hàng nút dưới bảng (Cập nhật giỏ / Tiếp tục xem) */
.jl-cc td.actions {
    padding: 16px !important;
    background: rgba(255, 255, 255, .02);
    border-top: 1px solid var(--jlcc-line);
}
.jl-cc td.actions .button {
    display: inline-block;
    width: auto !important;
    margin: 0 12px 0 0 !important;
    float: none !important;
    white-space: nowrap;
    vertical-align: middle;
}
.jl-cc td.actions .coupon { margin-top: 12px; }

/* Mã giảm giá đặt dưới bảng (nếu bật) */
.jl-cc td.actions .coupon { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.jl-cc td.actions .coupon .flex-col { margin: 0; }

/* ---------- Cột phải: Cart totals ---------- */
.jl-cc .cart_totals {
    background: var(--jlcc-panel);
    border: 1px solid var(--jlcc-line-soft);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
    float: none;
    width: 100%;
}
.jl-cc .cart_totals h2 {
    color: var(--jlcc-gold);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.jl-cc .cart_totals table.shop_table {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
.jl-cc .cart_totals table th,
.jl-cc .cart_totals table td {
    background: transparent;
    border: none;
    border-top: 1px solid var(--jlcc-line-soft);
    color: var(--jlcc-text);
    padding: 14px 0;
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
}
.jl-cc .cart_totals table tr:first-child th,
.jl-cc .cart_totals table tr:first-child td { border-top: none; }
.jl-cc .cart_totals table th { color: var(--jlcc-muted); font-weight: 500; }
.jl-cc .cart_totals .order-total th,
.jl-cc .cart_totals .order-total td { font-size: 17px; padding-top: 16px; }
.jl-cc .cart_totals .order-total th { color: var(--jlcc-text); }
.jl-cc .cart_totals .order-total .amount { color: var(--jlcc-gold-2); font-weight: 700; }
.jl-cc .cart_totals .wc-proceed-to-checkout { padding: 20px 0 0; margin: 0; }
.jl-cc .cart_totals .wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 13px;
    margin-bottom: 0 !important;
}

/* Coupon ở sidebar */
.jl-cc .ux-cart-coupon {
    margin-top: 20px;
    background: var(--jlcc-panel);
    border: 1px solid var(--jlcc-line-soft);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
}
.jl-cc .ux-cart-coupon .coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jl-cc .ux-cart-coupon .coupon .widget-title {
    flex: 1 1 100%;
    color: var(--jlcc-gold);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 4px;
    border: none;
}
.jl-cc .ux-cart-coupon .coupon .widget-title::after,
.jl-cc .ux-cart-coupon .coupon .widget-title::before { display: none !important; }
.jl-cc .ux-cart-coupon .coupon .input-text { flex: 1 1 160px; margin: 0; }
.jl-cc .ux-cart-coupon .coupon button {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 110px;
    height: 48px;
    padding: 0 22px !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* Giỏ hàng trống */
.jl-cc.jl-cc-empty .cart-empty,
.jl-cc .wc-empty-cart-message {
    color: var(--jlcc-text);
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
}
.jl-cc .return-to-shop { text-align: center; }

/* ============================================================
   THANH TOÁN · cột thông tin (trái) thành các card
   ============================================================ */
.jl-cc .woocommerce-billing-fields,
.jl-cc .woocommerce-shipping-fields,
.jl-cc .woocommerce-additional-fields,
.jl-cc .woocommerce-account-fields {
    background: var(--jlcc-panel);
    border: 1px solid var(--jlcc-line-soft);
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
}
/* Ẩn card "Giao đến địa chỉ khác" khi không có nội dung (chỉ chứa khoảng trắng) */
.jl-cc .woocommerce-shipping-fields:not(:has(*)) { display: none !important; }
.jl-cc #customer_details h3 {
    color: var(--jlcc-gold);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--jlcc-line-soft);
}
.jl-cc .form-row label,
.jl-cc label { color: var(--jlcc-text); font-weight: 500; }
.jl-cc .required { color: var(--jlcc-gold); border: none; }
.jl-cc abbr[title] { border: none; text-decoration: none; }
.jl-cc .woocommerce-input-wrapper { width: 100%; }

/* Khung đăng nhập / mã giảm giá khi mở rộng */
.jl-cc form.login,
.jl-cc form.checkout_coupon,
.jl-cc .woocommerce-form-login {
    background: var(--jlcc-panel);
    border: 1px solid var(--jlcc-line);
    border-radius: 14px;
    color: var(--jlcc-text);
    margin-bottom: 22px;
}

/* ---------- Cột phải: Đơn hàng ---------- */
.jl-cc .checkout-sidebar .col-inner,
.jl-cc .col-inner.has-border {
    background: var(--jlcc-panel);
    border: 1px solid var(--jlcc-line-soft) !important;
    border-radius: 16px;
    padding: 26px 28px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
}
.jl-cc #order_review_heading {
    color: var(--jlcc-gold);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.jl-cc #order_review table.shop_table {
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
}
.jl-cc #order_review table.shop_table th,
.jl-cc #order_review table.shop_table td {
    border: none;
    border-top: 1px solid var(--jlcc-line-soft);
    padding: 14px 0;
    color: var(--jlcc-text);
    background: transparent;
}
.jl-cc #order_review table.shop_table thead th {
    color: var(--jlcc-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-top: none;
}
.jl-cc #order_review .cart_item .product-name { color: var(--jlcc-heading); }
.jl-cc #order_review .cart_item .product-total .amount,
.jl-cc #order_review .cart-subtotal .amount { color: var(--jlcc-heading); }
.jl-cc #order_review .variation,
.jl-cc #order_review .product-name dl { color: var(--jlcc-muted); font-size: 13px; }
.jl-cc #order_review .order-total th { color: var(--jlcc-text); font-size: 16px; }
.jl-cc #order_review .order-total .amount { color: var(--jlcc-gold-2); font-weight: 700; font-size: 18px; }

/* ---------- Thanh toán (payment) ---------- */
.jl-cc #payment { background: transparent; }
.jl-cc #payment ul.payment_methods {
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--jlcc-line-soft);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.jl-cc #payment ul.payment_methods li { color: var(--jlcc-text); }
.jl-cc #payment ul.payment_methods label { color: var(--jlcc-heading); font-weight: 600; }
.jl-cc #payment .payment_box {
    background: var(--jlcc-field);
    color: var(--jlcc-muted);
    border-radius: 10px;
    font-size: 13.5px;
}
.jl-cc #payment .payment_box::before { border-bottom-color: var(--jlcc-field) !important; }
.jl-cc #payment div.place-order { padding-top: 6px; }
.jl-cc #place_order { width: 100%; font-size: 14px; padding: 13px; }
.jl-cc .woocommerce-terms-and-conditions-wrapper,
.jl-cc .woocommerce-privacy-policy-text,
.jl-cc .woocommerce-privacy-policy-text p { color: var(--jlcc-muted); font-size: 13px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 849px) {
    .jl-cc table.shop_table.cart thead { display: none; }
    .jl-cc .ux-cart-coupon { margin-top: 16px; }
    .jl-cc .woocommerce-billing-fields,
    .jl-cc .woocommerce-shipping-fields,
    .jl-cc .woocommerce-additional-fields,
    .jl-cc .checkout-sidebar .col-inner,
    .jl-cc .col-inner.has-border { padding: 20px; }
}
@media (max-width: 549px) {
    .jl-cc td.actions .coupon { flex-direction: column; align-items: stretch; }
    .jl-cc .ux-cart-coupon .coupon button { width: 100% !important; }
}