/**
 * Styles for embedded checkout
 *
 * @copyright   2026, ON1
 */

/* !- Layout */
/*
 * The FastSpring form renders in a cross-origin iframe on their storefront,
 * so it cannot see our theme and is styled dark by the storefront CSS. The
 * whole section is pinned to match it. data-theme on the section fixes every
 * token below it, but `color` still inherits from body - set it explicitly.
 */
#order-checkout {
	background: var(--bg-950);
	color: var(--text-100);
	padding-bottom: 3rem;
	padding-top: 3rem;
}

#order-checkout .checkout-intro {
	margin-bottom: 2rem;
}

#order-checkout .checkout-intro h1 {
	font-size: var(--text-4xl);
	margin-bottom: 0.5rem;
}

#order-checkout .checkout-intro p {
	color: var(--text-400);
	margin-bottom: 0;
}

#order-checkout .checkout-panel {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	padding: 1.75rem;
}

/* !- Cart items */
#cartContents .cartItemGroup {
	border-bottom: 1px solid var(--bg-600);
	margin-bottom: 1.5rem;
}

#cartContents .cartItemGroup:last-of-type {
	margin-bottom: 1.75rem;
}

#cartContents .cartItemListing {
	position: relative;
}

#cartContents .cartProductName {
	color: var(--text-50);
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

#cartContents .cartProductSummary {
	color: var(--text-400);
	font-size: var(--text-xs);
	line-height: 1.5;
	margin-bottom: 0.75rem;
	margin-top: 0;
}

#cartContents .cartProductSummary small {
	font-size: inherit;
}

#cartContents .cartItemTotalOriginalPrice,
#cartContents .summaryBox .orderTotalOriginal {
	color: var(--text-500);
	font-size: var(--text-base);
	font-weight: 400;
	margin-right: 0.25rem;
	text-decoration: line-through;
}

#cartContents .cartItemTotal,
#cartContents .summaryBox .orderTotal {
	color: var(--gold-500);
	font-size: var(--text-2xl);
	font-weight: 800;
	line-height: 1;
}

#cartContents .remove {
	color: var(--red-500);
	cursor: pointer;
	transition: color 0.2s ease;
}

#cartContents .remove:hover {
	color: var(--red-400);
}

/* !- Bundle contents, upsells & cross-sells */
#cartContents .productOfferWrapper {
	background: var(--bg-700);
	border-radius: var(--border-radius);
	margin-bottom: 1.5rem;
	padding: 1.25rem;
}

#cartContents .productOfferTitleRow {
	color: var(--text-50);
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: 1.25rem;
}

#cartContents .offerProductName {
	color: var(--text-50);
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0.25rem;
}

#cartContents .offerProductSummary {
	color: var(--text-400);
	font-size: var(--text-xs);
	line-height: 1.5;
	margin-bottom: 0;
}

#cartContents .offerProductSummary small {
	font-size: inherit;
}

#cartContents .offerPriceOriginal {
	color: var(--text-500);
	font-size: var(--text-sm);
	font-weight: 400;
	margin-right: 0.5rem;
}

#cartContents .offerPrice {
	color: var(--gold-500);
	font-size: var(--text-xl);
	font-weight: 800;
	line-height: 1;
}

#cartContents .crossSellRow {
	background: var(--bg-800);
	border: 1px solid var(--blue-800);
	border-radius: var(--border-radius);
	padding: 1rem;
}

#cartContents .upSell {
	margin-bottom: 1.5rem;
}

#cartContents .upSell:last-of-type {
	margin-bottom: 0;
}

#cartContents .offerProductCTA .btn {
	font-size: var(--text-xs);
	font-weight: 600;
	margin-top: 0.5rem;
	padding: 0.375rem 1rem;
}

/* !- Order total */
#cartContents .summaryBox .orderTotal:first-child {
	color: var(--text-100);
	display: block;
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

#cartContents .summaryBox .discountSavings {
	margin-top: 1.25rem;
}

#cartContents .summaryBox .discountSavings span {
	background: var(--green-transparent);
	border: 1px solid var(--green-500);
	border-radius: var(--border-radius);
	color: var(--green-500);
	font-size: var(--text-sm);
	font-style: italic;
	font-weight: 700;
	padding: 0.25rem 0.625rem;
}

/* !- Trust strip */
#order-checkout .checkout-trust {
	align-items: center;
	background: var(--green-transparent);
	border: 1px solid var(--green-800);
	border-radius: var(--border-radius);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2rem auto 0;
	padding: 0.5rem 0.75rem;
	width: fit-content;
}

#order-checkout .checkout-trust .trust-item {
	color: var(--text-300);
	font-size: var(--text-mini);
	line-height: 1.5;
	padding: 0.125rem 1.25rem;
	white-space: nowrap;
}

#order-checkout .checkout-trust .trust-item + .trust-item {
	border-left: 1px solid var(--green-800);
}

#order-checkout .checkout-trust .trust-item i {
	color: var(--green-500);
	margin-right: 0.375rem;
}

/*
 * The four items need ~838px to sit on one line, so they wrap inside a
 * .container narrower than lg. Dividers only read correctly unbroken.
 */
@media (max-width: 991.98px) {
	#order-checkout .checkout-trust .trust-item {
		padding: 0.125rem 0.75rem;
	}

	#order-checkout .checkout-trust .trust-item + .trust-item {
		border-left: none;
	}
}

/* !- FastSpring embedded checkout
 *
 * SBL writes z-index: 2147483647 inline on #fsc-popup-frame, the iframe that
 * draws the whole payment form. That beats #site-header (sticky-md-top, 1020)
 * and the account dropdown (1000), so on scroll the card fields painted over
 * the header and the open menu tucked behind them. Raising the header does not
 * help - nothing outranks a max int.
 *
 * Instead give SBL's own container a stacking context: the iframe's z-index
 * then only sorts inside it, and the container sorts at 0 against the page.
 * The iframe is absolutely positioned and exactly fills this box (SBL sets the
 * container's height inline), so nothing it draws - 3DS challenges included -
 * ever needed to escape these bounds. Our #fastspring_spinner is a fixed child
 * of body and is unaffected.
 *
 * position is ours rather than borrowed: SBL sets position: relative inline on
 * this div when it mounts the frame, but z-index is inert on a static box, so
 * without it the rule would do nothing until their script got there. Same value
 * they set, so it changes no layout.
 */
#fsc-embedded-checkout-container {
	position: relative;
	z-index: 0;
}

/* !- FastSpring spinner */
#fastspring_spinner {
	background: rgba(0, 0, 0, 0.75);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99999998;
}

#fastspring_spinner img {
	animation-delay: 0.4s;
	animation-duration: 0.4s;
	animation-name: fsb-fadeIn;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	position: fixed;
	top: 50%;
	z-index: 99999999;
}

@media (max-width: 767.98px) {
	#order-checkout .checkout-panel {
		padding: 1.25rem;
	}
}