/* ========================================================================================
 * forms.css - .form, .field and .input/.select (L2 layer).
 * Ported from .cd-form/.cd-field/.cd-input/.cd-select (docs/design-source/
 * homepage-template.html, search ".cd-form"). Not named in the brief's Interfaces list, so
 * the dash-prefix (double dash for a modifier, no namespace prefix for the base class) just
 * follows the kit's existing convention (.btn, .card, .pill...).
 * ======================================================================================== */

.form{display:flex;flex-wrap:wrap;gap:var(--cd-3);align-items:flex-end;width:100%;max-width:520px}
.field{display:flex;flex-direction:column;gap:var(--cd-2);flex:1 1 100%;text-align:left}
/* A stacked (not inline) CF7 form whose fields sit straight in the form, with no <p> or
   .field wrapper (Contact Simple 2): each field takes the full row. */
.form:not(.form--inline) > .wpcf7-form-control-wrap{flex:1 1 100%}
/* Inside a card the card sets the width, not the form's own 520px cap. */
.card .form{max-width:none}
.field--qty{flex:0 0 84px}
.field label{font-size:var(--cd-small);font-weight:700;color:var(--cd-ink-strong)}
.on-dark .field label{color:var(--cd-white)}

.input,.select{
	font-family:var(--cd-font);font-size:var(--cd-body);color:var(--cd-ink-strong);
	background:var(--cd-white);border:1px solid var(--cd-teal-200);
	border-radius:var(--cd-r-sm);min-height:48px;padding:var(--cd-2) var(--cd-4);width:100%;
}
.select{
	appearance:none;padding-right:var(--cd-8);
	background-image:linear-gradient(45deg,transparent 49%,var(--cd-teal-700) 50%),linear-gradient(-45deg,transparent 49%,var(--cd-teal-700) 50%);
	background-size:7px 7px;background-position:calc(100% - 22px) 21px,calc(100% - 15px) 21px;
	background-repeat:no-repeat;
}
.input:focus-visible,.select:focus-visible{border-color:var(--cd-focus)}
/* --error: a plain hand-built form's own client-side validation (no CF7 involved, e.g.
   the Empowered Relief / AirwayZ registration forms) flags an invalid field by adding
   this instead of each form inventing its own error class + color rule. */
.input--error,.select--error{border-color:var(--cd-orange-700)}
.form .btn{flex:1 1 200px}
.form-note{flex:1 1 100%;font-size:.8125rem;color:var(--cd-teal-300);text-align:left}
/* --note--error: a plain-HTML form's own inline success/error message (e.g. the AirwayZ
   registration form, which posts to a REST endpoint with no CF7/.wpcf7-response-output
   involved) reusing .form-note's slot instead of a one-off color rule per page. */
.form-note--error{color:var(--cd-orange-700)}

/* --- form--inline: fields in one row (a banner lead form) ---------------------------------
 * The row wraps: each field grows from 180px and the button keeps its own width, so the
 * fields sit side by side on a wide screen and stack on a phone. Works for a hand-written
 * form (.field children) and for Contact Form 7 output opted in with
 * [contact-form-7 ... html_class="form form--inline"] (inc/forms.php adds .input/.select/
 * .btn to CF7's controls): CF7's own template wrapper div dissolves (display:contents) so
 * its fields become this row's flex items, whatever the CF7 template calls the wrapper.
 * ----------------------------------------------------------------------------------------- */
.form--inline{max-width:none;position:relative}
.form--inline > .field,.form--inline .wpcf7-form-control-wrap{flex:1 1 180px;min-width:0}
.form--inline .btn{flex:0 0 auto}
.form--inline .wpcf7-form-control-wrap:has(select){flex:1.25 1 200px}
/* Some CF7 form bodies (e.g. the Sponsorship form) wrap each field in a bare <label> with
   no surrounding <div>, so the <label> itself, not the inner .wpcf7-form-control-wrap span,
   is the flex item display:contents would otherwise dissolve. Same sizing as the
   div-wrapped case above, so both field-authoring styles line up the same way. */
.form--inline > label{flex:1 1 180px;min-width:0}
.form--inline > label:has(select){flex:1.25 1 200px}
/* A textarea (a longer form's "message" field) always takes its own full-width row instead
   of wrapping in beside the shorter inputs, and matches .input's border/radius/color, which
   CF7's default template does not otherwise inherit. */
.form--inline .wpcf7-form-control-wrap:has(textarea),.form--inline > label:has(textarea){flex:1 1 100%}
.form textarea.input{min-height:96px;resize:vertical}
.form.wpcf7-form > div:not(.wpcf7-response-output){display:contents}
.form .wpcf7-form-control-wrap{display:block}
.form .wpcf7-spinner{position:absolute;right:0;top:calc(100% + var(--cd-2));margin:0}
.form .wpcf7-not-valid-tip{margin-top:var(--cd-1);font-size:var(--cd-small)}
.form .wpcf7-response-output{flex:1 1 100%;margin:0;padding:var(--cd-3) var(--cd-4);border-radius:var(--cd-r-sm);font-size:var(--cd-small)}
.form .wpcf7-response-output:empty{display:none}
.on-dark .wpcf7-not-valid-tip{color:var(--cd-ink-accent-invert)}
.on-dark .wpcf7-response-output{color:var(--cd-white)}
@media (max-width:599px){.form--inline .btn{flex:1 1 100%}}

/* --- form-band: a heading beside a form, in a full-width band (home contact banner) -------
 * Stacks until 1100px, then the heading takes a narrow column on the left. */
.form-band{display:grid;gap:var(--cd-5);align-items:center}
.form-band__head{display:flex;flex-direction:column;gap:var(--cd-2)}
.form-band__title{font-size:var(--cd-h3)}
@media (min-width:1100px){.form-band{grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:var(--cd-7)}}

/* .tmj-login-form - wraps wp_login_form() (see inc/shortcodes.php's [tmj_login_form]).
   WP core's own markup (<p class="login-username">/.login-password/.login-submit>,
   already carrying class="input" on the two text fields and re-classed to .btn
   .btn--primary on the submit button in PHP) needs only stacking + spacing here,
   not a parallel recipe -- .input/.btn already own the field and button look. */
.tmj-login-form{max-width:360px}
.tmj-login-form p{margin:0 0 var(--cd-3)}
.tmj-login-form label{display:block;margin-bottom:var(--cd-2);font-size:var(--cd-small);font-weight:700;color:var(--cd-ink-strong)}
.tmj-login-form__lost{margin-top:var(--cd-2)}
/* Same look as the theme's .woocommerce-error (shop.css): white card, orange-700 left rule. */
.tmj-login-form__notice--error{background:var(--cd-white);border:1px solid var(--cd-line);border-left:3px solid var(--cd-orange-700);border-radius:var(--cd-r-md);padding:14px 18px;font-size:var(--cd-small);color:var(--cd-ink-strong)}

/* --- reg-form: a WooCommerce variable product's add-to-cart form on a course page --------
 * [tmj_product_form product="..."] (inc/course.php) prints WooCommerce's own variation
 * form (form.variations_form: table.variations > select, .single_variation price, .quantity
 * input, .single_add_to_cart_button) inside .reg-form. This skins that stable markup onto the
 * kit: the ticket select as .select, qty as a small .input, the button as .btn--primary,
 * matching the live pages' "select / qty + Register Now" block. The attribute label column
 * is hidden (the live pages hide it too; the select's own first option names the choice).
 * ----------------------------------------------------------------------------------------- */
.reg-form{display:flex;flex-direction:column;gap:var(--cd-2);width:100%;max-width:560px}
.reg-form__price{font-size:var(--cd-h4);font-weight:700;color:var(--cd-ink-brand)}
.reg-form form.cart{display:flex;flex-direction:column;gap:var(--cd-3);margin:0}
.reg-form table.variations{width:100%;margin:0;border:0}
.reg-form table.variations tr,.reg-form table.variations td{display:block;padding:0;border:0;background:none}
.reg-form table.variations th.label{display:none}
.reg-form table.variations select{
	appearance:none;width:100%;min-height:48px;padding:var(--cd-2) var(--cd-8) var(--cd-2) var(--cd-4);
	font:400 var(--cd-body) var(--cd-font);color:var(--cd-ink-strong);
	background:var(--cd-white) linear-gradient(45deg,transparent 49%,var(--cd-teal-700) 50%) calc(100% - 22px) 21px/7px 7px no-repeat;
	background-image:linear-gradient(45deg,transparent 49%,var(--cd-teal-700) 50%),linear-gradient(-45deg,transparent 49%,var(--cd-teal-700) 50%);
	background-size:7px 7px;background-position:calc(100% - 22px) 21px,calc(100% - 15px) 21px;background-repeat:no-repeat;
	border:1px solid var(--cd-teal-200);border-radius:var(--cd-r-sm);
}
.reg-form .reset_variations{display:none !important}
.reg-form .single_variation_wrap{display:flex;flex-direction:column;gap:var(--cd-3)}
/* Anchor Events writes each ticket's name into its variation description, so WooCommerce would
   print "Dentist" again under the ticket select that already says it. */
.reg-form .woocommerce-variation-description{display:none}
.reg-form .woocommerce-variation-price .price{font-size:var(--cd-h4);font-weight:700;color:var(--cd-ink-brand)}
.reg-form .woocommerce-variation-add-to-cart{display:flex;gap:var(--cd-3);align-items:stretch}
.reg-form .quantity{flex:0 0 72px;margin:0}
/* A sold-individually product's quantity is a hidden input: no 72px empty slot for it. */
.reg-form .quantity:has(> input[type="hidden"]){display:none}
.reg-form .quantity .qty{
	width:100%;height:100%;min-height:48px;padding:0 var(--cd-2);text-align:center;
	font:700 var(--cd-body) var(--cd-font);color:var(--cd-ink-strong);
	background:var(--cd-white);border:1px solid var(--cd-teal-200);border-radius:var(--cd-r-sm);
}
.reg-form .single_add_to_cart_button{
	flex:1 1 auto;min-height:48px;padding:var(--cd-3) var(--cd-6);cursor:pointer;
	border:2px solid var(--cd-accent);border-radius:var(--cd-r-pill);
	background:var(--cd-accent);color:var(--cd-accent-ink);font:700 var(--cd-body)/1.2 var(--cd-font);
	transition:background-color .2s,border-color .2s;
}
.reg-form .single_add_to_cart_button:hover,.reg-form .single_add_to_cart_button:focus-visible{background:var(--cd-accent-hover);border-color:var(--cd-accent-hover)}
.reg-form .single_add_to_cart_button.disabled{opacity:.6;cursor:not-allowed}
.reg-form__note{font-size:var(--cd-small);font-style:italic;color:var(--cd-ink-brand)}
.on-dark .reg-form .woocommerce-variation-price .price,.on-dark .reg-form__price{color:var(--cd-white)}
.on-dark .reg-form__note{color:var(--cd-ink-invert-muted)}
.card--center .reg-form,.cta-band .reg-form{margin-inline:auto}

/* --- reg-fallback: what a registration slot shows when the course has nothing on sale ---
 * The inner content of [tmj_dates_or_fallback] on course pages whose Events parent has no
 * upcoming date (and whose old products are drafts): a short "new dates coming soon" line
 * and one next step, sized to sit where the .reg-form would. */
.reg-fallback{display:flex;flex-direction:column;align-items:flex-start;gap:var(--cd-3);width:100%;max-width:560px}
.reg-fallback__title{font-size:var(--cd-h4);font-weight:700;color:var(--cd-ink-strong)}
.reg-fallback__text{font-size:var(--cd-small);color:var(--cd-ink-muted)}
.on-dark .reg-fallback__title{color:var(--cd-white)}
.on-dark .reg-fallback__text{color:var(--cd-ink-invert-muted)}
.card--center .reg-fallback,.container--center .reg-fallback{align-items:center;text-align:center;margin-inline:auto}
@media (max-width:899px){.hero--course .reg-fallback{align-items:center;text-align:center}}
.card--register .reg-fallback{align-items:center;text-align:center;margin-inline:auto}

/* --- multi-step-form: .step pager for a CF7 form whose own body defines the steps
 * (.multi-step-form > .step, .step-error, .next-step/.prev-step, .custom-row/
 * .custom-row-space, .button-row, #partner-details). First form: "Become a Centre"
 * (id 1091201, 5824-the-benefits-of-becoming-a-centre.html). CF7 form bodies are
 * shared with live and never edited for a theme change, so .next-step/.prev-step ship
 * as plain <button>s with no class to hook -- unlike CF7's own [submit], which
 * inc/forms.php already reclasses to .btn .btn--primary -- so they are skinned to
 * match here, purely from this generic selector. site.js's initMultiStepForm() only
 * adds .multi-step-form--js once it has wired up paging, so a step is only ever
 * hidden once JS can also switch it back: with JS off every .step, and its own
 * Next/Previous/Submit buttons, stays visible and the form is one long, still-
 * submittable page. ------------------------------------------------------------- */
/* Beats .form.wpcf7-form > div:not(.wpcf7-response-output){display:contents} above
   (same specificity, later in the cascade): that rule dissolves a CF7 template's
   wrapper div into .form's own flex row for .form--inline, but .multi-step-form is a
   real multi-row layout and needs to stay a block, not a flex item. */
.form.wpcf7-form>div.multi-step-form{display:block;width:100%}
.multi-step-form--js .step:not(.is-active){display:none}
.form label{display:block;margin:var(--cd-4) 0 var(--cd-2);font-size:var(--cd-small);font-weight:700;color:var(--cd-ink-strong)}
.on-dark .form label{color:var(--cd-white)}
.form .step>label:first-child{margin-top:0}
.multi-step-form .custom-row{display:flex;flex-wrap:wrap;gap:var(--cd-3);width:100%;margin-bottom:var(--cd-3)}
.multi-step-form .custom-row-space{flex:1 1 160px;min-width:0}
/* Several bare fields in a row under one label (Become a Centre's Hygienist 1 to 5). */
.multi-step-form .step > .wpcf7-form-control-wrap + .wpcf7-form-control-wrap{margin-top:var(--cd-3)}
/* Section headings inside a step (the BEARS sections, "Contact Information", the adult
   test's symptom question): the form bodies use h3 and h4 interchangeably, so every one
   gets the same size, with room above it (none at the top of a step) and a little below. */
.multi-step-form .step :is(h2,h3,h4,h5):not([class]){
	margin:var(--cd-6) 0 var(--cd-3);font-size:var(--cd-h4);line-height:1.3;color:var(--cd-ink-strong);
}
.multi-step-form .step > :is(h2,h3,h4,h5):first-child,
.multi-step-form .step > div:first-child > :is(h2,h3,h4,h5):first-child{margin-top:0}
/* Previous / Next / Submit sit at their own width, side by side, never stretched. */
.multi-step-form .button-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cd-3);margin-top:var(--cd-5)}
.multi-step-form .button-row > *{flex:0 0 auto;width:auto;min-width:140px;margin:0}
.multi-step-form .next-step,.multi-step-form .prev-step{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:48px;padding:var(--cd-3) var(--cd-6);border-radius:var(--cd-r-pill);
	font:700 var(--cd-body)/1.2 var(--cd-font);cursor:pointer;
	transition:background-color .2s,border-color .2s,color .2s;
}
.multi-step-form .next-step{background:var(--cd-accent);color:var(--cd-accent-ink);border:2px solid var(--cd-accent)}
.multi-step-form .next-step:hover,.multi-step-form .next-step:focus-visible{background:var(--cd-accent-hover);border-color:var(--cd-accent-hover)}
.multi-step-form .prev-step{background:transparent;color:var(--cd-ink-strong);border:2px solid var(--cd-line-strong)}
.multi-step-form .prev-step:hover,.multi-step-form .prev-step:focus-visible{background:var(--cd-ground-tint)}
/* The form body hardcodes style="color:red" on this element (CF7 post, not edited
   here); !important is the only way a stylesheet can still override an inline style.
   A dark, deep orange already in the palette reads as an error without leaving it. */
.step-error{color:var(--cd-orange-700) !important;font-size:var(--cd-small);margin:var(--cd-2) 0 0}
#partner-details{margin-top:var(--cd-3)}

/* --- CF7 checkbox/radio lists: readable stacked options for any [checkbox]/[radio] group a
 * CF7 form body authors (the patient screening tests' symptom checklists, the Become a
 * Centre practice-type checkboxes) -- a generic skin on CF7's own .wpcf7-list-item markup,
 * not a per-form recipe. */
.form .wpcf7-form-control.wpcf7-checkbox,.form .wpcf7-form-control.wpcf7-radio{display:flex;flex-direction:column;gap:var(--cd-2);margin:var(--cd-2) 0 var(--cd-4)}
.form .wpcf7-list-item{margin:0}
.form .wpcf7-list-item label{display:flex;align-items:flex-start;gap:var(--cd-2);font-weight:400;margin:0;cursor:pointer}
.form .wpcf7-list-item input[type=checkbox],.form .wpcf7-list-item input[type=radio]{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--cd-accent)}

/* --- radio-section/.radio-row: a scored question grid (Epworth Sleep Evaluation: one label
 * plus a row of numeric radio choices 0-3). This is the CF7 form body's own hand-authored
 * markup (div.radio-section > div.radio-row > label + CF7's [radio ... "0" "1" "2" "3"]),
 * not CF7's [radio] wrapper alone, so it gets its own classes rather than reusing .form
 * .wpcf7-form-control.wpcf7-radio's stacked layout above. Stacks to a full-width row per
 * option under 600px so eight questions stay legible at 390 instead of squeezing four radios
 * into one line. */
.radio-section{display:flex;flex-direction:column;gap:0;margin:var(--cd-3) 0 var(--cd-4)}
.radio-row{display:flex;align-items:center;justify-content:space-between;gap:var(--cd-3);flex-wrap:wrap;padding:var(--cd-3) 0;border-bottom:1px solid var(--cd-line)}
.radio-row:first-child{border-top:1px solid var(--cd-line)}
.radio-row>label{flex:1 1 200px;margin:0;font-weight:700;font-size:var(--cd-small);color:var(--cd-ink-strong)}
.radio-row .wpcf7-form-control.wpcf7-radio{flex-direction:row;flex-wrap:nowrap;gap:var(--cd-5);margin:0}
.radio-row .wpcf7-list-item label{flex-direction:column;align-items:center;gap:var(--cd-1);font-size:var(--cd-small);font-weight:700;color:var(--cd-ink-muted)}
.radio-row .wpcf7-list-item input{margin:0}
@media (max-width:599px){
	.radio-row{flex-direction:column;align-items:flex-start;gap:var(--cd-2)}
	.radio-row .wpcf7-form-control.wpcf7-radio{align-self:stretch;justify-content:space-between;gap:var(--cd-3)}
}

/* --- embed-frame: a third-party embedded form (a Zoho web form) that has to render
 * inside its own <iframe> rather than through the kit's own field markup. A generic wrapper
 * rather than a per-page rule, so any future iframe embed (another Zoho or vendor form)
 * reuses it instead of a page hand-rolling its own inline width/height. ------------------- */
.embed-frame{display:block;width:100%;max-width:720px;margin-inline:auto;height:var(--embed-h,1200px);border:0;border-radius:var(--cd-r-sm)}