/**
 * SwiftFind Commerce UI — Cart & Checkout
 *
 * A Stripe-inspired treatment for the WooCommerce Cart and Checkout blocks.
 * The design language borrows what makes Stripe's checkout feel trustworthy:
 * a calm neutral canvas, one confident indigo accent, generous vertical
 * rhythm, soft 6px radii, and inputs whose focus ring is the loudest thing
 * on the page.
 *
 * Scope: styles target WooCommerce Blocks class names only. No block markup
 * is replaced, so the pages stay fully editable in the site editor and keep
 * working when WooCommerce updates its internals.
 */

:root {
	/* Palette — Stripe's neutral ramp is slightly blue, never pure grey. */
	--sfc-ink: #1a1f36;
	--sfc-ink-soft: #3c4257;
	--sfc-muted: #697386;
	--sfc-faint: #8792a2;

	--sfc-line: #e3e8ee;
	--sfc-line-soft: #f0f3f7;
	--sfc-bg: #ffffff;
	--sfc-canvas: #f6f9fc;

	/* One accent, used with intent: focus, links, primary action. */
	--sfc-accent: #635bff;
	--sfc-accent-deep: #4f46e5;
	--sfc-accent-ring: rgba(99, 91, 255, 0.36);
	--sfc-accent-tint: #f5f4ff;

	--sfc-danger: #df1b41;
	--sfc-success: #1ea672;

	/* Shape */
	--sfc-radius: 6px;
	--sfc-radius-lg: 10px;
	--sfc-field-h: 44px;

	/* Depth — Stripe layers hairline borders under soft shadows. */
	--sfc-shadow-sm: 0 1px 1px rgba(26, 31, 54, 0.04), 0 2px 5px rgba(26, 31, 54, 0.05);
	--sfc-shadow-md: 0 2px 5px rgba(26, 31, 54, 0.06), 0 8px 24px rgba(26, 31, 54, 0.06);

	--sfc-speed: 160ms;
	--sfc-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--sfc-ink: #f7fafc;
		--sfc-ink-soft: #d5dbe5;
		--sfc-muted: #a3acba;
		--sfc-faint: #8792a2;

		--sfc-line: #2a3040;
		--sfc-line-soft: #222736;
		--sfc-bg: #1b1f2e;
		--sfc-canvas: #14172233;

		--sfc-accent: #8b85ff;
		--sfc-accent-deep: #a5a0ff;
		--sfc-accent-ring: rgba(139, 133, 255, 0.34);
		--sfc-accent-tint: #232741;

		--sfc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
		--sfc-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.38);
	}
}

/* ==========================================================================
   1. Page canvas
   ========================================================================== */

.wc-block-checkout,
.wc-block-cart {
	color: var(--sfc-ink);
	-webkit-font-smoothing: antialiased;
}

/* Widen the gutter between form and summary: Stripe leans on air, not rules. */
.wc-block-checkout__sidebar {
	padding-left: clamp(20px, 3vw, 44px) !important;
}

/* The form column carries the whole flow, so give its steps room to breathe. */
.wc-block-checkout__form > .wc-block-components-checkout-step {
	margin-bottom: 34px;
	padding-bottom: 0;
	border-bottom: 0;
}

.wc-block-checkout__form > .wc-block-components-checkout-step:last-of-type {
	margin-bottom: 20px;
}

/* ==========================================================================
   2. Section headings
   ========================================================================== */

.wc-block-components-checkout-step__title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--sfc-ink);
	line-height: 1.3;
}

.wc-block-components-checkout-step__heading {
	margin: 0 0 14px;
	align-items: baseline;
}

.wc-block-components-checkout-step__description {
	font-size: 13px;
	color: var(--sfc-muted);
	line-height: 1.5;
	margin-top: 4px;
}

/* ==========================================================================
   3. Form fields

   The single most recognisable part of Stripe's checkout: a hairline field
   that stays quiet until focus, then lifts with a coloured border and a soft
   ring. Everything else on the page defers to it.
   ========================================================================== */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-address-form input,
.wc-block-components-textarea,
.wc-blocks-components-select__select {
	box-sizing: border-box;
	height: var(--sfc-field-h);
	padding: 22px 12px 6px;
	border: 1px solid var(--sfc-line);
	border-radius: var(--sfc-radius);
	background: var(--sfc-bg);
	color: var(--sfc-ink);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
	box-shadow: var(--sfc-shadow-sm);
	transition:
		border-color var(--sfc-speed) var(--sfc-ease),
		box-shadow var(--sfc-speed) var(--sfc-ease);
}

.wc-block-components-textarea {
	height: auto;
	min-height: 88px;
	padding: 12px;
}

.wc-block-components-text-input input:hover:not(:focus),
.wc-blocks-components-select__select:hover:not(:focus) {
	border-color: #cfd7e3;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus {
	outline: none;
	border-color: var(--sfc-accent);
	box-shadow:
		0 0 0 3px var(--sfc-accent-ring),
		var(--sfc-shadow-sm);
}

/*
 * Floating label. WooCommerce already animates a translateY on the label and
 * toggles .is-active itself, so we ride its mechanism rather than inventing a
 * parallel one: only the resting position, size and colour are restyled.
 */
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	left: 13px;
	top: 12px;
	color: var(--sfc-faint);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 20px;
	transition:
		transform var(--sfc-speed) var(--sfc-ease),
		font-size var(--sfc-speed) var(--sfc-ease),
		color var(--sfc-speed) var(--sfc-ease);
}

/* Raised state: smaller, higher, dimmer. */
.wc-block-components-text-input.wvn-state--active label,
.wc-blocks-components-select.wvn-state--active .wc-blocks-components-select__label,
.wc-block-components-text-input input:focus + label {
	transform: translateY(-10px);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--sfc-muted);
}

.wc-block-components-text-input input:focus + label {
	color: var(--sfc-accent-deep);
}

/* Validation */
.wc-block-components-text-input.wvn-panel__has-error input,
.wc-block-components-text-input.wvn-panel__has-error input:focus {
	border-color: var(--sfc-danger);
	box-shadow: 0 0 0 3px rgba(223, 27, 65, 0.22), var(--sfc-shadow-sm);
}

.wc-block-components-validation-error {
	margin-top: 6px;
	font-size: 13px;
	color: var(--sfc-danger);
}

.wc-block-components-address-form__address_1 + p,
.wc-block-checkout__add-note {
	font-size: 13px;
	color: var(--sfc-muted);
}

/* ==========================================================================
   4. Order summary sidebar

   Stripe frames the summary as a receipt: tinted panel, hairline border, and
   totals that grow in weight as they approach the amount actually charged.
   ========================================================================== */

.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--sfc-canvas);
	border: 1px solid var(--sfc-line);
	border-radius: var(--sfc-radius-lg);
	padding: 22px 20px 6px;
	box-shadow: var(--sfc-shadow-sm);
}

.wc-block-components-checkout-order-summary__title {
	margin: 0 0 16px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sfc-muted);
	border: 0;
}

.wc-block-components-checkout-order-summary__title-text {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

/* Line items */
.wc-block-components-order-summary-item {
	padding: 14px 0;
	border-bottom: 1px solid var(--sfc-line);
}

.wc-block-components-order-summary-item:last-child {
	border-bottom: 0;
}

.wc-block-components-order-summary-item__image img {
	border-radius: var(--sfc-radius);
	border: 1px solid var(--sfc-line);
	background: var(--sfc-bg);
}

/*
 * The description column is a flex child with no min-width floor, so a long
 * product name plus a sale badge shrinks it until words break one letter per
 * line. Give it room to grow and forbid sub-content collapsing.
 */
.wc-block-components-order-summary-item__description {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 14px !important;
	padding-right: 0 !important;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sfc-ink);
	overflow-wrap: anywhere;
}

/* Keep the thumbnail from being squeezed by the text column. */
.wc-block-components-order-summary-item__image {
	flex: 0 0 48px;
	width: 48px;
}

/* Price column sits right, never wraps under the name. */
.wc-block-components-order-summary-item__total-price {
	flex: 0 0 auto;
	padding-left: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sfc-ink);
	white-space: nowrap;
}

.wc-block-components-order-summary-item__quantity {
	background: var(--sfc-ink-soft);
	border-color: var(--sfc-bg);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	box-shadow: var(--sfc-shadow-sm);
}

.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-product-metadata {
	font-size: 12px;
	color: var(--sfc-muted);
	line-height: 1.5;
}

/* Totals ladder */
.wc-block-components-totals-item {
	padding: 9px 0;
	font-size: 14px;
	color: var(--sfc-ink-soft);
}

.wc-block-components-totals-item__label {
	font-weight: 400;
}

.wc-block-components-totals-footer-item {
	margin-top: 4px;
	padding: 16px 0 18px;
	border-top: 1px solid var(--sfc-line);
	font-size: 16px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-weight: 600;
	color: var(--sfc-ink);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sfc-ink);
}

/* Coupon disclosure */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-size: 14px;
	font-weight: 500;
	color: var(--sfc-accent-deep);
}

.wc-block-components-totals-discount__coupon-list .wc-block-components-chip {
	background: var(--sfc-accent-tint);
	border: 1px solid var(--sfc-accent-ring);
	color: var(--sfc-accent-deep);
	border-radius: 100px;
	font-weight: 500;
}

.wc-block-components-sale-badge {
	background: rgba(30, 166, 114, 0.12);
	color: var(--sfc-success);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
}

/* ==========================================================================
   5. Payment methods

   Stripe presents gateways as a radio card list: the selected option is
   outlined in the accent colour and tinted, so the choice is unambiguous.
   ========================================================================== */

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border: 1px solid var(--sfc-line);
	border-radius: var(--sfc-radius);
	background: var(--sfc-bg);
	margin-bottom: 8px;
	padding: 14px 14px 14px 44px;
	transition:
		border-color var(--sfc-speed) var(--sfc-ease),
		background var(--sfc-speed) var(--sfc-ease),
		box-shadow var(--sfc-speed) var(--sfc-ease);
}

.wc-block-components-radio-control-accordion-option:hover,
.wc-block-components-radio-control__option:hover {
	border-color: #cfd7e3;
}

/* Selected card */
.wc-block-components-radio-control-accordion-option:has(input:checked),
.wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--sfc-accent);
	background: var(--sfc-accent-tint);
	box-shadow: 0 0 0 1px var(--sfc-accent);
}

.wc-block-components-radio-control__label {
	font-size: 14px;
	font-weight: 500;
	color: var(--sfc-ink);
}

.wc-block-components-radio-control__input {
	border-color: #cbd2dc;
}

.wc-block-components-radio-control__input:checked {
	border-color: var(--sfc-accent);
	color: var(--sfc-accent);
}

.wc-block-components-radio-control__input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--sfc-accent-ring);
}

.wc-block-components-radio-control-accordion-content {
	padding: 0 14px 14px 44px;
	font-size: 13px;
	color: var(--sfc-muted);
	line-height: 1.6;
}

/* ==========================================================================
   6. Buttons

   One primary action, unmistakably the accent colour, with a lift on hover
   and a visible focus ring for keyboard users.
   ========================================================================== */

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	border-radius: var(--sfc-radius) !important;
	background: var(--sfc-accent) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	min-height: 48px;
	box-shadow: var(--sfc-shadow-sm);
	transition:
		background var(--sfc-speed) var(--sfc-ease),
		transform var(--sfc-speed) var(--sfc-ease),
		box-shadow var(--sfc-speed) var(--sfc-ease);
}

.wc-block-components-checkout-place-order-button:hover:not(:disabled),
.wc-block-cart__submit-button:hover:not(:disabled) {
	background: var(--sfc-accent-deep) !important;
	transform: translateY(-1px);
	box-shadow: var(--sfc-shadow-md);
}

.wc-block-components-checkout-place-order-button:active:not(:disabled),
.wc-block-cart__submit-button:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: var(--sfc-shadow-sm);
}

.wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-cart__submit-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--sfc-accent-ring), var(--sfc-shadow-md);
}

.wc-block-components-checkout-place-order-button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Secondary/text actions */
.wc-block-components-button.wvn-panel__outlined {
	border-radius: var(--sfc-radius);
	border-color: var(--sfc-line);
	color: var(--sfc-ink);
	font-weight: 500;
}

.wc-block-components-checkout-return-to-cart-button {
	color: var(--sfc-accent-deep);
	font-size: 14px;
	font-weight: 500;
}

/* Trust line above the primary action. */
.wc-block-checkout__terms {
	font-size: 12.5px;
	color: var(--sfc-muted);
	line-height: 1.6;
}

.wc-block-checkout__terms a {
	color: var(--sfc-accent-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--sfc-accent-ring);
}

/* ==========================================================================
   7. Cart page
   ========================================================================== */

/* ==========================================================================
   8. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wc-block-checkout *,
	.wc-block-cart * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}