/**
 * The invoice payment page, in the language of the Hellotel site.
 *
 * Standalone on purpose: this page lives outside WordPress (at /myhellotel/)
 * and must keep working whatever happens to the theme, so the theme's tokens
 * are COPIED here rather than linked. Values mirror hellotel-theme/theme.json
 * as of 2026-09-29; the hero repeats the coverage hero's ink-to-primary
 * gradient, which is the site's signature surface.
 */

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('fonts/dm-sans-latin.woff2') format('woff2');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}

:root {
	--primary: #1ba288;
	--primary-strong: #147a66;
	--accent: #22cdac;
	--ink: #051f1a;
	--muted-strong: #586d69;
	--surface: #ffffff;
	--tint: #f2fdfb;
	--border-subtle: #c6f5ec;
	--divider: #6fe7d0;
	--danger: #b3261e;

	--font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--radius-round: 5rem;
	--radius-card: 1rem;
	--radius-panel: 1.5rem;

	--gutter: clamp(1rem, 5vw, 2.5rem);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-block-size: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--tint);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
}

a {
	color: var(--primary-strong);
	text-underline-offset: 3px;
}

a:focus-visible,
input:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* --- Top bar ------------------------------------------------------------- */

.topbar {
	background-color: var(--surface);
	border-block-end: 1px solid var(--border-subtle);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-inline-size: 72rem;
	margin-inline: auto;
	padding: 1rem var(--gutter);
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--primary);
	text-decoration: none;
}

.logo__mark {
	inline-size: 2rem;
	block-size: 2rem;
}

.logo__word {
	font-family: var(--font-body);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.logo__word-base {
	color: var(--ink);
}

.logo__word-brand {
	color: var(--primary);
}

.topbar__back {
	font-size: 0.95rem;
	font-weight: 500;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
	background-color: var(--ink);
	background-image: linear-gradient(to left, transparent 32%, color-mix(in srgb, var(--primary) 72%, var(--ink)) 100%);
	color: var(--surface);
}

.hero__inner {
	max-inline-size: 72rem;
	margin-inline: auto;
	padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter) clamp(6rem, 12vw, 8rem);
}

.hero__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.096em;
	text-transform: uppercase;
	color: var(--accent);
}

.hero__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.hero__text {
	max-inline-size: 34rem;
	margin: 1rem 0 0;
	font-size: clamp(1rem, 2.2vw, 1.125rem);
	color: color-mix(in srgb, var(--surface) 88%, transparent);
}

/* --- Panel --------------------------------------------------------------- */

.page {
	flex: 1 0 auto;
}

.panel-wrap {
	display: grid;
	gap: 1rem;
	max-inline-size: 72rem;
	margin: clamp(-5rem, -9vw, -4rem) auto 0;
	padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 60rem) {
	.panel-wrap {
		grid-template-columns: minmax(0, 36rem) minmax(0, 18rem);
		align-items: start;
		gap: 1.5rem;
	}

	/* The help card sits beside the panel, clear of the hero's edge: on the
	   gradient its dark text would not read, and flush against the edge it
	   looked stuck to it. The first value matches the panel's pull into the
	   hero, the second is the breathing room. */
	.help {
		margin-block-start: calc(clamp(4rem, 9vw, 5rem) + 2rem);
	}
}

.panel {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-panel);
	background-color: var(--surface);
	box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 12%, transparent);
}

.payment {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.field__label {
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 700;
}

.field__hint {
	margin: 0;
	font-size: 0.9rem;
	color: var(--muted-strong);
}

.field__input {
	inline-size: 100%;
	min-block-size: 3.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
	border-radius: var(--radius-card);
	background-color: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 1.05rem;
	transition: border-color 150ms ease;
}

.field__input:hover {
	border-color: var(--primary);
}

.field__input[aria-invalid='true'] {
	border-color: var(--danger);
}

.field__money {
	position: relative;
	max-inline-size: 14rem;
}

.field__input--money {
	padding-inline-end: 2.5rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.field__currency {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 1rem;
	display: flex;
	align-items: center;
	font-weight: 600;
	color: var(--muted-strong);
	pointer-events: none;
}

.field__error {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--danger);
}

/* What is about to be sent, read back before the button. */
.summary {
	padding: 1rem 1.25rem;
	border-radius: var(--radius-card);
	background-color: var(--tint);
	border: 1px solid var(--border-subtle);
}

.summary p {
	margin: 0;
}

.summary__label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.096em;
	text-transform: uppercase;
	color: var(--primary-strong);
}

.summary__amount {
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.summary__reference {
	color: var(--muted-strong);
	overflow-wrap: anywhere;
}

/* PayPal renders into an iframe up to 750px wide; the panel is narrower, so
   it simply fills the panel. The min-height keeps the layout from jumping
   while the buttons load. */
.buttons {
	min-block-size: 7rem;
}

.status {
	padding: 1rem 1.25rem;
	border-radius: var(--radius-card);
	border: 1px solid var(--border-subtle);
	background-color: var(--tint);
}

.status p {
	margin: 0.25rem 0 0;
	overflow-wrap: anywhere;
}

.status .status__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
}

.status--success {
	border-color: var(--primary);
}

.status--error {
	border-color: var(--danger);
	background-color: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

.assurance {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.9rem;
	color: var(--muted-strong);
}

.assurance__icon {
	flex: 0 0 auto;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block-start: 0.1rem;
	color: var(--primary);
}

/* --- Help and footer ----------------------------------------------------- */

.help {
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius-panel);
	background-color: var(--surface);
	border: 1px solid var(--border-subtle);
}

.help__title {
	margin: 0 0 0.35rem;
	font-family: var(--font-heading);
	font-weight: 700;
}

.help__text {
	margin: 0;
	color: var(--muted-strong);
}

.footer {
	padding: 1.5rem var(--gutter);
	background-color: var(--ink);
	color: color-mix(in srgb, var(--surface) 75%, transparent);
	font-size: 0.85rem;
	text-align: center;
}

.footer p {
	margin: 0;
}

.footer a {
	color: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
	.field__input {
		transition: none;
	}
}