/* Ears To You booking form. Layout from the tested prototype (each step in a white card, compact headings, filled
   selections); colours and fonts from the site's Elementor kit (post-44, read 10 Oct 2026) through its CSS variables,
   so the live and dev sites restyle it automatically. The fallbacks are the same values. */
.ety-booking-layout, .ety-booking {
	--ety-accent: var(--e-global-color-6d599c0, #FF6B19);
	--ety-accent-soft: var(--e-global-color-74c5312, #FEEEE6);
	--ety-brand: var(--e-global-color-46932b1, #4F0006);
	--ety-text: #2A2321;
	--ety-muted: #6B6461;
	--ety-line: #E3DDD8;
	--ety-field: #CFC7C1;
	--ety-bad: #B00020;
	--ety-body: var(--e-global-typography-355a206-font-family, "Poppins"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ety-heading: var(--e-global-typography-cedd3c5-font-family, "Larken"), Georgia, serif;
	--ety-header-offset: 120px; /* the site's sticky header: steps scroll into view below it */
}
.ety-booking { max-width: 760px; margin: 0 auto; color: var(--ety-text); font: 16px/1.5 var(--ety-body); scroll-margin-top: var(--ety-header-offset); }

/* Page layout: description beside the form, like the current form pages (40/60). It responds to the width it is
   given, not the screen: in a narrow Elementor column it stacks even on a desktop. */
.ety-booking-layout { container: ety-layout / inline-size; width: 100%; color: var(--ety-text); font: 16px/1.5 var(--ety-body); }
.ety-layout-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }

/* Appointment-type boxes are built on the page in Elementor. ety-booking.js marks the link for the current
   journey with .ety-journey-active and aria-current; this is its default look (the current Hearing Tests tabs). */
a.ety-journey-active, a.ety-journey-active:hover { background-color: #FEDAC7 !important; border: 1px solid var(--e-global-color-6d599c0, #FF6B19) !important; color: var(--e-global-color-6d599c0, #FF6B19) !important; }
.ety-booking-layout .ety-booking { max-width: none; margin: 0; }
.ety-form-col { min-width: 0; container: ety-form / inline-size; }
/* Matches the current Hearing Tests tabs (12 Oct 2026): an orange Poppins title (kit "0447e10", 56px, 42px on
   phones), the description in the kit's text style, and one white card holding the orange heading and the form. */
.ety-form-card { background: #fff; border: 1px solid #FF6B1940; border-radius: 32px; padding: 40px; }
.ety-form-title { font-family: "Poppins", var(--ety-body); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--ety-accent); max-width: 460px; margin: 0 0 40px; }
/* Values from the live Hearing Tests page (post 7749, read 12 Oct 2026): description colour "2cd2915" #844748 at
   18px, title max 390px wide. Fixed values, not the kit's, so the dev and live sites look the same. */
.ety-intro { min-width: 0; color: #844748; font-family: "Poppins", var(--ety-body); font-size: 18px; line-height: 1.5; }
.ety-intro-title { font-family: "Poppins", var(--ety-body); font-weight: 500; font-size: 56px; line-height: 1; text-transform: capitalize; color: var(--ety-accent); max-width: 390px; margin: 0 0 40px; }
.ety-intro strong, .ety-intro b { font-weight: 600; }
.ety-intro h3, .ety-intro h4 { font-family: var(--ety-body); font-weight: 600; color: var(--ety-brand); line-height: 1.25; margin: 1.4em 0 .4em; }
.ety-intro h3 { font-size: 20px; } .ety-intro h4 { font-size: 18px; }
.ety-intro h3:first-child, .ety-intro h4:first-child, .ety-intro p:first-child { margin-top: 0; }
.ety-intro p { margin: 0 0 .9em; }
.ety-intro ul, .ety-intro ol { margin: 0 0 1em 1.2em; padding: 0; }
.ety-intro li { margin: 0 0 .35em; }
.ety-intro a { color: var(--ety-brand); }
.ety-intro-more { background: none; border: 0; padding: 0; margin-top: 4px; color: var(--ety-brand); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* Narrow: the description sits above the form, shortened until "Read more" (JS adds .is-clamped when it is long). */
.ety-intro.is-clamped:not(.is-open) .ety-intro-body { max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
@container ety-layout (max-width: 560px) {
	.ety-intro-title { font-size: 42px; margin-bottom: 24px; }
	.ety-intro { font-size: 16px; }
}
@container ety-layout (min-width: 820px) {
	.ety-layout-grid:not(.is-form-only) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 80px; align-items: start; }
	.ety-intro.is-clamped:not(.is-open) .ety-intro-body { max-height: none; -webkit-mask-image: none; mask-image: none; }
	.ety-intro-more { display: none; }
}
.ety-booking *, .ety-booking *::before, .ety-booking *::after { box-sizing: border-box; }
.ety-booking button { text-transform: none; letter-spacing: normal; line-height: 1.3; white-space: normal; }

/* Progress and the step card */
.ety-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.ety-booking button, .ety-booking input, .ety-booking select, .ety-booking textarea { font-size: 16px; } /* 16px stops iPhones zooming into fields */
.ety-progress span { flex: 1; height: 5px; border-radius: 3px; background: var(--ety-line); }
.ety-progress span.on { background: var(--ety-accent); }
/* A completed step: the same 5px bar, inside a 21px tap target, so it can be clicked to go back. */
.ety-booking .ety-progress button { flex: 1; height: 21px; min-height: 0; margin: -8px 0; padding: 0; border: 0; border-radius: 3px; box-shadow: none; background: linear-gradient(var(--ety-accent), var(--ety-accent)) center / 100% 5px no-repeat; cursor: pointer; }
.ety-booking .ety-progress button:hover, .ety-booking .ety-progress button:focus-visible { background-size: 100% 7px; }
/* An outline, not a shadow, so it still shows in forced-colors mode; the brand colour contrasts with white. */
.ety-booking .ety-progress button:focus-visible { outline: 2px solid var(--ety-brand); outline-offset: 2px; }
.ety-step { background: #fff; border: 1px solid var(--ety-line); border-radius: 14px; padding: 24px; }
/* Inside the form card the step is not a second card. */
.ety-form-card .ety-step { background: none; border: 0; border-radius: 0; padding: 0; }
.ety-booking-layout.is-switching .ety-intro, .ety-booking-layout.is-switching .ety-form-card { opacity: .35; transition: opacity .15s; }
.ety-intro, .ety-form-card { transition: opacity .2s; }

.ety-booking h2 { font-family: var(--ety-body); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--ety-brand); margin: 0 0 16px; outline: none; }
.ety-booking .ety-sub { color: var(--ety-muted); margin: -8px 0 16px; }
.ety-q { font-weight: 600; margin: 18px 0 8px; }

/* Choices */
.ety-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ety-choice { text-align: left; padding: 14px; border: 2px solid var(--ety-line); border-radius: 10px; background: #fff; color: var(--ety-text); cursor: pointer; font: inherit; overflow-wrap: anywhere; min-width: 0; height: auto; }
.ety-choice strong { display: block; font-weight: 600; }
.ety-choice small { display: block; margin-top: 4px; color: var(--ety-muted); font-weight: 400; }
.ety-choice:hover { border-color: var(--ety-accent); background: var(--ety-accent-soft); color: var(--ety-text); }
.ety-choice.on { border-color: var(--ety-accent); background: var(--ety-accent); color: #fff; }
.ety-choice.on small { color: #fff; opacity: .9; }
.ety-choice:focus-visible { outline: 3px solid rgba(255,107,25,.35); outline-offset: 2px; }

/* Fields */
.ety-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }

.ety-field { margin: 0 0 16px; }
.ety-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.ety-field small { display: block; color: var(--ety-muted); font-size: 14px; margin: -2px 0 6px; }
.ety-field input, .ety-field select, .ety-field textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--ety-field); border-radius: 8px; font: inherit; color: var(--ety-text); background: #fff; min-height: 46px; }
.ety-field input:focus, .ety-field select:focus, .ety-field textarea:focus { border-color: var(--ety-accent); box-shadow: 0 0 0 3px rgba(255,107,25,.18); outline: none; }
.ety-field.has-error input, .ety-field.has-error select, .ety-field.has-error textarea { border-color: var(--ety-bad); }
.ety-error { color: var(--ety-bad); font-size: 14px; margin: 6px 0 0; }
.ety-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.ety-check input { margin-top: 4px; accent-color: var(--ety-accent); }
.ety-check.has-error { color: var(--ety-bad); }
.ety-check small { display: block; margin-top: 2px; color: var(--ety-muted); font-size: .9em; }
/* A facility filled in from its booking link: shown, not edited. */
.ety-field .ety-label { display: block; font-weight: 600; margin-bottom: 6px; }
.ety-field .ety-fixed { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--ety-accent-soft); }
.ety-notice { border-left: 3px solid var(--ety-accent); background: #FFFAF6; padding: 8px 12px; margin: 0 0 14px; font-size: 15px; }

/* Navigation */
.ety-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 12px; }
.ety-next { background: var(--ety-accent); color: #fff; border: 0; border-radius: 10px; padding: 12px 22px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.ety-next:hover:not([disabled]) { filter: brightness(.95); color: #fff; }
.ety-next[disabled] { opacity: .45; cursor: progress; }
.ety-back { background: transparent; color: var(--ety-brand); border: 1px solid var(--ety-line); border-radius: 10px; padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer; }
.ety-back:hover { border-color: var(--ety-brand); background: #fff; color: var(--ety-brand); }
.ety-link { background: none; border: 0; padding: 0; color: var(--ety-brand); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }

/* Times */
.ety-week { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-weight: 600; }
.ety-week button { border: 1px solid var(--ety-line); background: #fff; color: var(--ety-brand); border-radius: 8px; width: 40px; height: 40px; font-size: 20px; cursor: pointer; padding: 0; }
.ety-week button[disabled] { opacity: .35; cursor: default; }
.ety-slots { display: grid; gap: 20px; }
.ety-day strong { display: block; font-size: 15px; margin-bottom: 2px; }
.ety-day { display: flex; flex-wrap: wrap; gap: 8px; }
.ety-day strong { width: 100%; }
.ety-slot { border: 1px solid var(--ety-line); background: #fff; color: var(--ety-text); border-radius: 8px; padding: 8px 14px; cursor: pointer; font: inherit; }
.ety-slot:hover, .ety-slot:focus-visible { border-color: var(--ety-accent); background: var(--ety-accent); color: #fff; outline: none; }
.ety-loading { color: var(--ety-muted); padding: 12px 0; }

/* Review, payment, done */
.ety-review { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.ety-review dt { font-weight: 600; }
.ety-review dd { margin: 0; color: #3D3533; }
.ety-pay { margin-top: 16px; }
.ety-pay p { color: var(--ety-muted); font-size: 14px; }
.ety-card { padding: 12px; border: 1px solid var(--ety-line); border-radius: 10px; background: #fff; }
.ety-done { text-align: center; padding: 8px 0; }
.ety-turnstile { margin-top: 12px; }

/* Narrow form column (phones, or a narrow Elementor column) */
@container ety-form (max-width: 560px) {
	.ety-step { padding: 18px 16px; border-radius: 12px; }
	.ety-form-card { padding: 24px 18px 26px; border-radius: 20px; }
	.ety-form-title { margin-bottom: 24px; }
	.ety-row { grid-template-columns: 1fr; gap: 20px; }
	.ety-choices { grid-template-columns: 1fr; }
	.ety-nav { flex-direction: column-reverse; align-items: stretch; }
	.ety-nav > * { width: 100%; text-align: center; }
	.ety-nav > span:empty { display: none; }
	.ety-review { grid-template-columns: 1fr; gap: 2px; }
	.ety-review dd { margin-bottom: 8px; }
	.ety-slot { flex: 1 1 calc(33% - 8px); text-align: center; }
}
/* Comfortable tap targets everywhere */
.ety-choice, .ety-next, .ety-back, .ety-slot { min-height: 44px; }

/* One vertical rhythm in every step (Phil: "make spaces consistent"): 20px between items, 10px from a question or
   label to its answers, errors and hints tight to what they belong to. Last in the file and scoped to .ety-booking,
   so no earlier element margin (.ety-field, .ety-q, .ety-check) can override it. */
.ety-booking .ety-step > * { margin-top: 0; margin-bottom: 0; }
.ety-booking .ety-step > * + * { margin-top: 20px; }
.ety-booking .ety-step > .ety-q + * { margin-top: 10px; }
.ety-booking .ety-step > h2 + .ety-sub { margin-top: 6px; }
.ety-booking .ety-step > * + .ety-error { margin-top: 8px; }
.ety-booking .ety-step > .ety-check + .ety-check { margin-top: 12px; }
.ety-booking .ety-step > .ety-nav { margin-top: 28px; }
.ety-booking .ety-step .ety-row > .ety-field { margin: 0; }
.ety-booking .ety-step > div:not([class]) > * + * { margin-top: 20px; } /* grouped fields, e.g. facility + "Facility name" */
.ety-booking .ety-step > p:empty, .ety-booking .ety-step > div:empty { display: none; } /* an unused error line or payment box adds no gap */