/**
 * 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,
.bly-checkout__btn--primary:link,
.bly-checkout__btn--primary:visited,
.bly-checkout__btn--primary:hover,
.bly-checkout__btn--primary:focus,
.bly-checkout__btn--primary:active {
	background: var(--cwp-primary, #f1913d) !important;
	/* Link-state selectors required: brand/theme stylesheets set <a> colors
	   with their own specificity, so a bare .bly-checkout__btn--primary loses
	   to a theme's a:visited rule and the label goes dark/unreadable. */
	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;
}

/* CRITICAL — let Alpine's x-show win over the `display:flex !important` above.
   `.bly-checkout__price-row` forces `display:flex !important`, which OVERRIDES
   the inline `style="display:none"` that x-show sets when a row should hide
   (the only x-show-gated price row is the security-deposit disclosure). Without
   this, the "(not collected at checkout)" line shows even when security_deposit
   is null/0 — the row can never hide. This attribute-selector rule re-asserts
   `display:none !important` for any price row Alpine has hidden. (Verified
   2026-06-20: x-show=false set inline display:none, yet getComputedStyle
   reported flex → the !important above was the culprit.) */
.bly-checkout__price-row[style*="display: none"],
.bly-checkout__price-row[style*="display:none"] {
	display: none !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;
}

/* ── Refresh overlay (shown during quote re-fetch — coupon apply, fee toggle)
   2026-06-12. Sits on top of the visible price breakdown so guests get
   instant feedback instead of staring at a stale total for the
   ~30-40s a slow PMS priceDetails endpoint can take. ──────────── */
.bly-checkout__refresh-overlay {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	background: rgba(255, 255, 255, 0.78) !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
	z-index: 5 !important;
	border-radius: 8px !important;
	pointer-events: none !important;
}

.bly-checkout__refresh-spinner {
	width: 28px !important;
	height: 28px !important;
	border: 3px solid var(--cwp-border, #e5e7eb) !important;
	border-top-color: var(--cwp-primary, #f1913d) !important;
	border-radius: 50% !important;
	animation: bly-checkout-spin 0.8s linear infinite !important;
}

.bly-checkout__refresh-label {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--cwp-text-muted, #6b7280) !important;
	letter-spacing: 0.02em !important;
}

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

/* ── Stay summary row ─────────────────────────────────────── */
.bly-checkout__order-stay {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 0 0 12px !important;
	padding: 8px 12px !important;
	background: var(--cwp-bg-subtle, #f9fafb) !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	color: var(--cwp-text-muted, #4b5563) !important;
	font-weight: 500 !important;
}
.bly-checkout__order-stay-arrow,
.bly-checkout__order-stay-sep {
	color: var(--cwp-text-muted, #9ca3af) !important;
	font-weight: 400 !important;
}

/* ── Discount row — green win treatment ───────────────────── */
.bly-checkout__price-row--discount {
	color: #047857 !important;
	background: rgba(16, 185, 129, 0.06) !important;
	border-left: 2px solid #10b981 !important;
	padding-left: 8px !important;
	margin-left: -8px !important;
	border-radius: 0 4px 4px 0 !important;
}
.bly-checkout__discount-label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}
.bly-checkout__discount-check {
	color: #10b981 !important;
	flex-shrink: 0 !important;
}
.bly-checkout__discount-amount {
	font-weight: 600 !important;
}

/* ── Collapsible taxes group ──────────────────────────────── */
.bly-checkout__tax-group {
	margin: 4px 0 !important;
}
.bly-checkout__tax-summary {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding: 8px 0 !important;
	background: transparent !important;
	border: 0 !important;
	font: inherit !important;
	font-size: 14px !important;
	color: var(--cwp-text, #1f2937) !important;
	cursor: pointer !important;
	text-align: left !important;
}
.bly-checkout__tax-summary[disabled] {
	cursor: default !important;
	opacity: 1 !important;
}
.bly-checkout__tax-summary[disabled] .bly-checkout__tax-chevron {
	display: none !important;
}
.bly-checkout__tax-summary-label small {
	color: var(--cwp-text-muted, #6b7280) !important;
	font-weight: 400 !important;
	font-size: 12px !important;
	margin-left: 4px !important;
}
.bly-checkout__tax-summary-right {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.bly-checkout__tax-chevron {
	color: var(--cwp-text-muted, #6b7280) !important;
	transition: transform 0.15s ease !important;
}
.bly-checkout__tax-summary--open .bly-checkout__tax-chevron {
	transform: rotate(180deg) !important;
}
.bly-checkout__tax-list {
	padding-left: 12px !important;
	border-left: 1px dashed var(--cwp-border, #e5e7eb) !important;
	margin-left: 4px !important;
	margin-bottom: 6px !important;
}
.bly-checkout__price-row--tax-item {
	font-size: 13px !important;
	color: var(--cwp-text-muted, #6b7280) !important;
	padding: 4px 0 !important;
}

/* ── Total emphasis ───────────────────────────────────────── */
.bly-checkout__divider--total {
	border-top: 1.5px solid var(--cwp-text, #1f2937) !important;
	margin: 12px 0 8px !important;
	opacity: 0.9 !important;
}
.bly-checkout__price-row--total {
	font-size: 18px !important;
	padding: 4px 0 !important;
}
.bly-checkout__price-row--total strong {
	color: var(--cwp-text, #111827) !important;
	font-weight: 700 !important;
}
.bly-checkout__total-currency {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--cwp-text-muted, #6b7280) !important;
	margin-left: 4px !important;
}

/* ── Pay-today footer ─────────────────────────────────────── */
.bly-checkout__pay-today {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 10px !important;
	padding: 10px 12px !important;
	background: rgba(var(--cwp-primary-rgb, 241, 145, 61), 0.08) !important;
	color: var(--cwp-primary, #f1913d) !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}
.bly-checkout__pay-today strong {
	font-weight: 700 !important;
}
.bly-checkout__pay-today-icon {
	flex-shrink: 0 !important;
	color: currentColor !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;
}

/* ── Availability Alert Banner (P0 #8 — 2026-06-14 redesign) ─
   Modern booking-platform aesthetic — Airbnb / Stripe / Booking.com
   pattern. Soft warm tint (NOT siren-red), 1px subtle border,
   refined typography. Inline action button on the right pulls the
   guest toward "pick different dates" without panicking them.
   No shadow, no heavy borders, no caps — just a calm, premium
   alert that communicates urgency through copy + color, not noise. */
.bly-checkout__alert {
	/* 2026-06-14 (P0) — NO !important on display. Alpine's x-show
	   adds inline `style="display: none"` to hide the element. With
	   !important here, that inline style is ignored and the banner
	   renders unconditionally even though datesUnavailable=false.
	   ROOT CAUSE of "banner shows on every checkout" reported by
	   Luis. Other properties keep !important to override theme reset. */
	display: flex;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	margin: 0 0 16px 0 !important;
	background: #fff8f1 !important;
	border: 1px solid #fde2c8 !important;
	border-radius: 12px !important;
	color: #7c3a0e !important;
	font-family: inherit !important;
	box-sizing: border-box !important;
}
/* Belt-and-braces: also explicitly hide via x-cloak before Alpine
   initializes, and when x-show evaluates false (Alpine 3 leaves the
   inline style="display: none" on the element). */
.bly-checkout__alert[style*="display: none"],
.bly-checkout__alert[style*="display:none"] {
	display: none !important;
}
.bly-checkout__alert-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	flex-shrink: 0 !important;
	background: #fef0e0 !important;
	border-radius: 50% !important;
	color: #c2410c !important;
}
.bly-checkout__alert-icon svg { display: block !important; }
.bly-checkout__alert-content {
	flex: 1 !important;
	min-width: 0 !important;
	line-height: 1.4 !important;
}
.bly-checkout__alert-title {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #7c3a0e !important;
	letter-spacing: -0.01em !important;
}
.bly-checkout__alert-body {
	margin: 2px 0 0 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: #92400e !important;
	opacity: 0.9 !important;
}
.bly-checkout__alert-action {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
	padding: 8px 14px !important;
	background: #ffffff !important;
	border: 1px solid #fed7aa !important;
	border-radius: 8px !important;
	color: #c2410c !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	white-space: nowrap !important;
	text-decoration: none !important;
}
.bly-checkout__alert-action:hover,
.bly-checkout__alert-action:focus {
	background: #c2410c !important;
	border-color: #c2410c !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 2px 8px rgba(194, 65, 12, 0.18) !important;
}
.bly-checkout__alert-action svg { transition: transform 0.15s ease !important; }
.bly-checkout__alert-action:hover svg { transform: translateX(2px) !important; }

/* Responsive stack on narrow viewports. */
@media (max-width: 540px) {
	.bly-checkout__alert {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	.bly-checkout__alert-icon { width: 28px !important; height: 28px !important; }
	.bly-checkout__alert-action { justify-content: center !important; }
}

/* Disabled state on the Pay button when dates unavailable. */
.bly-checkout__btn--disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	background: #cbd5e1 !important;
	box-shadow: none !important;
}
.bly-checkout__btn--disabled:hover {
	background: #cbd5e1 !important;
	transform: none !important;
}