.page-book-now {
	background: var(--color-bg);
	color: var(--color-text);
	padding-bottom: clamp(3rem, 8vw, 6rem);
	overflow-x: clip;
}

.order-shell {
	width: min(100% - 3rem, var(--container));
	max-width: var(--container);
	margin-inline: auto;
}

.order-hero {
	position: relative;
	min-height: clamp(22rem, 56vw, 32rem);
	display: grid;
	align-items: end;
	padding: clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(2rem, 5vw, 3.5rem);
	margin-bottom: clamp(2.4rem, 6vw, 4rem);
	background: var(--color-surface-lowest);
	overflow: hidden;
}

.order-hero-media,
.order-hero-overlay {
	position: absolute;
	inset: 0;
}

.order-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	filter: grayscale(1);
}

.order-hero-overlay {
	background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 20%, transparent), color-mix(in srgb, var(--color-bg) 92%, transparent));
}

.order-hero-copy {
	position: relative;
	z-index: 1;
}

.order-hero-copy span {
	display: inline-block;
	font: 700 0.68rem/1 "Inter", sans-serif;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 0.75rem;
}

.order-hero-copy h1 {
	font-size: clamp(2.4rem, 10vw, 6.5rem);
	text-transform: uppercase;
	line-height: 0.9;
	letter-spacing: -0.04em;
	margin: 0;
}

.order-main {
	margin-bottom: clamp(2.6rem, 6vw, 4rem);
}

.order-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.order-head h2 {
	font-size: clamp(1.8rem, 4vw, 3rem);
	text-transform: uppercase;
	margin-bottom: 0.7rem;
}

.order-head p {
	font-size: clamp(0.95rem, 1.9vw, 1.1rem);
	color: color-mix(in srgb, var(--color-text-muted) 86%, var(--color-text));
	line-height: 1.8;
	max-width: 60ch;
}

.step-list {
	position: relative;
	margin-top: 1.7rem;
	display: grid;
	gap: 1.1rem;
}

.step-list::before {
	content: "";
	position: absolute;
	left: 1.4rem;
	top: 0;
	bottom: 0;
	width: 1px;
	background: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
}

.step-item {
	position: relative;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.step-number {
	width: 2.8rem;
	height: 2.8rem;
	min-width: 2.8rem;
	flex: 0 0 2.8rem;
	display: grid;
	place-items: center;
	background: var(--color-surface-variant);
	color: var(--color-primary);
	font: 800 1.1rem/1 "Epilogue", sans-serif;
	border: 1px solid color-mix(in srgb, var(--color-outline-variant) 35%, transparent);
	position: relative;
	z-index: 1;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.step-item:hover .step-number {
	background: var(--color-primary);
	color: #fff;
}

.step-copy {
	padding-top: 0.32rem;
}

.step-copy h3 {
	font-size: 1.1rem;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}

.step-copy p {
	font-size: 0.95rem;
	line-height: 1.75;
	color: var(--color-text-muted);
}

.step-copy a {
	color: var(--color-primary);
	border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.step-copy a:hover {
	color: var(--color-text);
	border-bottom-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.step-copy strong {
	color: var(--color-text);
}

.order-whatsapp-card {
	position: relative;
	background: var(--color-surface-low);
	padding: clamp(1.2rem, 3vw, 2rem);
	display: grid;
	gap: 3rem;
	justify-items: center;
	text-align: center;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.order-whatsapp-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 58%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.order-whatsapp-card:hover .order-whatsapp-glow {
	opacity: 1;
}

.order-whatsapp-head {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.3rem;
	justify-items: center;
}

.order-whatsapp-head .material-symbols-outlined {
	font-size: 2.1rem;
	color: var(--color-primary);
}

.order-whatsapp-head h3 {
	font-size: 1.5rem;
	text-transform: uppercase;
}

.order-whatsapp-head p,
.whatsapp-note {
	font: 700 0.63rem/1 "Inter", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--color-text-muted);
}

.qr-placeholder {
	width: min(16rem, 100%);
	aspect-ratio: 1 / 1;
	/* background: var(--color-surface-lowest); */
	display: grid;
	place-items: center;
	/* border: 1px dashed color-mix(in srgb, var(--color-outline-variant) 42%, transparent); */
	position: relative;
	z-index: 1;
}

.payment-qr {
	width: min(12rem, 100%);
	aspect-ratio: 1 / 1;
	background: var(--color-surface-lowest);
	display: grid;
	place-items: center;
	justify-self: center;
	border: 1px dashed color-mix(in srgb, var(--color-outline-variant) 42%, transparent);
	position: relative;
	z-index: 1;
}


.qr-placeholder .material-symbols-outlined,
.payment-qr .material-symbols-outlined {
	font-size: 3rem;
	color: var(--color-surface-variant);
}

.qr-placeholder img,
.payment-qr img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.order-payment {
	padding-top: clamp(1rem, 3vw, 2rem);
}

.payment-head {
	padding-top: clamp(2rem, 5vw, 3rem);
	border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 18%, transparent);
	margin-bottom: 1.6rem;
}

.payment-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
}

.payment-card {
	background: var(--color-surface-low);
	padding: 1.1rem;
	transition: background-color 0.25s ease;
	display: grid;
	gap: 1rem;
}

.payment-card:hover {
	background: var(--color-surface-variant);
}

.payment-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.7rem;
}

.payment-top h3 {
	font-size: 1.45rem;
	text-transform: uppercase;
	margin-bottom: 0.2rem;
}

.payment-top p {
	font: 700 0.58rem/1 "Inter", sans-serif;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.payment-logo {
	min-height: 2.2rem;
	padding: 0.35rem 0.7rem;
	background: var(--color-surface-lowest);
	color: var(--color-text);
	font: 800 0.8rem/1 "Epilogue", sans-serif;
	display: grid;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
}

.payment-logo.with-image {
	min-height: 2.4rem;
	padding: 0.2rem 0.5rem;
	background: #ffffff;
	border-color: color-mix(in srgb, #ffffff 75%, var(--color-outline-variant));
}

.payment-logo.with-image img {
	height: 1.75rem;
	width: auto;
	object-fit: contain;
}

.payment-logo.icon-only {
	min-width: 2.2rem;
	padding: 0;
}

.payment-number {
	display: grid;
	justify-items: center;
	gap: 0.2rem;
}

.payment-number span {
	font: 700 0.56rem/1 "Inter", sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.payment-number strong {
	font: 600 1.45rem/1.1 "Inter", sans-serif;
	letter-spacing: 0.06em;
	color: var(--color-text);
}

[data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (min-width: 920px) {
	.order-grid {
		grid-template-columns: 7fr 5fr;
		align-items: start;
	}

	.order-whatsapp-card {
		margin-top: 2.8rem;
	}

	.payment-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}