/*
Theme Name: Astra Child
Theme URI: 
Description: Astra Child Theme
Author: 
Author URI: 
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/* CSS Document */
#pmpro_payment_method .pmpro_form_field-radio-items {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-gap: var(--pmpro--base--spacing--large)
}

.pmpro-checkout .gateway_authorizenet .pmpro_form_label,
.pmpro-checkout .gateway_braintree .pmpro_form_label,
.pmpro-checkout .gateway_paypal .pmpro_form_label,
.pmpro-checkout .gateway_stripe  .pmpro_form_label {
	background-image: url(images/pay-with-credit-cards.png);
	background-position: left bottom;
	background-size: contain;
	background-repeat: no-repeat;
	padding-bottom: 45px;
}

.pmpro-checkout .gateway_paypalexpress .pmpro_form_label {
	background-image: url(images/pp_h_rgb.png);
	background-position: left bottom;
	background-size: contain;
	background-repeat: no-repeat;
	padding-bottom: 40px;
}

@media only screen and (max-width: 767px) {
	#pmpro_payment_method .pmpro_form_field-radio-items {
		display: flex;
		flex-direction: column;
		gap: var(--pmpro--base--spacing--large);
	}
}

/* Card restriction message styles */
.card-restriction-warning {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 12px 16px;
	margin-top: 16px;
	transition: all 0.3s ease-in-out;
}

.card-restriction-warning p {
	margin: 0;
	color: #333;
	font-size: 14px;
	line-height: 1.4;
}

/* Payment method specific card restriction warning */
#card-restriction-warning {
	margin-top: 1rem;
	transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
	overflow: hidden;
}

#card-restriction-warning.hidden {
	opacity: 0;
	max-height: 0;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Ensure proper spacing in payment method section */
#pmpro_payment_method {
	position: relative;
}

/* Style for PayPal Express specific elements */
.pmpro-checkout .gateway_paypalexpress {
	position: relative;
}

/* Responsive design for card restriction warnings */
@media only screen and (max-width: 767px) {
	.card-restriction-warning {
		margin-top: 12px;
		padding: 10px 12px;
	}
	
	.card-restriction-warning p {
		font-size: 13px;
	}
}