/**
 * Public registration form.
 *
 * Deliberately low-specificity and variable-driven so a theme can restyle it
 * without fighting !important rules.
 */

/*
 * The tokens are declared on the form itself as well as its wrapper, because
 * the admin edit screen reuses the field markup without the public wrapper.
 */
.rbqr-form-wrap,
.rbqr-form {
	--rbqr-accent: #1a6fd4;
	--rbqr-error: #b3261e;
	--rbqr-border: #c7ccd3;
	--rbqr-text: #1a1a1a;
	--rbqr-muted: #5b6472;
	--rbqr-radius: 6px;
}

.rbqr-form-wrap {
	max-width: 720px;
	margin: 0 auto;
	color: var(--rbqr-text);
}

.rbqr-form__title {
	margin: 0 0 .5em;
}

.rbqr-form__intro {
	margin: 0 0 1.5em;
	color: var(--rbqr-muted);
}

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

.rbqr-form__summary {
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border: 1px solid var(--rbqr-error);
	border-left-width: 4px;
	border-radius: var(--rbqr-radius);
	background: #fdf3f2;
}

.rbqr-form__summary-title {
	margin: 0 0 .5em;
	font-weight: 600;
	color: var(--rbqr-error);
}

.rbqr-form__summary ul {
	margin: 0;
	padding-left: 1.25em;
}

.rbqr-form__summary a {
	color: var(--rbqr-error);
}

/* --- Layout ---------------------------------------------------------- */

.rbqr-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25em;
}

/* Fields that need the full width regardless of viewport. */
.rbqr-field--radio,
.rbqr-field--checkbox,
.rbqr-field--textarea,
.rbqr-field--consent,
.rbqr-field--file {
	grid-column: 1 / -1;
}

/* A single consent checkbox carries its text beside the box, not above it. */
.rbqr-field--consent > .rbqr-field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rbqr-consent {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	cursor: pointer;
	line-height: 1.45;
}

.rbqr-consent input {
	margin: .2em 0 0;
	flex: none;
}

.rbqr-field select,
.rbqr-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .6em .75em;
	border: 1px solid var(--rbqr-border);
	border-radius: var(--rbqr-radius);
	background: #fff;
	color: var(--rbqr-text);
	font: inherit;
	line-height: 1.4;
}

.rbqr-field textarea {
	min-height: 6em;
	resize: vertical;
}

.rbqr-field select:focus-visible,
.rbqr-field textarea:focus-visible {
	outline: 2px solid var(--rbqr-accent);
	outline-offset: 1px;
	border-color: var(--rbqr-accent);
}

.rbqr-field.has-error select,
.rbqr-field.has-error textarea {
	border-color: var(--rbqr-error);
}

@media (max-width: 640px) {
	.rbqr-form__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Fields ---------------------------------------------------------- */

.rbqr-field {
	display: flex;
	flex-direction: column;
	gap: .35em;
	min-width: 0;
}

.rbqr-field__label {
	font-weight: 600;
	line-height: 1.3;
}

.rbqr-req {
	color: var(--rbqr-error);
}

.rbqr-field__hint {
	font-size: .85em;
	color: var(--rbqr-muted);
}

.rbqr-field__error {
	font-size: .875em;
	font-weight: 500;
	color: var(--rbqr-error);
}

.rbqr-field input[type="text"],
.rbqr-field input[type="email"],
.rbqr-field input[type="tel"],
.rbqr-field input[type="date"],
.rbqr-field input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	padding: .6em .75em;
	border: 1px solid var(--rbqr-border);
	border-radius: var(--rbqr-radius);
	background: #fff;
	color: var(--rbqr-text);
	font: inherit;
	line-height: 1.4;
}

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

.rbqr-field.has-error input {
	border-color: var(--rbqr-error);
}

/* --- Radio groups ---------------------------------------------------- */

.rbqr-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: .5em .75em;
}

.rbqr-radio {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .55em .9em;
	border: 1px solid var(--rbqr-border);
	border-radius: var(--rbqr-radius);
	background: #fff;
	cursor: pointer;
	line-height: 1.3;
}

.rbqr-radio:has(input:checked) {
	border-color: var(--rbqr-accent);
	box-shadow: inset 0 0 0 1px var(--rbqr-accent);
}

.rbqr-radio:focus-within {
	outline: 2px solid var(--rbqr-accent);
	outline-offset: 1px;
}

.rbqr-radio input {
	margin: 0;
	flex: none;
}

/* --- Conditional fields ---------------------------------------------- */

/*
 * PHP renders a conditional field with [hidden] when its condition is not met,
 * so there is no flash of a field that should not be there and no-JS visitors
 * still get correct initial state. form.js then toggles the attribute.
 * `display: flex` on .rbqr-field would otherwise override [hidden].
 */
.rbqr-field[hidden] {
	display: none;
}

/* --- Photo carried over from a failed attempt ------------------------- */

.rbqr-retained {
	display: flex;
	align-items: center;
	gap: .9em;
	padding: .75em;
	border: 1px solid var(--rbqr-border);
	border-radius: var(--rbqr-radius);
	background: #f6f8fa;
}

.rbqr-retained__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.rbqr-retained__body {
	min-width: 0;
}

.rbqr-retained__note {
	margin: 0 0 .35em;
	font-size: .9em;
}

.rbqr-retained__drop {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: .875em;
	color: var(--rbqr-muted);
	cursor: pointer;
}

/* --- Honeypot -------------------------------------------------------- */

.rbqr-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Actions --------------------------------------------------------- */

.rbqr-form__actions {
	margin-top: 1.75em;
}

/*
 * Every value here is a variable with a fallback, so the settings screen can
 * override any of them by emitting custom properties on the wrapper — no
 * generated stylesheet, nothing to regenerate when a setting changes.
 */
.rbqr-form__submit {
	width: var(--rbqr-btn-width, auto);
	padding: var(--rbqr-btn-pad-y, 14px) var(--rbqr-btn-pad-x, 32px);
	border: 0;
	border-radius: var(--rbqr-btn-radius, var(--rbqr-radius));
	background: var(--rbqr-btn-bg, var(--rbqr-accent));
	font: inherit;
	font-size: var(--rbqr-btn-size, 16px);
	font-weight: var(--rbqr-btn-weight, 700);
	font-style: var(--rbqr-btn-style, normal);
	line-height: 1.4;
	cursor: pointer;
	transition: background .14s ease, color .14s ease;
}

.rbqr-form__submit,
.rbqr-form__submit:focus,
.rbqr-form__submit:active {
	color: var(--rbqr-btn-text, #fff);
	text-decoration: var(--rbqr-btn-decoration, none);
	text-underline-offset: 3px;
}

/*
 * A real hover colour rather than a brightness filter. The filter looked fine
 * against the default blue but washes out pale buttons and does nothing at all
 * to black, so the shade is computed from the chosen colour instead.
 */
.rbqr-form__submit:hover {
	background: var(--rbqr-btn-bg-hover, var(--rbqr-btn-bg, var(--rbqr-accent)));
	color: var(--rbqr-btn-text-hover, var(--rbqr-btn-text, #fff));
	text-decoration: var(--rbqr-btn-decoration, none);
}

.rbqr-form__submit:focus-visible {
	outline: 2px solid var(--rbqr-text);
	outline-offset: 2px;
}

.rbqr-form__submit[disabled] {
	opacity: .6;
	cursor: progress;
}

.rbqr-form__required-note {
	margin-top: 1em;
	font-size: .85em;
	color: var(--rbqr-muted);
}

/* --- Confirmation ---------------------------------------------------- */

.rbqr-preview {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.rbqr-preview__heading {
	margin: 0 0 1em;
}

.rbqr-preview__links {
	margin-top: 1.25em;
}

.rbqr-preview__sep {
	margin: 0 .5em;
	color: #8a8a8a;
}

.rbqr-preview__note {
	color: #5b6472;
}

/* --- Phone: country picker --------------------------------------------
   Without JavaScript this is just a tel input prefilled with the default
   dial code, and the button and panel never appear. form.js adds
   .is-enhanced, which is what turns it into a combobox.                   */

.rbqr-tel {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0;
}

/*
 * Colours are declared for every state, including hover and focus, rather than
 * left to inherit. This control sits inside whatever theme the site runs, and
 * themes routinely style `button:hover { color: #fff }` for their own call-to-
 * action buttons — which turned the dial code white-on-pale here. Inheriting is
 * not safe on someone else's page.
 */
.rbqr-tel__toggle,
.rbqr-tel__toggle:hover,
.rbqr-tel__toggle:focus,
.rbqr-tel__toggle:active {
	color: var(--rbqr-text);
	text-decoration: none;
}

.rbqr-tel__toggle {
	display: none; /* Shown once form.js has taken over. */
	align-items: center;
	gap: .4em;
	flex: none;
	padding: 0 .7em;
	border: 1px solid var(--rbqr-border);
	border-right: 0;
	border-radius: var(--rbqr-radius) 0 0 var(--rbqr-radius);
	background: #f8fafc;
	font: inherit;
	font-size: .95em;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}

.rbqr-tel.is-enhanced .rbqr-tel__toggle {
	display: inline-flex;
}

.rbqr-tel__toggle:hover {
	background: #eef2f7;
	border-color: var(--rbqr-accent);
}

.rbqr-tel__toggle:focus-visible {
	outline: 2px solid var(--rbqr-accent);
	outline-offset: -1px;
	z-index: 1;
}

.rbqr-tel__flag {
	font-size: 1.15em;
	line-height: 1;
}

/* Stated on the children too — a theme's hover rule cascades into them. */
.rbqr-tel__toggle .rbqr-tel__iso,
.rbqr-tel__toggle:hover .rbqr-tel__iso {
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--rbqr-muted);
}

.rbqr-tel__toggle .rbqr-tel__dial,
.rbqr-tel__toggle:hover .rbqr-tel__dial {
	color: var(--rbqr-text);
	font-variant-numeric: tabular-nums;
}

.rbqr-tel__caret {
	width: 0;
	height: 0;
	margin-left: .1em;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--rbqr-muted);
	background: none;
}

.rbqr-field .rbqr-tel__input {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: var(--rbqr-radius);
}

.rbqr-tel.is-enhanced .rbqr-tel__input {
	border-radius: 0 var(--rbqr-radius) var(--rbqr-radius) 0;
}

/* --- The panel --- */

.rbqr-tel__panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 20;
	width: min(360px, 100%);
	background: #fff;
	border: 1px solid var(--rbqr-border);
	border-radius: var(--rbqr-radius);
	box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
	overflow: hidden;
}

.rbqr-tel__panel[hidden] {
	display: none;
}

.rbqr-tel__search {
	padding: .6em;
	border-bottom: 1px solid var(--rbqr-border);
	background: #f8fafc;
}

.rbqr-field .rbqr-tel__query {
	width: 100%;
	padding: .5em .7em;
	border: 1px solid var(--rbqr-border);
	border-radius: var(--rbqr-radius);
	background: #fff;
	color: var(--rbqr-text);
	font: inherit;
	font-size: .95em;
}

.rbqr-tel__list {
	max-height: 260px;
	margin: 0;
	padding: .25em 0;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rbqr-tel__option {
	display: flex;
	align-items: center;
	gap: .6em;
	padding: .5em .8em;
	cursor: pointer;
	line-height: 1.3;
}

.rbqr-tel__option[hidden] {
	display: none;
}

.rbqr-tel__option,
.rbqr-tel__option:hover,
.rbqr-tel__option.is-active {
	color: var(--rbqr-text);
}

.rbqr-tel__option:hover,
.rbqr-tel__option.is-active {
	background: #eff4ff;
}

.rbqr-tel__option.is-selected {
	font-weight: 600;
}

.rbqr-tel__option.is-selected::after {
	content: "✓";
	margin-left: auto;
	color: var(--rbqr-accent);
}

.rbqr-tel__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rbqr-tel__option .rbqr-tel__dial,
.rbqr-tel__option:hover .rbqr-tel__dial {
	flex: none;
	color: var(--rbqr-muted);
	font-size: .9em;
	font-variant-numeric: tabular-nums;
}

.rbqr-tel__option.is-selected .rbqr-tel__dial {
	margin-right: .3em;
}

.rbqr-tel__empty {
	margin: 0;
	padding: 1em .8em;
	color: var(--rbqr-muted);
	font-size: .9em;
	text-align: center;
}

.rbqr-tel__empty[hidden] {
	display: none;
}