:root {
	--exp420-credit-green: #244f42;
	--exp420-credit-soft: #edf4ef;
	--exp420-credit-cream: #fffdf8;
	--exp420-credit-line: #d8e0db;
	--exp420-credit-text: #1e2521;
	--exp420-credit-muted: #6c756e;
}

.exp420-credits-account { color: var(--exp420-credit-text); }
.exp420-credits-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 26px 28px; border-radius: 20px; background: var(--exp420-credit-green); color: #fff; }
.exp420-credits-hero span { font-size: 12px; font-weight: 800; letter-spacing: .1em; opacity: .8; }
.exp420-credits-hero h2 { margin: 5px 0 0; color: inherit; font-family: var(--wd-title-font, Georgia, serif); font-size: 30px; }
.exp420-credit-balance { display: grid; min-width: 170px; padding: 15px 18px; border-radius: 15px; background: rgba(255,255,255,.13); text-align: center; }
.exp420-credit-balance strong { color: #fff; font-size: 26px; }
.exp420-credit-balance small { color: #fff; opacity: .8; }
.exp420-credit-rule { padding: 14px 16px; border-radius: 12px; background: var(--exp420-credit-soft); color: var(--exp420-credit-muted); }
.exp420-credit-card { margin-top: 16px; padding: 22px; border: 1px solid var(--exp420-credit-line); border-top: 3px solid var(--exp420-credit-green); border-radius: 16px; background: var(--exp420-credit-cream); }
.exp420-credit-card h3 { margin-top: 0; }
.exp420-credit-card form label { display: grid; gap: 8px; }
.exp420-credit-card textarea { width: 100%; }
.exp420-credit-table-wrap { overflow-x: auto; }
.exp420-credit-table-wrap table { min-width: 680px; }
.exp420-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #eee; font-weight: 700; }
.exp420-status--pending { background: #fff4ce; color: #7a5800; }
.exp420-status--approved { background: #dff3e7; color: #166534; }
.exp420-status--credit_failed { background: #fce8e6; color: #9a2822; }
.exp420-status--expired { background: #e8edf0; color: #475569; }
.exp420-credit-table-wrap td small { display: block; margin-top: 4px; color: var(--exp420-credit-muted); }
.exp420-credit-control-row td { vertical-align: middle; }
.exp420-credit-toggle { display: inline-flex; margin-left: 8px; font-weight: 700; }
.exp420-credit-checkbox { display: inline-flex; align-items: center; gap: 8px; }
.exp420-credit-checkbox input { margin: 0; }
.is-positive { color: #16703c; font-weight: 700; }
.is-negative { color: #a33a32; font-weight: 700; }

@media (max-width: 600px) {
	.exp420-credits-hero { align-items: stretch; flex-direction: column; }
	.exp420-credit-balance { min-width: 0; }
}

/* My Account > Orders action layout.
 * JavaScript moves the long Refunds & Credits request action into a dedicated
 * second row. This avoids WoodMart overriding a CSS-only grid/flex layout.
 */
.woocommerce-account .woocommerce-orders-table__cell-order-actions.exp420-rc-actions-ready {
	display: block !important;
	min-width: 360px;
	overflow: visible;
}

.woocommerce-account .exp420-rc-order-actions-secondary,
.woocommerce-account .exp420-rc-order-actions-primary {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 12px !important;
	width: 100%;
}

.woocommerce-account .exp420-rc-order-actions-secondary {
	margin-bottom: 12px;
}

.woocommerce-account .exp420-rc-order-actions-secondary:empty {
	display: none !important;
	margin-bottom: 0;
}

.woocommerce-account .exp420-rc-order-actions-secondary a.button,
.woocommerce-account .exp420-rc-order-actions-secondary .woocommerce-button,
.woocommerce-account .exp420-rc-order-actions-primary a.button,
.woocommerce-account .exp420-rc-order-actions-primary .woocommerce-button {
	box-sizing: border-box;
	flex: 0 0 auto;
	margin: 0 !important;
	white-space: nowrap;
}

.woocommerce-account .exp420-rc-order-actions-primary a.button,
.woocommerce-account .exp420-rc-order-actions-primary .woocommerce-button {
	min-width: 220px;
	max-width: 300px;
	text-align: center;
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-orders-table__cell-order-actions.exp420-rc-actions-ready {
		min-width: 0;
	}

	.woocommerce-account .exp420-rc-order-actions-secondary,
	.woocommerce-account .exp420-rc-order-actions-primary {
		align-items: stretch;
		flex-direction: column;
	}

	.woocommerce-account .exp420-rc-order-actions-secondary a.button,
	.woocommerce-account .exp420-rc-order-actions-secondary .woocommerce-button,
	.woocommerce-account .exp420-rc-order-actions-primary a.button,
	.woocommerce-account .exp420-rc-order-actions-primary .woocommerce-button {
		width: 100% !important;
		max-width: none;
		text-align: center;
	}
}

/* Keep the Credits hero readable even when the theme applies its own price
 * colors to nested WooCommerce price markup. */
.exp420-credit-balance,
.exp420-credit-balance strong,
.exp420-credit-balance strong .woocommerce-Price-amount,
.exp420-credit-balance strong .woocommerce-Price-currencySymbol,
.exp420-credit-balance strong bdi,
.exp420-credit-balance small {
	color: #fff !important;
}

.exp420-credit-balance strong,
.exp420-credit-balance strong * {
	opacity: 1 !important;
}