/**
 * Payment Page Styles
 *
 * Styles for the payment/checkout page with Simple Pay integration
 *
 * Dependencies: ssa-base
 * Extracted from: styles.css lines 175-270, responsive rules from 768px, 480px
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.payment-page .content {
	display: flex;
	flex-direction: row-reverse;
	gap: 15%;
	padding-top: 75px;
	padding-bottom: 75px;
}

.payment-page .content .payment-panel {
	width: 50%;
}

/* !important required to override Simple Pay plugin defaults */
.payment-page .content .simpay-styled .simpay-form-control h2 {
	font-family: Archivo, sans-serif !important;
	margin-top: 54px;
}

.payment-page .content .simpay-checkout-form--stripe_checkout-styled.simpay-styled,
.payment-page .content .simpay-checkout-form--embedded.simpay-styled {
	max-width: 100%;
}

.payment-page .content .simpay-embedded-heading.simpay-styled h3 {
	color: var(--brand-main);
	margin-bottom: 14px;
}

.payment-page .content .simpay-embedded-heading.simpay-styled {
	background-color: var(--cream);
	border-radius: var(--radius-base);
	padding: 30px;
}

.payment-page .content .simpay-styled .simpay-form-control .simpay-btn:not(.stripe-button-el) {
	background: var(--brand-main);
}

.payment-page aside {
	width: 35%;
}

.payment-page .pricing-calculator {
	position: sticky;
	top: 50px;
}

.payment-page aside .drop-down h4.inline {
	display: inline-block;
	margin-right: var(--space-4);
}

.payment-page aside .drop-down h4 {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: var(--space-5);
}

.payment-page aside .money-description {
	background-color: var(--brand-highlight);
	border-radius: var(--radius-base);
	padding: 16px 23px;
}

.payment-page aside .money-description p {
	display: block;
	margin-bottom: var(--space-4);
	width: 100%;
}

.payment-page aside .money-description h5 {
	color: var(--brand-main);
	display: inline-block;
	font-size: 42px;
	font-weight: 900;
	letter-spacing: -1.5px;
	line-height: 50px;
	margin-right: 5px;
}

.payment-page .content .simpay-styled .simpay-form-control .simpay-btn:not(.stripe-button-el):disabled {
	opacity: 0.2;
}

/* !important required to override Simple Pay plugin defaults */
.payment-page .content .simpay-checkout-form--stripe_checkout-styled.simpay-styled a,
.payment-page .content .simpay-checkout-form--overlay.simpay-styled a,
.simpay-checkout-form--embedded.simpay-styled a {
	color: var(--brand-main) !important;
	font-weight: 600;
}

/* !important required to override Simple Pay plugin defaults */
.payment-page .content .simpay-btn.simpay-checkout-btn {
	border-radius: 24px !important;
}

/* ==========================================================================
   Responsive: Tablet (768px and below)
   ========================================================================== */

@media (width <= 768px) {
	.payment-page .content {
		display: inline-block;
	}

	.payment-page .content .payment-panel,
	.payment-page aside {
		width: 100%;
	}

	.payment-page aside {
		margin-bottom: 50px;
	}

	.payment-page .content {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

/* ==========================================================================
   Responsive: Mobile (480px and below)
   ========================================================================== */

@media (width <= 480px) {
	.payment-page .content {
		padding-top: var(--space-6);
		padding-bottom: var(--space-6);
	}
}