/**
 * Styling for the inline ECPay 站內付 2.0 payment box on the checkout
 * (and "pay for order") page.
 *
 * Two parts:
 *   1. Our own wrapper (.ecpay-osp2, loading skeleton, status/retry, trust
 *      line) — fully ours to style.
 *   2. Light-touch overrides of ECPay's own SDK-rendered markup inside
 *      #ECPayPayment, scoped narrowly so we don't fight the SDK's own
 *      layout logic. Class names per ECPay's documented customization guide
 *      (https://developers.ecpay.com.tw/?p=9118).
 *
 * --ecpay-osp2-accent is set inline per-store from the "Accent color" admin
 * setting; the values below are fallbacks if that's ever unset.
 */

.ecpay-osp2 {
	--ecpay-osp2-accent: #1f6f54;
	/* Neutral (not accent-colored) highlight for the selected payment tab. */
	--ecpay-osp2-accent-tint: rgba(0, 0, 0, 0.035);
	--ecpay-osp2-border: #e1e5e9;
	--ecpay-osp2-text: #2f3438;
	--ecpay-osp2-muted: #6b7280;
	--ecpay-osp2-error: #c0392b;
	--ecpay-osp2-error-bg: #fdf2f1;

	position: relative;
	margin-top: 0.75em;
	padding: 16px;
	border: 1px solid var(--ecpay-osp2-border);
	border-radius: 8px;
	background: var(--ecpay-osp2-bg, #fff);
	font-size: 14px;
	color: var(--ecpay-osp2-text);
	transition: border-color 0.15s ease;
}

.ecpay-osp2:focus-within {
	border-color: var(--ecpay-osp2-accent);
}

.ecpay-osp2__testmode {
	margin: 0 0 12px;
	padding: 8px 12px;
	border-radius: 6px;
	background: #fff8e1;
	border: 1px solid #f0d78c;
	color: #7a5c00;
	font-size: 12.5px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * Loading skeleton — shown while data-state="loading".
 * ------------------------------------------------------------------- */

.ecpay-osp2__skeleton {
	display: none;
}

.ecpay-osp2[data-state='loading'] .ecpay-osp2__skeleton {
	display: block;
}

.ecpay-osp2[data-state='loading'] #ECPayPayment {
	display: none;
}

.ecpay-osp2__bone {
	display: block;
	height: 38px;
	margin-bottom: 10px;
	border-radius: 6px;
	background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63%);
	background-size: 400% 100%;
	animation: ecpay-osp2-shimmer 1.4s ease infinite;
}

.ecpay-osp2__bone--short {
	width: 60%;
	margin-bottom: 0;
}

@keyframes ecpay-osp2-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecpay-osp2__bone {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
 * Status / error message + retry button.
 * ------------------------------------------------------------------- */

/* Shown/hidden directly by checkout.js (inline `display: flex`/`none`) since
 * a CSS rule keyed off data-state + :not(:empty) can't reach into a hidden
 * parent — the row starts hidden here only as the pre-JS fallback. */
.ecpay-osp2__message {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
}

.ecpay-osp2[data-state='error'] .ecpay-osp2__message {
	background: var(--ecpay-osp2-error-bg);
	color: var(--ecpay-osp2-error);
	border: 1px solid #f3c9c4;
}

.ecpay-osp2[data-state='idle'] .ecpay-osp2__message {
	color: var(--ecpay-osp2-muted);
}

.ecpay-osp2__message-text {
	flex: 1 1 auto;
}

.ecpay-osp2__retry {
	display: none;
	flex: 0 0 auto;
	padding: 6px 12px;
	border: 1px solid currentColor;
	border-radius: 5px;
	background: transparent;
	color: inherit;
	font-size: 12.5px;
	cursor: pointer;
	white-space: nowrap;
}

.ecpay-osp2__retry:hover {
	background: rgba(0, 0, 0, 0.04);
}

/* ---------------------------------------------------------------------
 * Trust / security line.
 * ------------------------------------------------------------------- */

.ecpay-osp2__trust {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 14px 0 0;
	color: var(--ecpay-osp2-muted);
	font-size: 12px;
}

.ecpay-osp2__trust svg {
	flex: none;
	opacity: 0.7;
}

/* ---------------------------------------------------------------------
 * ECPay's own SDK-rendered form, scoped under #ECPayPayment so we only
 * touch spacing/typography/accent color — never structure or behaviour.
 * ------------------------------------------------------------------- */

#ECPayPayment {
	font-family: inherit;
}

#ECPayPayment .ecpay-pay-list-wrap {
	margin: 0 0 14px;
}

#ECPayPayment .ecpay-pay-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border: none;
	padding: 0;
}

#ECPayPayment .ecpay-pl-act {
	border: 1px solid var(--ecpay-osp2-border);
	border-radius: 6px;
	padding: 8px 12px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

#ECPayPayment .ecpay-pl-act.active,
#ECPayPayment .ecpay-pl-act:hover {
	border-color: var(--ecpay-osp2-accent);
	background: var(--ecpay-osp2-accent-tint);
}

#ECPayPayment .ecpay-pl-intro {
	font-weight: 500;
	color: var(--ecpay-osp2-text);
}

#ECPayPayment .ecpay-pl-content {
	margin-top: 10px;
}

/* ---------------------------------------------------------------------
 * Card / UnionPay / installment panes. ECPay draws a bordered box around
 * every field *and* a border on the input inside it (double borders), and
 * floats expiry / security code in a fixed-width row. Flatten that into one
 * clean grid: label above field, card number and name full width, expiry +
 * security code side by side, one border per field.
 * ------------------------------------------------------------------- */

/* Only the open pane: ECPay hides the others with display:none. */
#ECPayPayment li.ecpay-pl-act:not(#ApplePay) .ecpay-card-info-tab {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px 16px;
	width: auto !important;
	margin: 0 !important;
	padding: 4px 0 2px !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab::after,
#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-select-input::after,
#ECPayPayment li:not(#ApplePay) .ecpay-cit-item-box::after {
	display: none !important;
	content: none !important;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab > .ecpay-cit-item-box {
	display: contents;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-select-input {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	grid-column: auto;
	min-width: 0;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab > .ecpay-select-input.ecpay-col-a-100,
#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab > .ecpay-select-input.ecpay-col-d-100,
#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab > .ecpay-ssl-info {
	grid-column: 1 / -1;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-select-input dt {
	display: flex !important;
	align-items: center;
	gap: 6px;
	float: none !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 500;
	line-height: 1.4 !important;
	color: var(--ecpay-osp2-text, #2f3438) !important;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-select-input dt::before {
	position: static !important;
	flex: none;
}

#ECPayPayment li:not(#ApplePay) .ecpay-cititle-box {
	display: flex;
	align-items: center;
	gap: 6px;
}

#ECPayPayment li:not(#ApplePay) .ecpay-cit-ic {
	margin: 0 !important;
	font-size: 17px !important;
	line-height: 1;
	opacity: 0.7;
}

#ECPayPayment li:not(#ApplePay) .ecpay-cit-ic2 {
	flex: none;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	opacity: 0.7;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-select-input dd {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-select-input dd input:not([type='checkbox']):not([type='radio']),
#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-select-input dd select {
	display: block;
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 1px solid var(--ecpay-osp2-border, #e1e5e9) !important;
	border-radius: 6px !important;
	background-color: #fff !important;
	font-size: 16px !important; /* 16px stops iOS zooming in on focus */
	line-height: 1.2;
	color: var(--ecpay-osp2-text, #2f3438);
	box-shadow: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s ease;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-select-input dd input:focus,
#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-select-input dd select:focus {
	border-color: var(--ecpay-osp2-accent, #1f6f54) !important;
	outline: 2px solid var(--ecpay-osp2-accent, #1f6f54);
	outline-offset: 1px;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-card-status-line {
	margin-top: 4px;
	font-size: 12.5px !important;
	line-height: 1.4;
	min-height: 0 !important;
}

#ECPayPayment li:not(#ApplePay) .ecpay-card-info-tab .ecpay-card-status-line:empty {
	display: none;
}

/* The card-brand / issuer hint reserves a 20px row even when empty. It
 * only fills in (the <i> gets a brand class) once the number is recognised. */
#ECPayPayment .ecpay-card-detail:has(> i:not([class])) {
	display: none !important;
}

/* Hidden-until-needed error spans keep their place with visibility:hidden;
 * collapse them so the grid has no phantom gaps. */
#ECPayPayment li:not(#ApplePay) .ecpay-card-status-line .ecpay-red[style*='hidden'] {
	display: none;
}

/* "注意事項" notes under UnionPay / ATM / CVS etc.: a quiet grey box in
 * place of ECPay's link-blue heading and loose bullets. (Apple Pay has its
 * own, more specific treatment further down.) */
#ECPayPayment .ecpay-pl-note-box {
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.035) !important;
}

#ECPayPayment .ecpay-pnb-title {
	margin: 0 0 4px !important;
	font-size: 13px !important;
	font-weight: 600;
	color: var(--ecpay-osp2-text, #2f3438) !important;
}

#ECPayPayment .ecpay-pnb-list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#ECPayPayment .ecpay-pnb-list li::before,
#ECPayPayment .ecpay-pnb-list li::marker {
	content: none !important;
	display: none !important;
}

#ECPayPayment .ecpay-pnb-list li {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.55;
	color: var(--ecpay-osp2-muted, #6b7280) !important;
}

/* Tab rows: tidy the header of each method. */
#ECPayPayment .ecpay-pl-intro {
	display: flex;
	align-items: center;
	gap: 10px;
}

#ECPayPayment .ecpay-pl-icon-type {
	margin-left: auto;
}

/* Buttons ECPay renders for its own sub-steps (e.g. card-number confirm)
 * pick up the merchant's accent color rather than ECPay's default blue. */
#ECPayPayment button:not(.ecpay-pl-act),
#ECPayPayment input[type='button'],
#ECPayPayment input[type='submit'] {
	background-color: var(--ecpay-osp2-accent) !important;
	border-color: var(--ecpay-osp2-accent) !important;
}

@media (max-width: 480px) {
	/* Theme paddings already eat ~100px of a phone screen: give the form
	 * back as much of it as we can. */
	.ecpay-osp2 {
		padding: 8px;
		margin-left: -8px;
		margin-right: -8px;
	}

	#ECPayPayment .ecpay-pay-list {
		flex-direction: column;
	}

	#ECPayPayment .ecpay-pay-list > li {
		padding: 10px;
	}

	/* Header row: radio | name, with the card-brand marks tucked underneath
	 * instead of wrapping the radio onto a line of its own. */
	#ECPayPayment .ecpay-pl-intro {
		display: grid !important;
		grid-template-columns: auto 1fr;
		column-gap: 8px;
		row-gap: 4px;
		align-items: center;
		padding: 12px 0 10px !important;
	}

	#ECPayPayment .ecpay-pl-intro .ecpay-pl-radio {
		margin: 0 !important;
	}

	#ECPayPayment .ecpay-pl-intro .ecpay-pl-icon-type {
		grid-column: 2;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* ---------------------------------------------------------------------
 * Saved cards: "save this card" option above the ECPay form, and the
 * My Account add-card note.
 * ------------------------------------------------------------------- */

.ecpay-osp2__save {
	margin: 0.75em 0 0 !important;
	font-size: 14px;
}

.ecpay-osp2__save input[type='checkbox'] {
	margin-right: 6px;
	accent-color: var(--ecpay-osp2-accent, #1f6f54);
}

.ecpay-osp2__save-hint {
	display: block;
	margin-top: 2px;
	color: #6b7280;
	font-size: 12px;
	line-height: 1.5;
}

.ecpay-osp2__addcard-note {
	margin: 0 0 12px;
	color: #6b7280;
	font-size: 12.5px;
	line-height: 1.5;
}

/* "Processing your payment" banner (checkout.js showProcessing()). Sits
 * above WooCommerce's blockUI overlay so it stays readable while the form
 * is greyed out. */
.ecpay-osp2-processing {
	position: relative;
	z-index: 1002;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	padding: 14px 16px;
	border: 1px solid var(--ecpay-osp2-accent, #1f6f54);
	border-radius: 8px;
	background: var(--ecpay-osp2-bg, #fff);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	color: #1d2327;
	line-height: 1.45;
}
.ecpay-osp2-processing__spinner {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 3px solid rgba(0, 0, 0, 0.12);
	border-top-color: var(--ecpay-osp2-accent, #1f6f54);
	border-radius: 50%;
	animation: ecpay-osp2-spin 0.8s linear infinite;
}
.ecpay-osp2-processing__text strong {
	display: block;
	font-size: 15px;
}
.ecpay-osp2-processing__text small {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	opacity: 0.8;
}
@keyframes ecpay-osp2-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.ecpay-osp2-processing__spinner { animation-duration: 2.4s; }
}

/* ---------------------------------------------------------------------
 * Apple Pay pane (ECPay's V2 markup inside li#ApplePay). ECPay renders
 * it as a bordered box with a stray Apple Pay mark, a link-blue
 * "注意事項" heading and a lone bullet; restyle it into one tidy row:
 * [Apple Pay mark] [how it works / one-payment-only note].
 * ------------------------------------------------------------------- */

#ECPayPayment #ApplePay .ecpay-pl-content {
	padding-top: 4px;
}

#ECPayPayment #ApplePay dl.ecpay-select-input {
	display: grid !important;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	row-gap: 2px;
	align-items: center;
	margin: 0 !important;
	padding: 14px 16px !important;
	border: 0 !important;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.035);
	width: auto !important;
}

/* ECPay's clearfix pseudo-element would become an extra grid cell. */
#ECPayPayment #ApplePay dl.ecpay-select-input::after {
	display: none !important;
	content: none !important;
}

#ECPayPayment #ApplePay dl.ecpay-select-input > dt,
#ECPayPayment #ApplePay dl.ecpay-select-input > dd {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	min-height: 0 !important;
	height: auto !important;
}

/* The Apple Pay mark: left column, spanning both text rows. */
#ECPayPayment #ApplePay dt.apple_v2:has(.ecpay-ap-ic) {
	grid-column: 1;
	grid-row: 1 / span 2;
}
#ECPayPayment #ApplePay .ecpay-ap-ic {
	display: block;
	width: 52px;
	height: auto;
	border: 0;
}

/* "How it works" line. */
#ECPayPayment #ApplePay dt.apple_v2:not(:has(.ecpay-ap-ic)) {
	grid-column: 2;
	grid-row: 1;
}
#ECPayPayment #ApplePay dt .ecpay-cit-title {
	font-size: 14px !important;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ecpay-osp2-text, #2f3438) !important;
}

/* Empty dd ECPay leaves in; the notes dd goes under the text. */
#ECPayPayment #ApplePay dl > dd:not(:has(.ecpay-pl-note-box)) {
	display: none !important;
}
#ECPayPayment #ApplePay dl > dd:has(.ecpay-pl-note-box) {
	grid-column: 2;
	grid-row: 2;
}

/* "注意事項 • 僅支援一次付清付款。" → one quiet line. */
#ECPayPayment #ApplePay .ecpay-pl-note-box {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
#ECPayPayment #ApplePay .ecpay-pnb-title {
	display: none !important;
}
#ECPayPayment #ApplePay .ecpay-pnb-list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
#ECPayPayment #ApplePay .ecpay-pnb-list li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 13px !important;
	line-height: 1.5;
	color: var(--ecpay-osp2-muted, #6b7280) !important;
}
#ECPayPayment #ApplePay .ecpay-pnb-list li::before,
#ECPayPayment #ApplePay .ecpay-pnb-list li::marker {
	content: none !important;
	display: none !important;
}

/* "Your browser doesn't support Apple Pay" (V1 only) stays readable. */
#ECPayPayment #ApplePay .ecpay-eab-info {
	font-size: 13px;
	color: var(--ecpay-osp2-error, #c0392b);
}

/* ECPay's own "SSL" footer repeats our trust line below the form. */
#ECPayPayment .ecpay-ssl-info {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * ECPay's card-binding form ("save this card" / My Account → add card),
 * rendered by ECPay.addBindingCard() as .ecpay-MAIN-CONTENT. ECPay styles
 * it for a full-width page — labels floated left at 140px, inputs to the
 * right, switching to a stacked layout only on narrow *screens* — so in a
 * checkout column it falls apart. Lay it out like the payment form:
 * label above field, card number and name full width, expiry + security
 * code side by side.
 * ------------------------------------------------------------------- */

#ECPayPayment .ecpay-MAIN-CONTENT,
#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-add-box {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-card-info-tab {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px 16px;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-card-info-tab::after,
#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-select-input::after {
	display: none !important;
	content: none !important;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-select-input {
	grid-column: 1 / -1;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-select-input.ecpay-col-d-50 {
	grid-column: auto;
}

/* Labels: above the field, icon inline. */
#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-select-input dt {
	display: flex !important;
	align-items: center;
	gap: 6px;
	float: none !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 500;
	line-height: 1.4 !important;
	color: var(--ecpay-osp2-text, #2f3438) !important;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-select-input dt::before {
	position: static !important;
	flex: none;
	font-size: 17px !important;
	line-height: 1 !important;
	opacity: 0.75;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-select-input dt.ecpay-eci-member2::before {
	width: 18px !important;
	height: 18px !important;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-cititle-box {
	display: flex;
	align-items: center;
	gap: 6px;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-cit-ic {
	margin: 0 !important;
	font-size: 17px !important;
	opacity: 0.75;
}

/* Fields. 16px text stops iOS zooming in on focus. */
#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-select-input dd {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-select-input dd input {
	display: block;
	width: 100% !important;
	height: 44px;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 1px solid var(--ecpay-osp2-border, #e1e5e9) !important;
	border-radius: 6px !important;
	background: #fff !important;
	font-size: 16px !important;
	line-height: 1.2;
	color: var(--ecpay-osp2-text, #2f3438);
	box-shadow: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s ease;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-select-input dd input:focus {
	border-color: var(--ecpay-osp2-accent, #1f6f54) !important;
	outline: 2px solid var(--ecpay-osp2-accent, #1f6f54);
	outline-offset: 1px;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-card-status-line {
	margin-top: 4px;
	font-size: 12.5px !important;
	line-height: 1.4;
}

#ECPayPayment .ecpay-MAIN-CONTENT .ecpay-card-status-line:empty {
	display: none;
}