/* ============================================================
   Badr & Rahaf — Wedding Travel & Facilities Form
   Palette drawn from the "Save the Date" illustration:
   warm paper cream, burnt terracotta, olive, dusty gold & plum
   ============================================================ */

:root {
	--paper: #f7ecda;
	--paper-2: #efe0c9;
	--paper-card: rgba(249, 241, 228, 0.93);
	--sand: #e6d6bb;
	--line: #ddc9a9;
	--line-soft: #e7d8bf;

	--terracotta: #b06a38;
	--terracotta-deep: #8c4d27;
	--olive: #7c7c52;
	--gold: #a98a57;
	--plum: #8e6e82;

	--ink: #55402e;
	--ink-soft: #7c6b53;
	--placeholder: #a8927400;
	--placeholder-color: #a89274;

	--radius: 4px;
	--shadow: 0 24px 60px -18px rgba(74, 47, 26, 0.45);

	--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--script: "Pinyon Script", "Cormorant Garamond", cursive;
	--body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body {
	font-family: var(--body);
	color: var(--ink-soft);
	-webkit-font-smoothing: antialiased;
}

/* ─── Full-bleed illustration background ─── */
.hero {
	min-height: 100vh;
	background:
		linear-gradient(
			90deg,
			rgba(247, 236, 218, 0.6) 0%,
			rgba(247, 236, 218, 0.25) 42%,
			rgba(247, 236, 218, 0) 68%
		),
		url("hero-bg.jpg") right center / cover no-repeat fixed,
		var(--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
}

/* Editorial split on larger screens: form on the left, illustration on the right */
@media (min-width: 1024px) {
	.hero {
		justify-content: flex-start;
		padding-left: clamp(48px, 7vw, 150px);
	}
}

/* soft cream vignette so the card reads clearly over the art */
.scrim {
	width: 100%;
	max-width: 520px;
	min-width: 0; /* allow the flex item to shrink below its content's min-content */
	display: flex;
	justify-content: center;
}

/* ─── Paper card ─── */
.card {
	position: relative;
	width: 100%;
	background: var(--paper-card);
	backdrop-filter: blur(6px) saturate(1.05);
	-webkit-backdrop-filter: blur(6px) saturate(1.05);
	border-radius: 10px;
	padding: 40px 34px 30px;
	box-shadow: var(--shadow);
	border: 1px solid rgba(216, 196, 164, 0.7);
}

/* thin gold inner frame, echoing the invitation arch */
.card::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(169, 138, 87, 0.5);
	border-radius: 4px;
	pointer-events: none;
}

/* faint paper grain */
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	pointer-events: none;
	opacity: 0.5;
	background-image: radial-gradient(
			rgba(139, 96, 40, 0.05) 0.5px,
			transparent 0.6px
		);
	background-size: 4px 4px;
}

.card > * {
	position: relative;
	z-index: 1;
}

/* ─── Invitation header ─── */
.card-head {
	text-align: center;
	margin-bottom: 26px;
}

.eyebrow {
	display: block;
	font-family: var(--serif);
	font-size: 13px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 500;
	padding-left: 0.42em;
}

.couple {
	font-family: var(--script);
	font-weight: 400;
	font-size: clamp(40px, 12vw, 58px);
	line-height: 1;
	color: var(--terracotta);
	margin: 8px 0 10px;
}

.couple .amp {
	font-size: 0.7em;
	color: var(--olive);
	vertical-align: 0.06em;
}

.occasion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-family: var(--serif);
	color: var(--ink);
}

.occasion .date {
	font-size: 18px;
	letter-spacing: 0.16em;
	font-weight: 600;
}

.occasion .place {
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ink-soft);
	padding-left: 0.28em;
}

.occasion .place::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	background: var(--line);
	margin-right: 14px;
	vertical-align: middle;
}

/* ornamental divider */
.ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 20px 0 16px;
	color: var(--gold);
}

.ornament span {
	height: 1px;
	width: 64px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--line) 40%,
		var(--gold)
	);
}

.ornament span:last-child {
	background: linear-gradient(270deg, transparent, var(--line) 40%, var(--gold));
}

.ornament em {
	font-style: normal;
	font-size: 14px;
}

.form-title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 26px;
	letter-spacing: 0.02em;
	color: var(--ink);
	margin: 0 0 8px;
}

.lede {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0 auto;
	max-width: 40ch;
}

/* ─── Field groups ─── */
.field-group {
	margin-bottom: 22px;
}

.group-label,
.reveal-hint {
	display: block;
	font-family: var(--serif);
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--olive);
	margin-bottom: 12px;
	font-weight: 600;
	padding-left: 0.22em;
}

.row {
	margin-bottom: 12px;
	display: flex;
	gap: 10px;
}

.captcha-row {
	justify-content: center;
	margin-top: 6px;
}

/* ─── Inputs ─── */
input,
select,
textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	font-family: var(--body);
	font-size: 14.5px;
	font-weight: 400;
	color: var(--ink);
	background-color: rgba(255, 252, 246, 0.72);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

textarea {
	resize: vertical;
	line-height: 1.5;
}

::placeholder {
	color: var(--placeholder-color);
	opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--terracotta);
	background-color: #fffdf9;
	box-shadow: 0 0 0 3px rgba(176, 106, 56, 0.14);
}

input:disabled {
	background-color: rgba(230, 214, 187, 0.35);
	color: var(--placeholder-color);
	cursor: not-allowed;
	border-color: var(--line-soft);
}

input:invalid,
input:required {
	box-shadow: none;
}

/* date field cursor */
input#arrivalDate,
input.flatpickr-input[readonly] {
	cursor: pointer;
	appearance: none;
	-moz-appearance: none;
}

input#arrivalDate:disabled {
	cursor: not-allowed;
}

/* intl-tel-input */
.iti {
	width: 100%;
}

.iti__input {
	width: 100%;
	padding: 12px 14px;
	padding-left: 52px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	font-family: var(--body);
	font-size: 14.5px;
	color: var(--ink);
	background-color: rgba(255, 252, 246, 0.72);
}

/* ─── Facilities intro ─── */
.facilities-label {
	margin-top: 4px;
	margin-bottom: 6px;
}

.facilities-hint {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-soft);
	margin: 0 0 14px;
	font-style: italic;
}

/* ─── Accordion facility blocks ─── */
.facility {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: rgba(255, 252, 246, 0.5);
	margin-bottom: 12px;
	overflow: hidden;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.facility:has(.acc-head[aria-expanded="true"]) {
	border-color: var(--terracotta);
	background: rgba(255, 250, 242, 0.85);
	box-shadow: 0 6px 18px -12px rgba(140, 77, 39, 0.55);
}

/* Accordion header (button) */
.acc-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--serif);
	color: var(--ink);
	transition: background-color 0.2s ease;
}

.acc-head:hover {
	background: rgba(230, 214, 187, 0.28);
}

.acc-head:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(176, 106, 56, 0.35);
}

.acc-title {
	font-size: 19px;
	font-weight: 600;
	color: var(--terracotta-deep);
	letter-spacing: 0.01em;
}

.acc-q {
	flex: 1;
	font-family: var(--body);
	font-size: 12.5px;
	color: var(--ink-soft);
	font-style: italic;
	padding-left: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Chevron indicator */
.chevron {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	margin-right: 2px;
	border-right: 2px solid var(--gold);
	border-bottom: 2px solid var(--gold);
	transform: rotate(45deg);
	transition:
		transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 0.2s ease;
	transform-origin: 60% 60%;
}

.acc-head[aria-expanded="true"] .chevron {
	transform: rotate(-135deg);
	border-color: var(--terracotta);
}

/* ─── Reveal panels (accordion body) ─── */
.reveal {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.reveal > .acc-inner {
	overflow: hidden;
	min-height: 0;
	opacity: 0;
	transition: opacity 0.3s ease 0.05s, padding 0.35s ease;
}

.reveal.open {
	grid-template-rows: 1fr;
}

.reveal.open > .acc-inner {
	opacity: 1;
}

/* inner padding — horizontal always, vertical only when open so a
   closed panel collapses fully (border-box padding can't shrink to 0) */
.acc-inner {
	padding: 0 16px;
}

.reveal.open > .acc-inner {
	padding: 2px 16px 14px;
}

.reveal .row:last-of-type {
	margin-bottom: 6px;
}

.reveal-hint {
	color: var(--plum);
	margin-bottom: 10px;
}

.reveal-note {
	font-size: 11.5px;
	font-style: italic;
	color: var(--ink-soft);
	margin: 4px 0 0;
	opacity: 0.85;
}

/* ─── Tour program cards ─── */
.program {
	display: block;
	position: relative;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 16px 16px 14px 44px;
	margin-bottom: 12px;
	cursor: pointer;
	background: rgba(255, 252, 246, 0.55);
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

.program input {
	position: absolute;
	left: 16px;
	top: 19px;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--terracotta);
	cursor: pointer;
}

.program:hover {
	border-color: var(--gold);
	background: rgba(255, 252, 246, 0.85);
}

.program:has(input:checked) {
	border-color: var(--terracotta);
	background: rgba(255, 249, 240, 0.95);
	box-shadow: 0 0 0 3px rgba(176, 106, 56, 0.12);
}

.program-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 8px;
}

.program-name {
	font-family: var(--serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--terracotta-deep);
}

.program-len {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	background: var(--olive);
	padding: 3px 9px;
	border-radius: 20px;
}

.itinerary {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.itinerary li {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink);
	padding: 3px 0 3px 0;
	border-bottom: 1px dashed var(--line-soft);
}

.itinerary li:last-child {
	border-bottom: none;
}

.itinerary b {
	display: inline-block;
	min-width: 46px;
	color: var(--gold);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.itinerary i {
	color: var(--plum);
	font-style: italic;
}

.program-note {
	font-size: 12px;
	font-style: italic;
	color: var(--ink-soft);
	margin: 0;
	line-height: 1.4;
}

/* accommodation options note (Wadi Rum stays) */
.accom-note {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-soft);
	background: rgba(176, 106, 56, 0.06);
	border-left: 2px solid var(--gold);
	border-radius: 4px;
	padding: 9px 12px;
	margin: 0 0 14px;
}

/* attendee count for the chosen tour */
.tour-attendees {
	margin-top: 4px;
}

.attendee-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--plum);
	margin-bottom: 6px;
}

/* ─── Submit ─── */
button[type="submit"] {
	width: 100%;
	padding: 15px;
	margin-top: 18px;
	background: var(--terracotta);
	color: #fdf6ec;
	border: none;
	border-radius: var(--radius);
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		transform 0.08s ease,
		box-shadow 0.2s ease;
	box-shadow: 0 8px 20px -8px rgba(140, 77, 39, 0.7);
}

button[type="submit"]:hover {
	background: var(--terracotta-deep);
	box-shadow: 0 12px 26px -8px rgba(140, 77, 39, 0.8);
}

button[type="submit"]:active {
	transform: translateY(1px);
}

.note {
	font-size: 12px;
	color: var(--ink-soft);
	text-align: center;
	margin-top: 12px;
	letter-spacing: 0.02em;
}

/* ─── Messages ─── */
.success-message,
.error-message {
	display: none;
	margin-top: 20px;
	text-align: center;
	padding: 18px;
	border-radius: 8px;
}

.success-message {
	background: rgba(124, 124, 82, 0.1);
	border: 1px solid rgba(124, 124, 82, 0.3);
}

.success-message h3 {
	font-family: var(--serif);
	color: var(--olive);
	font-size: 24px;
	margin: 0 0 8px;
	font-weight: 600;
}

.success-message p {
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

.error-message {
	background: rgba(176, 106, 56, 0.08);
	border: 1px solid rgba(176, 106, 56, 0.3);
	color: var(--terracotta-deep);
}

.error-message p {
	margin: 0;
	font-size: 14px;
}

/* ─── Entrance animation ─── */
.card {
	animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.card-head > *,
.field-group,
.facility {
	animation: fade 0.6s ease both;
}

.eyebrow {
	animation-delay: 0.15s;
}
.couple {
	animation-delay: 0.22s;
}
.occasion {
	animation-delay: 0.3s;
}
.ornament {
	animation-delay: 0.36s;
}
.form-title {
	animation-delay: 0.42s;
}
.lede {
	animation-delay: 0.48s;
}
.field-group {
	animation-delay: 0.54s;
}
.facility:nth-of-type(1) {
	animation-delay: 0.6s;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.99);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fade {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* ─── Responsive ─── */
@media (max-width: 480px) {
	.hero {
		padding: 16px 10px;
		/* fixed backgrounds are unreliable on mobile — pin normally */
		background-attachment: scroll;
	}

	.card {
		padding: 30px 20px 24px;
	}

	.row {
		flex-direction: column;
	}

	.form-title {
		font-size: 23px;
	}

	.occasion {
		flex-direction: column;
		gap: 6px;
	}

	.occasion .place::before {
		display: none;
	}
}