/**
 * Confirmation page styles — same brand palette as booking-form.css.
 *
 * Reuses .loriot-price-table from booking-form.css for the price breakdown.
 * Print-friendly: see the @media print block at the bottom.
 */

.loriot-confirmation {
	--lor-text:       #101010;
	--lor-text-soft:  #5A5335;
	--lor-accent:     #9A8F66;
	--lor-cream:      #F4EEE3;
	--lor-white:      #FFFFFF;
	--lor-radius:     32px;
	--lor-radius-sm:  12px;
	--lor-success:    #2F6B3A;
	--lor-warn:       #8a5a00;

	max-width: 760px;
	margin: 0 auto;
	padding: 2.5rem 2rem;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.125rem;
	color: var(--lor-text);
	background: var(--lor-cream);
	border-radius: var(--lor-radius);
	border: 1px solid var(--lor-accent);
}

.loriot-confirmation [data-status-message]:focus {
	outline: none; /* status block is a focus target only — no visible ring */
}

.loriot-confirmation__heading {
	font-size: 1.9rem;
	font-weight: 600;
	color: var(--lor-text);
	margin: 0.5rem 0 0.75rem;
	line-height: 1.2;
}

.loriot-confirmation__subheading {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--lor-text);
	margin: 0 0 0.6rem;
}

.loriot-confirmation__lede {
	font-size: 1.15rem;
	color: var(--lor-text);
	margin: 0 0 1.25rem;
}

/* ── Status icons ─────────────────────────────────────────────── */

.loriot-confirmation__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 0.75rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--lor-cream);
	border-radius: 50%;
	background: var(--lor-text-soft);
}

.loriot-confirmation__icon--success { background: var(--lor-success); }
.loriot-confirmation__icon--warn    { background: var(--lor-warn); }

/* ── Pending state ────────────────────────────────────────────── */

.loriot-confirmation__pending {
	text-align: center;
	padding: 2rem 0;
}

.loriot-confirmation__spinner {
	display: inline-block;
	width: 48px;
	height: 48px;
	margin-bottom: 1.25rem;
	border: 3px solid rgba(154, 143, 102, 0.3);
	border-top-color: var(--lor-text-soft);
	border-radius: 50%;
	animation: loriot-spin 1.1s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.loriot-confirmation__spinner {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		border-top-color: var(--lor-accent);
	}
}

.loriot-confirmation__timeout {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--lor-white);
	border: 1px solid var(--lor-accent);
	border-radius: var(--lor-radius-sm);
	color: var(--lor-text);
	font-size: 1rem;
}

.loriot-confirmation__ref-hint {
	font-size: 0.95rem;
	color: var(--lor-text-soft);
	margin-top: 1rem;
}

.loriot-confirmation__ref-inline {
	font-family: "Menlo", "Consolas", monospace;
	font-size: 1rem;
	color: var(--lor-text);
	background: var(--lor-white);
	padding: 0.1rem 0.45rem;
	border-radius: 6px;
	border: 1px solid var(--lor-accent);
}

/* ── Spam-folder notice ──────────────────────────────────────── */

.loriot-confirmation__spam-notice {
	margin: 0 0 1.5rem;
	padding: 0.85rem 1.1rem;
	background: #FAF5E9;
	border-left: 4px solid var(--lor-accent);
	border-radius: 0 var(--lor-radius-sm) var(--lor-radius-sm) 0;
	font-size: 1rem;
	color: var(--lor-text);
}

/* ── Booking ref block ────────────────────────────────────────── */

.loriot-confirmation__ref-block {
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--lor-white);
	border: 1px solid var(--lor-accent);
	border-radius: var(--lor-radius-sm);
	text-align: center;
}

.loriot-confirmation__ref-label {
	font-size: 0.95rem;
	color: var(--lor-text-soft);
	margin: 0 0 0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.loriot-confirmation__ref-value {
	margin: 0 0 0.4rem;
}

.loriot-confirmation__ref {
	display: inline-block;
	font-family: "Menlo", "Consolas", monospace;
	font-size: 1.85rem;
	font-weight: 600;
	color: var(--lor-text);
	letter-spacing: 0.05em;
	padding: 0.35rem 0.85rem;
	background: var(--lor-cream);
	border-radius: 8px;
	user-select: all;            /* one click selects the whole ref for copy */
	-webkit-user-select: all;
	cursor: text;
}

/* ── Detail blocks ────────────────────────────────────────────── */

.loriot-confirmation__details,
.loriot-confirmation__payment,
.loriot-confirmation__deposit {
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--lor-white);
	border: 1px solid var(--lor-accent);
	border-radius: var(--lor-radius-sm);
}

.loriot-confirmation__dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.45rem 1.25rem;
	margin: 0;
}

.loriot-confirmation__dl dt {
	font-weight: 500;
	color: var(--lor-text-soft);
}

.loriot-confirmation__dl dd {
	margin: 0;
	color: var(--lor-text);
	font-variant-numeric: tabular-nums;
}

.loriot-confirmation__amount-paid {
	font-weight: 600;
	font-size: 1.15rem;
}

.loriot-confirmation__tag {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.55rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--lor-cream);
	background: var(--lor-text-soft);
	border-radius: 999px;
	vertical-align: middle;
}

.loriot-confirmation__tag--full {
	background: var(--lor-success);
}

.loriot-confirmation__meta {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.95rem;
	color: var(--lor-text-soft);
}

.loriot-confirmation__note {
	margin: 1rem 0 0;
	font-size: 1rem;
	color: var(--lor-text-soft);
}

/* ── Failure layout ───────────────────────────────────────────── */

.loriot-confirmation__failed {
	padding: 0.5rem 0;
}

.loriot-confirmation__reasons {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--lor-white);
	border: 1px solid var(--lor-accent);
	border-radius: var(--lor-radius-sm);
}

.loriot-confirmation__reasons ul {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--lor-text);
}

.loriot-confirmation__reasons li {
	margin-bottom: 0.35rem;
}

.loriot-confirmation__contact {
	margin-top: 1.5rem;
}

.loriot-confirmation__contact-list {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
	color: var(--lor-text);
}

/* ── Actions ──────────────────────────────────────────────────── */

.loriot-confirmation__actions {
	margin: 1.75rem 0 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.loriot-confirmation__retry,
.loriot-confirmation__print {
	display: inline-block;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--lor-cream);
	background: var(--lor-text-soft);
	border: 1px solid var(--lor-accent);
	border-radius: var(--lor-radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;
}

.loriot-confirmation__retry:hover,
.loriot-confirmation__print:hover {
	background: var(--lor-text);
	color: var(--lor-cream);
}

.loriot-confirmation__print {
	background: transparent;
	color: var(--lor-text-soft);
}

.loriot-confirmation__print:hover {
	background: var(--lor-text-soft);
	color: var(--lor-cream);
}

/* ── Mobile ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.loriot-confirmation {
		padding: 1.5rem 1.25rem;
		border-radius: var(--lor-radius-sm);
	}

	.loriot-confirmation__heading {
		font-size: 1.6rem;
	}

	.loriot-confirmation__ref {
		font-size: 1.4rem;
		display: block;
		word-break: break-all;
	}

	.loriot-confirmation__dl {
		grid-template-columns: 1fr;
		gap: 0.15rem 0;
	}

	.loriot-confirmation__dl dd {
		margin-bottom: 0.7rem;
	}
}

/* ── Print ────────────────────────────────────────────────────── */

@media print {
	body { background: #fff !important; }

	.loriot-confirmation {
		max-width: none;
		margin: 0;
		padding: 0;
		background: #fff;
		border: 0;
		border-radius: 0;
		font-size: 11pt;
		color: #000;
	}

	.loriot-confirmation__details,
	.loriot-confirmation__payment,
	.loriot-confirmation__deposit,
	.loriot-confirmation__ref-block,
	.loriot-confirmation__reasons {
		background: #fff;
		border: 1px solid #888;
		break-inside: avoid;
	}

	.loriot-confirmation__icon,
	.loriot-confirmation__spinner,
	.loriot-no-print {
		display: none !important;
	}

	.loriot-confirmation__heading {
		font-size: 18pt;
	}

	a { color: #000; text-decoration: underline; }
	a[href^="mailto:"]::after { content: ""; } /* don't dump email addresses twice */
}