/*
WooCommerce SkyVerge Payment Gateway Framework Payment Form SCSS
Version 4.3.0

Copyright (c) 2015-2024, SkyVerge, Inc.
 Licensed under the GNU General Public License v3.0
http://www.gnu.org/licenses/gpl-3.0.html
*/

// checkout, Order > Pay, and Add Payment Method pages
.woocommerce-checkout #payment div.payment_box, #add_payment_method {

	.sv-wc-payment-gateway-payment-form-manage-payment-methods {
		display: block;
		margin: 1em 0;
		text-align: center;
	}

	.sv-wc-payment-gateway-payment-form-saved-payment-method {
		display: inline-block;
		margin-bottom: .5em;

		.nickname {
			margin-right: .5em;
		}

		img {
			float: none;
			width: 30px;
			height: 20px;
			display: inline-block;
			margin-right: .5em;
			vertical-align: middle;
		}
	}

	// general input styling
	input.js-sv-wc-payment-gateway-credit-card-form-input[type="tel"],
	input.js-sv-wc-payment-gateway-credit-card-form-input[type="text"],
	input.js-sv-wc-payment-gateway-echeck-form-input[type="tel"],
	input.js-sv-wc-payment-gateway-echeck-form-input[type="text"],
	input.js-sv-wc-payment-gateway-form-nickname {
		font-size: 1.5em;
		padding: 8px;
	}

	// highlight valid credit card inputs
	input.js-sv-wc-payment-gateway-credit-card-form-input[type="tel"],
	input.js-sv-wc-payment-gateway-credit-card-form-input[type="text"] {

		&:focus {
			box-shadow: 0 0 .1875em #3498db;
		}

		&.identified {
			border-color: #69bf29;
			&:focus {
				box-shadow: 0 0 .1875em #69bf29;
			}
		}
	}

	// inline credit card input icon
  	@media screen and (min-width: 330px) {

		input.js-sv-wc-payment-gateway-credit-card-form-account-number {

			background-image: url('../../images/card-cc-plain.svg');
			background-repeat: no-repeat;
			background-position: right 10px center;
			background-size: 50px 31px;

			&.visa {
				background-image: url('../../images/card-visa.svg');
			}

			&.mastercard {
				background-image: url('../../images/card-mastercard.svg');
			}

			&.dinersclub {
				background-image: url('../../images/card-dinersclub.svg');
			}

			&.maestro {
				background-image: url('../../images/card-maestro.svg');
			}

			&.jcb {
				background-image: url('../../images/card-jcb.svg');
			}

			&.amex {
				background-image: url('../../images/card-amex.svg');
			}

			&.discover {
				background-image: url('../../images/card-discover.svg');
			}

			&.visaelectron {
				background-image: url('../../images/card-visa-electron.svg');
			}

			&.invalid-card-type {
				background-image: url('../../images/card-cc-invalid.svg');
			}
		}
	}

	.js-sv-wc-payment-gateway-echeck-form-check-hint {
		margin: 0 0 3px 2px;
		cursor: pointer;
	}

	.js-sv-wc-payment-gateway-echeck-form-sample-check {
		margin: 1em;
		img {
			min-height: 135px;
		}
	}
}

// payment form card images
ul.payment_methods li {

	div.sv-wc-payment-gateway-card-icons {
		vertical-align: middle;
		display: flex;
		flex-wrap: wrap;
		margin-left: auto;
		gap: 5px;

		img {
			float: none !important;
		}
	}
}
