/* ========================================
   CV Vietnam Checkout — Checkout Styling
   Tương thích: Block Checkout + Classic Checkout
   Design: Premium, phù hợp ContainerViet
======================================== */

/* ============================================
   1. BLOCK CHECKOUT — Ẩn fields không cần
============================================ */

/* Ẩn First Name (gộp vào Last Name = "Họ và tên") */
.wc-block-components-address-form__first_name {
    display: none !important;
}

/* Last Name chiếm full width */
.wc-block-components-address-form__last_name {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Ẩn Country (đã force VN) */
.wc-block-components-address-form__country {
    display: none !important;
}

/* Ẩn Postcode (backup nếu locale chưa xử lý kịp) */
.wc-block-components-address-form__postcode {
    display: none !important;
}

/* Ẩn Company (backup) */
.wc-block-components-address-form__company {
    display: none !important;
}

/* Ẩn Address line 2 (chỉ ở new mode — legacy dùng làm Quận/Huyện) */
body.cvnc-mode-new .wc-block-components-address-form__address_2 {
    display: none !important;
}

/* Legacy mode: ẩn hẳn input gốc address_2 — luôn thay bằng dropdown Quận/Huyện custom */
body.cvnc-mode-legacy .wc-block-components-address-form__address_2 {
    display: none !important;
}

/* Ẩn city field gốc của WC khi đã có dropdown ward custom của plugin.
   Dùng :has() vì React liên tục re-render và xóa inline style do JS gán. */
.wc-block-components-address-form:has(.cvnc-ward-block-wrapper) .wc-block-components-address-form__city {
    display: none !important;
}

/* Ẩn Billing Address section (chỉ dùng Shipping) */
.wc-block-components-address-form-wrapper:has(.wc-block-components-address-form [id*="billing"]) {
    /* Selective hide chỉ khi có billing */
}

/* Ẩn phần "Use same address for billing" checkbox text —
   vì billing tự copy từ shipping, không cần hiển thị */
.wc-block-checkout__use-address-for-billing {
    display: none !important;
}

/* ============================================
   2. CLASSIC CHECKOUT — Ẩn fields không cần
============================================ */

/* Ẩn First Name field */
#billing_first_name_field,
#shipping_first_name_field {
    display: none !important;
}

/* Last Name full width */
#billing_last_name_field,
#shipping_last_name_field {
    width: 100% !important;
    float: none !important;
}

/* Ẩn Country field */
#billing_country_field,
#shipping_country_field {
    display: none !important;
}

/* Ẩn Postcode */
#billing_postcode_field,
#shipping_postcode_field {
    display: none !important;
}

/* Ẩn Company */
#billing_company_field,
#shipping_company_field {
    display: none !important;
}

/* Ẩn Address 2 (chỉ ở new mode — legacy dùng làm Quận/Huyện và JS tự inject row mới) */
body.cvnc-mode-new #billing_address_2_field,
body.cvnc-mode-new #shipping_address_2_field {
    display: none !important;
}

/* Ẩn Billing details nếu không cần */
.woocommerce-billing-fields__field-wrapper .form-row:not(#billing_email_field):not(#billing_phone_field) {
    display: none !important;
}

/* Ẩn State field (belt-and-suspenders cùng PHP unset) */
#shipping_state_field,
#billing_state_field {
    display: none !important;
}

/* Label cho Classic ward select */
.woocommerce-checkout label.cvnc-ward-label-classic {
    display: block !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 600 !important;
    color: var(--cvck-secondary) !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ============================================
   3. PREMIUM CHECKOUT STYLING (cả Block + Classic)
============================================ */

/* --- Variables --- */
.woocommerce-checkout,
.wc-block-checkout {
    --cvck-primary: #1A3263;
    --cvck-secondary: #547792;
    --cvck-accent: #FAB95B;
    --cvck-light: #F8F9FC;
    --cvck-white: #FFFFFF;
    --cvck-text: #2D3748;
    --cvck-text-light: #718096;
    --cvck-border: #bdbdbd;
    --cvck-radius: 12px;
    --cvck-shadow: 0 2px 12px rgba(26, 50, 99, 0.08);
    --cvck-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Checkout page wrapper --- */
.woocommerce-checkout,
.wp-block-woocommerce-checkout {
    font-family: 'Be Vietnam Pro', 'Inter', -apple-system, sans-serif;
}

/* --- Block Checkout: Section headers --- */
.wc-block-components-checkout-step__heading {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 700 !important;
    color: var(--cvck-primary) !important;
    font-size: 18px !important;
}

.wc-block-components-checkout-step__description {
    color: var(--cvck-text-light) !important;
    font-size: 14px !important;
}

/* --- Block Checkout: Input wrapper --- */
.wc-block-components-text-input,
.wc-block-components-combobox {
    position: relative !important;
    margin-top: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- Block Checkout: Wrapper — flex column để label nằm trên input --- */
.wc-block-components-text-input,
.wc-block-components-combobox {
    display: flex !important;
    flex-direction: column !important;
}

/* --- Block Checkout: Labels — cố định phía trên input --- */
.wc-block-components-text-input label,
.wc-block-components-combobox label {
    position: static !important;
    transform: none !important;
    order: -1 !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--cvck-secondary) !important;
    margin-bottom: 6px !important;
    pointer-events: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: none !important;
}

/* Override mọi trạng thái floating label của WC Blocks */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label,
.wc-block-components-combobox.is-active label,
.wc-block-components-combobox:focus-within label,
.wc-block-components-text-input.is-active:not(:focus-within) label,
.wc-block-components-combobox.is-active:not(:focus-within) label {
    position: static !important;
    transform: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cvck-secondary) !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* --- Block Checkout: Input fields --- */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-combobox .components-combobox-control input {
    border: 1px solid var(--cvck-border) !important;
    border-radius: var(--cvck-radius) !important;
    padding: 12px 16px !important;
    font-family: 'Inter', 'Be Vietnam Pro', sans-serif !important;
    font-size: 15px !important;
    color: var(--cvck-text) !important;
    transition: var(--cvck-transition) !important;
    background: var(--cvck-white) !important;
    height: auto !important;
    min-height: 46px !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus,
.wc-block-components-combobox .components-combobox-control input:focus {
    border-color: var(--cvck-primary) !important;
    box-shadow: 0 0 0 3px rgba(26, 50, 99, 0.1) !important;
    outline: none !important;
}

/* Combobox wrapper — xóa mọi border/decoration; flex column để label nằm trên */
.wc-block-components-combobox {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Inner control — bỏ border (chuyển sang input), flex column để label order -1 */
.wc-block-components-combobox .components-combobox-control,
.wc-block-components-combobox .wc-block-components-combobox-control {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Label combobox — style giống ward label (in hoa, nhỏ, nằm trên) */
.wc-block-components-combobox label,
.wc-block-components-combobox .components-combobox-control label {
    display: block !important;
    order: -1 !important;
    position: static !important;
    transform: none !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--cvck-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    white-space: normal !important;
}

/* Ẩn outer label legacy nếu còn sót trong DOM */
label.cvnc-combobox-outer-label {
    display: none !important;
}

/* Input của combobox — style y hệt ward select (border, arrow, padding) */
.wc-block-components-combobox .components-combobox-control input,
.wc-block-components-combobox .wc-block-components-combobox-control input {
    border: 2px solid var(--cvck-border) !important;
    border-radius: var(--cvck-radius) !important;
    padding: 14px 40px 14px 16px !important;
    font-family: 'Inter', 'Be Vietnam Pro', sans-serif !important;
    font-size: 15px !important;
    color: var(--cvck-text) !important;
    background: var(--cvck-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A3263' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    min-height: 52px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: var(--cvck-transition) !important;
}

.wc-block-components-combobox .components-combobox-control input:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input:focus {
    border-color: var(--cvck-primary) !important;
    box-shadow: 0 0 0 3px rgba(26, 50, 99, 0.1) !important;
    outline: none !important;
}

/* Ẩn arrow gốc của combobox (nếu có) — đã thay bằng SVG nền của input */
.wc-block-components-combobox .components-combobox-control__suggestions-container+*,
.components-combobox-control__reset,
.components-combobox-control [class*="reset"],
.components-combobox-control [class*="arrow"]:not(input) {
    display: none !important;
}

/* ============================================
   Block Checkout — Native <select> variant
   WC dùng class "wc-blocks-components-select" (số nhiều "blocks")
   cho field state khi country có danh sách states.
============================================ */

/* Wrapper — bỏ border/background, flex column để label nằm trên */
.wc-blocks-components-select {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.wc-blocks-components-select__container {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Label — đẩy ra ngoài, trên select, style giống ward label */
.wc-blocks-components-select__label {
    display: block !important;
    order: -1 !important;
    position: static !important;
    transform: none !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--cvck-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    white-space: normal !important;
    top: auto !important;
    left: auto !important;
}

/* Select — style y hệt ward dropdown (.cvnc-ward-select--block) */
.wc-blocks-components-select__select {
    display: block !important;
    width: 100% !important;
    border: 2px solid var(--cvck-border) !important;
    border-radius: var(--cvck-radius) !important;
    padding: 14px 40px 14px 16px !important;
    font-family: 'Inter', 'Be Vietnam Pro', sans-serif !important;
    font-size: 15px !important;
    color: var(--cvck-text) !important;
    background: var(--cvck-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A3263' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-height: 52px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: var(--cvck-transition) !important;
}

.wc-blocks-components-select__select:focus {
    border-color: var(--cvck-primary) !important;
    box-shadow: 0 0 0 3px rgba(26, 50, 99, 0.1) !important;
    outline: none !important;
}

/* Ẩn arrow SVG gốc của WC — đã có SVG nền trong select */
.wc-blocks-components-select__expand {
    display: none !important;
}

/* --- Block Checkout: Place order button --- */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions_row .wc-block-components-button {
    background: linear-gradient(135deg, var(--cvck-primary), var(--cvck-secondary)) !important;
    border: none !important;
    border-radius: 50px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 16px 40px !important;
    letter-spacing: 0.5px !important;
    transition: var(--cvck-transition) !important;
    box-shadow: 0 4px 20px rgba(26, 50, 99, 0.3) !important;
    text-transform: uppercase !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__actions_row .wc-block-components-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(26, 50, 99, 0.4) !important;
}

/* --- Block Checkout: Order Summary --- */
.wc-block-components-order-summary {
    background: var(--cvck-light) !important;
    border-radius: var(--cvck-radius) !important;
    border: 1px solid var(--cvck-border) !important;
    padding: 20px !important;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 600 !important;
    color: var(--cvck-primary) !important;
}

/* --- Block Checkout: Totals --- */
.wc-block-components-totals-wrapper {
    border-color: var(--cvck-border) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: var(--cvck-primary) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    color: var(--cvck-accent) !important;
}

/* --- Block Checkout: Shipping + Payment radio options (Premium Custom Card Design) --- */

/* 1. RESET WOOCOMMERCE BLOCKS DEFAULT CONTAINERS */
.wc-block-components-radio-control--highlight-checked,
.wc-block-components-radio-control--highlight-checked::after {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
}

/* 2. STYLE CHO KHUNG VẬN CHUYỂN (SHIPPING CARD) */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 0 10px 0 !important;
    background: #ffffff !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.wc-block-checkout__shipping-option .wc-block-components-radio-control__option::before,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option::after {
    display: none !important;
    content: none !important;
}

/* Hover shipping card */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

/* Checked shipping card */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option--checked,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:checked) {
    border-color: var(--cvck-primary) !important;
    background: rgba(26, 50, 99, 0.04) !important;
    box-shadow: 0 4px 12px rgba(26, 50, 99, 0.08) !important;
}

/* 3. STYLE CHO KHUNG THANH TOÁN (PAYMENT ACCORDION CARD) */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 0 10px 0 !important;
    background: #ffffff !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option::after {
    display: none !important;
}

/* Hover payment card */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

/* Checked payment card */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:checked) {
    border-color: var(--cvck-primary) !important;
    background: rgba(26, 50, 99, 0.04) !important;
    box-shadow: 0 4px 12px rgba(26, 50, 99, 0.08) !important;
}

/* Reset label mặc định bên trong payment card để không bị chồng padding/border */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option::before,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option::after {
    display: none !important;
    content: none !important;
}

/* 4. TÙY BIẾN NÚT TRÒN CHỌN (RADIO INPUT) VÀ DẤU CHẤM ĐEN CANH GIỮA */
.wc-block-components-radio-control .wc-block-components-radio-control__input,
.wc-block-components-radio-control__input {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 2px 0 0 0 !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    cursor: pointer !important;
    display: inline-grid !important;
    place-content: center !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.wc-block-components-radio-control__input:checked {
    border-color: var(--cvck-primary) !important;
}

/* Reset pseudo mặc định của WC trên input */
.wc-block-components-radio-control__input::before,
.wc-block-components-radio-control__input::after {
    display: none !important;
    content: none !important;
}

/* Tạo lại chấm chọn tròn màu primary căn giữa */
.wc-block-components-radio-control__input:checked::before {
    display: block !important;
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--cvck-primary) !important;
}

/* 5. CĂN CHỈNH TIÊU ĐỀ VÀ MÔ TẢ */
.wc-block-components-radio-control__option-layout {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--cvck-text) !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

.wc-block-components-radio-control__input:checked+.wc-block-components-radio-control__option-layout .wc-block-components-radio-control__label,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-payment-method-label {
    color: var(--cvck-primary) !important;
}

/* Cụm label + giá tiền ở dòng đầu tiên */
.wc-block-components-radio-control__label-group {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Giá tiền (Shipping rate) */
.wc-block-components-radio-control__secondary-label {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--cvck-primary) !important;
}

/* Mô tả chi tiết thanh toán / vận chuyển */
.wc-block-components-radio-control__description,
.wc-block-components-radio-control__option-layout>.wc-block-components-radio-control__description,
.wc-block-components-payment-method-content,
.wc-block-components-radio-control-accordion-content {
    color: var(--cvck-text-light) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 8px 0 0 0 !important;
    padding: 0 0 0 4px !important;
    /* Dịch lùi đầu dòng cho thẳng hàng với tiêu đề */
    background: transparent !important;
    border: none !important;
}

/* ============================================
   4. CLASSIC CHECKOUT STYLING
============================================ */

/* Checkout form sections */
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout h3#order_review_heading {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 700 !important;
    color: var(--cvck-primary) !important;
    font-size: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 3px solid var(--cvck-accent) !important;
    margin-bottom: 24px !important;
}

/* Classic input fields */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    border: 2px solid var(--cvck-border) !important;
    border-radius: var(--cvck-radius) !important;
    padding: 12px 16px !important;
    font-family: 'Inter', 'Be Vietnam Pro', sans-serif !important;
    font-size: 15px !important;
    transition: var(--cvck-transition) !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: var(--cvck-primary) !important;
    box-shadow: 0 0 0 3px rgba(26, 50, 99, 0.1) !important;
}

/* Classic labels */
.woocommerce-checkout .form-row label {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 600 !important;
    color: var(--cvck-secondary) !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
}

/* Classic Place Order button */
.woocommerce-checkout #place_order {
    background: linear-gradient(135deg, var(--cvck-primary), var(--cvck-secondary)) !important;
    border: none !important;
    border-radius: 50px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 16px 40px !important;
    box-shadow: 0 4px 20px rgba(26, 50, 99, 0.3) !important;
    transition: var(--cvck-transition) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
}

.woocommerce-checkout #place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(26, 50, 99, 0.4) !important;
}

/* Classic order table */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
    border-radius: var(--cvck-radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--cvck-border) !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 700 !important;
    color: var(--cvck-primary) !important;
    background: var(--cvck-light) !important;
}

.woocommerce-checkout .order-total .amount {
    color: var(--cvck-accent) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
}

/* ============================================
   5. WARD SELECT — Phường / Xã dropdown
============================================ */

/* Classic Checkout — ward select */
.woocommerce-checkout select.cvnc-ward-select {
    display: block !important;
    width: 100% !important;
    border: 2px solid var(--cvck-border) !important;
    border-radius: var(--cvck-radius) !important;
    padding: 12px 16px !important;
    font-family: 'Inter', 'Be Vietnam Pro', sans-serif !important;
    font-size: 15px !important;
    color: var(--cvck-text) !important;
    background: var(--cvck-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A3263' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    transition: var(--cvck-transition) !important;
}

.woocommerce-checkout select.cvnc-ward-select:focus {
    border-color: var(--cvck-primary) !important;
    box-shadow: 0 0 0 3px rgba(26, 50, 99, 0.1) !important;
    outline: none !important;
}

/* Block Checkout — ward select wrapper */
.cvnc-ward-block-wrapper {
    margin-bottom: 16px;
    position: relative;
}

/* Block Checkout — district select wrapper (legacy mode) */
.cvnc-district-block-wrapper {
    margin: 12px 0 0 0;
    position: relative;
    box-sizing: border-box;
}

/* ============================================
   FIELD ORDER — Block Checkout
   WC Blocks không tôn trọng priority cho address_2 (luôn dính address_1).
   Dùng CSS order ép thứ tự visual:
   Họ tên → Tỉnh → Quận/Huyện → Xã/Phường → Địa chỉ → SĐT
============================================ */

.wc-block-components-address-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.wc-block-components-address-form__last_name {
    order: 1 !important;
}

.wc-block-components-address-form__first_name {
    order: 1 !important;
}

.wc-block-components-address-form__state {
    order: 2 !important;
}

.cvnc-district-block-wrapper {
    order: 3 !important;
}

.wc-block-components-address-form__address_2 {
    order: 3 !important;
}

.cvnc-ward-block-wrapper {
    order: 4 !important;
}

.wc-block-components-address-form__city {
    order: 4 !important;
}

.wc-block-components-address-form__address_1 {
    order: 5 !important;
}

.wc-block-components-address-form__phone {
    order: 6 !important;
}

.wp-block-woocommerce-checkout-order-summary-block {
    padding: 10px;
}

/* Legacy mode: State + District + Ward — mỗi cái 1 dòng full-width
   (3-level cascade quá rộng để side-by-side) */
body.cvnc-mode-legacy .wc-block-components-address-form__state,
body.cvnc-mode-legacy .cvnc-district-block-wrapper,
body.cvnc-mode-legacy .cvnc-ward-block-wrapper {
    margin: 0px 0 0 0 !important;
}

/* State pair với element 50% kế bên:
   - New mode (không có district): state + ward 50/50
   - Legacy mode: state + district 50/50; ward override 100% ở rule legacy bên dưới
   Bù 8px cho gap (16px) của form. Áp dụng cả flex và grid. */
.wc-block-components-address-form__state,
.cvnc-district-block-wrapper,
.cvnc-ward-block-wrapper {
    box-sizing: border-box !important;
    flex: 0 0 calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    grid-column: span 1 !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
}

/* Legacy mode: ward xuống dòng riêng vì state đã pair với district */
body.cvnc-mode-legacy .cvnc-ward-block-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Xóa margin/padding của các wrapper trong state để bằng chiều cao với ward */
.wc-block-components-address-form__state .wc-blocks-components-select,
.wc-block-components-address-form__state .wc-blocks-components-select__container {
    margin: 0 !important;
}

/* Hai label dùng cùng line-height & margin để 2 wrapper cao bằng nhau */
.cvnc-ward-label,
.wc-blocks-components-select__label {
    line-height: 1.4 !important;
    margin: 0 0 4px 0 !important;
    min-height: 16px !important;
}

/* Hai select dùng cùng chiều cao tuyệt đối */
.wc-blocks-components-select__select,
select.cvnc-ward-select--block,
.cvnc-combo__input {
    height: 52px !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* ============================================
   STATE COMBOBOX — Block Checkout
   Ẩn <select> gốc của WC khi đã có combobox custom.
============================================ */

.wc-block-components-address-form__state:has(.cvnc-state-combo-wrapper) .wc-blocks-components-select {
    display: none !important;
}

.cvnc-state-combo-wrapper {
    width: 100%;
}

/* ============================================
   SEARCHABLE COMBOBOX — Text input + dropdown filter realtime
   Dùng chung cho cả Tỉnh và Phường/Xã.
============================================ */

.cvnc-combo {
    position: relative;
    width: 100%;
}

.cvnc-combo__input {
    display: block;
    width: 100% !important;
    border: 1px solid var(--cvck-border) !important;
    border-radius: var(--cvck-radius) !important;
    padding: 14px 40px 14px 16px !important;
    font-family: 'Inter', 'Be Vietnam Pro', sans-serif !important;
    font-size: 15px !important;
    color: var(--cvck-text) !important;
    background: var(--cvck-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A3263' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    cursor: text !important;
    transition: var(--cvck-transition) !important;
}

.cvnc-combo__input:focus {
    border-color: var(--cvck-primary) !important;
    box-shadow: 0 0 0 3px rgba(26, 50, 99, 0.1) !important;
    outline: none !important;
}

/* Trạng thái lỗi (validation Quận/Huyện) */
.cvnc-combo__input--error,
input.cvnc-combo__input--error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Trạng thái disable (Quận/Huyện khi chưa chọn Tỉnh/TP) */
.cvnc-combo__input:disabled,
.cvnc-combo__input--disabled {
    background-color: var(--cvck-light) !important;
    color: var(--cvck-text-light) !important;
    cursor: not-allowed !important;
}

/* Classic Checkout — hàng 2 cột: Tỉnh/TP ngang hàng Quận/Huyện */
.cvnc-2col-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.cvnc-2col-row .cvnc-col {
    flex: 0 0 calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 600px) {
    .cvnc-2col-row .cvnc-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

.cvnc-error-msg {
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
    font-family: 'Be Vietnam Pro', sans-serif;
}

.cvnc-combo__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 999;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--cvck-white);
    border: 1px solid var(--cvck-border);
    border-radius: var(--cvck-radius);
    box-shadow: 0 6px 20px rgba(26, 50, 99, 0.12);
}

.cvnc-combo__list[hidden] {
    display: none;
}

.cvnc-combo__option {
    padding: 10px 16px;
    cursor: pointer;
    font-family: 'Inter', 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
    color: var(--cvck-text);
    transition: background-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cvnc-combo__option:hover,
.cvnc-combo__option.is-highlighted {
    background: var(--cvck-light);
    color: var(--cvck-primary);
}

.cvnc-combo__option.is-selected {
    background: rgba(26, 50, 99, 0.06);
    color: var(--cvck-primary);
    font-weight: 600;
}

.cvnc-combo__empty {
    padding: 12px 16px;
    color: var(--cvck-text-light);
    font-style: italic;
    font-size: 14px;
    font-family: 'Inter', 'Be Vietnam Pro', sans-serif;
    text-align: center;
}

/* Scrollbar gọn gàng */
.cvnc-combo__list::-webkit-scrollbar {
    width: 8px;
}

.cvnc-combo__list::-webkit-scrollbar-track {
    background: var(--cvck-light);
    border-radius: 4px;
}

.cvnc-combo__list::-webkit-scrollbar-thumb {
    background: var(--cvck-border);
    border-radius: 4px;
}

.cvnc-combo__list::-webkit-scrollbar-thumb:hover {
    background: var(--cvck-secondary);
}

/* Mobile: max-height bé hơn để khỏi đè bàn phím */
@media (max-width: 600px) {
    .cvnc-combo__list {
        max-height: 200px;
    }

    .cvnc-combo__input {
        font-size: 16px !important;
        /* tránh zoom iOS */
    }
}

@media (max-width: 600px) {

    .wc-block-components-address-form__state,
    .cvnc-district-block-wrapper,
    .cvnc-ward-block-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        grid-column: 1 / -1 !important;
    }
}

.cvnc-ward-label {
    display: block !important;
    position: static !important;
    transform: none !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--cvck-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 4px !important;
    pointer-events: auto !important;
    background: transparent !important;
    padding: 0 !important;
}

select.cvnc-ward-select--block {
    display: block;
    width: 100%;
    border: 2px solid var(--cvck-border);
    border-radius: var(--cvck-radius);
    padding: 14px 40px 14px 16px;
    font-family: 'Inter', 'Be Vietnam Pro', sans-serif;
    font-size: 15px;
    color: var(--cvck-text);
    background: var(--cvck-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A3263' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: var(--cvck-transition);
    min-height: 52px;
}

select.cvnc-ward-select--block:focus {
    border-color: var(--cvck-primary);
    box-shadow: 0 0 0 3px rgba(26, 50, 99, 0.1);
    outline: none;
}

/* ============================================
   6. RESPONSIVE — Mobile
============================================ */

@media (max-width: 768px) {

    /* Block Checkout */
    .wc-block-components-checkout-place-order-button,
    .wc-block-checkout__actions_row .wc-block-components-button {
        font-size: 15px !important;
        padding: 14px 24px !important;
    }

    .wc-block-components-text-input input {
        font-size: 16px !important;
        /* Prevent zoom on iOS */
    }

    /* Classic Checkout */
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce-checkout .form-row input.input-text,
    .woocommerce-checkout select.cvnc-ward-select,
    select.cvnc-ward-select--block {
        font-size: 16px !important;
        /* Prevent zoom on iOS */
    }

    .woocommerce-checkout #place_order {
        font-size: 15px !important;
        padding: 14px 24px !important;
    }
}

@media (max-width: 480px) {
    .wc-block-components-checkout-step__heading {
        font-size: 16px !important;
    }

    .woocommerce-checkout .woocommerce-shipping-fields h3,
    .woocommerce-checkout h3#order_review_heading {
        font-size: 17px !important;
    }
}

/* ==========================================================================
   4. CSS TÙY BIẾN CHO HÌNH THỨC THANH TOÁN (HẾT / CỌC)
   ========================================================================== */

.checkout-payment-type-section {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
}

.checkout-payment-type-option {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 0 10px 0 !important;
    background: #ffffff !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box;
}

.checkout-payment-type-option:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

.checkout-payment-type-option--checked {
    border-color: var(--cvck-primary) !important;
    background: rgba(26, 50, 99, 0.04) !important;
    box-shadow: 0 4px 12px rgba(26, 50, 99, 0.08) !important;
}

.checkout-payment-type-option input[type="radio"] {
    margin-top: 4px !important;
}

/* Bảng chi tiết tiền cọc */
.checkout-deposit-breakdown {
    background: #f8fafc;
    border: 1.5px dashed var(--cvck-primary);
    border-radius: 12px;
    padding: 18px;
    margin-top: 12px;
    margin-bottom: 20px;
    display: none;
    animation: cvncSlideDown 0.25s ease-out forwards;
    box-sizing: border-box;
}

@keyframes cvncSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkout-deposit-breakdown__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--cvck-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.checkout-deposit-breakdown__row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--cvck-text);
}

.checkout-deposit-breakdown__row--highlight {
    font-weight: 700;
    color: var(--cvck-primary);
    border-top: 1px solid #e2e8f0;
    padding-top: 8px;
    margin-top: 8px;
    margin-bottom: 4px;
}

/* ==========================================================================
   5. CSS CHO VIETQR CODE & BANK ACCOUNT DETAILS
   ========================================================================== */

.cvnc-vietqr-wrapper {
    margin: 30px auto;
    max-width: 580px;
    font-family: inherit;
    box-sizing: border-box;
}

.cvnc-qr-container {
    width: 100%;
}

.cvnc-qr-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cvnc-qr-header {
    background: linear-gradient(135deg, #1a3263 0%, #122244 100%);
    padding: 24px;
    text-align: center;
    color: #ffffff;
    position: relative;
}

.cvnc-bank-logo {
    max-height: 40px;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    display: inline-block;
}

.cvnc-qr-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: 0.5px;
}

.cvnc-qr-subtext {
    font-size: 13px;
    color: #cbd5e1;
    margin: 0;
}

.cvnc-qr-body {
    padding: 28px;
    display: flex;
    flex-direction: row;
    gap: 28px;
    align-items: center;
}

@media (max-width: 600px) {
    .cvnc-qr-body {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
}

.cvnc-qr-image-wrapper {
    flex: 0 0 200px;
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    text-align: center;
}

.cvnc-qr-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Success overlay inside QR image wrapper */
.cvnc-qr-success-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}

.cvnc-qr-paid .cvnc-qr-success-overlay {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.cvnc-success-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
}

.cvnc-success-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #10b981;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.cvnc-success-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #10b981;
    stroke-width: 3;
    fill: none;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

.cvnc-qr-success-overlay h3 {
    font-size: 16px;
    color: #10b981 !important;
    font-weight: 700;
    margin: 0 0 4px 0 !important;
}

.cvnc-qr-success-overlay p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    text-align: center;
}

.cvnc-qr-details {
    flex: 1;
    width: 100%;
}

.cvnc-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.cvnc-detail-row:last-child {
    border-bottom: none;
}

.cvnc-detail-label {
    font-size: 13px;
    color: #64748b;
}

.cvnc-detail-value {
    font-size: 14px;
    color: #1e293b;
    text-align: right;
}

.cvnc-detail-value strong {
    font-weight: 600;
}

.cvnc-amount strong .woocommerce-Price-amount {
    color: #ef4444;
    font-size: 16px;
    font-weight: 700;
}

.cvnc-copyable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
    user-select: none;
}

.cvnc-copyable:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1a3263;
}

.cvnc-copyable:active {
    transform: scale(0.95);
}

.cvnc-copy-icon {
    display: inline-flex;
    color: #64748b;
    transition: color 0.2s;
}

.cvnc-copyable:hover .cvnc-copy-icon {
    color: #1a3263;
}

.cvnc-highlight {
    background: #fef08a !important;
    border-color: #fde047 !important;
    color: #854d0e !important;
    animation: cvncPulseYellow 2s infinite ease-in-out;
}

.cvnc-highlight:hover {
    background: #fef9c3 !important;
    border-color: #fef08a !important;
}

@keyframes cvncPulseYellow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(254, 240, 138, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(254, 240, 138, 0);
    }
}

.cvnc-qr-footer {
    padding: 20px 28px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.cvnc-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.cvnc-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #eab308;
    display: inline-block;
    animation: cvncPulseDot 1.5s infinite ease-in-out;
}

@keyframes cvncPulseDot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.6;
    }
}

.cvnc-status-text {
    font-size: 13px;
    font-weight: 600;
    color: #eab308;
}

/* Success status classes override */
.cvnc-qr-paid .cvnc-status-dot {
    background-color: #10b981;
    animation: none;
}

.cvnc-qr-paid .cvnc-status-text {
    color: #10b981;
}

.cvnc-warning-text {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Copy Toast Notification */
.cvnc-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 50px);
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Copy Toast Notification */
.cvnc-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 50px);
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cvnc-toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   ORDER LOOKUP PAGE STYLES
   ========================================================================== */

.cvnc-order-lookup-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Be Vietnam Pro', sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Header */
.cvnc-lookup-header {
    text-align: center;
    margin-bottom: 24px;
}

.cvnc-lookup-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--cvck-primary);
    margin: 0 0 8px 0;
}

.cvnc-lookup-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* Card */
.cvnc-lookup-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Tabs */
.cvnc-lookup-tabs {
    display: flex !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.cvnc-lookup-tab {
    flex: 1 !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
}

.cvnc-lookup-tab:hover {
    color: var(--cvck-primary) !important;
    background: rgba(26, 50, 99, 0.03) !important;
}

.cvnc-lookup-tab.active {
    color: var(--cvck-primary) !important;
    background: #ffffff !important;
}

.cvnc-lookup-tab.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--cvck-primary), var(--cvck-secondary)) !important;
    border-radius: 3px 3px 0 0 !important;
}

.cvnc-tab-icon {
    font-size: 20px !important;
}

.cvnc-tab-label {
    font-size: 12px !important;
}

/* Form Section */
.cvnc-lookup-forms {
    padding: 28px !important;
}

.cvnc-lookup-form-content {
    display: none !important;
}

.cvnc-lookup-form-content.active {
    display: block !important;
    animation: cvncFadeIn 0.3s ease !important;
}

@keyframes cvncFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Message */
.cvnc-message {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: none;
    font-size: 13px;
    align-items: center;
    gap: 10px;
    animation: cvncFadeIn 0.3s ease;
}

.cvnc-message.show {
    display: flex;
}

.cvnc-message-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.cvnc-message-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.cvnc-message-icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* Form Group */
.cvnc-form-group {
    margin-bottom: 18px;
}

.cvnc-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cvck-text);
    margin-bottom: 8px;
}

.cvnc-form-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.25s ease;
    outline: none;
    font-family: inherit;
    background: #ffffff;
}

.cvnc-form-input:focus {
    border-color: var(--cvck-primary);
    box-shadow: 0 0 0 4px rgba(26, 50, 99, 0.08);
}

.cvnc-form-input::placeholder {
    color: #94a3b8;
}

.cvnc-form-hint {
    font-size: 12px;
    color: #64748b;
    margin-top: 6px;
    margin-bottom: 0;
}

/* Submit Button */
.cvnc-submit-btn {
    width: 100% !important;
    padding: 15px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: #1a3263 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.cvnc-submit-btn:hover {
    background: #2a5298 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(26, 50, 99, 0.3) !important;
}

.cvnc-submit-btn:active {
    transform: translateY(0) !important;
}

.cvnc-submit-btn.loading {
    opacity: 0.8 !important;
    cursor: not-allowed !important;
}

.cvnc-btn-spinner {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    animation: cvncSpin 0.8s linear infinite !important;
    display: none !important;
}

.cvnc-submit-btn.loading .cvnc-btn-spinner {
    display: block !important;
}

.cvnc-submit-btn.loading .cvnc-btn-text {
    display: none !important;
}

@keyframes cvncSpin {
    to {
        transform: rotate(360deg);
    }
}

.cvnc-btn-secondary {
    background: #f1f5f9 !important;
    color: var(--cvck-text) !important;
}

.cvnc-btn-secondary:hover {
    background: #e2e8f0 !important;
    box-shadow: none !important;
}

/* Results Section */
.cvnc-lookup-results {
    padding: 0 28px 28px;
}

.cvnc-lookup-results.show {
    animation: cvncFadeIn 0.4s ease;
}

/* Results Header */
.cvnc-results-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(26, 50, 99, 0.04) 0%, rgba(26, 50, 99, 0.08) 100%);
    border-radius: 12px;
    margin-bottom: 20px;
}

.cvnc-results-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--cvck-primary) 0%, var(--cvck-secondary) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.cvnc-results-info {
    flex: 1;
}

.cvnc-results-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--cvck-text);
    margin: 0 0 4px 0;
}

.cvnc-results-meta {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

/* Order Status Badge */
.cvnc-order-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.cvnc-order-status.pending,
.cvnc-order-status.on-hold {
    background: #fef3c7;
    color: #d97706;
}

.cvnc-order-status.failed,
.cvnc-order-status.cancelled,
.cvnc-order-status.refunded {
    background: #fee2e2;
    color: #dc2626;
}

.cvnc-order-status.processing {
    background: #dbeafe;
    color: #2563eb;
}

.cvnc-order-status.shipped,
.cvnc-order-status.deposit-received {
    background: #ede9fe;
    color: #7c3aed;
}

.cvnc-order-status.completed {
    background: #d1fae5;
    color: #059669;
}

/* Order Products */
.cvnc-order-products {
    margin-bottom: 16px;
}

.cvnc-product-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

.cvnc-product-item:last-child {
    border-bottom: none;
}

.cvnc-product-image {
    width: 60px;
    height: 60px;
    background: #f8fafc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    overflow: hidden;
}

.cvnc-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cvnc-product-details {
    flex: 1;
    min-width: 0;
}

.cvnc-product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--cvck-text);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.cvnc-product-meta {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

.cvnc-product-qty {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

.cvnc-product-right {
    text-align: right;
    flex-shrink: 0;
}

.cvnc-product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--cvck-text);
}

/* Order Summary */
.cvnc-order-summary {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.cvnc-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.cvnc-summary-label {
    color: #64748b;
}

.cvnc-summary-value {
    color: var(--cvck-text);
    font-weight: 500;
}

.cvnc-summary-discount .cvnc-summary-value {
    color: #dc2626;
}

.cvnc-summary-total {
    border-top: 1px solid #e2e8f0;
    margin-top: 8px;
    padding-top: 12px;
}

.cvnc-summary-total .cvnc-summary-label,
.cvnc-summary-total .cvnc-summary-value {
    font-weight: 700;
    font-size: 16px;
    color: var(--cvck-primary);
}

/* Tracking Box */
.cvnc-tracking-box {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.cvnc-tracking-title {
    font-size: 14px;
    font-weight: 700;
    color: #0369a1;
    margin: 0 0 12px 0;
}

.cvnc-tracking-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.cvnc-tracking-row:not(:last-child) {
    border-bottom: 1px solid #e0f2fe;
}

.cvnc-tracking-label {
    font-size: 13px;
    color: #64748b;
}

.cvnc-tracking-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--cvck-text);
}

.cvnc-tracking-code {
    background: #e0f2fe;
    color: #0284c7;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
}

.cvnc-tracking-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1e3a8a;
    color: #fff !important;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    margin-top: 12px;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

.cvnc-tracking-btn:hover {
    background: #1e40af;
    transform: translateY(-1px);
}

/* Payment Box */
.cvnc-payment-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.cvnc-payment-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--cvck-text);
    margin: 0 0 12px 0;
}

.cvnc-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.cvnc-payment-label {
    font-size: 13px;
    color: #64748b;
}

.cvnc-payment-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--cvck-text);
}

.cvnc-payment-status {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.cvnc-payment-status.paid {
    background: #d1fae5;
    color: #059669;
}

.cvnc-payment-status.pending {
    background: #fef3c7;
    color: #d97706;
}

/* CTA */
.cvnc-order-cta {
    margin-top: 20px;
    text-align: center;
}

.cv-shipped {
    background: #5cd65b;
    color: #1b5112;
}

.cvnc-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1A3263;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.cvnc-cta-link:hover {
    background: var(--cvck-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 50, 99, 0.2);
}

/* Not Found */
.cvnc-not-found-content {
    text-align: center;
    padding: 20px 0;
}

.cvnc-not-found-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.cvnc-not-found-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--cvck-text);
    margin: 0 0 8px 0;
}

.cvnc-not-found-text {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Footer */
.cvnc-lookup-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: #64748b;
}

.cvnc-lookup-footer a {
    color: var(--cvck-primary);
    text-decoration: none;
    font-weight: 500;
}

.cvnc-lookup-footer a:hover {
    text-decoration: underline;
}

/* Product variations (meta_data chips) */
.cvnc-product-variations {
    margin-top: 6px;
}

.cvnc-variation-chip-group {
    display: block;
    margin-bottom: 4px;
}

.cvnc-variation-chip-label {
    display: inline-block;
    background-color: #f8fafc;
    color: #64748b;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
    font-weight: 600;
    vertical-align: top;
    line-height: 1.4;
    margin: 0 4px 2px 0;
}

.cvnc-variation-chip-value {
    display: inline-block;
    background-color: #eff6ff;
    color: #1e3a8a;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 700;
    vertical-align: top;
    line-height: 1.4;
    word-break: break-word;
    max-width: 100%;
}

/* Image in variation value */
.cvnc-variation-chip-value img {
    max-width: 80px;
    max-height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    display: block;
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 480px) {
    .cvnc-lookup-header {
        margin-bottom: 20px;
    }

    .cvnc-lookup-title {
        font-size: 20px;
    }

    .cvnc-lookup-forms,
    .cvnc-lookup-results {
        padding: 20px;
    }

    .cvnc-lookup-tab {
        padding: 12px 8px;
    }

    .cvnc-tab-icon {
        font-size: 18px;
    }

    .cvnc-tab-label {
        font-size: 11px;
    }

    .cvnc-product-item {
        flex-wrap: wrap;
    }

    .cvnc-product-right {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px dashed #e2e8f0;
        text-align: left;
    }
}

/* ============================================
   DEPOSIT UI (Checkout Deposit Breakdown Box)
============================================ */
.deposit-breakdown {
    border: 1px dashed var(--cvck-primary);
    border-radius: 8px;
    padding: 24px;
    margin-top: 15px;
    background-color: #fff;
    position: relative;
}

.deposit-breakdown .breakdown-title {
    font-weight: 700;
    color: var(--cvck-primary);
    font-size: 14px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deposit-breakdown .breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 15px;
    color: #4b5563;
}

.deposit-breakdown .breakdown-row.total-order {
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}

.deposit-breakdown .breakdown-row.deposit-amount {
    font-weight: 700;
    color: var(--cvck-primary);
    font-size: 16px;
}

.deposit-breakdown .breakdown-row.cod-amount {
    color: #ef4444;
    font-style: italic;
    font-size: 14px;
}

/* ============================================
   DEPOSIT SIDEBAR UI (Order Summary)
============================================ */
.deposit-info-section {
    background-color: #f8fafc;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    padding: 16px;
    position: relative;
}

.deposit-info-section::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #94a3b8;
}

.deposit-info-section::after {
    content: '';
    position: absolute;
    top: -7px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #f8fafc;
}

.deposit-info-section .deposit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
}

.deposit-info-section .deposit-row:last-child {
    margin-bottom: 0;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

.deposit-info-section .deposit-row .label {
    display: flex;
    align-items: center;
    color: #475569;
}

.deposit-info-section .deposit-row .icon-sm {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #64748b;
}

.deposit-info-section .deposit-highlight span:last-child {
    font-weight: 700;
    color: var(--cvck-primary);
    font-size: 15px;
}

.deposit-info-section .cod-highlight span:last-child {
    font-weight: 700;
    color: #ef4444;
}