/* Hallufix checkout polish — class-based, no inline styles.
   Uses Divi's existing ".button" + structural selectors. No invented classes. */

/* ---------- shared card style: payment + delivery + customer details ---------- */
.woocommerce-checkout #payment ul.payment_methods,
#hallufix-shipping-method,
.woocommerce-checkout #customer_details {
	background: #fff;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	padding: 18px 20px;
	margin: 18px 0 0;
	box-sizing: border-box;
	width: 100%;
}
.woocommerce-checkout #customer_details h3 {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
}

/* ============================================================
   Payment method buttons
   Hide the native radios; style each <label> to match Divi's
   ".button" outlined look (same rules as .button so the visual is
   identical to "更新購物車"). Selected state via :checked + label.
   ============================================================ */
.woocommerce-checkout #payment {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	background: #fff;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	padding: 18px 20px;
	margin: 18px 0 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.woocommerce-checkout #payment ul.payment_methods::before {
	content: "付款方式 / Payment Method";
	flex: 1 0 100%;
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 4px;
}
.woocommerce-checkout #payment ul.payment_methods li {
	flex: 1 1 240px;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
/* Outlined .button look. Wider horizontal padding (.618em 1.5em ≈ 12.36×30 px)
   for breathing room — the native .618em 1em felt too tight. update_cart and
   CVS buttons mirror this same padding below. */
.woocommerce-checkout #payment ul.payment_methods li label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: .618em 1.5em;
	border: 2px solid #666;
	border-radius: 3px;
	background: transparent;
	color: #666;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7em;
	text-align: center;
	cursor: pointer;
	transition: all .2s;
}
.woocommerce-checkout #payment ul.payment_methods li label:hover {
	background: rgba(0, 0, 0, .05);
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label {
	background: #666;
	color: #fff;
	border-color: #666;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label::before {
	content: "✓";
	margin-right: 6px;
	font-weight: 700;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:focus-visible + label {
	outline: 2px solid #2EA3F2;
	outline-offset: 2px;
}
.woocommerce-checkout #payment ul.payment_methods li label img {
	max-height: 22px;
	width: auto;
	margin: 0;
	filter: none;
}
/* Invert NewebPay logo for legibility on filled (selected) bg */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label img {
	filter: brightness(0) invert(1);
}

/* Hide WC's gateway description boxes — labels are clear enough */
.woocommerce-checkout #payment div.payment_box { display: none; }

/* ============================================================
   CVS shipping-method box (rendered by hallufix-cvs plugin).
   Plugin emits no decorative classes; CSS targets via the
   #hallufix-shipping-method ID and structural selectors.
   Uses Divi's ".button" class on each option for native look.
   ============================================================ */
/* WC wraps the CVS hook target in <div class="form-row place-order">; the
   wrapper's padding would shrink the box ~14px narrower than the order
   table. Zero out the wrapper so the CVS card spans the same width. */
.woocommerce-checkout #payment .form-row.place-order {
	padding: 0;
	margin: 0;
}

#hallufix-shipping-method {
	background: #fff;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	padding: 18px 20px;
	margin: 18px 0;
	box-sizing: border-box;
	width: 100%;
}
#hallufix-shipping-method h3 {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
}
#hallufix-shipping-method > div {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* CVS buttons share the outlined look. Override every property explicitly so they
   don't pick up Divi's default blue color, animated arrow, or hover letter-spacing.
   Padding matches payment labels (.618em 1.5em) and update_cart override. */
#hallufix-shipping-method .button {
	flex: 1 1 0;
	padding: .618em 1.5em;
	border: 2px solid #666;
	border-radius: 3px;
	background: transparent;
	color: #666;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7em;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	transition: all .2s;
}
#hallufix-shipping-method .button:hover {
	background: rgba(0, 0, 0, .05);
	color: #666;
	border-color: #666;
	padding: .618em 1.5em;
	letter-spacing: normal;
}
#hallufix-shipping-method .button::after { content: none !important; }
#hallufix-shipping-method .button[aria-current="true"] {
	background: #666;
	color: #fff;
	cursor: default;
}
#hallufix-shipping-method .button[aria-current="true"]::before {
	content: "✓";
	margin-right: 6px;
	font-weight: 700;
}

/* Selected store info paragraph (only present when a CVS is chosen) */
#hallufix-shipping-method > p {
	margin: 14px 0 0;
	padding: 10px 14px;
	background: #f5f5f5;
	border-left: 3px solid #666;
	font-size: 14px;
	line-height: 1.6;
}
#hallufix-shipping-method > p strong { display: block; margin-bottom: 4px; color: #1f2937; }
#hallufix-shipping-method > p span { display: block; color: #555; }

/* ============================================================
   "更新購物車" button — mirrors payment/CVS button look exactly.
   Don't rely on Divi's .button defaults (which pull in blue hover,
   letter-spacing shift, and animated ::after arrow).

   Specificity note: Divi's style.css enqueues AFTER this file and
   has rules like `.woocommerce-page button.button` (0,2,1). To win,
   we need (0,3,1)+. Stacking `.woocommerce-page button.button[name=...]`
   gives (0,3,1) — works on both /購物車/ and /結帳/ since Divi adds
   `.woocommerce-page` to body on every WC page.
   ============================================================ */
/* WC's disabled-button rule (.woocommerce body button.button:disabled[disabled])
   has specificity (0,4,1) — higher than (0,3,1). update_cart starts disabled
   on page load, so we need a :disabled variant to win that cascade. */
.woocommerce-page button.button[name="update_cart"],
.woocommerce-page button.button[name="update_cart"]:disabled,
.woocommerce-page button.button[name="update_cart"]:disabled[disabled],
.woocommerce-page button.button[name="update_cart"]:hover {
	padding: .618em 1.5em;
	border: 2px solid #666;
	border-radius: 3px;
	background: transparent;
	color: #666;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7em;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all .2s;
	opacity: 1;
}
.woocommerce-page button.button[name="update_cart"]:hover {
	background: rgba(0, 0, 0, .05);
}
/* Disabled state — slightly faded so users see it's not actionable. */
.woocommerce-page button.button[name="update_cart"]:disabled,
.woocommerce-page button.button[name="update_cart"]:disabled[disabled] {
	opacity: .5;
	cursor: not-allowed;
}
.woocommerce-page button.button[name="update_cart"]::after { content: none !important; }

/* Center the update_cart button horizontally inside its <td class="actions">.
   WC defaults to text-align:right; only update_cart + 2 hidden inputs live in
   this cell, so centering is safe. Mobile (button: 100%) is unaffected. */
.woocommerce-page table.cart td.actions {
	text-align: center;
}

/* ============================================================
   Order-review table — redundant (cart contents already shown
   above as table.shop_table.cart). Payment methods + CVS UI live
   OUTSIDE this table so they remain visible.
   ============================================================ */
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
	display: none;
}

/* ============================================================
   Place-order button — now lives inside #customer_details (moved
   in form-checkout.php). Wrapped in .form-row.place-order which
   is restyled as a light-grey inner panel — visually a sub-frame
   inside the white customer-details card. The button itself
   mirrors the update_cart / payment-button outlined grey look.
   ============================================================ */
.woocommerce-checkout #customer_details .form-row.place-order {
	margin: 18px 0 0;
	padding: 16px 20px;
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	text-align: center;
}
/* Filled blue CTA — same shape/padding as update_cart so layout stays
   consistent, but solid colored to mark it as the primary action. Color
   #2EA3F2 is Divi's site-wide accent blue (already used elsewhere on the
   site), so it reads as native and on-brand. */
.woocommerce-checkout #place_order {
	padding: .618em 1.5em;
	border: 2px solid #2EA3F2;
	border-radius: 3px;
	background: #2EA3F2;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.7em;
	letter-spacing: normal;
	text-align: center;
	cursor: pointer;
	transition: all .2s;
}
.woocommerce-checkout #place_order:hover {
	background: #1f8fd8;
	color: #fff;
	border-color: #1f8fd8;
	padding: .618em 1.5em;
	letter-spacing: normal;
}
.woocommerce-checkout #place_order::after { content: none !important; }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 600px) {
	/* Tight horizontal padding so buttons inside cards reach near the card edge,
	   matching the way "更新購物車" sits inside its <td>. */
	.woocommerce-checkout #payment ul.payment_methods,
	#hallufix-shipping-method,
	.woocommerce-checkout #customer_details {
		padding: 14px 8px;
	}
	.woocommerce-checkout #payment ul.payment_methods li {
		flex: 1 1 100%;
	}
	#hallufix-shipping-method > div {
		flex-direction: column;
	}
	#hallufix-shipping-method .button {
		flex: 0 0 auto;
		width: 100%;
	}
	.woocommerce-checkout #place_order {
		width: 100%;
	}
	/* Tighten the inner light-grey frame on mobile to match the parent card. */
	.woocommerce-checkout #customer_details .form-row.place-order {
		padding: 14px 8px;
	}
}