/* ============================================================
 * NSF Clean — Premium Checkout (CartFlows-style)
 * Distraction-free, conversion-optimized, 2-column sticky.
 * Mobile-first untuk audience 40-65.
 * ============================================================ */

:root {
	--nsf-green: #0B7A4B;
	--nsf-green-dark: #085F39;
	--nsf-red: #C00000;
	--nsf-orange: #FF7A00;
	--nsf-orange-dark: #E55E00;
	--nsf-yellow: #FFB400;
	--nsf-bg: #F5F7F9;
	--nsf-card: #ffffff;
	--nsf-text: #1a1a1a;
	--nsf-muted: #6b7280;
	--nsf-border: #E5E7EB;
}

/* === HIDE EVERYTHING THEME-RELATED === */
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-order-received {
	font-family: 'Nunito', -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
	background: var(--nsf-bg) !important;
	color: var(--nsf-text);
	font-size: 17px;
	line-height: 1.55;
	margin: 0 !important;
	overflow-x: hidden !important;
	max-width: 100vw !important;
}

/* Images + media only — safe max-width (no longer applied to ALL * which breaks flex) */
body.woocommerce-checkout img,
body.woocommerce-checkout video,
body.woocommerce-checkout iframe,
body.woocommerce-cart img,
body.woocommerce-cart video,
body.woocommerce-order-received img {
	max-width: 100%;
	height: auto;
}

body.woocommerce-checkout > header,
body.woocommerce-checkout > footer,
body.woocommerce-cart > header,
body.woocommerce-cart > footer,
body.woocommerce-checkout .site-header,
body.woocommerce-checkout .site-footer,
body.woocommerce-checkout .ast-mobile-header-wrap,
body.woocommerce-cart .site-header,
body.woocommerce-cart .site-footer,
body.woocommerce-order-received .site-header,
body.woocommerce-order-received .site-footer {
	display: none !important;
}

/* Hello Elementor default page wrapper — strip max-width */
body.woocommerce-checkout .site,
body.woocommerce-checkout #content,
body.woocommerce-checkout .site-main,
body.woocommerce-cart .site,
body.woocommerce-cart #content,
body.woocommerce-cart .site-main {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

body.woocommerce-checkout .entry-header,
body.woocommerce-checkout .page-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout article > header,
body.woocommerce-cart .entry-header,
body.woocommerce-cart .page-title,
body.woocommerce-cart .entry-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart article > header,
body.woocommerce-order-received .entry-header,
body.woocommerce-order-received .entry-title,
body.woocommerce-order-received article > header {
	display: none !important;
}

/* Hide "Billing details" h3 — kita ada "Maklumat Penghantaran" badge */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
	display: none !important;
}

/* Hide lingering "added to cart" notice on checkout — kita dah dalam checkout */
body.woocommerce-checkout .woocommerce-message {
	display: none !important;
}

/* Hide AJAX loading dot once review updated */
body.woocommerce-checkout #order_review.processing::before {
	display: none !important;
}
body.woocommerce-checkout .blockUI.blockOverlay {
	background: rgba(255,255,255,0.7) !important;
}

/* === CUSTOM CHECKOUT SHELL === */
.nsf-checkout-shell {
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* === HEADER === */
.nsf-checkout-header {
	background: #fff;
	border-bottom: 1px solid var(--nsf-border);
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
	position: sticky;
	top: 0;
	z-index: 50;
}
.nsf-checkout-header-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.nsf-checkout-logo {
	display: flex;
	align-items: baseline;
	gap: 4px;
	text-decoration: none;
	font-weight: 900;
}
.nsf-logo-mark {
	background: linear-gradient(135deg, var(--nsf-green), var(--nsf-green-dark));
	color: #fff;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 18px;
	letter-spacing: 0.5px;
}
.nsf-logo-text {
	color: var(--nsf-text);
	font-size: 20px;
	font-weight: 900;
}
.nsf-checkout-secure {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--nsf-green);
	background: #F0FAF0;
	padding: 8px 14px;
	border-radius: 20px;
	border: 1px solid #D0EEDB;
}
.nsf-secure-icon { font-size: 16px; }

/* Progress steps */
.nsf-checkout-progress {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px 14px;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--nsf-muted);
	flex-wrap: wrap;
}
.nsf-step {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--nsf-border);
}
.nsf-step .dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--nsf-border);
	color: var(--nsf-muted);
	font-size: 12px;
	font-weight: 900;
}
.nsf-step.done {
	color: var(--nsf-green);
	background: #F0FAF0;
	border-color: #D0EEDB;
}
.nsf-step.done .dot {
	background: var(--nsf-green);
	color: #fff;
}
.nsf-step.current {
	color: var(--nsf-text);
	background: #FFFAE6;
	border-color: var(--nsf-yellow);
}
.nsf-step.current .dot {
	background: var(--nsf-yellow);
	color: #fff;
}

/* === MAIN CONTENT === */
.woocommerce-checkout .woocommerce,
.woocommerce-cart .woocommerce {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px 32px;
	flex: 1;
	box-sizing: border-box;
}

/* Hide notices/errors that bloat */
.woocommerce-checkout .woocommerce-notices-wrapper:empty {
	display: none;
}
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
	background: #FFFAE6 !important;
	color: #856404 !important;
	border-left: 4px solid var(--nsf-yellow) !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	margin-bottom: 16px !important;
	list-style: none !important;
}
.woocommerce-checkout .woocommerce-error {
	background: #FFE4E4 !important;
	color: var(--nsf-red) !important;
	border-left: 4px solid var(--nsf-red) !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	list-style: none !important;
}

/* Hide login + coupon toggles */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-cart .woocommerce-form-coupon-toggle,
.woocommerce-cart .checkout_coupon {
	display: none !important;
}

/* === PAKEJ HERO CARD (top of checkout) === */
.nsf-pakej-hero {
	max-width: 640px;
	margin: 0 auto 16px;
	background: linear-gradient(135deg, #FFFAE6 0%, #FFF8F0 100%);
	border: 2px solid var(--nsf-yellow);
	border-radius: 14px;
	padding: 16px 18px;
	position: relative;
}
.nsf-pakej-hero-label {
	font-size: 11px;
	font-weight: 900;
	color: #856404;
	letter-spacing: 1.5px;
	margin-bottom: 10px;
}
.nsf-pakej-card {
	display: flex;
	align-items: center;
	gap: 14px;
}
.nsf-pakej-img {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.nsf-pakej-body {
	flex: 1;
	min-width: 0;
}
.nsf-pakej-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--nsf-text);
	line-height: 1.3;
	margin-bottom: 4px;
}
.nsf-pakej-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.nsf-pakej-qty {
	font-size: 12px;
	color: var(--nsf-muted);
	font-weight: 700;
}
.nsf-pakej-save {
	background: #FFE4E4;
	color: var(--nsf-red);
	font-size: 11px;
	font-weight: 900;
	padding: 3px 8px;
	border-radius: 12px;
	letter-spacing: 0.3px;
}
.nsf-pakej-price {
	text-align: right;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.nsf-pakej-price .woocommerce-Price-amount,
.nsf-pakej-price > .amount {
	font-size: 22px;
	font-weight: 900;
	color: var(--nsf-red);
	line-height: 1;
}
.nsf-pakej-original {
	font-size: 13px;
	color: #999;
	text-decoration: line-through;
	font-weight: 700;
}
.nsf-pakej-switch {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 800;
	color: var(--nsf-green);
	text-decoration: none;
	border-bottom: 1px dashed var(--nsf-green);
	padding-bottom: 1px;
}
.nsf-pakej-switch:hover { color: var(--nsf-green-dark); }
.nsf-pakej-switch:active { transform: scale(0.98); }

/* === CHECKOUT FORM SINGLE-COLUMN (linear flow) === */
.woocommerce-checkout form.checkout {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	box-sizing: border-box;
}
.woocommerce-checkout #customer_details {
	background: var(--nsf-card);
	border-radius: 14px;
	padding: 22px 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	border: 1px solid var(--nsf-border);
	order: 1;
}
.woocommerce-checkout #order_review_heading {
	display: none;
}
.woocommerce-checkout #order_review {
	background: var(--nsf-card);
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	border: 1px solid var(--nsf-border);
	order: 2;
	position: relative;
	top: 0;
}

/* Heading inside customer column */
.woocommerce-checkout #customer_details h3 {
	font-size: 22px;
	font-weight: 900;
	color: var(--nsf-text);
	margin: 0 0 4px;
}
.woocommerce-checkout #customer_details h3::before {
	content: "📍 ";
	margin-right: 4px;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100% !important;
	float: none !important;
}
.woocommerce-checkout #customer_details > * + * {
	margin-top: 20px;
}

/* Custom mini-heading badge above billing */
.woocommerce-checkout #customer_details::before {
	content: "Maklumat Penghantaran";
	display: block;
	font-size: 12px;
	font-weight: 900;
	color: var(--nsf-green);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 6px;
}

/* Form fields */
.woocommerce-checkout .form-row {
	margin: 0 0 14px !important;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
}
.woocommerce-checkout .form-row label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--nsf-text) !important;
	margin-bottom: 6px !important;
	letter-spacing: 0.2px;
}
.woocommerce-checkout .form-row label .required {
	color: var(--nsf-red);
	margin-left: 2px;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100% !important;
	min-height: 52px !important;
	padding: 14px 16px !important;
	font-size: 16px !important;
	border: 1.5px solid var(--nsf-border) !important;
	border-radius: 10px !important;
	font-family: 'Nunito', Arial, sans-serif !important;
	background: #fff !important;
	color: var(--nsf-text) !important;
	-webkit-appearance: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.woocommerce-checkout .select2-container .select2-selection--single {
	line-height: 52px !important;
	display: flex !important;
	align-items: center !important;
}
.woocommerce-checkout .select2-container .select2-selection__rendered {
	line-height: 1.4 !important;
	padding: 0 !important;
	font-size: 16px !important;
}
.woocommerce-checkout .select2-container .select2-selection__arrow {
	height: 50px !important;
	top: 0 !important;
	right: 8px !important;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection {
	border-color: var(--nsf-green) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(11,122,75,0.12) !important;
}

/* Compact grid layout for shorter fields on desktop */
@media (min-width: 768px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 14px;
	}
	.woocommerce-checkout #billing_first_name_field,
	.woocommerce-checkout #billing_phone_field,
	.woocommerce-checkout #billing_email_field,
	.woocommerce-checkout #billing_address_1_field,
	.woocommerce-checkout #billing_address_2_field,
	.woocommerce-checkout #billing_state_field {
		grid-column: 1 / -1;
	}
}

/* "Ship to a different address?" checkbox row — make it inline + subtle */
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--nsf-muted) !important;
	margin: 16px 0 8px !important;
}
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	margin-top: 12px;
}

/* === ORDER REVIEW CARD === */
.woocommerce-checkout #order_review::before {
	content: "Ringkasan Pesanan";
	display: block;
	font-size: 12px;
	font-weight: 900;
	color: var(--nsf-green);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.woocommerce-checkout #order_review .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	margin-bottom: 12px;
}
.woocommerce-checkout #order_review .shop_table thead {
	display: none; /* hide "Product / Subtotal" header */
}
.woocommerce-checkout #order_review .shop_table .cart_item td {
	padding: 12px 0 !important;
	border: none !important;
	border-bottom: 1px dashed var(--nsf-border) !important;
}
.woocommerce-checkout #order_review .shop_table .cart_item td.product-name {
	font-weight: 700;
	color: var(--nsf-text);
	font-size: 15px;
	line-height: 1.4;
}
.woocommerce-checkout #order_review .shop_table .cart_item td.product-total {
	text-align: right;
	font-weight: 900;
	color: var(--nsf-text);
	white-space: nowrap;
	vertical-align: top;
}
.woocommerce-checkout #order_review .shop_table tfoot tr {
	border: none !important;
}
.woocommerce-checkout #order_review .shop_table tfoot th,
.woocommerce-checkout #order_review .shop_table tfoot td {
	padding: 10px 0 !important;
	border: none !important;
	font-size: 15px;
	color: var(--nsf-muted);
}
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total {
	border-top: 2px solid var(--nsf-border) !important;
	font-size: 18px;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total th {
	font-weight: 900;
	color: var(--nsf-text);
	font-size: 16px;
	padding-top: 14px !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total .amount,
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td {
	color: var(--nsf-red);
	font-size: 26px !important;
	font-weight: 900 !important;
	text-align: right;
	padding-top: 14px !important;
}

/* Inline hints (postcode, phone) */
.nsf-inline-hint {
	font-size: 12px;
	font-weight: 700;
	margin-top: 6px;
	padding: 6px 10px;
	border-radius: 8px;
	line-height: 1.3;
}
.nsf-inline-hint:empty { display: none; }
.nsf-hint-ok {
	background: #F0FAF0;
	color: var(--nsf-green);
	border-left: 3px solid var(--nsf-green);
}
.nsf-hint-error {
	background: #FFE4E4;
	color: var(--nsf-red);
	border-left: 3px solid var(--nsf-red);
}
.nsf-hint-info {
	background: #FFFAE6;
	color: #856404;
	border-left: 3px solid var(--nsf-yellow);
}

/* ============================================================
 * TASK 2 — "Jumlah Bayar" total card
 * Prominent total display above payment methods.
 * Injected via woocommerce_review_order_before_payment hook (PHP).
 * ============================================================ */
.nsf-total-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: 2px solid var(--nsf-border);
	border-radius: 22px;
	padding: 18px 22px;
	margin-bottom: 22px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.nsf-total-label {
	font-size: 14px;
	font-weight: 900;
	color: var(--nsf-muted);
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.nsf-total-amount {
	font-size: 38px;
	font-weight: 900;
	color: var(--nsf-red);
	line-height: 1;
}
.nsf-total-amount .woocommerce-Price-currencySymbol {
	font-size: 22px;
	font-weight: 900;
	vertical-align: super;
	margin-right: 2px;
}

/* ============================================================
 * TASKS 3 & 4 — Payment method cards (compact, aligned, professional)
 * ============================================================ */

/* Payment section container */
.woocommerce-checkout #payment {
	width: 100% !important;
	box-sizing: border-box !important;
	background: var(--nsf-card) !important;
	order: 3;
	border-radius: 16px !important;
	padding: 22px 20px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
	border: 1px solid var(--nsf-border) !important;
	margin-top: 0 !important;
}

/* "CARA BAYAR" label */
.woocommerce-checkout #payment::before {
	content: "CARA BAYAR";
	display: block;
	font-size: 12px;
	font-weight: 900;
	color: var(--nsf-green);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

/* Payment methods list */
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0 !important;
	border: none !important;
	list-style: none !important;
	margin: 0 !important;
}

/* Each payment card — flex container for radio + label row */
.woocommerce-checkout #payment ul.payment_methods li {
	width: 100% !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	background: #fff !important;
	border: 2px solid var(--nsf-border) !important;
	border-radius: 20px !important;
	padding: 18px 20px !important;
	margin-bottom: 14px !important;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
	-webkit-tap-highlight-color: transparent;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child {
	margin-bottom: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li:hover {
	border-color: #b0c4b1 !important;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--nsf-green) !important;
	background: #F0FAF5 !important;
	box-shadow: 0 0 0 3px rgba(11,122,75,0.1) !important;
}

/* Radio button — flex item 1, vertically centered with title */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	accent-color: var(--nsf-green) !important;
	margin: 0 14px 0 0 !important;
	cursor: pointer;
	flex-shrink: 0 !important;
	order: 1;
}

/* Label — flex item 2, takes remaining width */
.woocommerce-checkout #payment ul.payment_methods label {
	flex: 1 !important;
	order: 2;
	font-weight: 800 !important;
	font-size: 22px !important;
	color: var(--nsf-text) !important;
	cursor: pointer;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	line-height: 1.2;
	min-width: 0;
}

/* Payment method icon/logo inside label */
.woocommerce-checkout #payment ul.payment_methods label img {
	max-height: 24px !important;
	width: auto !important;
	max-width: 70px !important;
	flex-shrink: 0;
	opacity: 0.85;
}

/* Description box — full width below radio+label row */
.woocommerce-checkout #payment .payment_box {
	width: 100% !important;
	order: 3;
	flex-basis: 100% !important;
	background: transparent !important;
	padding: 10px 0 0 38px !important;
	margin: 0 !important;
	border-radius: 0 !important;
	font-size: 18px !important;
	color: #6b7280 !important;
	border: none !important;
	line-height: 1.45 !important;
}
.woocommerce-checkout #payment .payment_box::before {
	display: none !important;
}
.woocommerce-checkout #payment .payment_box p {
	margin: 0 !important;
}

/* ============================================================
 * TASK 5 — Terms / Privacy notice polish
 * ============================================================ */
.woocommerce-checkout .nsf-terms-notice {
	font-size: 17px !important;
	color: #4b5563 !important;
	text-align: center !important;
	margin: 22px 0 20px !important;
	line-height: 1.45 !important;
	padding: 0 4px !important;
}
.woocommerce-checkout .nsf-terms-notice a {
	color: var(--nsf-green) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}
/* Hide any leftover nsf-pdpa element if it somehow renders */
.woocommerce-checkout .nsf-pdpa {
	display: none !important;
}

/* Defensive: hide shipping section — always off (woocommerce_cart_needs_shipping_address=false) */
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout .woocommerce-account-fields { display: none !important; }

/* TASK 6 — Submit button: pill, full-width, no overflow, no clipped text */
.woocommerce-checkout #place_order,
.woocommerce-checkout button.button.alt,
.woocommerce-cart button.button.alt {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 20px 16px !important;
	min-height: 68px !important;
	background: linear-gradient(180deg, var(--nsf-green), var(--nsf-green-dark)) !important;
	color: #fff !important;
	font-size: 22px !important;
	font-weight: 900 !important;
	text-align: center !important;
	border-radius: 80px !important;
	box-shadow: 0 8px 24px rgba(11,122,75,0.35), 0 4px 0 rgba(5,80,40,0.5) !important;
	border: none !important;
	letter-spacing: 0.3px !important;
	text-transform: uppercase !important;
	font-family: 'Nunito', Arial, sans-serif !important;
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.15s;
	white-space: normal !important;
	overflow: hidden !important;
	line-height: 1.2 !important;
	-webkit-tap-highlight-color: transparent;
}
/* .place-order wrapper — removes any extra padding that shifts button */
.woocommerce-checkout .place-order {
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce-checkout #place_order:hover {
	box-shadow: 0 12px 28px rgba(11,122,75,0.4) !important;
}
.woocommerce-checkout #place_order:active {
	transform: translateY(1px);
	box-shadow: 0 4px 12px rgba(11,122,75,0.4) !important;
}

/* Money-back trust strip via woocommerce_after_checkout_form hook */
.woocommerce-checkout .nsf-moneyback-strip {
	max-width: 1100px;
	margin: 18px auto 0;
	text-align: center;
	padding: 14px 20px;
	background: #F0FAF0;
	color: var(--nsf-green);
	font-weight: 700;
	font-size: 14px;
	border-radius: 10px;
	border: 1px dashed #D0EEDB;
	line-height: 1.5;
}
.woocommerce-checkout .nsf-moneyback-strip strong {
	font-weight: 900;
}

/* === TRUST FOOTER === */
.nsf-checkout-footer {
	background: #fff;
	border-top: 1px solid var(--nsf-border);
	padding: 30px 20px 24px;
	margin-top: 32px;
}
.nsf-trust-badges {
	max-width: 1100px;
	margin: 0 auto 22px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.nsf-trust-badge {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	background: #FAFBFC;
	border-radius: 10px;
	border: 1px solid var(--nsf-border);
}
.nsf-trust-badge .icon {
	font-size: 22px;
	flex-shrink: 0;
	line-height: 1;
}
.nsf-trust-badge strong {
	display: block;
	font-size: 14px;
	font-weight: 900;
	color: var(--nsf-text);
	line-height: 1.3;
}
.nsf-trust-badge span {
	display: block;
	font-size: 12px;
	color: var(--nsf-muted);
	line-height: 1.4;
	margin-top: 2px;
}

.nsf-checkout-foot-meta {
	max-width: 1100px;
	margin: 0 auto;
	border-top: 1px solid var(--nsf-border);
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
.nsf-payment-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	font-size: 13px;
	color: var(--nsf-muted);
	font-weight: 700;
}
.nsf-policy-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	font-size: 13px;
}
.nsf-policy-links a {
	color: var(--nsf-muted);
	text-decoration: none;
	font-weight: 700;
}
.nsf-policy-links a:hover {
	color: var(--nsf-green);
	text-decoration: underline;
}
.nsf-copyright {
	font-size: 12px;
	color: var(--nsf-muted);
	margin-top: 4px;
}

/* ============================================================
 * === MOBILE-FIRST OPTIMIZATIONS (99% traffic dari mobile) ===
 * ============================================================ */

/* Collapsible order summary toggle */
.nsf-summary-toggle {
	display: none;
	width: 100%;
	background: var(--nsf-card);
	border: 1px solid var(--nsf-border);
	border-radius: 12px;
	padding: 14px 16px;
	font-family: 'Nunito', Arial, sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: var(--nsf-text);
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	margin-bottom: 12px;
	-webkit-tap-highlight-color: transparent;
}
.nsf-summary-toggle:active { transform: scale(0.99); }
.nsf-summary-toggle-icon {
	color: var(--nsf-green);
	font-size: 12px;
	transition: transform 0.2s;
}

/* Mobile sticky bottom CTA bar — appears after scroll */
.nsf-mobile-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 2px solid var(--nsf-orange);
	box-shadow: 0 -6px 24px rgba(0,0,0,0.15);
	padding: 10px 14px;
	z-index: 1000;
	align-items: center;
	gap: 12px;
	transform: translateY(100%);
	transition: transform 0.2s ease-out;
}
.nsf-mobile-bar.nsf-visible { transform: translateY(0); }
.nsf-mobile-bar-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.nsf-mobile-bar-label {
	font-size: 10px;
	font-weight: 800;
	color: var(--nsf-muted);
	letter-spacing: 1px;
	text-transform: uppercase;
}
.nsf-mobile-bar-total {
	font-size: 22px;
	font-weight: 900;
	color: var(--nsf-red);
	line-height: 1;
}
.nsf-mobile-bar-total .woocommerce-Price-currencySymbol { font-size: 14px; }
.nsf-mobile-bar-btn {
	background: linear-gradient(180deg, var(--nsf-orange), var(--nsf-orange-dark));
	color: #fff;
	font-family: 'Nunito', Arial, sans-serif;
	font-size: 16px;
	font-weight: 900;
	padding: 14px 20px;
	min-height: 52px;
	border: none;
	border-radius: 30px;
	box-shadow: 0 4px 14px rgba(229,94,0,0.45);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap;
}
.nsf-mobile-bar-btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(229,94,0,0.5); }

/* Pulse animation for place_order ketika focused via sticky bar */
.woocommerce-checkout #place_order.nsf-pulse {
	animation: nsfPulse 1.5s ease-in-out;
}
@keyframes nsfPulse {
	0%, 100% { box-shadow: 0 8px 20px rgba(11,122,75,0.3); }
	50% { box-shadow: 0 0 0 8px rgba(255,180,0,0.5), 0 8px 20px rgba(11,122,75,0.3); }
}

/* === TABLET / MOBILE (≤900px) === */
@media (max-width: 900px) {
	body.woocommerce-checkout { padding-bottom: 80px !important; }

	.woocommerce-checkout form.checkout {
		gap: 12px;
		max-width: 100%;
	}
	.woocommerce-checkout #customer_details {
		padding: 18px 14px;
		border-radius: 12px;
		order: 1;
	}
	.woocommerce-checkout #order_review {
		position: relative;
		top: 0;
		padding: 16px;
		order: 2;
		border-radius: 12px;
	}
	.woocommerce-checkout #payment {
		order: 3;
	}

	/* Pakej hero card tighter on mobile */
	.nsf-pakej-hero {
		max-width: 100%;
		margin: 0 auto 12px;
		padding: 12px 14px;
		border-radius: 12px;
	}
	.nsf-pakej-img { width: 60px; height: 60px; border-radius: 8px; }
	.nsf-pakej-name { font-size: 14px; }
	.nsf-pakej-price .woocommerce-Price-amount,
	.nsf-pakej-price > .amount { font-size: 19px; }
	.nsf-pakej-original { font-size: 12px; }
	.nsf-pakej-switch { font-size: 12px; margin-top: 8px; }
	.nsf-pakej-card { gap: 10px; }

	.nsf-summary-toggle { display: flex; order: 1.5; }

	/* Collapsed state — hide everything except total row */
	.woocommerce-checkout #order_review.nsf-summary-collapsed {
		padding: 12px 16px;
	}
	.woocommerce-checkout #order_review.nsf-summary-collapsed::before {
		display: none;
	}
	.woocommerce-checkout #order_review.nsf-summary-collapsed .shop_table thead,
	.woocommerce-checkout #order_review.nsf-summary-collapsed .shop_table .cart_item,
	.woocommerce-checkout #order_review.nsf-summary-collapsed .shop_table .cart-subtotal,
	.woocommerce-checkout #order_review.nsf-summary-collapsed .shop_table .shipping {
		display: none;
	}
	.woocommerce-checkout #order_review.nsf-summary-collapsed .shop_table {
		margin: 0;
	}
	.woocommerce-checkout #order_review.nsf-summary-collapsed .shop_table tfoot tr.order-total {
		border-top: none !important;
	}
	.woocommerce-checkout #order_review.nsf-summary-collapsed .shop_table tfoot tr.order-total th,
	.woocommerce-checkout #order_review.nsf-summary-collapsed .shop_table tfoot tr.order-total td {
		padding: 4px 0 !important;
	}

	/* Show mobile sticky bar */
	.nsf-mobile-bar { display: flex; }

	/* Header tighter on mobile */
	.nsf-checkout-header-inner {
		padding: 10px 14px;
	}
	.nsf-logo-mark { padding: 4px 8px; font-size: 14px; }
	.nsf-logo-text { font-size: 17px; }
	.nsf-checkout-secure {
		font-size: 11px;
		padding: 5px 9px;
		gap: 4px;
	}
	.nsf-secure-icon { font-size: 12px; }

	.nsf-checkout-progress {
		font-size: 11px;
		padding: 0 12px 8px;
		gap: 4px;
	}
	.nsf-step {
		padding: 4px 8px;
		border-radius: 16px;
	}
	.nsf-step .dot {
		width: 16px;
		height: 16px;
		font-size: 10px;
	}

	.woocommerce-checkout .woocommerce,
	.woocommerce-cart .woocommerce {
		padding: 12px 12px 24px;
	}

	/* Compact field labels & inputs on mobile */
	.woocommerce-checkout .form-row {
		margin: 0 0 10px !important;
	}
	.woocommerce-checkout .form-row label {
		font-size: 13px !important;
		margin-bottom: 4px !important;
	}
	.woocommerce-checkout .form-row input.input-text,
	.woocommerce-checkout .form-row textarea,
	.woocommerce-checkout .form-row select,
	.woocommerce-checkout .select2-container .select2-selection--single {
		min-height: 48px !important;
		padding: 12px 14px !important;
		font-size: 16px !important; /* 16px prevents iOS zoom on focus */
		border-radius: 10px !important;
	}
	.woocommerce-checkout .select2-container .select2-selection--single {
		line-height: 48px !important;
	}
	.woocommerce-checkout .select2-container .select2-selection__arrow {
		height: 46px !important;
	}

	/* Section headers tighter */
	.woocommerce-checkout #customer_details::before,
	.woocommerce-checkout #order_review::before,
	.woocommerce-checkout #payment::before {
		font-size: 11px;
		letter-spacing: 1.2px;
		margin-bottom: 8px;
	}

	/* Total card — mobile tighter */
	.nsf-total-card {
		padding: 16px 18px;
		border-radius: 18px;
		margin-bottom: 18px;
	}
	.nsf-total-label {
		font-size: 13px;
	}
	.nsf-total-amount {
		font-size: 34px;
	}
	.nsf-total-amount .woocommerce-Price-currencySymbol {
		font-size: 19px;
	}

	/* Payment section mobile */
	.woocommerce-checkout #payment {
		padding: 18px 16px !important;
		border-radius: 14px !important;
	}

	/* Payment cards — mobile compact but still generous tap area */
	.woocommerce-checkout #payment ul.payment_methods li {
		padding: 16px 16px !important;
		margin-bottom: 12px !important;
		border-radius: 18px !important;
	}

	/* Payment title — slightly smaller on mobile but still bold and readable */
	.woocommerce-checkout #payment ul.payment_methods label {
		font-size: 20px !important;
		gap: 8px;
	}

	/* Description below payment title */
	.woocommerce-checkout #payment .payment_box {
		font-size: 16px !important;
		padding: 8px 0 0 38px !important;
	}

	/* Terms notice mobile */
	.woocommerce-checkout .nsf-terms-notice {
		font-size: 16px !important;
		margin: 18px 0 16px !important;
	}

	/* Submit button — mobile: full width pill, 68px min-height */
	.woocommerce-checkout #place_order,
	.woocommerce-checkout button.button.alt {
		font-size: 20px !important;
		min-height: 66px !important;
		border-radius: 80px !important;
		padding: 18px 16px !important;
		margin: 0 !important;
		letter-spacing: 0.2px !important;
	}

	/* Money-back strip tighter */
	.woocommerce-checkout .nsf-moneyback-strip {
		margin: 12px 12px 0 !important;
		padding: 12px 14px !important;
		font-size: 12px !important;
		line-height: 1.45;
	}

	/* Footer trust badges */
	.nsf-checkout-footer {
		padding: 22px 12px 18px;
		margin-top: 18px;
	}
	.nsf-trust-badges {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		margin-bottom: 16px;
	}
	.nsf-trust-badge {
		padding: 10px;
		gap: 8px;
	}
	.nsf-trust-badge .icon { font-size: 18px; }
	.nsf-trust-badge strong { font-size: 12px; }
	.nsf-trust-badge span { font-size: 11px; }
	.nsf-payment-icons { font-size: 12px; gap: 10px; }
	.nsf-policy-links { font-size: 12px; gap: 10px; }
	.nsf-copyright { font-size: 11px; }

	/* Order received tighter */
	body.woocommerce-order-received .woocommerce {
		padding: 20px 12px 80px;
	}
	body.woocommerce-order-received .woocommerce-order {
		padding: 20px 18px;
		border-radius: 12px;
	}
	body.woocommerce-order-received .woocommerce-notice {
		font-size: 17px;
		padding: 16px 18px;
	}
	body.woocommerce-order-received .woocommerce-order-overview {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 14px;
	}
	body.woocommerce-order-received .woocommerce-order-overview li strong {
		font-size: 15px;
	}
}

/* === SMALL MOBILE (≤390px) === */
@media (max-width: 390px) {
	.nsf-checkout-header-inner {
		flex-direction: row;
		gap: 8px;
	}
	.nsf-checkout-secure span:not(.nsf-secure-icon) {
		display: none;
	}
	.nsf-checkout-secure {
		padding: 8px;
		min-width: 36px;
		justify-content: center;
	}
	.nsf-step span:not(.dot) {
		display: none;
	}
	.nsf-step.current span:not(.dot) {
		display: inline;
		font-size: 12px;
	}
	.nsf-mobile-bar-total { font-size: 20px; }
	.nsf-mobile-bar-btn { padding: 12px 16px; font-size: 14px; }

	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review {
		padding: 14px 14px;
	}
}

/* === LANDSCAPE PHONE (short height) === */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
	.nsf-checkout-header { position: relative; }
	.nsf-mobile-bar { padding: 8px 12px; }
	.nsf-mobile-bar-total { font-size: 18px; }
}

/* === ORDER RECEIVED (Thank you) === */
body.woocommerce-order-received .woocommerce {
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 20px;
}
body.woocommerce-order-received .woocommerce-order {
	background: #fff;
	border-radius: 14px;
	padding: 32px 28px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	border: 1px solid var(--nsf-border);
}
body.woocommerce-order-received .woocommerce-notice {
	background: #F0FAF0;
	color: var(--nsf-green);
	padding: 22px 24px;
	border-radius: 12px;
	font-size: 22px;
	font-weight: 900;
	text-align: center;
	margin-bottom: 24px;
	border: 2px solid #D0EEDB;
}
body.woocommerce-order-received .woocommerce-notice::before {
	content: "✓ ";
	font-size: 28px;
}
body.woocommerce-order-received .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	background: #FAFBFC;
	padding: 18px;
	border-radius: 10px;
	margin: 18px 0;
	list-style: none;
}
body.woocommerce-order-received .woocommerce-order-overview li {
	border: none !important;
	padding: 0 !important;
	font-size: 13px;
	color: var(--nsf-muted);
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 1px;
}
body.woocommerce-order-received .woocommerce-order-overview li strong {
	display: block;
	font-size: 17px;
	color: var(--nsf-text);
	text-transform: none;
	letter-spacing: 0;
	margin-top: 4px;
	font-weight: 900;
}

/* ============================================================
 * Declutter v2 — header + sticky bar removed from PHP
 * CSS safety net in case supercache serves old HTML.
 * ============================================================ */
.nsf-checkout-header { display: none !important; }
.nsf-mobile-bar { display: none !important; }

/* ============================================================
 * TASK 2 — Hide WC default order-total row from shop_table.
 * Total is now shown via nsf-total-card (more prominent).
 * Keeps sub-items visible in the collapsible order summary.
 * ============================================================ */
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total {
	display: none !important;
}

/* ============================================================
 * TASK 7 — Confirm distractions remain hidden (safety net)
 * ============================================================ */
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout #order_bump,
.woocommerce-checkout .nsf-mobile-bar,
.woocommerce-checkout .nsf-moneyback-strip { display: none !important; }