/* =============================================================
   Single Product One Page Checkout — v2.6.0
   OXOKE | https://oxoke.com
   ============================================================= */

/* ── Wrapper ─────────────────────────────────────────────── */
.spopc-checkout-wrapper {
	margin: 36px 0;
	padding: 32px 36px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 2px 16px rgba(0,0,0,.06);
	font-family: inherit;
	box-sizing: border-box;
}

/* ── Heading block ───────────────────────────────────────── */
.spopc-checkout-wrapper .spopc-header { margin-bottom: 22px; }
.spopc-checkout-wrapper .spopc-heading {
	font-size: 1.55rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 6px;
	padding: 0;
	border: none;
	line-height: 1.25;
}
.spopc-checkout-wrapper .spopc-subheading {
	font-size: .9rem;
	color: #6b7280;
	margin: 0;
}

/* ── Products section ────────────────────────────────────── */
.spopc-checkout-wrapper .spopc-products-section { margin-bottom: 16px; }
.spopc-checkout-wrapper .spopc-section-label {
	font-size: .72rem;
	font-weight: 700;
	color: #9ca3af;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.spopc-checkout-wrapper .spopc-product-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 12px 16px;
}
.spopc-checkout-wrapper .spopc-product-card img {
	width: 72px; height: 72px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}
.spopc-checkout-wrapper .spopc-product-info { flex: 1; min-width: 0; }
.spopc-checkout-wrapper .spopc-product-name {
	font-weight: 600;
	color: #111827;
	font-size: .93rem;
	margin: 0 0 3px;
	overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.spopc-checkout-wrapper .spopc-product-price {
	color: #374151; font-weight: 600; font-size: .9rem; margin: 0;
}

/* ── Quantity controls ───────────────────────────────────── */
.spopc-checkout-wrapper .spopc-qty-wrap {
	display: inline-flex;
	align-items: center;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
	background: #fff;
}
.spopc-checkout-wrapper .spopc-qty-btn {
	width: 34px; height: 38px;
	background: #f3f4f6;
	border: none; cursor: pointer;
	font-size: 17px; font-weight: 700; color: #374151;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s;
	flex-shrink: 0; padding: 0;
	user-select: none; -webkit-user-select: none;
}
.spopc-checkout-wrapper .spopc-qty-btn:hover { background: #e5e7eb; }
.spopc-checkout-wrapper .spopc-qty-input {
	width: 44px !important; height: 38px !important;
	border: none !important;
	border-left: 1px solid #d1d5db !important;
	border-right: 1px solid #d1d5db !important;
	border-radius: 0 !important;
	text-align: center !important;
	font-size: .93rem !important; font-weight: 600 !important;
	padding: 0 !important; margin: 0 !important;
	outline: none !important; box-shadow: none !important;
	-moz-appearance: textfield !important; appearance: textfield !important;
	background: #fff !important;
}
.spopc-checkout-wrapper .spopc-qty-input::-webkit-outer-spin-button,
.spopc-checkout-wrapper .spopc-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}
.spopc-checkout-wrapper .spopc-product-card.spopc-qty-loading {
	opacity: .55; pointer-events: none; transition: opacity .2s;
}

/* ═══════════════════════════════════════════════════════════
   COUPON ROW — lives inside order-review table below Total
   Rendered via woocommerce_review_order_after_order_total hook.
   ═══════════════════════════════════════════════════════════ */

/* Zero out the table cell that wraps the coupon section */
.spopc-checkout-wrapper .spopc-coupon-tr > td {
	padding: 10px 0 0 !important;
	border: none !important;
	border-top: none !important;
	background: transparent !important;
}

.spopc-checkout-wrapper .spopc-coupon-section { margin: 0; padding: 0; }

/* Input + Apply side by side, full width of the right column */
.spopc-checkout-wrapper .spopc-coupon-row {
	display: flex;
	align-items: stretch;
	width: 100%;
	border: 1.5px solid #d1d5db;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}
.spopc-checkout-wrapper .spopc-coupon-input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	padding: 11px 14px !important;
	border: none !important;
	border-radius: 0 !important;
	font-size: .9rem !important;
	color: #111827 !important;
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
	width: auto !important;         /* let flex handle width */
	box-sizing: border-box !important;
}
.spopc-checkout-wrapper .spopc-coupon-input::placeholder { color: #9ca3af; }

.spopc-checkout-wrapper .spopc-coupon-apply-btn {
	flex-shrink: 0;
	padding: 11px 22px;
	background: #1a472a; color: #fff;
	border: none;
	font-size: .9rem; font-weight: 700;
	cursor: pointer; white-space: nowrap;
	transition: background .15s; letter-spacing: .01em;
}
.spopc-checkout-wrapper .spopc-coupon-apply-btn:hover  { background: #15391f; }
.spopc-checkout-wrapper .spopc-coupon-apply-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Status message below the coupon row */
.spopc-checkout-wrapper .spopc-coupon-msg {
	margin-top: 6px; font-size: .82rem; font-weight: 600; min-height: 16px;
}
.spopc-checkout-wrapper .spopc-coupon-msg.success { color: #16a34a; }
.spopc-checkout-wrapper .spopc-coupon-msg.error   { color: #dc2626; }

/* Applied coupon tags */
.spopc-checkout-wrapper .spopc-applied-coupons {
	display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px;
}
.spopc-checkout-wrapper .spopc-coupon-tag {
	display: inline-flex; align-items: center; gap: 5px;
	background: #dcfce7; color: #166534;
	border: 1px solid #86efac; border-radius: 20px;
	padding: 3px 10px; font-size: .78rem; font-weight: 700;
}
.spopc-checkout-wrapper .spopc-coupon-remove {
	color: #dc2626; text-decoration: none;
	font-weight: 900; font-size: .83rem; line-height: 1;
}

/* Hide WooCommerce's own coupon toggle — we render ours */
.spopc-checkout-wrapper .woocommerce-form-coupon-toggle,
.spopc-checkout-wrapper .woocommerce-form-coupon { display: none !important; }

/* ── Two-column checkout layout ─────────────────────────── */
.spopc-checkout-wrapper .woocommerce-checkout {
	margin: 0 !important; padding: 0 !important;
}
.spopc-checkout-wrapper .woocommerce-checkout::after {
	content: ''; display: table; clear: both;
}

/* Left column: billing (55%) */
.spopc-checkout-wrapper .woocommerce-checkout #customer_details {
	float: left; width: 55%; padding-right: 28px; box-sizing: border-box;
}

/* Right column: order review (45%) */
.spopc-checkout-wrapper .woocommerce-checkout #order_review_heading,
.spopc-checkout-wrapper .woocommerce-checkout #order_review {
	float: right; width: 45%; box-sizing: border-box;
}

/* ── Order Notes hidden: hide the empty section wrapper completely ── */
.spopc-checkout-wrapper .woocommerce-checkout #order_notes:empty,
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-additional-fields:empty,
.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout #order_notes,
.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .woocommerce-additional-fields,
.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .col2-set .col-2 {
	display: none !important;
}

/* ── Order Notes hidden: keep the two-column layout intact on DESKTOP ──
   Billing stays LEFT (55%) and Order Summary stays RIGHT (45%).
   Only the .col-2 (notes) inside #customer_details is hidden above.
   On mobile (<=900px) these are overridden below to full-width stacked.
   ─────────────────────────────────────────────────────────────────── */
.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout #customer_details {
	float: left !important;
	width: 55% !important;
	padding-right: 28px !important;
	box-sizing: border-box !important;
}
.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .col2-set .col-1 {
	float: none !important;
	width: 100% !important;
	padding-right: 0 !important;
}

/* ── Order Notes hidden: MOBILE override ──
   Re-stack to single column and restore full-width inputs.
   Must come AFTER the desktop rule above and use equal or
   higher specificity inside a media query to win.
   ─────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout #customer_details,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .col2-set .col-1,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .col2-set,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .woocommerce-billing-fields,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		float: none !important;
		width: 100% !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		box-sizing: border-box !important;
		clear: both !important;
	}
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .form-row,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .form-row-first,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .form-row-last,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .form-row-wide {
		width: 100% !important;
		float: none !important;
		clear: both !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout span.woocommerce-input-wrapper,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		box-sizing: border-box !important;
	}
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout input[type="text"],
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout input[type="email"],
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout input[type="tel"],
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout input[type="number"],
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout input[type="password"],
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout select,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout textarea {
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
}

@media ( max-width: 480px ) {
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout #customer_details,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .col2-set .col-1,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .col2-set,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .woocommerce-billing-fields,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		float: none !important;
		width: 100% !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		box-sizing: border-box !important;
		clear: both !important;
	}
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .form-row,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .form-row-first,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .form-row-last,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .form-row-wide {
		width: 100% !important;
		float: none !important;
		clear: both !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout span.woocommerce-input-wrapper,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		box-sizing: border-box !important;
	}
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout input[type="text"],
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout input[type="email"],
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout input[type="tel"],
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout input[type="number"],
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout input[type="password"],
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout select,
	.spopc-order-notes-hidden .spopc-checkout-wrapper .woocommerce-checkout textarea {
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		padding: 16px 14px !important;
		min-height: 54px !important;
		height: auto !important;
		font-size: 16px !important;
		line-height: 1.5 !important;
		margin: 0 !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		border-radius: 6px !important;
	}
}

/* Section headings */
.spopc-checkout-wrapper .woocommerce-checkout h3 {
	font-size: 1rem; font-weight: 700; color: #111827;
	margin: 0 0 14px; padding-bottom: 10px;
	border-bottom: 2px solid #f3f4f6;
}

/* Field labels */
.spopc-checkout-wrapper .woocommerce-checkout .form-row label {
	display: block; font-size: .82rem; font-weight: 600;
	color: #374151; margin-bottom: 5px;
}

/* ═══════════════════════════════════════════════════════════
   BILLING FIELDS — FULL WIDTH
   
   WooCommerce wraps each input in:
     <p class="form-row form-row-wide">
       <label>...</label>
       <span class="woocommerce-input-wrapper">
         <input ...>
       </span>
     </p>
   
   Default woocommerce-input-wrapper = display:inline-block.
   Themes commonly also set input { width: 50% } or float inputs.
   We override the ENTIRE chain from .form-row down to <input>.
   ═══════════════════════════════════════════════════════════ */

/* 1 — The outer form-row paragraph */
.spopc-checkout-wrapper .woocommerce-checkout .form-row,
.spopc-checkout-wrapper .woocommerce-checkout p.form-row {
	float: none !important;
	clear: both !important;
	width: 100% !important;
	margin-bottom: 14px !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* 2 — The span wrapper WC inserts around the input */
.spopc-checkout-wrapper .woocommerce-checkout span.woocommerce-input-wrapper,
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

/* 3 — Any child paragraph WC wraps inside the span (WC 6+) */
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper > p,
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper > span {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* 4 — The actual <input>, <select>, <textarea> */
.spopc-checkout-wrapper .woocommerce-checkout .form-row input[type="text"],
.spopc-checkout-wrapper .woocommerce-checkout .form-row input[type="email"],
.spopc-checkout-wrapper .woocommerce-checkout .form-row input[type="tel"],
.spopc-checkout-wrapper .woocommerce-checkout .form-row input[type="number"],
.spopc-checkout-wrapper .woocommerce-checkout .form-row input[type="password"],
.spopc-checkout-wrapper .woocommerce-checkout .form-row select,
.spopc-checkout-wrapper .woocommerce-checkout .form-row textarea,
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper input[type="text"],
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper input[type="email"],
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper input[type="tel"],
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper input[type="number"],
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper input[type="password"],
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper select,
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper textarea {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	padding: 12px 14px !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 6px !important;
	font-size: .95rem !important;
	font-family: inherit !important;
	background: #fff !important;
	color: #111827 !important;
	transition: border-color .18s, box-shadow .18s !important;
	margin: 0 !important;
	height: auto !important;
	line-height: 1.5 !important;
}

/* 5 — Focus ring */
.spopc-checkout-wrapper .woocommerce-checkout .form-row input:focus,
.spopc-checkout-wrapper .woocommerce-checkout .form-row select:focus,
.spopc-checkout-wrapper .woocommerce-checkout .form-row textarea:focus,
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper input:focus,
.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper select:focus {
	outline: none !important;
	border-color: #1a472a !important;
	box-shadow: 0 0 0 3px rgba(26,71,42,.12) !important;
}

/* 6 — form-row-wide: full column width, no float */
.spopc-checkout-wrapper .woocommerce-checkout .form-row-wide,
.spopc-checkout-wrapper .woocommerce-checkout p.form-row-wide {
	width: 100% !important;
	float: none !important;
	clear: both !important;
	display: block !important;
}

/* 7 — form-row-first / form-row-last: side-by-side halves */
.spopc-checkout-wrapper .woocommerce-checkout .form-row-first {
	float: left !important;
	width: 48% !important;
	margin-right: 4% !important;
	clear: left !important;
	box-sizing: border-box !important;
}
.spopc-checkout-wrapper .woocommerce-checkout .form-row-last {
	float: right !important;
	width: 48% !important;
	box-sizing: border-box !important;
}

/* ── Order review table ─────────────────────────────────── */
.spopc-checkout-wrapper .woocommerce-checkout-review-order-table {
	border-collapse: collapse;
	width: 100%;
	font-size: .88rem;
}
.spopc-checkout-wrapper .woocommerce-checkout-review-order-table th,
.spopc-checkout-wrapper .woocommerce-checkout-review-order-table td {
	padding: 9px 10px;
	border-bottom: 1px solid #f3f4f6;
	vertical-align: middle; color: #374151;
}
.spopc-checkout-wrapper .woocommerce-checkout-review-order-table thead th {
	font-weight: 700; color: #111827;
	border-bottom: 2px solid #e5e7eb; background: transparent;
}
.spopc-checkout-wrapper .woocommerce-checkout-review-order-table .order-total th,
.spopc-checkout-wrapper .woocommerce-checkout-review-order-table .order-total td {
	font-weight: 700; font-size: .95rem; color: #111827;
	border-top: 2px solid #e5e7eb; border-bottom: none;
}

/* ── Payment methods ────────────────────────────────────── */
.spopc-checkout-wrapper .wc_payment_methods {
	list-style: none; padding: 0; margin: 0 0 10px;
}
/* Gateway list items: spacing only, no color/border overrides */
.spopc-checkout-wrapper .wc_payment_methods li {
	padding: 10px 13px; margin-bottom: 7px;
}

/* Payment method labels — must be visible and clickable */
.spopc-checkout-wrapper .wc_payment_methods li label {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-weight: 500;
	color: inherit !important;  /* never inherit white from Place Order button */
	margin: 0;
	pointer-events: auto !important;
}

/* Payment radio inputs — never hidden or blocked */
.spopc-checkout-wrapper .wc_payment_methods li input[type="radio"] {
	pointer-events: auto !important;
	cursor: pointer;
	margin: 0 6px 0 0 !important;
	width: auto !important;
	height: auto !important;
	float: none !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	min-width: 0 !important;
}

/* Payment box (gateway form area) — layout only, no color overrides */
.spopc-checkout-wrapper .payment_box {
	padding: 12px !important;
	margin-top: 8px;
	box-sizing: border-box;
	width: 100% !important;
}

/* Inputs INSIDE payment boxes — layout only, no color/style overrides */
.spopc-checkout-wrapper .payment_box input[type="text"],
.spopc-checkout-wrapper .payment_box input[type="number"],
.spopc-checkout-wrapper .payment_box textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	float: none !important;
}

/* ── Place Order button ─────────────────────────────────── */
.spopc-checkout-wrapper #place_order {
	display: block !important; width: 100% !important;
	box-sizing: border-box !important;
	background: #1a472a; color: #fff;
	border: 2px solid #1a472a; border-radius: 6px;
	font-size: 16px; font-weight: 700;
	padding: 14px 20px; margin-top: 12px;
	cursor: pointer; text-align: center; letter-spacing: .02em;
	transition: background .18s, transform .12s;
}
.spopc-checkout-wrapper #place_order:hover {
	background: #15391f; border-color: #15391f; transform: translateY(-1px);
}

/* WC notices */
.spopc-checkout-wrapper .woocommerce-error,
.spopc-checkout-wrapper .woocommerce-message,
.spopc-checkout-wrapper .woocommerce-info {
	border-radius: 7px; margin-bottom: 14px; font-size: .88rem;
}

/* ── Responsive ─────────────────────────────────────────── */

/* ── Shared mobile input mixin — applied at BOTH 900px and 480px ──
   Covers every selector WooCommerce and themes use to size inputs,
   including IDs (highest specificity) so nothing can override it.
   ─────────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
	.spopc-checkout-wrapper { padding: 22px 18px; }

	/* Stack columns: billing above, order review below */
	.spopc-checkout-wrapper .woocommerce-checkout #customer_details,
	.spopc-checkout-wrapper .woocommerce-checkout #order_review_heading,
	.spopc-checkout-wrapper .woocommerce-checkout #order_review {
		float: none !important;
		width: 100% !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
		display: block !important;
	}
	.spopc-checkout-wrapper .woocommerce-checkout #order_review_heading {
		clear: both !important;
		margin-top: 24px !important;
	}

	/* Every form-row variant → full width, no floats */
	.spopc-checkout-wrapper .woocommerce-checkout .form-row,
	.spopc-checkout-wrapper .woocommerce-checkout p.form-row,
	.spopc-checkout-wrapper .woocommerce-checkout .form-row-first,
	.spopc-checkout-wrapper .woocommerce-checkout .form-row-last,
	.spopc-checkout-wrapper .woocommerce-checkout .form-row-wide,
	.spopc-checkout-wrapper .woocommerce-checkout .col2-set .col-1,
	.spopc-checkout-wrapper .woocommerce-checkout .col2-set .col-2,
	.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-billing-fields,
	.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-shipping-fields,
	.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-additional-fields {
		width: 100% !important;
		float: none !important;
		clear: both !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* Input wrapper → full width, block */
	.spopc-checkout-wrapper .woocommerce-checkout span.woocommerce-input-wrapper,
	.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		box-sizing: border-box !important;
	}

	/* All inputs/selects/textareas → full width */
	.spopc-checkout-wrapper .woocommerce-checkout input[type="text"],
	.spopc-checkout-wrapper .woocommerce-checkout input[type="email"],
	.spopc-checkout-wrapper .woocommerce-checkout input[type="tel"],
	.spopc-checkout-wrapper .woocommerce-checkout input[type="number"],
	.spopc-checkout-wrapper .woocommerce-checkout input[type="password"],
	.spopc-checkout-wrapper .woocommerce-checkout select,
	.spopc-checkout-wrapper .woocommerce-checkout textarea {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		float: none !important;
	}
}

@media ( max-width: 480px ) {
	.spopc-checkout-wrapper { padding: 18px 14px; }
	.spopc-checkout-wrapper .spopc-heading { font-size: 1.2rem; }

	/* Stack columns */
	.spopc-checkout-wrapper .woocommerce-checkout #customer_details,
	.spopc-checkout-wrapper .woocommerce-checkout #order_review_heading,
	.spopc-checkout-wrapper .woocommerce-checkout #order_review {
		float: none !important;
		width: 100% !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
		display: block !important;
	}
	.spopc-checkout-wrapper .woocommerce-checkout #order_review_heading {
		clear: both !important;
		margin-top: 20px !important;
	}

	/* Every wrapper and form-row → full width, no floats, no half-widths */
	.spopc-checkout-wrapper .woocommerce-checkout .form-row,
	.spopc-checkout-wrapper .woocommerce-checkout p.form-row,
	.spopc-checkout-wrapper .woocommerce-checkout .form-row-first,
	.spopc-checkout-wrapper .woocommerce-checkout .form-row-last,
	.spopc-checkout-wrapper .woocommerce-checkout .form-row-wide,
	.spopc-checkout-wrapper .woocommerce-checkout .col2-set,
	.spopc-checkout-wrapper .woocommerce-checkout .col2-set .col-1,
	.spopc-checkout-wrapper .woocommerce-checkout .col2-set .col-2,
	.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-billing-fields,
	.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-shipping-fields,
	.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-additional-fields {
		width: 100% !important;
		float: none !important;
		clear: both !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* Input wrapper → full width block */
	.spopc-checkout-wrapper .woocommerce-checkout span.woocommerce-input-wrapper,
	.spopc-checkout-wrapper .woocommerce-checkout .woocommerce-input-wrapper {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		box-sizing: border-box !important;
	}

	/* ── ALL inputs full-width and tall — using broadest selector possible
	   Covers class-based, type-based, AND any theme ID-based rules.
	   ─────────────────────────────────────────────────────────────────── */
	.spopc-checkout-wrapper .woocommerce-checkout input[type="text"],
	.spopc-checkout-wrapper .woocommerce-checkout input[type="email"],
	.spopc-checkout-wrapper .woocommerce-checkout input[type="tel"],
	.spopc-checkout-wrapper .woocommerce-checkout input[type="number"],
	.spopc-checkout-wrapper .woocommerce-checkout input[type="password"],
	.spopc-checkout-wrapper .woocommerce-checkout select,
	.spopc-checkout-wrapper .woocommerce-checkout textarea {
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		padding: 16px 14px !important;
		min-height: 54px !important;
		height: auto !important;
		font-size: 16px !important;
		line-height: 1.5 !important;
		margin: 0 !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		border-radius: 6px !important;
	}

	/* Placeholder size */
	.spopc-checkout-wrapper .woocommerce-checkout input::placeholder,
	.spopc-checkout-wrapper .woocommerce-checkout textarea::placeholder {
		font-size: 16px !important;
		opacity: 0.6;
	}
}

/* ═══════════════════════════════════════════════════════════
   MULTI-PRODUCT SELECTION UI (v2.6.0)
   Appended after all existing styles — zero change to existing.
   ═══════════════════════════════════════════════════════════ */

/* Grid container */
.spopc-checkout-wrapper .spopc-multi-products {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 6px;
}

/* Multi-product card (extends .spopc-product-card) */
.spopc-checkout-wrapper .spopc-multi-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f9fafb;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	padding: 12px 16px;
	transition: border-color .18s, background .18s, box-shadow .15s;
	cursor: default;
}

/* Clickable cards (radio / checkbox modes) */
.spopc-checkout-wrapper .spopc-multi-card[role="button"] {
	cursor: pointer;
}
.spopc-checkout-wrapper .spopc-multi-card[role="button"]:hover {
	border-color: #86efac;
	background: #f0fdf4;
}

/* Selected state */
.spopc-checkout-wrapper .spopc-multi-card.spopc-card-selected {
	border-color: #1a472a;
	background: #f0fdf4;
	box-shadow: 0 0 0 3px rgba(26,71,42,.08);
}

/* Best value badge */
.spopc-checkout-wrapper .spopc-best-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: #1a472a;
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 2px 10px;
	border-radius: 20px;
	white-space: nowrap;
	z-index: 1;
}

/* Radio / Checkbox selector */
.spopc-checkout-wrapper .spopc-selector-wrap {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
}
.spopc-checkout-wrapper .spopc-product-selector {
	width: 18px !important;
	height: 18px !important;
	min-width: 0 !important;
	cursor: pointer;
	accent-color: #1a472a;
	border: 2px solid #d1d5db !important;
	border-radius: 4px !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	float: none !important;
}
.spopc-checkout-wrapper input[type="radio"].spopc-product-selector {
	border-radius: 50% !important;
}

/* Sale price display inside multi-card */
.spopc-checkout-wrapper .spopc-multi-card .spopc-reg-price {
	color: #9ca3af;
	font-weight: 400;
	font-size: .82rem;
	margin-right: 4px;
}
.spopc-checkout-wrapper .spopc-multi-card .spopc-sale-price {
	color: #16a34a;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
}

/* Loading / disabled state during AJAX */
.spopc-checkout-wrapper .spopc-multi-card.spopc-card-loading {
	opacity: .6;
	pointer-events: none;
	transition: opacity .15s;
}

/* "Select Products" section label already styled via .spopc-section-label */

/* Responsive: stack tighter on small screens */
@media ( max-width: 480px ) {
	.spopc-checkout-wrapper .spopc-multi-card {
		padding: 10px 12px;
	}
}

/* ── Mobile: show full product name ────────────────────── */
@media ( max-width: 480px ) {
	.spopc-checkout-wrapper .spopc-product-name {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
	}
}