/* ==========================================================================
   Academy Engine customer screens in the website's light identity:
   enrolment (Your details → Terms → Payment, plus its confirmation, cancellation
   and error screens) and the digital gift voucher purchase form.

   Presentation only. Academy Engine 8.0.x is not modified: its markup, fields,
   validation, step logic, Stripe hand-off and voucher preview script are untouched.
   This file
     1. redefines Academy Engine's own --ae-* colour variables (most of the change), and
     2. restyles the components the plugin colours directly (buttons, fields, cards).
   Every selector starts with `body .ae-public` (or another Academy Engine container),
   so it outranks the plugin's rules whatever the load order, and nothing outside
   Academy Engine's customer markup is affected. Admin screens never load it.
   Loaded only on pages that show these screens (see inc/assets.php).
   ========================================================================== */

body .ae-public,
body .ae-enroll-cta {
	--ae-bg: var(--ek-stone);
	--ae-surface: var(--ek-paper);
	--ae-surface-2: var(--ek-stone-soft);
	--ae-field: var(--ek-paper);
	--ae-line: var(--ek-line);
	--ae-line-strong: var(--ek-taupe-ui);
	--ae-ink: var(--ek-ink);
	--ae-ink-2: var(--ek-text);
	--ae-muted: var(--ek-muted);
	--ae-accent: var(--ek-ink);
	--ae-accent-hi: var(--ek-text);
	--ae-accent-lo: var(--ek-nude-deep);
	--ae-accent-ink: var(--ek-paper);
	--ae-danger: var(--ek-danger);
	--ae-danger-bg: #fbf2f1;
	--ae-ok: var(--ek-success);
	--ae-radius: var(--ek-radius);
	--ae-radius-sm: var(--ek-radius);
	--ae-focus: 0 0 0 2px var(--ek-paper), 0 0 0 4px var(--ek-ink);
	--ae-font: var(--ek-sans);
}

/* ------------------------------------------------------------------ page and card */
body .ae-public { color: var(--ek-text); font-size: 1.0625rem; line-height: 1.6; padding: var(--ek-space-l) var(--ek-gutter) var(--ek-space-2xl); }
body .ae-public--embedded { padding: 0; }
body .ae-public .ae-wrap { max-width: 820px; }
body .ae-public .ae-card {
	background: var(--ek-paper); border: 1px solid var(--ek-line);
	border-radius: var(--ek-soft-m) var(--ek-radius) var(--ek-radius) var(--ek-radius);
	box-shadow: 0 40px 70px -55px rgba(43, 38, 35, .45);
}
body .ae-public .ae-card--form { padding: clamp(1.25rem, .8rem + 2.4vw, 2.75rem); }
body .ae-public .ae-card h2 { font-family: var(--ek-serif); font-weight: 500; font-size: var(--ek-step-2); color: var(--ek-ink); }
body .ae-public .ae-card--success { background: var(--ek-paper); text-align: center; }
body .ae-public .ae-success-mark { background: #edf5ef; border-color: #b9d5c0; color: var(--ek-success); }

/* ------------------------------------------------------------------ type */
body .ae-public .ae-title { font-family: var(--ek-serif); font-weight: 500; font-size: var(--ek-step-4); line-height: 1.05; letter-spacing: -.01em; color: var(--ek-ink); margin: .25rem 0 .5rem; }
body .ae-public .ae-lead { font-size: var(--ek-step-0); color: var(--ek-text); margin-bottom: .75rem; }
body .ae-public .ae-lead strong { color: var(--ek-ink); font-weight: 500; }
/* The plugin's own booking details (course, date) read as one quiet summary line. */
body .ae-public .ae-meta {
	display: inline-flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: baseline;
	margin: 0 0 1.5rem; padding: .45rem .9rem; background: var(--ek-stone-soft);
	border-radius: var(--ek-soft-s) var(--ek-radius) var(--ek-radius) var(--ek-radius);
	font-size: .9375rem; color: var(--ek-text);
}
body .ae-public .ae-meta strong { color: var(--ek-ink); font-weight: 500; }
body .ae-public .ae-small, body .ae-public .ae-hint { font-size: .9rem; color: var(--ek-muted); }
body .ae-public .ae-small a, body .ae-public .ae-hint a { color: var(--ek-ink); text-decoration: underline; text-underline-offset: .2em; }
body .ae-public .ae-req { color: var(--ek-muted); }
body .ae-public .ae-optional { color: var(--ek-muted); }

/* ------------------------------------------------------------------ progress: Your details → Terms → Payment */
body .ae-public .ae-steps { gap: .5rem; margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
body .ae-public .ae-steps li { color: var(--ek-muted); font-size: .9375rem; font-weight: 400; border-bottom: 2px solid var(--ek-stone); padding: .6rem .25rem .8rem; }
body .ae-public .ae-steps li span { width: 28px; height: 28px; border: 1px solid var(--ek-taupe-ui); color: var(--ek-muted); font-family: var(--ek-sans); font-weight: 500; font-size: .8125rem; background: var(--ek-paper); }
body .ae-public .ae-steps li.is-current { color: var(--ek-ink); font-weight: 500; border-bottom-color: var(--ek-ink); }
body .ae-public .ae-steps li.is-current span { background: var(--ek-ink); border-color: var(--ek-ink); color: var(--ek-paper); }
body .ae-public .ae-steps li.is-done { color: var(--ek-text); border-bottom-color: var(--ek-nude-deep); }
body .ae-public .ae-steps li.is-done span { background: var(--ek-nude); border-color: var(--ek-nude); }
body .ae-public .ae-steps li.is-done span::after { border-color: var(--ek-ink); }

/* ------------------------------------------------------------------ fields */
body .ae-public label, body .ae-public .ae-field > label { font-family: var(--ek-sans); font-size: .9688rem; font-weight: 500; color: var(--ek-ink); }
body .ae-public .ae-grid { gap: 1.25rem 1.25rem; }
body .ae-public :is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=url], select, textarea) {
	border: 1px solid var(--ek-taupe-ui) !important;
	border-radius: var(--ek-radius) !important;
	background-color: var(--ek-paper) !important;
	color: var(--ek-ink) !important;
	-webkit-text-fill-color: var(--ek-ink);
	caret-color: var(--ek-ink);
	font-family: var(--ek-sans);
	font-size: 1.0625rem; /* 17px: no zoom on iPhone */
	min-height: 52px;
}
body .ae-public textarea { min-height: 7.5rem; }
body .ae-public :is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], select, textarea):hover { border-color: var(--ek-ink) !important; }
body .ae-public :is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], select, textarea):focus {
	border-color: var(--ek-ink) !important; background-color: var(--ek-paper) !important; box-shadow: 0 0 0 1px var(--ek-ink) !important; outline: none;
}
body .ae-public :is(input, select, textarea):not(:placeholder-shown):not(:focus):not(:hover):not(:disabled):not([aria-invalid=true]):not([type=checkbox]):not([type=radio]) { border-color: var(--ek-taupe-ui) !important; }
body .ae-public :is(input, select, textarea)[aria-invalid=true],
body .ae-public .is-invalid { border-color: var(--ek-danger) !important; box-shadow: 0 0 0 1px var(--ek-danger) !important; }
body .ae-public :is(input, select, textarea)[aria-invalid=true]:focus, body .ae-public .is-invalid:focus { box-shadow: 0 0 0 3px rgba(155, 44, 44, .18) !important; }
body .ae-public :is(input, select, textarea):disabled { background-color: var(--ek-stone-soft) !important; color: var(--ek-muted) !important; -webkit-text-fill-color: var(--ek-muted); border-color: var(--ek-line) !important; }
body .ae-public :is(input, select, textarea)::placeholder { color: #7a6e66; -webkit-text-fill-color: #7a6e66; opacity: 1; }
body .ae-public select { color-scheme: light; }
body .ae-public select option { background: var(--ek-paper); color: var(--ek-ink); }
body .ae-public input[type=date], body .ae-public input[type=datetime-local] { color-scheme: light; }
body .ae-public input[type=date]::-webkit-calendar-picker-indicator, body .ae-public input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: none; }
body .ae-public input:-webkit-autofill, body .ae-public input:-webkit-autofill:hover, body .ae-public input:-webkit-autofill:focus, body .ae-public textarea:-webkit-autofill, body .ae-public select:-webkit-autofill {
	-webkit-text-fill-color: var(--ek-ink) !important;
	-webkit-box-shadow: 0 0 0 1000px #fbf8f5 inset !important;
	box-shadow: 0 0 0 1000px #fbf8f5 inset !important;
}
body .ae-public .ae-input-affix > span { color: var(--ek-ink); }

/* ------------------------------------------------------------------ errors and notices */
body .ae-public .ae-field-error { color: var(--ek-danger); font-size: .9rem; margin-top: .3rem; }
body .ae-public .ae-field-error::before { background: var(--ek-danger); color: var(--ek-paper); }
body .ae-public .ae-alert {
	background: var(--ae-danger-bg); color: #5c1b1b; border: 0; border-left: 2px solid var(--ek-danger);
	border-radius: 0 var(--ek-radius) var(--ek-radius) 0; font-size: .9688rem;
}
body .ae-public .ae-alert::before { background: var(--ek-danger); color: var(--ek-paper); }
body .ae-public .ae-alert a { color: inherit; }

/* ------------------------------------------------------------------ Terms */
/* The plugin shows its Terms PDF in a scrolling viewer; give it more room to read. */
body .ae-public .ae-terms {
	height: min(68vh, 620px); background: var(--ek-paper); color: var(--ek-ink);
	border: 1px solid var(--ek-line); border-radius: var(--ek-soft-s) var(--ek-radius) var(--ek-radius) var(--ek-radius);
	box-shadow: inset 0 -24px 24px -24px rgba(43, 38, 35, .25);
}
body .ae-public .ae-terms canvas { border-bottom-color: var(--ek-stone) !important; }
/* The acknowledgement sits in its own quiet panel so it is never missed. */
body .ae-public .ae-check {
	gap: .75rem; margin: 1rem 0; padding: 1rem 1.1rem; background: var(--ek-stone-soft);
	border-radius: var(--ek-soft-s) var(--ek-radius) var(--ek-radius) var(--ek-radius);
	font-size: 1rem; line-height: 1.5; color: var(--ek-ink); font-weight: 400 !important;
}
body .ae-public .ae-check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--ek-ink); }
body .ae-public .ae-field--check .ae-check { margin: 0; }

/* ------------------------------------------------------------------ payment choices */
body .ae-public .ae-fieldset { margin-top: 1.5rem; }
body .ae-public .ae-fieldset legend { font-family: var(--ek-serif); font-weight: 500; font-size: var(--ek-step-1); color: var(--ek-ink); margin-bottom: .75rem; }
body .ae-public .ae-options { gap: .75rem; }
body .ae-public .ae-option {
	background: var(--ek-paper); border: 1px solid var(--ek-taupe-ui);
	border-radius: var(--ek-soft-s) var(--ek-radius) var(--ek-radius) var(--ek-radius);
	transition: border-color .2s var(--ek-ease), background-color .2s var(--ek-ease), box-shadow .2s var(--ek-ease);
}
body .ae-public .ae-option:hover { border-color: var(--ek-ink); }
body .ae-public .ae-option::before { border-color: var(--ek-taupe-ui); }
body .ae-public .ae-option:has(input:checked) { background: var(--ek-stone-soft); border-color: var(--ek-ink); box-shadow: inset 0 0 0 1px var(--ek-ink); }
body .ae-public .ae-option:has(input:focus-visible) { box-shadow: var(--ae-focus); }
body .ae-public .ae-option__label { color: var(--ek-ink); font-weight: 500; }
body .ae-public .ae-option__price { font-family: var(--ek-serif); font-size: 1.5rem; font-weight: 500; color: var(--ek-ink); }
body .ae-public .ae-option__note { color: var(--ek-muted); font-size: .9375rem; }
body .ae-public .ae-option.is-disabled { opacity: .6; }

/* ------------------------------------------------------------------ buttons */
body .ae-public .ae-btn.ae-btn,
body .ae-enroll-cta .ae-enroll-btn,
body .ae-enroll-cta .academy-enroll-btn {
	background-color: var(--ek-nude) !important;
	background-image: none !important;
	border: 1px solid var(--ek-nude) !important;
	color: var(--ek-ink) !important;
	-webkit-text-fill-color: var(--ek-ink);
	border-radius: var(--ek-soft-s) var(--ek-radius) var(--ek-radius) var(--ek-radius) !important;
	box-shadow: none;
	font-family: var(--ek-sans); font-size: 1rem; font-weight: 500; letter-spacing: .015em; text-transform: none;
	min-height: 52px; padding-inline: 1.6rem;
	transition: background-color .3s var(--ek-ease), border-color .3s var(--ek-ease), border-radius .45s var(--ek-ease);
}
body .ae-public .ae-btn.ae-btn:hover,
body .ae-enroll-cta .ae-enroll-btn:hover {
	background-color: var(--ek-nude-deep) !important; background-image: none !important; border-color: var(--ek-nude-deep) !important;
	color: var(--ek-ink) !important; box-shadow: none; border-top-left-radius: calc(var(--ek-soft-s) * 1.75) !important;
}
body .ae-public .ae-btn.ae-btn:active { background-image: none !important; box-shadow: none; transform: scale(.985); }
body .ae-public .ae-btn.ae-btn:focus-visible { outline: 2px solid var(--ek-ink); outline-offset: 3px; box-shadow: none; }
body .ae-public .ae-btn.ae-btn--ghost { background-color: transparent !important; border-color: var(--ek-ink) !important; color: var(--ek-ink) !important; -webkit-text-fill-color: var(--ek-ink); }
body .ae-public .ae-btn.ae-btn--ghost:hover { background-color: var(--ek-stone) !important; border-color: var(--ek-ink) !important; }
body .ae-public .ae-btn.ae-btn:disabled,
body .ae-public .ae-btn.ae-btn[disabled],
body .ae-public .ae-btn.ae-btn.is-disabled,
body .ae-public .ae-btn.ae-btn[aria-disabled=true],
body .ae-enroll-cta .ae-enroll-btn.is-disabled {
	background-color: var(--ek-stone) !important; border-color: var(--ek-line) !important;
	color: var(--ek-muted) !important; -webkit-text-fill-color: var(--ek-muted); opacity: 1;
}
body .ae-public .ae-actions { border-top-color: var(--ek-stone); margin-top: 1.75rem; padding-top: 1.5rem; }
body .ae-public .ae-center.ae-small { margin-top: 1rem; }

/* ------------------------------------------------------------------ gift voucher form */
body .ae-public .ae-gcp { max-width: 900px; }
body .ae-public .ae-gcp__panel {
	background: var(--ek-paper); border: 1px solid var(--ek-line);
	border-radius: var(--ek-soft-m) var(--ek-radius) var(--ek-radius) var(--ek-radius);
	box-shadow: 0 40px 70px -55px rgba(43, 38, 35, .45);
}
body .ae-public .ae-gcp__section { border-top-color: var(--ek-stone); }
body .ae-public .ae-gcp__heading { font-family: var(--ek-serif); font-weight: 500; font-size: var(--ek-step-2); color: var(--ek-ink); gap: .75rem; }
body .ae-public .ae-gcp__num { background: var(--ek-paper); border: 1px solid var(--ek-taupe-ui); color: var(--ek-ink); font-family: var(--ek-sans); font-weight: 500; }
body .ae-public .ae-gcp__section.has-error .ae-gcp__num { background: var(--ek-danger); border-color: var(--ek-danger); color: var(--ek-paper); }
body .ae-public .ae-gcp__intro { color: var(--ek-muted); font-size: .9688rem; }
body .ae-public .ae-gcp__footer {
	background: var(--ek-stone); border-color: var(--ek-stone);
	border-radius: var(--ek-soft-s) var(--ek-radius) var(--ek-radius) var(--ek-radius);
}
body .ae-public .ae-gcp__total span { color: var(--ek-muted); letter-spacing: .1em; }
body .ae-public .ae-gcp__total strong { font-family: var(--ek-serif); font-weight: 500; color: var(--ek-ink); font-size: 2.1rem; }
body .ae-public .ae-gcp__secure { color: var(--ek-muted); }
/* Amount presets: selected = nude with an ink outline (same language as the site's filters). */
body .ae-public .ae-chip { background: var(--ek-paper); border-color: var(--ek-taupe-ui); color: var(--ek-ink) !important; font-weight: 500 !important; min-height: 48px; }
body .ae-public .ae-chip:hover { border-color: var(--ek-ink); }
body .ae-public .ae-chip:has(input:checked) { background: var(--ek-nude); border-color: var(--ek-ink); color: var(--ek-ink) !important; box-shadow: inset 0 0 0 1px var(--ek-ink); }
body .ae-public .ae-segment { background: var(--ek-stone-soft); border-color: var(--ek-taupe-ui); }
body .ae-public .ae-segment__opt { color: var(--ek-text) !important; }
body .ae-public .ae-segment__opt:has(input:checked) { background: var(--ek-paper); color: var(--ek-ink) !important; box-shadow: inset 0 0 0 1px var(--ek-ink); }
body .ae-public .ae-switch__ui { background: var(--ek-stone); border-color: var(--ek-taupe-ui); }
body .ae-public .ae-switch__ui::after { background: var(--ek-paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
body .ae-public .ae-switch input:checked + .ae-switch__ui { background: var(--ek-ink); border-color: var(--ek-ink); }
body .ae-public .ae-hint--count { color: var(--ek-muted); }
/* The voucher artwork itself is left exactly as Academy Engine designs it; only its
   shadow is softened to sit on a light page. */
/* On narrow screens the card's content (name, sender, two-line message, value) is taller
   than its fixed credit-card shape and was clipped; let it grow just enough instead. */
body .ae-public .ae-gcp__preview { container-type: inline-size; }
@media (max-width: 480px) {
	body .ae-public .ae-gcp__preview .ae-gc-card { aspect-ratio: auto; min-height: calc(100cqi * 54 / 85.6); }
}
body .ae-public .ae-gc-card--preview { box-shadow: 0 30px 50px -24px rgba(58, 36, 22, .45), 0 8px 18px rgba(58, 36, 22, .14), inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* Voucher status and view screens (opened from a voucher link). */
body .ae-public .ae-voucher-panel { background: var(--ek-paper); border-color: var(--ek-line); }
body .ae-public .ae-voucher-panel__meta div, body .ae-public .ae-summary div { background: var(--ek-stone-soft); }
body .ae-public .ae-status--fully-used, body .ae-public .ae-status--expired { color: var(--ek-muted); background: var(--ek-stone-soft); }
body .ae-public .ae-copy { background: var(--ek-stone-soft); }

/* "New dates coming soon" (printed by Academy Engine with its own inline styles). */
body .ae-public .ae-nodates { background: var(--ek-stone-soft); border: 0; border-left: 2px solid var(--ek-ink); border-radius: 0; color: var(--ek-text); }
body .ae-public .ae-nodates h2 { color: var(--ek-ink); font-family: var(--ek-serif); font-weight: 500; }
body .ae-public .ae-nodates p { color: var(--ek-text); }
body .ae-public .ae-nodates a.ae-nodates__btn { background: var(--ek-nude); color: var(--ek-ink); border-radius: var(--ek-soft-s) var(--ek-radius) var(--ek-radius) var(--ek-radius); font-weight: 500; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 720px) {
	body .ae-public { padding: var(--ek-space-m) var(--ek-gutter) var(--ek-space-xl); }
	body .ae-public--embedded { padding: 0; }
	body .ae-public .ae-card--form { padding: 1.25rem 1rem 1.5rem; }
	body .ae-public .ae-title { font-size: var(--ek-step-3); }
	/* Academy Engine shows only the current step's name on phones; keep that. */
	body .ae-public .ae-steps li { font-size: 0; gap: 0; justify-content: center; padding: .5rem .25rem .7rem; }
	body .ae-public .ae-steps li.is-current { font-size: .875rem; gap: .5rem; }
	body .ae-public .ae-option__price { font-size: 1.25rem; }
	body .ae-public .ae-terms { height: min(60vh, 520px); }
	body .ae-public .ae-gcp__heading { font-size: var(--ek-step-1); }
}

/* ------------------------------------------------------------------ arrival
   A short fade as the card and the voucher preview arrive. Fields can be used at once;
   nothing moves on later steps, submissions or the payment hand-off. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes ek-ae-arrive { from { opacity: .01; transform: translateY(10px); } to { opacity: 1; transform: none; } }
	body .ae-public .ae-wrap > .ae-card:first-child, body .ae-public .ae-gcp__preview { animation: ek-ae-arrive .45s var(--ek-ease) both; }
	body .ae-public .ae-gcp__panel { animation: ek-ae-arrive .45s .08s var(--ek-ease) both; }
}

/* Country code beside the phone number (assets/js/phone-code.js). */
body .ae-public .ek-phone { display: flex; gap: .5rem; align-items: stretch; }
body .ae-public .ek-phone input { flex: 1 1 auto; min-width: 0; width: auto; }
body .ae-public .ek-phone select.ek-phone__code { flex: 0 0 auto; width: auto; max-width: 9.5rem; padding-inline: .75rem 2rem; }