/**
 * WooCommerce Account Payments - front end styles.
 *
 * @author  WiseInternet
 * @since   1.2.0
 */

/* Credit shown with the payment method description. */
.wi-wc-ap-credit {
	margin: 0.75em 0 0;
}

/* Available credit: label left, amount right. */
.wi-wc-ap-credit__balance {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25em 1em;
	margin: 0;
}

.wi-wc-ap-credit__label {
	opacity: 0.85;
}

.wi-wc-ap-credit__amount {
	font-weight: 700;
}

/*
 * The error uses WooCommerce's own .woocommerce-error markup, so the theme supplies the colour,
 * border and padding. Only spacing is set here.
 */
.wi-wc-ap-credit__error {
	margin: 0.75em 0 0;
}

.wi-wc-ap-credit__error-title {
	font-weight: 700;
}

.wi-wc-ap-credit__error-message strong {
	font-weight: 700;
	white-space: nowrap;
}

/* Place Order disabled because there is not enough credit. */
#place_order.wi-wc-ap-blocked {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* My Account > Account Credit. */
.wi-wc-ap-credit-heading {
	margin-top: 0;
}

.wi-wc-ap-credit-heading + .wi-wc-ap-credit-summary {
	margin-top: 0;
}

h2.wi-wc-ap-credit-heading ~ h2.wi-wc-ap-credit-heading {
	margin-top: 2em;
}

.wi-wc-ap-credit-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5em 1em;
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 3px;
}

.wi-wc-ap-credit-summary__label {
	opacity: 0.8;
}

.wi-wc-ap-credit-summary__amount {
	font-size: 1.5em;
	font-weight: 700;
}

/* Amount and Balance read as figures, so align them right like the orders table totals. */
.wi-wc-ap-credit-table__header--amount,
.wi-wc-ap-credit-table__header--balance,
.wi-wc-ap-credit-table__cell--amount,
.wi-wc-ap-credit-table__cell--balance {
	text-align: right;
}

.wi-wc-ap-credit-table .wi-wc-ap-credit-debit {
	color: #b32d2e;
	white-space: nowrap;
}

.wi-wc-ap-credit-table .wi-wc-ap-credit-credit {
	color: #007017;
	white-space: nowrap;
}