/*
 * Two-column checkout layout (desktop only — mobile/tablet keep EDD's
 * default single-column stacked order).
 *
 * Left:  cart items -> personal info
 * Right: discount code + payment icons + select payment method ->
 *        purchase button
 *
 * #ul-checkout-col-left and #ul-checkout-col-right are built server-side
 * (see functions.php, ul_restructure_checkout_columns) from EDD's own
 * rendered elements, each moved whole and untouched internally. Because
 * each column is exactly one real box, its contents just flow normally
 * top-to-bottom — no CSS Grid row-track sharing between columns, so
 * heights are genuinely independent regardless of cart size or how many
 * gateways are enabled.
 */

/*
 * The "OR" divider between personal info and social login (guest
 * checkout only) — shown on every viewport, since checkout-layout.js
 * always keeps social login directly under personal info regardless of
 * which column/position personal info is currently in.
 */
#ul-checkout-social-login-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 21px;
	color: var(--text-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

#ul-checkout-social-login-divider::before,
#ul-checkout-social-login-divider::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background-color: var(--border-color);
}

@media (min-width: 1024px) {
	#edd_checkout_wrap {
		display: flex;
		align-items: flex-start;
		gap: 48px;
	}

	#ul-checkout-col-left,
	#ul-checkout-col-right {
		flex: 1 1 0;
		min-width: 0;
	}

	/*
	 * The site's own fieldset styling (edd-widgets/assets/css/style.css:
	 * "#edd_checkout_form_wrap fieldset { background-color: var(--grey-50);
	 * border-radius: 4px; border: 0 !important; }", plus EDD core's own
	 * padding/margin for the same selector) only matches descendants of
	 * #edd_checkout_form_wrap. On desktop, checkout-layout.js moves
	 * #edd_checkout_user_info out of that container into the left column
	 * so that selector stops matching, silently dropping the light gray
	 * background "Select payment method" still has. Replicate the exact
	 * same declarations here, scoped to its new location, using the same
	 * --grey-50 custom property so it stays in sync if that palette ever
	 * changes. Only takes effect once the fieldset is actually there
	 * (desktop) — on mobile it stays inside #edd_checkout_form_wrap and
	 * the site's original rule already covers it.
	 */
	#ul-checkout-col-left #edd_checkout_user_info {
		background-color: var(--grey-50);
		border-radius: 4px;
		border: 0;
		padding: 1.387em;
		margin-bottom: 21px;
	}

	/*
	 * Same story as the fieldset background above, but for its legend
	 * ("Personal info"): the site's own "#edd_checkout_form_wrap legend"
	 * rule (color, bold font-weight, font-size) and EDD core's own
	 * "#edd_checkout_form_wrap legend" rule (display/line-height/margin)
	 * also only match descendants of #edd_checkout_form_wrap, so the
	 * heading silently lost its bold weight along with the background
	 * when moved into the left column. Replicated here for the same
	 * reason and with the same !important flags as the site's original
	 * rule, so it can't be re-overridden by something more specific
	 * elsewhere.
	 */
	#ul-checkout-col-left #edd_checkout_user_info legend {
		display: block;
		width: 100%;
		color: var(--text-muted);
		font-weight: 700 !important;
		font-size: 1rem !important;
		line-height: 1;
		white-space: nowrap;
		margin: 0 0 1rem !important;
		padding: 0;
	}

	/*
	 * Same story again, this time for the field help text ("We will send
	 * the purchase receipt to this address.", etc): EDD core's own
	 * "#edd_checkout_form_wrap .edd-description" rule (color: #666;
	 * font-size: 80%) only matches descendants of #edd_checkout_form_wrap,
	 * so it silently fell back to plain paragraph size/color once moved.
	 * Replicated with the same literal values EDD core uses (not the
	 * site's --text-muted token, which is a different, darker gray used
	 * for legends specifically) so this exactly matches how the same
	 * .edd-description text still looks elsewhere on this page (e.g. the
	 * discount code field on the right, untouched).
	 */
	#ul-checkout-col-left #edd_checkout_user_info .edd-description {
		display: block;
		color: #666;
		font-size: 80%;
		margin: 0 0 5px;
	}
}