/**
 * Checkout Page Styles
 *
 * BEM naming: bly-checkout__*
 * Design tokens: --cwp-* variables (from DesignTokens class + variables.css)
 * All interactive elements use !important for theme override protection
 *
 * @package Connect
 * @since   2.0.0
 */

/* ── Base link reset ───────────────────────────────────────── */
/* Must override browser defaults AND any theme/blank-template a styles */

.cwp-root .bly-checkout a,
.cwp-root .bly-checkout a:link,
.cwp-root .bly-checkout a:visited,
body .bly-checkout a,
body .bly-checkout a:link,
body .bly-checkout a:visited {
	color: inherit !important;
	text-decoration: none !important;
}

.cwp-root .bly-checkout a:hover,
.cwp-root .bly-checkout a:focus,
.cwp-root .bly-checkout a:active,
body .bly-checkout a:hover,
body .bly-checkout a:focus,
body .bly-checkout a:active {
	text-decoration: none !important;
}

/* ── Layout ───────────────────────────────────────────────── */

.bly-checkout {
	max-width: 1120px !important;
	margin: 0 auto !important;
	padding: 24px 16px 64px !important;
	font-family: var(--cwp-font-body, inherit) !important;
	color: var(--cwp-text, #2c2e33) !important;
}

.bly-checkout__back-nav {
	margin-bottom: 24px !important;
}

.bly-checkout__back-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: var(--cwp-text-secondary, #667085) !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: color 0.15s !important;
}

body .bly-checkout__back-link:hover,
body .bly-checkout__back-link:focus,
body .bly-checkout__back-link:active {
	color: var(--cwp-primary, #f1913d) !important;
	text-decoration: none !important;
}

.bly-checkout__layout {
	display: grid !important;
	grid-template-columns: 1fr 380px !important;
	gap: 48px !important;
	align-items: start !important;
}

.bly-checkout__title {
	font-size: var(--cwp-size-h2, 24px) !important;
	font-weight: 700 !important;
	margin: 0 0 32px !important;
	color: var(--cwp-text, #2c2e33) !important;
}

.bly-checkout__divider {
	border: none !important;
	border-top: 1px solid var(--cwp-border, #e5e7eb) !important;
	margin: 24px 0 !important;
}

/* ── Sections ─────────────────────────────────────────────── */

.bly-checkout__section {
	margin-bottom: 8px !important;
}

.bly-checkout__section-title {
	font-size: var(--cwp-size-h4, 18px) !important;
	font-weight: 600 !important;
	margin: 0 0 16px !important;
	color: var(--cwp-text, #2c2e33) !important;
}

/* ── Trip Summary ─────────────────────────────────────────── */

.bly-checkout__property-card {
	display: flex !important;
	gap: 16px !important;
	padding: 16px !important;
	border: 1px solid var(--cwp-border, #e5e7eb) !important;
	border-radius: var(--cwp-radius-md, 12px) !important;
	background: var(--cwp-surface-alt, #f9fafb) !important;
}

.bly-checkout__property-image {
	flex-shrink: 0 !important;
	width: 120px !important;
	height: 90px !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	overflow: hidden !important;
}

.bly-checkout__property-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.bly-checkout__property-info {
	flex: 1 !important;
	min-width: 0 !important;
}

.bly-checkout__property-name {
	font-size: 16px !important;
	font-weight: 600 !important;
	margin: 0 0 4px !important;
}

.bly-checkout__property-name a,
.bly-checkout__order-name {
	color: var(--cwp-text, #2c2e33) !important;
	text-decoration: none !important;
}

body .bly-checkout__property-name a:hover,
body .bly-checkout__property-name a:focus,
body a.bly-checkout__order-name:hover,
body a.bly-checkout__order-name:focus {
	color: var(--cwp-primary, #f1913d) !important;
	text-decoration: none !important;
}

.bly-checkout__property-location {
	font-size: 13px !important;
	color: var(--cwp-text-secondary, #667085) !important;
	margin: 0 0 8px !important;
}

.bly-checkout__property-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	font-size: 13px !important;
	color: var(--cwp-text-secondary, #667085) !important;
}

.bly-checkout__rating {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	color: var(--cwp-primary, #f1913d) !important;
}

.bly-checkout__review-count {
	color: var(--cwp-text-secondary, #667085) !important;
}

.bly-checkout__trip-details {
	margin-top: 16px !important;
}

.bly-checkout__trip-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	padding: 8px 0 !important;
}

.bly-checkout__trip-label {
	font-size: 14px !important;
}

.bly-checkout__trip-value {
	font-size: 14px !important;
	text-align: right !important;
}

.bly-checkout__nights-badge {
	display: inline-block !important;
	margin-left: 8px !important;
	padding: 2px 8px !important;
	background: var(--cwp-primary-10, rgba(241,145,61,0.1)) !important;
	color: var(--cwp-primary, #f1913d) !important;
	border-radius: 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

/* ── Form ─────────────────────────────────────────────────── */

.bly-checkout__form-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
}

.bly-checkout__field--full {
	grid-column: 1 / -1 !important;
}

.bly-checkout__label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	margin-bottom: 6px !important;
	color: var(--cwp-text, #2c2e33) !important;
}

.bly-checkout__required {
	color: var(--cwp-error, #e53e3e) !important;
}

.bly-checkout__optional {
	font-weight: 400 !important;
	color: var(--cwp-text-secondary, #667085) !important;
	font-size: 13px !important;
}

.bly-checkout__input {
	all: revert !important;
	display: block !important;
	width: 100% !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	border: 1px solid var(--cwp-border, #d1d5db) !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	background: var(--cwp-bg, #ffffff) !important;
	color: var(--cwp-text, #2c2e33) !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
	box-sizing: border-box !important;
}

.bly-checkout__input:focus {
	outline: none !important;
	border-color: var(--cwp-primary, #f1913d) !important;
	box-shadow: 0 0 0 3px var(--cwp-primary-10, rgba(241,145,61,0.15)) !important;
}

.bly-checkout__input--error {
	border-color: var(--cwp-error, #e53e3e) !important;
}

.bly-checkout__textarea {
	all: revert !important;
	display: block !important;
	width: 100% !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	border: 1px solid var(--cwp-border, #d1d5db) !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	background: var(--cwp-bg, #ffffff) !important;
	color: var(--cwp-text, #2c2e33) !important;
	resize: vertical !important;
	min-height: 80px !important;
	box-sizing: border-box !important;
}

.bly-checkout__textarea:focus {
	outline: none !important;
	border-color: var(--cwp-primary, #f1913d) !important;
	box-shadow: 0 0 0 3px var(--cwp-primary-10, rgba(241,145,61,0.15)) !important;
}

.bly-checkout__field-error {
	font-size: 13px !important;
	color: var(--cwp-error, #e53e3e) !important;
	margin: 4px 0 0 !important;
}

.bly-checkout__char-count {
	font-size: 12px !important;
	color: var(--cwp-text-secondary, #9ca3af) !important;
	text-align: right !important;
	margin: 4px 0 0 !important;
}

/* ── Checkbox ─────────────────────────────────────────────── */

.bly-checkout__checkbox {
	all: revert !important;
	width: 18px !important;
	height: 18px !important;
	accent-color: var(--cwp-primary, #f1913d) !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}

/* ── Promo Code ───────────────────────────────────────────── */

.bly-checkout__promo-toggle,
.cwp-root .bly-checkout__promo-toggle,
body .bly-checkout__promo-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	color: var(--cwp-primary, #f1913d) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.bly-checkout__promo-toggle:hover,
.bly-checkout__promo-toggle:focus,
.bly-checkout__promo-toggle:active,
.cwp-root .bly-checkout__promo-toggle:hover,
.cwp-root .bly-checkout__promo-toggle:focus,
.cwp-root .bly-checkout__promo-toggle:active {
	opacity: 0.8 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.bly-checkout__chevron {
	transition: transform 0.2s !important;
}

.bly-checkout__chevron--open {
	transform: rotate(180deg) !important;
}

.bly-checkout__promo-form {
	margin-top: 12px !important;
}

.bly-checkout__promo-input-group {
	display: flex !important;
	gap: 8px !important;
}

.bly-checkout__promo-input {
	flex: 1 !important;
}

.bly-checkout__promo-btn {
	flex-shrink: 0 !important;
}

/* Promo success/error: use a class-based show pattern instead of !important display
   so Alpine's x-show (inline display:none) can actually hide them. */
.bly-checkout__promo-success {
	align-items: center;
	gap: 8px;
	margin-top: 8px !important;
	padding: 8px 12px !important;
	background: #f0fdf4 !important;
	color: var(--cwp-success, #166534) !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	font-size: 13px !important;
}

.bly-checkout__promo-remove {
	background: none !important;
	border: none !important;
	color: var(--cwp-success, #166534) !important;
	cursor: pointer !important;
	font-size: 18px !important;
	line-height: 1 !important;
	margin-left: auto !important;
	padding: 0 4px !important;
}

.bly-checkout__promo-remove:hover {
	opacity: 0.7 !important;
}

.bly-checkout__promo-error {
	margin-top: 8px !important;
	font-size: 13px !important;
	color: var(--cwp-error, #e53e3e) !important;
}

/* ── Optional Fees ────────────────────────────────────────── */

.bly-checkout__fee-item {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px !important;
	border: 1px solid var(--cwp-border, #e5e7eb) !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	margin-bottom: 8px !important;
	cursor: pointer !important;
	transition: border-color 0.15s !important;
}

.bly-checkout__fee-item:hover {
	border-color: var(--cwp-primary, #f1913d) !important;
}

.bly-checkout__fee-info {
	flex: 1 !important;
}

.bly-checkout__fee-name {
	font-size: 14px !important;
	font-weight: 500 !important;
	display: block !important;
}

.bly-checkout__fee-desc {
	font-size: 12px !important;
	color: var(--cwp-text-secondary, #667085) !important;
	display: block !important;
	margin-top: 2px !important;
}

.bly-checkout__fee-amount {
	font-size: 14px !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}

/* ── Payment ──────────────────────────────────────────────── */

.bly-checkout__stripe-container {
	padding: 16px !important;
	border: 1px solid var(--cwp-border, #e5e7eb) !important;
	border-radius: var(--cwp-radius-md, 12px) !important;
	background: var(--cwp-bg, #ffffff) !important;
	min-height: 60px !important;
	transition: opacity 0.2s !important;
}

.bly-checkout__stripe-container--loading {
	opacity: 0.5 !important;
}

.bly-checkout__payment-error {
	align-items: center !important;
	gap: 8px !important;
	margin-top: 12px !important;
	padding: 10px 14px !important;
	background: #fef2f2 !important;
	color: #991b1b !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	font-size: 13px !important;
}

.bly-checkout__payment-notice {
	padding: 16px !important;
	background: #f0fdf4 !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	color: var(--cwp-success, #166534) !important;
	font-size: 14px !important;
}

/* Inquiry Mode — "Request to Book" banner when Stripe not configured */
.bly-checkout__inquiry-note {
	display: flex !important;
	gap: 12px !important;
	align-items: flex-start !important;
	padding: 14px 16px !important;
	background: #eff6ff !important;
	border: 1px solid #bfdbfe !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	margin-bottom: 16px !important;
}
.bly-checkout__inquiry-note svg {
	flex-shrink: 0 !important;
	color: #1d4ed8 !important;
	margin-top: 2px !important;
}
.bly-checkout__inquiry-note strong {
	display: block !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1e3a8a !important;
	margin-bottom: 2px !important;
}
.bly-checkout__inquiry-note span {
	font-size: 13px !important;
	color: #1e40af !important;
	line-height: 1.55 !important;
}
.bly-checkout__label-optional {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--cwp-text-secondary, #9ca3af) !important;
	margin-left: 6px !important;
}
.bly-checkout__textarea {
	resize: vertical !important;
	min-height: 96px !important;
	font-family: inherit !important;
	line-height: 1.5 !important;
}

.bly-checkout__trust {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 12px !important;
	font-size: 12px !important;
	color: var(--cwp-text-secondary, #9ca3af) !important;
}

/* ── Terms ────────────────────────────────────────────────── */

.bly-checkout__terms-label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	font-size: 14px !important;
	cursor: pointer !important;
	line-height: 1.5 !important;
}

.bly-checkout__terms-link {
	color: var(--cwp-primary, #f1913d) !important;
	text-decoration: underline !important;
}

/* ── Buttons ──────────────────────────────────────────────── */

.bly-checkout__btn {
	all: revert !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 12px 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	cursor: pointer !important;
	transition: all 0.15s !important;
	text-decoration: none !important;
	border: none !important;
	box-sizing: border-box !important;
}

.bly-checkout__btn--primary {
	background: var(--cwp-primary, #f1913d) !important;
	color: #ffffff !important;
}

.bly-checkout__btn--primary:hover {
	opacity: 0.9 !important;
	transform: translateY(-1px) !important;
}

.bly-checkout__btn--secondary {
	background: var(--cwp-bg, #ffffff) !important;
	color: var(--cwp-text, #2c2e33) !important;
	border: 1px solid var(--cwp-border, #d1d5db) !important;
}

.bly-checkout__btn--secondary:hover {
	border-color: var(--cwp-primary, #f1913d) !important;
	color: var(--cwp-primary, #f1913d) !important;
}

.bly-checkout__btn--cta {
	width: 100% !important;
	padding: 16px 24px !important;
	font-size: 16px !important;
	border-radius: var(--cwp-radius-md, 12px) !important;
	position: relative !important;
	overflow: hidden !important;
}

.bly-checkout__btn--loading {
	opacity: 0.7 !important;
	cursor: not-allowed !important;
}

.bly-checkout__btn-content {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}

.bly-checkout__cta-total {
	text-align: center !important;
	font-size: 14px !important;
	color: var(--cwp-text-secondary, #667085) !important;
	margin-top: 8px !important;
	display: none !important; /* Only show on mobile */
}

/* ── Spinner ──────────────────────────────────────────────── */

.bly-checkout__spinner {
	display: inline-block !important;
	width: 18px !important;
	height: 18px !important;
	border: 2px solid rgba(255,255,255,0.3) !important;
	border-top-color: #ffffff !important;
	border-radius: 50% !important;
	animation: bly-checkout-spin 0.6s linear infinite !important;
}

/* CTA button spinner — hidden by default, shown only when button has --loading class */
.bly-checkout__cta-spinner {
	display: none !important;
	width: 18px !important;
	height: 18px !important;
	border: 2px solid rgba(255,255,255,0.3) !important;
	border-top-color: #ffffff !important;
	border-radius: 50% !important;
	animation: bly-checkout-spin 0.6s linear infinite !important;
}

.bly-checkout__btn--loading .bly-checkout__cta-spinner {
	display: inline-block !important;
}

/* Hide lock icon when loading */
.bly-checkout__btn--loading .bly-checkout__cta-icon {
	display: none !important;
}

@keyframes bly-checkout-spin {
	to { transform: rotate(360deg); }
}

/* ── Order Summary Sidebar ────────────────────────────────── */

.bly-checkout__sidebar {
	position: sticky !important;
	top: 24px !important;
}

.bly-checkout__order-card {
	border: 1px solid var(--cwp-border, #e5e7eb) !important;
	border-radius: var(--cwp-radius-md, 12px) !important;
	padding: 24px !important;
	background: var(--cwp-bg, #ffffff) !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.bly-checkout__order-property {
	display: flex !important;
	gap: 12px !important;
	align-items: center !important;
}

.bly-checkout__order-image {
	width: 80px !important;
	height: 60px !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	object-fit: cover !important;
}

.bly-checkout__order-name {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--cwp-text, #2c2e33) !important;
	text-decoration: none !important;
	display: block !important;
}

.bly-checkout__order-title {
	font-size: 16px !important;
	font-weight: 600 !important;
	margin: 0 0 16px !important;
}

/* Price breakdown rows */
.bly-checkout__price-breakdown {
	font-size: 14px !important;
}

.bly-checkout__price-row {
	display: flex !important;
	justify-content: space-between !important;
	padding: 6px 0 !important;
	color: var(--cwp-text, #2c2e33) !important;
}

.bly-checkout__price-row--discount {
	color: var(--cwp-success, #059669) !important;
}

.bly-checkout__price-row--tax {
	color: var(--cwp-text-secondary, #667085) !important;
	font-size: 13px !important;
}

.bly-checkout__price-row--total {
	font-size: 18px !important;
	padding: 8px 0 !important;
}

.bly-checkout__price-row--deposit {
	color: var(--cwp-text-secondary, #667085) !important;
	font-size: 13px !important;
	padding-top: 12px !important;
}

.bly-checkout__price-source {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-size: 11px !important;
	color: var(--cwp-success, #059669) !important;
	margin-top: 12px !important;
}

/* ── Confirmation ─────────────────────────────────────────── */

.bly-confirm {
	max-width: 560px !important;
	margin: 32px auto !important;
}

/* Header */
.bly-confirm__header {
	text-align: center !important;
	margin-bottom: 24px !important;
}

.bly-confirm__check {
	width: 56px !important; height: 56px !important;
	border-radius: 50% !important;
	background: #ecfdf5 !important;
	color: #059669 !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	margin-bottom: 16px !important;
	animation: bly-confirm-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) !important;
}

@keyframes bly-confirm-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.bly-confirm__title {
	font-size: var(--cwp-size-h2, 24px) !important;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
	color: var(--cwp-text, #2c2e33) !important;
}

.bly-confirm__subtitle {
	font-size: 14px !important;
	color: var(--cwp-text-secondary, #667085) !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

/* Confirmation code */
.bly-confirm__code-wrap {
	text-align: center !important;
	margin-bottom: 24px !important;
}

.bly-confirm__code-label {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--cwp-text-secondary, #94a3b8) !important;
	display: block !important;
	margin-bottom: 4px !important;
}

.bly-confirm__code {
	font-family: 'SF Mono', 'Fira Code', monospace !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	color: var(--cwp-primary, #f1913d) !important;
	background: var(--cwp-surface-alt, #f9fafb) !important;
	padding: 8px 20px !important;
	border-radius: var(--cwp-radius-md, 8px) !important;
	display: inline-block !important;
}

/* Trip card */
.bly-confirm__card {
	border: 1px solid var(--cwp-border, #e5e7eb) !important;
	border-radius: var(--cwp-radius-lg, 16px) !important;
	background: var(--cwp-bg, #ffffff) !important;
	padding: 24px !important;
	margin-bottom: 24px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.bly-confirm__hr {
	border: none !important;
	border-top: 1px solid var(--cwp-border, #e5e7eb) !important;
	margin: 16px 0 !important;
}

/* Property row */
.bly-confirm__property {
	display: flex !important;
	gap: 14px !important;
	align-items: center !important;
}

.bly-confirm__property-img {
	width: 72px !important; height: 54px !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
}

.bly-confirm__property-name {
	font-size: 15px !important;
	font-weight: 600 !important;
	display: block !important;
	color: inherit !important;
	text-decoration: none !important;
}

.bly-confirm__property-location {
	font-size: 13px !important;
	color: var(--cwp-text-secondary, #667085) !important;
}

/* Timeline */
.bly-confirm__timeline {
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
	padding: 8px 0 !important;
}

.bly-confirm__timeline-item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex: 1 !important;
}

.bly-confirm__timeline-dot {
	width: 10px !important; height: 10px !important;
	border-radius: 50% !important;
	background: var(--cwp-primary, #f1913d) !important;
	flex-shrink: 0 !important;
}

.bly-confirm__timeline-dot--end {
	background: var(--cwp-text-secondary, #94a3b8) !important;
}

.bly-confirm__timeline-line {
	flex: 1 !important;
	height: 2px !important;
	background: linear-gradient(90deg, var(--cwp-primary, #f1913d), var(--cwp-text-secondary, #94a3b8)) !important;
	margin: 0 -4px !important;
}

.bly-confirm__timeline-label {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var(--cwp-text-secondary, #94a3b8) !important;
	display: block !important;
}

.bly-confirm__timeline-value {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--cwp-text, #2c2e33) !important;
}

/* Summary rows */
.bly-confirm__summary-row {
	display: flex !important;
	justify-content: space-between !important;
	padding: 6px 0 !important;
	font-size: 14px !important;
	color: var(--cwp-text-secondary, #667085) !important;
}

.bly-confirm__summary-row--total {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--cwp-text, #2c2e33) !important;
	padding-top: 10px !important;
	margin-top: 4px !important;
	border-top: 1px solid var(--cwp-border, #e5e7eb) !important;
}

/* What's next */
.bly-confirm__next {
	margin-bottom: 24px !important;
}

.bly-confirm__next-title {
	font-size: 16px !important;
	font-weight: 600 !important;
	margin: 0 0 14px !important;
	color: var(--cwp-text, #2c2e33) !important;
}

.bly-confirm__next-steps {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}

.bly-confirm__step {
	display: flex !important;
	gap: 12px !important;
	align-items: flex-start !important;
}

.bly-confirm__step-icon {
	width: 36px !important; height: 36px !important;
	border-radius: var(--cwp-radius-sm, 8px) !important;
	background: var(--cwp-surface-alt, #f9fafb) !important;
	color: var(--cwp-primary, #f1913d) !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	flex-shrink: 0 !important;
}

.bly-confirm__step strong {
	font-size: 13px !important;
	display: block !important;
	margin-bottom: 2px !important;
	color: var(--cwp-text, #2c2e33) !important;
}

.bly-confirm__step p {
	font-size: 12px !important;
	color: var(--cwp-text-secondary, #94a3b8) !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

/* Actions */
.bly-confirm__actions {
	display: flex !important;
	gap: 12px !important;
	justify-content: center !important;
}

@media (max-width: 768px) {
	.bly-confirm__timeline { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
	.bly-confirm__timeline-line { width: 2px !important; height: 20px !important; margin: 0 0 0 4px !important; background: linear-gradient(180deg, var(--cwp-primary, #f1913d), var(--cwp-text-secondary, #94a3b8)) !important; }
	.bly-confirm__actions { flex-direction: column !important; }
}

/* ── Error State ──────────────────────────────────────────── */

.bly-checkout__error-card {
	max-width: 480px !important;
	margin: 48px auto !important;
	text-align: center !important;
	padding: 48px 32px !important;
}

.bly-checkout__error-icon {
	color: var(--cwp-error, #e53e3e) !important;
	margin-bottom: 20px !important;
}

.bly-checkout__error-title {
	font-size: 22px !important;
	font-weight: 600 !important;
	margin: 0 0 12px !important;
}

.bly-checkout__error-message {
	font-size: 15px !important;
	color: var(--cwp-text-secondary, #667085) !important;
	margin: 0 0 24px !important;
	line-height: 1.6 !important;
}

.bly-checkout__error-actions {
	display: flex !important;
	gap: 12px !important;
	justify-content: center !important;
}

/* ── Skeleton ─────────────────────────────────────────────── */

.bly-checkout__skeleton .bly-checkout__layout {
	display: grid !important;
	grid-template-columns: 1fr 380px !important;
	gap: 48px !important;
}

.bly-checkout__skeleton-line,
.bly-checkout__skeleton-block,
.bly-checkout__skeleton-image {
	background: linear-gradient(90deg, var(--cwp-skeleton-base, #f0f0f0) 25%, var(--cwp-skeleton-highlight, #e0e0e0) 50%, var(--cwp-skeleton-base, #f0f0f0) 75%) !important;
	background-size: 200% 100% !important;
	animation: bly-checkout-shimmer 1.5s ease-in-out infinite !important;
	border-radius: 6px !important;
}

.bly-checkout__skeleton-line {
	height: 16px !important;
	margin-bottom: 12px !important;
}

.bly-checkout__skeleton-line--short {
	width: 60% !important;
}

.bly-checkout__skeleton-line--medium {
	width: 80% !important;
}

.bly-checkout__skeleton-line--bold {
	height: 24px !important;
}

.bly-checkout__skeleton-block--title {
	height: 32px !important;
	width: 40% !important;
	margin-bottom: 24px !important;
}

.bly-checkout__skeleton-block--spacer {
	height: 1px !important;
	margin: 24px 0 !important;
	background: var(--cwp-border, #e5e7eb) !important;
	animation: none !important;
}

.bly-checkout__skeleton-block--button {
	height: 52px !important;
	margin-top: 16px !important;
	border-radius: 12px !important;
}

.bly-checkout__skeleton-image {
	height: 90px !important;
	width: 120px !important;
	flex-shrink: 0 !important;
}

.bly-checkout__skeleton-image--small {
	height: 60px !important;
	width: 80px !important;
}

.bly-checkout__skeleton-card {
	display: flex !important;
	gap: 16px !important;
	padding: 16px !important;
	border: 1px solid var(--cwp-border, #e5e7eb) !important;
	border-radius: 12px !important;
	margin-bottom: 24px !important;
}

.bly-checkout__skeleton-lines {
	flex: 1 !important;
}

.bly-checkout__skeleton-sidebar {
	border: 1px solid var(--cwp-border, #e5e7eb) !important;
	border-radius: 12px !important;
	padding: 24px !important;
}

.bly-checkout__order-skeleton {
	padding: 8px 0 !important;
}

@keyframes bly-checkout-shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
	.bly-checkout__layout,
	.bly-checkout__skeleton .bly-checkout__layout {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.bly-checkout__sidebar {
		position: static !important;
		order: -1 !important; /* Show summary above form on mobile */
	}

	.bly-checkout__form-grid {
		grid-template-columns: 1fr !important;
	}

	.bly-checkout__cta-total {
		display: block !important;
	}

	.bly-checkout__confirmation-actions {
		flex-direction: column !important;
	}

	.bly-checkout__error-actions {
		flex-direction: column !important;
	}

	.bly-checkout__property-card {
		flex-direction: column !important;
	}

	.bly-checkout__property-image {
		width: 100% !important;
		height: 160px !important;
	}
}

/* ── [x-cloak] hidden by default (Alpine.js) ─────────────── */
[x-cloak] {
	display: none !important;
}