/* ==========================================================================
   checkout.css — Checkout (3-langkah + ringkasan sticky), Berjaya, Gagal.
   Semua warna guna var(--kn-*). Tiada hex terus.
   ========================================================================== */

/* ---------- Checkout ---------- */
.kn-checkout { background: var(--kn-page-bg); min-height: calc(100vh - 66px); padding: clamp(24px, 4vw, 48px) 20px 70px; }
.kn-checkout__inner { max-width: var(--kn-max-checkout); margin: 0 auto; }

/* Penunjuk 3 langkah */
.kn-steps { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 28px; color: var(--kn-muted); font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.kn-steps__item.is-active { color: var(--kn-cta); }
.kn-steps__line { width: 24px; height: 1.5px; background: var(--kn-border); }

.kn-checkout__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
@media (max-width: 819.98px) { .kn-checkout__grid { grid-template-columns: 1fr; } }

.kn-checkout__main { background: var(--kn-on-dark); border-radius: var(--kn-r-panel); padding: clamp(22px, 3vw, 32px); box-shadow: var(--kn-sh-card); }
.kn-checkout__main h2 { font-size: 20px; font-weight: 800; }
.kn-checkout__main h3 { font-size: 17px; font-weight: 800; margin-top: 26px; }
.kn-checkout__fields { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }

/* Kaedah bayaran (radio card) */
.kn-paymethods { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.kn-paymethod { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--kn-border); background: var(--kn-on-dark); border-radius: var(--kn-r-input); padding: 14px 16px; cursor: pointer; }
.kn-paymethod.is-selected { border-color: var(--kn-cta); background: var(--kn-pay-selected); }
.kn-paymethod__radio { width: 18px; height: 18px; border-radius: var(--kn-r-full); border: 2px solid var(--kn-input-dot); display: grid; place-items: center; flex: none; }
.kn-paymethod.is-selected .kn-paymethod__radio { border-color: var(--kn-cta); }
.kn-paymethod__radio::after { content: ""; width: 9px; height: 9px; border-radius: var(--kn-r-full); background: var(--kn-cta); opacity: 0; }
.kn-paymethod.is-selected .kn-paymethod__radio::after { opacity: 1; }
.kn-paymethod__label { font-weight: 700; font-size: 15px; color: var(--kn-ink-2); }
.kn-checkout__consent { margin-top: 18px; }

/* Ringkasan pesanan */
.kn-summary { background: var(--kn-on-dark); border-radius: var(--kn-r-panel); padding: 24px; box-shadow: var(--kn-sh-card); }
@media (min-width: 820px) { .kn-summary { position: sticky; top: 120px; } }
.kn-summary h3 { font-size: 17px; font-weight: 800; margin-bottom: 16px; }
.kn-summary__product { display: flex; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--kn-border-3); }
.kn-summary__thumb { flex: none; width: 64px; aspect-ratio: var(--kn-ar-card-alt); border-radius: var(--kn-r-md); background: var(--kn-thumb-1); overflow: hidden; }
.kn-summary__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kn-summary__pname { font-family: var(--kn-font-head); font-weight: 700; font-size: 14.5px; color: var(--kn-ink); }
.kn-summary__pmeta { color: var(--kn-muted); font-size: 12.5px; margin-top: 3px; }
.kn-summary__row { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--kn-body); margin-top: 14px; }
.kn-summary__total { display: flex; justify-content: space-between; font-family: var(--kn-font-head); font-weight: 800; font-size: 20px; color: var(--kn-ink); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kn-border-3); }
.kn-summary .kn-btn { margin-top: 18px; }
.kn-summary__note { color: var(--kn-muted); font-size: 12px; text-align: center; margin-top: 12px; line-height: var(--kn-lh-tight); }
.kn-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.kn-trust__badge { background: var(--kn-border-3); color: var(--kn-ink-3); font-family: var(--kn-font-head); font-weight: 800; font-size: 11px; padding: 5px 10px; border-radius: var(--kn-r-xs); }

/* ---------- Halaman keputusan (Berjaya / Gagal) ---------- */
.kn-result { min-height: calc(100vh - 66px); padding: clamp(30px, 5vw, 64px) 20px 70px; }
.kn-result--center { display: flex; align-items: flex-start; justify-content: center; padding-top: clamp(34px, 6vw, 70px); }
.kn-result__inner { max-width: var(--kn-max-berjaya); margin: 0 auto; text-align: center; }
.kn-result__inner--gagal { max-width: var(--kn-max-gagal); }

.kn-result__ok { width: 90px; height: 90px; border-radius: var(--kn-r-full); background: var(--kn-grad-green); display: grid; place-items: center; margin: 0 auto 22px; box-shadow: var(--kn-sh-green); }
.kn-result__ok-tick { width: 32px; height: 18px; border-left: 6px solid var(--kn-on-dark); border-bottom: 6px solid var(--kn-on-dark); transform: rotate(-45deg); margin-top: -7px; border-radius: 2px; }
.kn-result__fail { width: 88px; height: 88px; border-radius: var(--kn-r-full); background: var(--kn-red-bg); display: grid; place-items: center; margin: 0 auto 22px; }
.kn-result__fail span { font-size: 40px; color: var(--kn-red-icon); font-family: var(--kn-font-head); font-weight: 800; line-height: 1; }

.kn-result__inner h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; }
.kn-result__inner--gagal h1 { font-size: clamp(25px, 4vw, 34px); }
.kn-result__inner > p { color: var(--kn-ink-4); font-size: 16.5px; margin-top: 12px; line-height: var(--kn-lh-body); }
.kn-result__inner--gagal > p { font-size: 16px; }
.kn-result__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

.kn-result__order { background: var(--kn-on-dark); border-radius: var(--kn-r-card-lg); padding: 22px 24px; box-shadow: var(--kn-sh-card-3); margin-top: 28px; text-align: left; }
.kn-result__order-list { display: flex; flex-direction: column; gap: 11px; }
.kn-result__order-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.kn-result__order-row .k { color: var(--kn-muted); }
.kn-result__order-row .v { color: var(--kn-ink-2); font-weight: 700; text-align: right; }

.kn-result__next { background: var(--kn-surface-alt); border-radius: var(--kn-r-card-lg); padding: 22px 24px; margin-top: 16px; text-align: left; }
.kn-result__next h3 { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.kn-result__steps { display: flex; flex-direction: column; gap: 11px; }
.kn-result__step { display: flex; align-items: center; gap: 11px; color: var(--kn-ink-2); font-size: 14.5px; font-weight: 600; }
.kn-result__step-n { flex: none; width: 24px; height: 24px; border-radius: var(--kn-r-full); background: var(--kn-navy-600); color: var(--kn-on-dark); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.kn-result__help { margin-top: 20px; font-size: 14px; color: var(--kn-body); }

/* ==========================================================================
   PADANAN MARKUP WOOCOMMERCE — samakan borang checkout WC dengan reka bentuk.
   ========================================================================== */
.kn-checkout__grid .col2-set,
.kn-checkout__grid .col-1,
.kn-checkout__grid .col-2 { width: auto; float: none; margin: 0; }

#customer_details h3 { font-size: 17px; font-weight: 800; margin: 26px 0 14px; }
#customer_details .woocommerce-billing-fields__field-wrapper,
#customer_details .woocommerce-additional-fields__field-wrapper { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.kn-checkout__main .form-row { margin: 0; padding: 0; }
.kn-checkout__main .form-row label { font-weight: 700; font-size: 14px; color: var(--kn-ink-2); display: block; margin-bottom: 7px; }
.kn-checkout__main .required { color: var(--kn-red-ink); border: 0; }
.kn-checkout__main input.input-text,
.kn-checkout__main textarea,
.kn-checkout__main select,
.kn-checkout__main .select2-selection {
	width: 100%; padding: 13px 15px; border: 1.5px solid var(--kn-border); border-radius: var(--kn-r-input);
	font-size: var(--kn-fs-input); color: var(--kn-ink); outline: none; background: var(--kn-on-dark);
	font-family: var(--kn-font-body); transition: border-color var(--kn-t-fast), box-shadow var(--kn-t-fast);
}
.kn-checkout__main input.input-text:focus,
.kn-checkout__main textarea:focus,
.kn-checkout__main select:focus { border-color: var(--kn-blue-600); box-shadow: var(--kn-sh-focus); }
.kn-checkout__main .woocommerce-invalid input.input-text { border-color: var(--kn-red-border); background: var(--kn-red-bg-soft); }

/* Jadual ringkasan pesanan */
.kn-summary .shop_table { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.kn-summary .shop_table th,
.kn-summary .shop_table td { text-align: left; padding: 10px 0; font-size: 14.5px; color: var(--kn-body); border: 0; border-bottom: 1px solid var(--kn-border-3); }
.kn-summary .shop_table .product-name { color: var(--kn-ink); font-weight: 600; }
.kn-summary .shop_table td.product-total,
.kn-summary .shop_table th { text-align: right; }
.kn-summary .shop_table .order-total th,
.kn-summary .shop_table .order-total td { font-family: var(--kn-font-head); font-weight: 800; font-size: 18px; color: var(--kn-ink); border-bottom: 0; padding-top: 12px; }

/* Kaedah pembayaran sebagai radio card */
#payment { background: transparent; margin-top: 16px; }
#payment ul.wc_payment_methods { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; border: 0; }
#payment ul.wc_payment_methods li { border: 1.5px solid var(--kn-border); background: var(--kn-on-dark); border-radius: var(--kn-r-input); padding: 14px 16px; }
#payment ul.wc_payment_methods li.kn-selected,
#payment ul.wc_payment_methods li:has(input:checked) { border-color: var(--kn-cta); background: var(--kn-pay-selected); }
#payment ul.wc_payment_methods li label { font-weight: 700; font-size: 15px; color: var(--kn-ink-2); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
#payment ul.wc_payment_methods li input[type="radio"] { accent-color: var(--kn-cta); width: 18px; height: 18px; }
#payment .payment_box { background: var(--kn-surface-alt); border-radius: var(--kn-r-md); padding: 12px 14px; margin-top: 10px; color: var(--kn-body); font-size: var(--kn-fs-caption); }
#payment .payment_box::before { display: none; }

/* Terma & butang bayar */
.kn-summary .woocommerce-terms-and-conditions-wrapper { margin: 14px 0; font-size: 13px; color: var(--kn-body); line-height: var(--kn-lh-tight); }
.kn-summary .woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox { accent-color: var(--kn-cta); width: 18px; height: 18px; }
#payment .place-order { padding: 0; margin-top: 4px; }
#payment #place_order {
	display: inline-flex; align-items: center; justify-content: center; width: 100%;
	font-family: var(--kn-font-head); font-weight: 800; font-size: 16px; min-height: 44px;
	border: none; border-radius: var(--kn-r-btn); padding: 16px 24px; cursor: pointer;
	background: var(--kn-grad-cta); color: var(--kn-on-dark); box-shadow: var(--kn-sh-cta-sm);
}
#payment #place_order:hover { color: var(--kn-on-dark); }