/* =====================================================================
   Giỏ hàng chung — eSIM / nạp SIM / SIM vật lý (cart-fulfillment.js)
   Nạp sau cart-checkout-pro.css, dùng biến --cc-* của lớp đó nên theme
   chỉ cần đổi --sf-checkout-primary là ăn màu.
   ===================================================================== */

.cart-container .cf-hidden { display: none !important; }
.cart-container [hidden] { display: none !important; }

/* Bước 1 · 2 · 3 trên tiêu đề thẻ */
.cart-container .cf-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-right: 6px;
    border-radius: 50%;
    background: var(--cc-primary); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1;
    flex: 0 0 auto;
}
.cart-container .shipping-header h3,
.cart-container .payment-methods > h3.collapsible-header > span { display: inline-flex; align-items: center; }
.cart-container .payment-methods > h3.collapsible-header > span { font-size: 15px; font-weight: 700; color: var(--cc-ink); }

/* Thẻ «Nhận eSIM» */
.cart-container .cf-card-title {
    display: flex; align-items: center; margin: 0 !important;
    padding: 14px 16px; background: var(--cc-soft);
    border-bottom: 1px solid var(--cc-line);
    color: var(--cc-ink); font-size: 15px; font-weight: 700;
}
.cart-container .cf-delivery-steps {
    list-style: none; margin: 0; padding: 14px 16px 6px;
    display: grid; grid-template-columns: 1fr; gap: 8px;
}
.cart-container .cf-delivery-steps li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm);
    background: #fff;
}
.cart-container .cf-delivery-steps li > i {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--cc-primary) 12%, #fff); color: var(--cc-primary);
    font-size: 16px;
}
.cart-container .cf-delivery-steps strong { display: block; color: var(--cc-ink); font-size: 13px; }
.cart-container .cf-delivery-steps small { display: block; color: var(--cc-muted); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.cart-container .cf-delivery-free {
    margin: 4px 16px 14px !important; color: var(--cc-primary-dark);
    font-size: 13px; font-weight: 600;
}
.cart-container .cf-delivery-free i { margin-right: 4px; }

/* Thông báo trong form khi giỏ chỉ eSIM */
.cart-container .cf-digital-note {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 0 0 14px; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--cc-primary) 30%, #fff);
    border-radius: var(--cc-radius-sm);
    background: color-mix(in srgb, var(--cc-primary) 7%, #fff);
}
.cart-container .cf-digital-note__icon {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cc-primary); color: #fff; font-size: 16px;
}
.cart-container .cf-digital-note strong { color: var(--cc-ink); font-size: 14px; }
.cart-container .cf-digital-note p { margin: 2px 0 0 !important; color: var(--cc-text); font-size: 12.5px; line-height: 1.5; }

/* Ẩn / hiện theo loại giỏ */
.cart-container .cf-only-digital { display: none; }
.cart-container.cf-digital .cf-only-digital { display: inline; }
.cart-container.cf-digital .form-group.cf-only-digital { display: block; }
.cart-container.cf-digital .cf-only-physical { display: none; }
.cart-container.cf-digital .cf-address-block { display: none !important; }

/* Nhãn loại SP trên dòng giỏ */
.cart-container .cart-item { flex-wrap: wrap; }
.cart-container .cf-kind-badge {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px; padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.5;
    background: color-mix(in srgb, var(--cc-primary) 10%, #fff); color: var(--cc-primary-dark);
}
.cart-container .cf-kind-badge small { font-weight: 500; opacity: .85; font-size: 11px; }
.cart-container .cf-kind-badge[data-kind="recharge"] { background: #eff6ff; color: #1d4ed8; }
.cart-container .cf-kind-badge[data-kind="sim_card"] { background: #fff7ed; color: #c2410c; }

/* Dòng có ô ICCID: bỏ bo góc riêng của dòng (theme) để không chồng lên khung danh sách,
   thùng rác neo trên cùng thay vì giữa dòng cao */
.cart-container #list_product_item .cart-item { border-radius: 0 !important; }
.cart-container #list_product_item .cart-item.cf-has-iccid { align-items: flex-start; }
.cart-container #list_product_item .cart-item.cf-has-iccid .cart-item-remove { top: 16px !important; transform: none !important; }

/* Ô ICCID */
.cart-container .cf-iccid {
    flex: 0 0 100%; width: 100%; box-sizing: border-box;
    margin: 4px 0 2px; padding: 12px 14px 10px;
    border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm);
    background: var(--cc-soft);
}
.cart-container .cf-iccid.cf-full { border-color: color-mix(in srgb, var(--cc-primary) 40%, #fff); background: color-mix(in srgb, var(--cc-primary) 5%, #fff); }
.cart-container .cf-iccid.cf-over,
.cart-container .cf-iccid.cf-error { border-color: var(--cc-danger); background: #fef2f2; }
.cart-container .cf-iccid__head {
    display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
    font-size: 12.5px; font-weight: 700; color: var(--cc-ink); cursor: text;
}
.cart-container .cf-iccid__head i { color: var(--cc-muted); }
.cart-container .cf-iccid__count {
    margin-left: auto; padding: 1px 8px; border-radius: 999px;
    background: #fff; border: 1px solid var(--cc-line); font-size: 11.5px; font-weight: 700; color: var(--cc-text);
}
.cart-container .cf-iccid__count:empty { display: none; }
.cart-container .cf-iccid.cf-full .cf-iccid__count { color: var(--cc-primary-dark); border-color: color-mix(in srgb, var(--cc-primary) 40%, #fff); }
.cart-container .cf-iccid.cf-over .cf-iccid__count { color: var(--cc-danger); border-color: #fecaca; }
.cart-container .cf-iccid textarea.form-input {
    display: block; width: 100%; box-sizing: border-box; min-height: 40px; margin: 0;
    padding: 9px 12px; resize: vertical; line-height: 1.5;
    border: 1px solid var(--cc-line) !important; border-radius: 8px !important; background: #fff !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 13px !important; letter-spacing: .2px;
}
.cart-container .cf-iccid textarea.form-input::placeholder {
    font-family: inherit; font-size: 12.5px; font-style: normal; color: var(--cc-faint); letter-spacing: 0;
}
.cart-container .cf-iccid textarea.form-input:focus { outline: none; border-color: var(--cc-primary) !important; box-shadow: 0 0 0 3px var(--cc-ring); }
.cart-container .cf-iccid__help { display: block; margin-top: 6px; color: var(--cc-muted); font-size: 11.5px; line-height: 1.45; }
.cart-container .cf-iccid.cf-full .cf-iccid__help { color: var(--cc-primary-dark); }
.cart-container .cf-iccid.cf-over .cf-iccid__help { color: var(--cc-danger); }

/* Phương thức thanh toán: thẻ có biểu tượng, hiện đủ */
.cart-container .payment-method.cf-hidden { display: none !important; }
.cart-container .cf-pm-icon {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cc-soft); color: var(--cc-muted); font-size: 17px;
    transition: background .15s ease, color .15s ease;
}
.cart-container .payment-method { align-items: center !important; }
.cart-container .payment-method.active .cf-pm-icon { background: var(--cc-primary); color: #fff; }
.cart-container .payment-method .payment-method-content p { display: none; }
.cart-container .payment-method.active .payment-method-content p { display: block; }
.cart-container .cf-cod-note {
    margin: 4px 0 8px !important; padding: 8px 10px; border-radius: 8px;
    background: #fffbeb; color: var(--cc-warn); font-size: 12.5px; line-height: 1.45;
}
.cart-container .cf-cod-note i { margin-right: 4px; }

/* Tổng tiền: phí ship miễn phí khi giỏ chỉ eSIM */
.cart-container .cf-free { color: var(--cc-primary-dark); font-weight: 600; font-size: .92em; }