/* =========================================
   PAYMENT (FINAL WIDE LAYOUT OPTIMIZED)
========================================= */

.gsc-checkout-html-wrap #payment {
	background: transparent;
	border-radius: 0;
	max-width: 100%;
}

/* payment methods list */
.gsc-checkout-html-wrap #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* payment card */
.gsc-checkout-html-wrap #payment ul.payment_methods > li.wc_payment_method {a
	position: relative;
	isolation: isolate;
	overflow: visible;

	margin: 0;
	padding: 0.9rem 1.15rem;

	border: 1px solid #e2e8f0;
	border-radius: 1.25rem;

	background: #ffffff;

	transition:
		border-color .2s ease,
		background .2s ease,
		box-shadow .2s ease,
		transform .1s ease;
}

/* hover micro interaction */
.gsc-checkout-html-wrap #payment ul.payment_methods > li.wc_payment_method:hover {
	transform: translateY(-1px);
}

/* active payment method */
.gsc-checkout-html-wrap 
#payment 
ul.payment_methods 
> li.wc_payment_method:has(input:checked) {
	border-color: #10b981;
	background: #f0fdf4;
	box-shadow: 0 6px 18px rgba(16,185,129,.10);
}

/* radio */
.gsc-checkout-html-wrap 
#payment 
ul.payment_methods 
li.wc_payment_method 
input.input-radio {
	margin-right: .6rem;
	transform: scale(1.05);
}

/* label row */
.gsc-checkout-html-wrap 
#sn-payment-section 
#payment 
ul.payment_methods 
> li.wc_payment_method 
> label {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	min-width: 0;

	gap: 0.75rem;

	margin: 0;

	line-height: 1.4;
	font-size: .93rem;
	font-weight: 600;
	color: #0f172a;
}

/* prevent overflow */
.gsc-checkout-html-wrap 
#sn-payment-section 
#payment 
ul.payment_methods 
> li.wc_payment_method 
> label,
.gsc-checkout-html-wrap 
#sn-payment-section 
#payment 
ul.payment_methods 
> li.wc_payment_method 
> label span {
	min-width: 0;
}

/* payment logos */
.gsc-checkout-html-wrap 
#sn-payment-section 
#payment 
ul.payment_methods 
> li.wc_payment_method 
> label img {
	max-width: 88px;
	max-height: 26px;

	width: auto;
	height: auto;

	flex-shrink: 0;

	object-fit: contain;
	vertical-align: middle;

	transform: none !important;
	opacity: .95;
}

/* payment content box */
.gsc-checkout-html-wrap 
#sn-payment-section 
#payment 
div.payment_box {
	position: relative;
	z-index: 1;

	margin: 0.85rem 0 0 !important;

	padding: 1rem 1.1rem !important;

	border-radius: 1rem;

	background: #fff;

	border: 1px solid #e2e8f0;

	clear: both;
}

/* payment text */
.gsc-checkout-html-wrap 
#payment 
.payment_box p {
	margin: 0 0 0.85rem;

	font-size: .9rem;
	line-height: 1.55;

	color: #475569;
}

/* paypal popup */
.gsc-checkout-html-wrap 
.wc-ppcp-popup__container {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}

.gsc-checkout-html-wrap 
.wc-ppcp-popup__container p {
	margin: 0 !important;
	padding: 0 !important;

	font-size: .9rem !important;
	line-height: 1.5;
}

/* stripe form */
.gsc-checkout-html-wrap 
#lighthouse-gateway-form {
	margin-top: .4rem;
}

/* iframe */
.gsc-checkout-html-wrap 
#lighthouse-gateway-iframe {
	border-radius: .85rem;
	overflow: hidden;
}

/* place order button */
.gsc-checkout-html-wrap #place_order {
	width: 100%;

	margin-top: 1.1rem;

	padding: 0.9rem 1.2rem;

	font-size: 1rem;
	font-weight: 700;

	border: none;
	border-radius: 999px;

	background: #059669;
	color: #fff;

	cursor: pointer;

	transition:
		background 0.15s ease,
		transform 0.05s ease,
		box-shadow .15s ease;
}

.gsc-checkout-html-wrap #place_order:hover {
	background: #047857;
	box-shadow: 0 10px 24px rgba(5,150,105,.18);
}

.gsc-checkout-html-wrap #place_order:active {
	transform: scale(0.99);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 640px) {

	.gsc-checkout-html-wrap #payment ul.payment_methods {
		gap: 0.75rem;
	}

	.gsc-checkout-html-wrap 
	#payment 
	ul.payment_methods 
	> li.wc_payment_method {
		padding: 0.9rem 1rem;
	}

	.gsc-checkout-html-wrap 
	#sn-payment-section 
	#payment 
	ul.payment_methods 
	> li.wc_payment_method 
	> label {
		font-size: .9rem;
	}

	.gsc-checkout-html-wrap 
	#sn-payment-section 
	#payment 
	ul.payment_methods 
	> li.wc_payment_method 
	> label img {
		max-width: 72px;
		max-height: 22px;
	}

	.gsc-checkout-html-wrap 
	#sn-payment-section 
	#payment 
	div.payment_box {
		padding: 0.3rem !important;
	}
}

/* -------------------------------------------------------------------------
 * Narrow viewports (<=1023px): tighter card padding + radius so cards almost
 * fill the viewport. Pair with sn_checkout_shell_breakout_inline_css() which
 * forces the <form> to viewport-breakout and zeroes parent padding.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	body.woocommerce-checkout .gsc-checkout-html-wrap section.rounded-3xl,
	body.woocommerce-checkout .gsc-checkout-html-wrap .sn-checkout-native-card {
		padding: 0.75rem !important;
		border-radius: 0.875rem !important;
	}
	body.woocommerce-checkout .gsc-checkout-html-wrap .sn-checkout-native-card .mb-6 {
		margin-bottom: 0.75rem !important;
	}
	body.woocommerce-checkout .gsc-checkout-html-wrap #customer_details.col2-set {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
	body.woocommerce-checkout .gsc-checkout-html-wrap .gsc-field {
		margin-bottom: 0.55rem;
	}
}