/**
 * Kaari x Seen - refund/eligibility acknowledgement for the pre-checkout card.
 *
 * Scoped entirely under #pre-checkout .seen-refund-row, so it cannot affect
 * anything else on the page. The element only exists when script.js has
 * injected it, so with the script removed this file is inert.
 *
 * Styled to match the existing "FAQs / Terms" row rather than as a promo
 * element: this is a consent control, not an offer. The Seen bonus itself is
 * announced by the site-wide hello bar.
 *
 * The checkbox control inherits the widget's own custom checkbox appearance
 * (#pre-checkout input[type='checkbox']), so it renders identically to the
 * terms checkbox above it. Its *size* has to be re-pinned here though — that
 * rule sets width/height but no minimum, and inside this flex row the box is
 * shrinkable. See the input rule below.
 *
 * Sizing is in px: Teachable sets the root font-size to roughly 10px.
 */

#pre-checkout .seen-refund-row {
	margin-top: 12px;
}

#pre-checkout .seen-refund-label {
	display: flex;
	align-items: flex-start;
	gap: 0;
	cursor: pointer;
	font-weight: normal;
}

/* The widget's checkbox rule sets width/height: 20px but no minimum size. As a
   flex item next to ~200 characters of label text the box is shrinkable, so it
   collapsed to a ~4px sliver. Pinning it with flex: 0 0 auto + min-width /
   min-height is the same guard the widget already applies to its own
   .checkbox-group labels. margin-right overrides the base rule's 0.5em so the
   gap matches the terms row above; margin-top optically aligns the box with
   the first line of 16px/1.4 text. */
#pre-checkout .seen-refund-label input[type='checkbox'] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	margin-top: 1px;
	margin-right: 12px;
}

#pre-checkout .seen-refund-text {
	font-size: 16px;
	line-height: 1.4;
	color: #1f2937;
}

/* Set only when a click is blocked because this box is still empty, so the
   button does not read as simply broken. Cleared as soon as it is ticked. */
#pre-checkout .seen-refund-row--required .seen-refund-text {
	color: #c2410c;
}

#pre-checkout .seen-refund-row--required input[type='checkbox'] {
	border-color: #f77351;
}

@media (max-width: 480px) {
	#pre-checkout .seen-refund-text {
		font-size: 15px;
	}
}