/* define global variables */
:root {
	--verifone-payment-methods-padding: 15px;
	--verifone-payment-methods-padding-t-b: var(--verifone-payment-methods-padding);
	--verifone-payment-methods-padding-l-r: 0;
	--verifone-payment-methods-saved-grid-template-columns: 1fr;
	--verifone-payment-methods-grid-template-columns: 1fr 1fr 1fr;
	--verifone-block-payment-methods-grid-template-columns: 1fr 1fr 1fr 1fr;
	--verifone-payment-methods-grid-auto-rows: 1fr;
	--verifone-payment-methods-gap: 10px;
	--verifone-payment-method-logo-height: 1.618em;
	--verifone-payment-method-padding: 3px;
	--verifone-payment-method-border-radius: 4px;
	--verifone-payment-method-border-color: #6db8db;
	--verifone-payment-method-background-color: #fff;
	--verifone-payment-method-border: 1px solid var(--verifone-payment-method-border-color);
	--verifone-payment-method-active-border-color: #0073aa;
	--verifone-payment-method-active-border: 2px solid var(--verifone-payment-method-active-border-color);
	--verifone-payment-method-active-background-color: #fff;
	--verifone-payment-method-logo-alt-font-size: 14px;
	--verifone-payment-method-logo-alt-line-height: 1.1rem;
	--vefirone-payment-method-logo-aspect-ratio: 19 / 15;
}

/* checkout block */
.wc-block-checkout span#radio-control-wc-payment-method-options-verifone__label > span {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.wc-block-checkout p.verifone-payment-select-message {
	margin: 0;
}

.wc-block-checkout .verifone-payment-method-logos {
	grid-template-columns: var(--verifone-block-payment-methods-grid-template-columns);
}

/* legacy checkout */
.verifone-payment-methods-saved {
	display: grid;
	grid-template-columns: var(--verifone-payment-methods-saved-grid-template-columns);
	grid-gap: var(--verifone-payment-methods-gap);
	row-gap: var(--verifone-payment-methods-gap);
	padding: var(--verifone-payment-methods-padding-t-b) var(--verifone-payment-methods-padding-l-r) var(--verifone-payment-methods-gap);
}

.verifone-payment-methods-saved + .verifone-payment-method-logos {
	padding-top: 0;
}

/* global styles */
img.verifonepayment-logo {
    width: 105px;
}

select#verifone-payment-method {
    min-width: 150px;
}

.verifone-payment-method-logos {
	display: grid;
	grid-auto-rows: var(--verifone-payment-methods-grid-auto-rows);
	grid-template-columns: var(--verifone-payment-methods-grid-template-columns);
	grid-gap: var(--verifone-payment-methods-gap);
	row-gap: var(--verifone-payment-methods-gap);
	padding: var(--verifone-payment-methods-padding-t-b) var(--verifone-payment-methods-padding-l-r);
}

.verifone-payment-methods-list-selection .verifone-payment-method-logo {
	text-align: center;
	background-color: var(--verifone-payment-method-background-color);
	border: var(--verifone-payment-method-border);
	border-radius: var(--verifone-payment-method-border-radius);
	padding: var(--verifone-payment-method-padding);

	display: flex;
	justify-content: center;
	align-items: center;
}

.verifone-payment-methods-list-selection .verifone-payment-method-logo:hover,
.verifone-payment-methods-list-selection .verifone-payment-method-logo.active {
	border: var(--verifone-payment-method-active-border);
	background-color: var(--verifone-payment-method-active-background-color);
}

.verifone-payment-methods-list-selection .verifone-payment-method-logo label {
	margin: 0;
}

.verifone-payment-methods-list-selection .verifone-payment-method-logo img {
	display: block;
	font-size: var(--verifone-payment-method-logo-alt-font-size);
	line-height: var(--verifone-payment-method-logo-alt-line-height);

	max-height: none !important;
	font-size: var(--verifone-payment-method-logo-alt-font-size);
	line-height: var(--verifone-payment-method-logo-alt-line-height);
	width: 100%;
	aspect-ratio: var(--verifone-payment-method-logo-aspect-ratio);
	margin: auto;
	object-fit: contain;
}

.verifone-payment-methods-list-selection .verifone-payment-method-logo input[type="radio"] {
	display: none;
}

.verifone-save-payment-method-wrapper {
	padding-bottom: var(--verifone-payment-methods-padding);
}

.verifone-payment-methods-list-selection .verifone-payment-method-applepay::before {
	content: "";
	display: block;
	width: 100%;
	height: 35px;
	background-image: -webkit-named-image(apple-pay-logo-black);
	background-size: contain;
	background-repeat: no-repeat;
}

/* Make sure the Apple Pay logo is not visible as we are using webkit rendering */
.verifone-payment-methods-list-selection .verifone-payment-method-applepay img {
	font-size: 0;
}