/**
 * Checkout styles, in the site's own design language.
 *
 * Same tokens as the retreat pages: petrol #005468 + gold #E5B603 on cream
 * #FAF7F0, Georgia display, Jost everything else, 30px pill buttons, 5px
 * panels. The checkout renders standalone, so the kit variables carry exact
 * fallbacks. The one color the brand palette does not define is the
 * error/urgency state: #9C3B2E, a teal-shadowed brick, used only functionally.
 */

.edgr-checkout-body {
	--edgr-ink: var(--e-global-color-4033fe7, #005468);
	--edgr-gold: var(--e-global-color-521a2d3, #E5B603);
	--edgr-cream: var(--e-global-color-0ba02ec, #FAF7F0);
	--edgr-hairline: var(--e-global-color-2c6c15e, rgba(147, 209, 206, .49));
	--edgr-body-ink: #2A4A52;
	--edgr-danger: #9C3B2E;

	--edgr-serif: Georgia, "Times New Roman", serif;
	--edgr-sans: Jost, "Helvetica Neue", Arial, sans-serif;

	margin: 0;
	background: var(--edgr-cream);
	color: var(--edgr-body-ink);
	font-family: var(--edgr-sans);
	font-size: 15px;
	letter-spacing: .3px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.edgr-checkout-body * { box-sizing: border-box; }

/* The theme stack is dequeued on checkout pages, so base element behaviour is
   declared here rather than inherited.

   These are wrapped in :where() deliberately. Written plainly,
   `.edgr-checkout-body a` scores higher than a single class, so it beat
   `.edgr-btn`'s own colour and painted the "Back to the retreat" link teal on
   a teal button -- invisible text. :where() contributes no specificity, so
   these stay true element defaults that any component class can override. */
:where(.edgr-checkout-body) a { color: var(--edgr-ink); }
:where(.edgr-checkout-body) img { max-width: 100%; height: auto; }
:where(.edgr-checkout-body) button,
:where(.edgr-checkout-body) input,
:where(.edgr-checkout-body) select,
:where(.edgr-checkout-body) textarea { font: inherit; letter-spacing: inherit; margin: 0; }

/* ---------- top bar ---------- */

.edgr-topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 22px;
	background: #FFFFFF;
	border-bottom: 1px solid var(--edgr-hairline);
}

.edgr-home { color: var(--edgr-ink); display: inline-flex; opacity: .7; }
.edgr-home:hover { opacity: 1; }

.edgr-stepper { flex: 1; }

.edgr-stepper ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--edgr-body-ink);
}

.edgr-step { opacity: .55; }

.edgr-step + .edgr-step::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 12px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .6;
}

.edgr-step.is-current { color: var(--edgr-ink); font-weight: 600; opacity: 1; }
.edgr-step.is-done { color: var(--edgr-ink); opacity: .85; }

.edgr-topbar-end {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--edgr-body-ink);
}

.edgr-secure { display: inline-flex; align-items: center; gap: 5px; opacity: .8; }

@media (max-width: 600px) {
	.edgr-topbar { flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; }
	.edgr-stepper { order: 3; flex: 1 1 100%; }
	.edgr-stepper ol { justify-content: flex-start; }
	.edgr-main { padding: 28px 16px 56px; }
	.edgr-tier { padding: 20px 18px; }
	.edgr-tier-head { flex-direction: column; }
	.edgr-qty-wrap { text-align: left; }
	.edgr-attendee { padding: 22px 18px 8px; }
	.edgr-details .edgr-actions { padding: 20px 18px; }
	.edgr-actions { justify-content: stretch; }
	.edgr-actions .edgr-btn { flex: 1 1 auto; }
}

.edgr-timer {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--edgr-ink);
}

.edgr-timer.is-urgent { color: var(--edgr-danger); }

/* ---------- layout ---------- */

.edgr-main {
	max-width: 780px;
	margin: 0 auto;
	padding: 40px 22px 72px;
}

.edgr-step-details .edgr-main { max-width: 1060px; }

.edgr-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 30px;
	align-items: start;
}

@media (max-width: 880px) {
	.edgr-layout { grid-template-columns: 1fr; }
}

.edgr-h1 {
	margin: 0 0 24px;
	font-family: var(--edgr-serif);
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 36px);
	line-height: 1.15;
	color: var(--edgr-ink);
}

.edgr-lead { margin: 0 0 24px; }

/* ---------- preview banner ---------- */

.edgr-preview-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 12px 18px;
	background: #FFFFFF;
	border: 1px solid var(--edgr-gold);
	border-radius: 5px;
	font-size: 13px;
	color: var(--edgr-ink);
}

.edgr-preview-note strong {
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: var(--edgr-gold);
	color: var(--edgr-ink);
	border-radius: 30px;
	padding: 3px 10px;
	white-space: nowrap;
}

/* ---------- tiers ---------- */

.edgr-tier {
	background: #FFFFFF;
	border: 1px solid var(--edgr-hairline);
	border-top: 3px solid var(--edgr-ink);
	border-radius: 5px;
	padding: 26px 28px;
	margin-bottom: 24px;
}

.edgr-tier.is-soldout { opacity: .6; }

.edgr-tier-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 22px;
}

.edgr-tier h2 {
	margin: 0;
	font-family: var(--edgr-serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.25;
	color: var(--edgr-ink);
}

.edgr-at { color: var(--edgr-body-ink); opacity: .8; }

.edgr-price {
	margin: 8px 0 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--edgr-ink);
}

.edgr-feenote { font-size: 12px; font-weight: 400; color: var(--edgr-body-ink); margin-left: 6px; }

.edgr-qty-wrap { text-align: right; flex: none; }

.edgr-qty-wrap select {
	min-width: 80px;
	padding: 8px 10px;
	border: 1px solid var(--edgr-hairline);
	border-radius: 5px;
	background: #FFFFFF;
	font-family: var(--edgr-sans);
	font-size: 14px;
	color: var(--edgr-ink);
}

.edgr-qty-wrap select:focus-visible { outline: 2px solid var(--edgr-ink); outline-offset: 1px; }

.edgr-left { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--edgr-ink); }

.edgr-soldout {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--edgr-body-ink);
}

.edgr-tier-desc { margin-top: 20px; font-size: 14px; }

.edgr-tier-desc h1, .edgr-tier-desc h2, .edgr-tier-desc h3,
.edgr-tier-desc h4, .edgr-tier-desc h5 {
	font-family: var(--edgr-sans);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--edgr-ink);
	margin: 18px 0 4px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.edgr-tier-desc p { margin: 0 0 12px; max-width: 70ch; }
.edgr-tier-desc ul { margin: 0 0 12px; padding-left: 18px; }

/* ---------- attendee forms ---------- */

.edgr-details {
	background: #FFFFFF;
	border: 1px solid var(--edgr-hairline);
	border-radius: 5px;
}

.edgr-attendee {
	border: 0;
	border-top: 1px solid var(--edgr-hairline);
	padding: 26px 28px 10px;
	margin: 0;
}

.edgr-details .edgr-attendee:first-of-type { border-top: 0; }

.edgr-attendee legend {
	/* A legend straddles the fieldset's top border by default, which drew the
	   hairline straight through the ticket heading and left a hole of dead
	   space beneath it. Floating the legend places it in normal flow, below
	   the border, like any other heading. */
	float: left;
	width: 100%;
	font-family: var(--edgr-serif);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.3;
	color: var(--edgr-ink);
	padding: 0;
	margin: 0 0 18px;
}

.edgr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; clear: both; }

.edgr-w-full { grid-column: 1 / -1; }

@media (max-width: 560px) {
	.edgr-grid { grid-template-columns: 1fr; }
}

.edgr-field label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--edgr-ink);
	margin-bottom: 6px;
}

.edgr-field input[type="text"],
.edgr-field input[type="email"],
.edgr-field input[type="tel"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--edgr-hairline);
	border-radius: 5px;
	font-family: var(--edgr-sans);
	font-size: 15px;
	background: #FFFFFF;
	color: var(--edgr-ink);
}

.edgr-field input::placeholder { color: #8AA3AA; }

.edgr-field input:focus-visible {
	outline: 2px solid var(--edgr-ink);
	outline-offset: -1px;
	border-color: var(--edgr-ink);
}

.edgr-req { color: var(--edgr-danger); }

.edgr-consent label {
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--edgr-body-ink);
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.edgr-consent input { margin-top: 3px; flex: none; accent-color: var(--edgr-ink); }

/* ---------- summary ---------- */

.edgr-summary {
	background: #FFFFFF;
	border: 1px solid var(--edgr-hairline);
	border-radius: 5px;
	padding: 22px 24px;
}

.edgr-summary h2 {
	margin: 0 0 14px;
	font-family: var(--edgr-serif);
	font-weight: 400;
	font-size: 20px;
	color: var(--edgr-ink);
}

.edgr-summary ul { list-style: none; margin: 0; padding: 0; }

.edgr-summary li {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--edgr-hairline);
	font-size: 13.5px;
}

.edgr-qty { font-weight: 600; color: var(--edgr-ink); }
.edgr-summary .edgr-amount { font-weight: 600; color: var(--edgr-ink); white-space: nowrap; }

.edgr-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 16px 0 0;
	font-size: 15px;
}

.edgr-total strong { font-size: 18px; color: var(--edgr-ink); }

/* ---------- actions ---------- */

.edgr-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 18px;
	padding: 24px 0 0;
}

/* Inside the white details panel the actions share the panel's inset ... */
.edgr-details .edgr-actions { padding: 24px 28px; }

/* ... but on the tickets step the row sits on the cream ground, so it stays
   flush with the tier cards' outer edges rather than indented 28px. */
.edgr-step-tickets .edgr-form > .edgr-actions { padding: 6px 0 0; }

.edgr-btn {
	display: inline-block;
	background: var(--edgr-ink);
	color: var(--edgr-cream);
	border: 0;
	border-radius: 30px;
	padding: 14px 36px;
	font-family: var(--edgr-sans);
	font-size: 12px;
	font-weight: 600;
	/* Anchors and buttons must render identically, so nothing here is left
	   to element defaults. */
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background .18s ease, color .18s ease;
}

.edgr-btn:hover,
.edgr-btn:focus-visible { background: var(--edgr-gold); color: var(--edgr-ink); }
.edgr-btn:focus-visible { outline: 2px solid var(--edgr-ink); outline-offset: 2px; }
.edgr-btn:disabled { opacity: .55; cursor: not-allowed; }

/* The quiet companion to .edgr-btn: one style for every step-back link. */
.edgr-back {
	font-size: 13px;
	color: var(--edgr-body-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.edgr-back:hover { color: var(--edgr-ink); }

.edgr-cards-note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.edgr-cards-note span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--edgr-hairline);
	border-radius: 5px;
	padding: 3px 5px;
	background: #FFFFFF;
}

.edgr-cards-note svg {
	display: block;
	height: 17px;
	width: auto;
}

/* ---------- alerts & confirmation ---------- */

.edgr-alert {
	background: #FFFFFF;
	border: 1px solid var(--edgr-hairline);
	border-left: 3px solid var(--edgr-danger);
	border-radius: 5px;
	padding: 14px 18px;
	margin-bottom: 24px;
	font-size: 14px;
	color: var(--edgr-body-ink);
}

.edgr-alert p { margin: 0 0 6px; }
.edgr-alert p:last-child { margin-bottom: 0; }
.edgr-alert a { color: var(--edgr-ink); }

.edgr-alert-quiet { border-left-color: var(--edgr-ink); }

.edgr-done {
	background: #FFFFFF;
	border: 1px solid var(--edgr-hairline);
	border-radius: 5px;
	padding: 48px 36px;
	text-align: center;
}

.edgr-done .edgr-summary { border: 1px solid var(--edgr-hairline); text-align: left; max-width: 400px; margin: 26px auto 0; }
.edgr-done .edgr-actions { justify-content: center; }

.edgr-tick {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--edgr-cream);
	border: 1px solid var(--edgr-hairline);
	color: var(--edgr-ink);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- footer ---------- */

.edgr-footer {
	text-align: center;
	padding: 22px;
	font-size: 12px;
	color: var(--edgr-body-ink);
}

.edgr-footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
	.edgr-btn, .edgr-cta-btn { transition: none; }
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- payment choice (pay in full vs monthly plan) ---------- */

.edgr-paychoice {
	border: 0;
	border-top: 1px solid var(--edgr-hairline);
	margin: 0;
	padding: 26px 28px 8px;
}

.edgr-paychoice legend {
	float: left;
	width: 100%;
	font-family: var(--edgr-serif);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.3;
	color: var(--edgr-ink);
	padding: 0;
	margin: 0 0 16px;
}

.edgr-payopt {
	clear: both;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	margin-bottom: 12px;
	border: 1px solid var(--edgr-hairline);
	border-radius: 5px;
	cursor: pointer;
	background: #FFFFFF;
	transition: border-color .18s ease, background .18s ease;
}

.edgr-payopt:hover { border-color: var(--edgr-ink); }

/* :has is progressive - without it the option simply stays unhighlighted. */
.edgr-payopt:has(input:checked) {
	border-color: var(--edgr-ink);
	background: var(--edgr-cream);
}

.edgr-payopt input { margin-top: 3px; flex: none; accent-color: var(--edgr-ink); }

.edgr-payopt-body { display: block; }

.edgr-payopt-title {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--edgr-ink);
	margin-bottom: 4px;
}

.edgr-payopt-amount {
	display: block;
	font-family: var(--edgr-serif);
	font-size: 20px;
	color: var(--edgr-ink);
	margin-bottom: 5px;
}

.edgr-payopt-note { display: block; font-size: 12.5px; color: var(--edgr-body-ink); }

.edgr-payplan-dates {
	display: block;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--edgr-hairline);
	font-size: 12.5px;
}

.edgr-payplan-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 3px 0;
	max-width: 320px;
	color: var(--edgr-body-ink);
}

.edgr-payplan-row span:last-child { font-weight: 600; color: var(--edgr-ink); }

/* ---------- plan schedule on the confirmation screen ---------- */

.edgr-planbox {
	max-width: 400px;
	margin: 24px auto 0;
	padding: 20px 22px;
	border: 1px solid var(--edgr-hairline);
	border-radius: 5px;
	text-align: left;
	background: #FFFFFF;
}

.edgr-planbox h2 {
	margin: 0 0 8px;
	font-family: var(--edgr-serif);
	font-weight: 400;
	font-size: 19px;
	color: var(--edgr-ink);
}

.edgr-planbox-note { margin: 0 0 14px; font-size: 12.5px; color: var(--edgr-body-ink); }

.edgr-planbox ul { list-style: none; margin: 0; padding: 0; }

.edgr-planbox li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--edgr-hairline);
	font-size: 13.5px;
}

.edgr-planbox li:last-child { border-bottom: 0; }
.edgr-planbox li span:last-child { font-weight: 600; color: var(--edgr-ink); }
.edgr-planbox li.is-done span:first-child::before { content: "\2713 "; color: #1c7a43; }

@media (max-width: 600px) {
	.edgr-paychoice { padding: 22px 18px 6px; }
}

/* ---------- promo code ---------- */

.edgr-discount .edgr-name { color: #1c7a43; }
.edgr-summary .edgr-discount .edgr-amount { color: #1c7a43; }

.edgr-promo { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--edgr-hairline); }

.edgr-promo-box summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--edgr-ink);
	list-style: none;
}

.edgr-promo-box summary::-webkit-details-marker { display: none; }

.edgr-promo-box summary::before {
	content: "\002B";
	display: inline-block;
	width: 1em;
	font-weight: 400;
}

.edgr-promo-box[open] summary::before { content: "\2212"; }
.edgr-promo-box summary:focus-visible { outline: 2px solid var(--edgr-ink); outline-offset: 2px; }

.edgr-promo-row { display: flex; gap: 8px; margin: 12px 0 0; }

.edgr-promo-row input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--edgr-hairline);
	border-radius: 5px;
	background: #fff;
	font-family: var(--edgr-sans);
	font-size: 13.5px;
	color: var(--edgr-ink);
	text-transform: none;
}

.edgr-promo-row input[type="text"]:focus-visible { outline: 2px solid var(--edgr-ink); outline-offset: 1px; }

.edgr-promo-apply,
.edgr-promo-remove {
	flex: 0 0 auto;
	border: 1px solid var(--edgr-ink);
	border-radius: 30px;
	background: transparent;
	padding: 8px 16px;
	font-family: var(--edgr-sans);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--edgr-ink);
	cursor: pointer;
}

.edgr-promo-apply:hover,
.edgr-promo-remove:hover { background: var(--edgr-ink); color: var(--edgr-cream); }

.edgr-promo-on {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 13px;
}

.edgr-promo-code {
	font-weight: 600;
	color: #1c7a43;
	letter-spacing: .04em;
	word-break: break-all;
}

.edgr-promo-remove {
	border-color: var(--edgr-hairline);
	padding: 5px 12px;
	font-size: 11.5px;
	font-weight: 400;
}

.edgr-promo-notice { margin: 10px 0 0; font-size: 12.5px; color: #1c7a43; }

@media (max-width: 600px) {
	.edgr-promo-row { flex-wrap: wrap; }
	.edgr-promo-row input[type="text"] { flex: 1 1 100%; }
	.edgr-promo-apply { width: 100%; }
}

/* ---------- room type on the ticket step ---------- */

.edgr-roomtype {
	margin: 6px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--edgr-body-ink);
	opacity: .8;
}

/* ---------- post-booking form link on the confirmation screen ---------- */

.edgr-formbox {
	max-width: 400px;
	margin: 24px auto 0;
	padding: 20px 22px;
	border: 1px solid var(--edgr-gold);
	border-radius: 5px;
	text-align: left;
	background: #FFFFFF;
}

.edgr-formbox h2 {
	margin: 0 0 8px;
	font-family: var(--edgr-serif);
	font-weight: 400;
	font-size: 19px;
	color: var(--edgr-ink);
}

.edgr-formbox p { margin: 0 0 14px; font-size: 13.5px; color: var(--edgr-body-ink); }
.edgr-formbox .edgr-btn { width: 100%; }