/**
 * Checkout tip selector.
 *
 * A gratuity control rendered as a native checkout step, between "Shipping
 * options" and "Payment options" in the main form column. The column is white,
 * so it carries no card of its own — heading + pills sit on the column like the
 * other steps. Uses the shared design tokens with hard fallbacks so it holds up
 * even if tokens.css is absent.
 */

.ly-tip {
	margin: 4px 0 28px;
	font-family: var( --ly-font-body, 'DM Sans', system-ui, -apple-system, sans-serif );
}

.ly-tip__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 14px;
}

/* Match the WC checkout step titles (Shipping options / Payment options). */
.ly-tip__title {
	font-family: var( --ly-font-display, 'Bricolage Grotesque', system-ui, sans-serif );
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var( --ly-color-primary, #53225e );
}

.ly-tip__sub {
	font-size: 0.875rem; /* 14px */
	line-height: 1.4;
	color: var( --ly-color-text-muted, #4a4a52 );
}

.ly-tip__options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 460px; /* keep the pills tidy in the wide desktop column */
}

.ly-tip__btn {
	flex: 1 1 0;
	min-width: 74px;
	padding: 12px 10px;
	font-family: inherit;
	font-size: 0.9375rem; /* 15px */
	font-weight: 600;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	color: var( --ly-color-primary, #53225e );
	background: var( --ly-color-white, #ffffff );
	border: 1.5px solid var( --ly-color-border, #e6e6e8 );
	border-radius: var( --ly-radius-pill, 999px );
	cursor: pointer;
	transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.ly-tip__btn:hover {
	border-color: var( --ly-color-primary, #53225e );
	background: var( --ly-color-primary-soft, #f1e6f4 );
}

.ly-tip__btn:active {
	transform: scale( 0.97 );
}

.ly-tip__btn:focus-visible {
	outline: none;
	border-color: var( --ly-color-primary, #53225e );
	box-shadow: 0 0 0 3px rgba( 83, 34, 94, 0.15 );
}

.ly-tip__btn.is-active {
	color: var( --ly-color-text-on-primary, #ffffff );
	background: var( --ly-color-primary, #53225e );
	border-color: var( --ly-color-primary, #53225e );
}

.ly-tip__btn.is-active:hover {
	background: var( --ly-color-primary-hover, #6b3179 );
	border-color: var( --ly-color-primary-hover, #6b3179 );
}

/* In-flight: dim + lock interaction while the cart recalculates. */
.ly-tip.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

@media ( max-width: 768px ) {
	.ly-tip {
		margin: 0 0 24px;
	}
	.ly-tip__options {
		max-width: none;
	}
}