/*
 * Ready Rating registration form.
 *
 * Deliberately low-specificity so the Avada theme keeps control of typography
 * and colour. What is defined here is the part the theme must not be allowed to
 * remove: focus visibility, and error states that do not rely on colour alone.
 */

.rr-register .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rr-register .rr-field {
	margin: 0 0 1.25rem;
}

.rr-register label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.rr-register .rr-choice {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-right: 1.5rem;
}

.rr-register .rr-choice label {
	display: inline;
	margin-bottom: 0;
	font-weight: 400;
}

/* WCAG 2.4.7. Avada removes the UA outline in places; put it back explicitly. */
.rr-register :is(input, select, button, textarea, [tabindex]):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/*
 * 1.4.1: the invalid state is carried by the border weight and the message
 * beneath the field, not by the red alone.
 */
.rr-register .rr-field--invalid > :is(input, select) {
	border: 2px solid #d31220;
}

.rr-register .rr-field__error {
	margin: 0.35rem 0 0;
	font-weight: 600;
	/* #ED1C24 is 4.38:1 on white and fails AA at this size; this passes. */
	color: #d31220;
}

.rr-register .rr-field__error::before {
	content: "\26A0\FE0E";
	margin-right: 0.4rem;
}

.rr-register .rr-field__required {
	color: #d31220;
}

.rr-register__errors {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid #d31220;
	background: #fdf1f3;
}

.rr-register__errors h2 {
	margin-top: 0;
	font-size: 1.1rem;
}

.rr-register .rr-agreement {
	max-height: 22rem;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	border: 1px solid #cfd4dc;
}

.rr-register fieldset.rr-field--choice {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.rr-register fieldset.rr-field--choice > legend {
	padding: 0;
	margin-bottom: 0.5rem;
	font-weight: 600;
}


@media (prefers-reduced-motion: reduce) {
	.rr-register * {
		transition: none !important;
		animation: none !important;
	}
}

/* Availability feedback. Never colour alone — the wording carries the meaning. */
.rr-register .rr-field__status {
	margin: 0.35rem 0 0;
	min-height: 1.2em;
	font-size: 0.9em;
}

.rr-register .rr-field__status.is-taken {
	font-weight: 600;
	color: #d31220;
}

.rr-register .rr-field__status.is-free {
	color: #1b6b4a;
}

.rr-register .rr-field__status.is-taken::before {
	content: "\26A0\FE0E";
	margin-right: 0.4rem;
}

.rr-register .rr-field__status.is-free::before {
	content: "\2713";
	margin-right: 0.4rem;
}

/* ---------------------------------------------------------------
   Accordion
   Visually matched to the current form, but self-contained: the old
   one relies on the plugin bundling a full Bootstrap 5 stylesheet
   and pulling Bootstrap's JS from a third-party CDN.
   --------------------------------------------------------------- */

.rr-register .rr-accordion {
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	overflow: hidden;
}

.rr-register .rr-accordion__item + .rr-accordion__item {
	border-top: 1px solid #dcdcdc;
}

.rr-register .rr-accordion__header {
	margin: 0;
	font-size: 1rem;
}

.rr-register .rr-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1rem 1.25rem;
	border: 0;
	background: #f0f0f0;
	font: inherit;
	font-weight: 600;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.rr-register .rr-accordion__item.is-open > .rr-accordion__header > .rr-accordion__trigger {
	background: #e7f1ff;
}

.rr-register .rr-accordion__trigger:hover {
	background: #e6e6e6;
}

.rr-register .rr-accordion__item.is-open > .rr-accordion__header > .rr-accordion__trigger:hover {
	background: #dbe9fe;
}

/* Chevron. Rotation is the decoration; aria-expanded carries the meaning. */
.rr-register .rr-accordion__chevron {
	flex: none;
	width: 0.7em;
	height: 0.7em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.rr-register .rr-accordion__item.is-open .rr-accordion__chevron {
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.rr-register .rr-accordion__chevron {
		transition: none;
	}
}

.rr-register .rr-accordion__body {
	padding: 1.25rem;
}

/*
 * Capped height, so the remaining section headers and the submit button stay
 * visible without scrolling the page. Same intent as the current form, which
 * uses a flat max-height:200px — but that has three problems worth not copying.
 *
 * 1. A pixel height does not grow when the member enlarges text, so at 200% zoom
 *    the box still shows 200px of now-much-larger fields: roughly one row, with
 *    the rest behind a scrollbar. WCAG 1.4.4. Expressed in rem it scales with
 *    the text, and the vh ceiling keeps it proportionate on short screens.
 *
 * 2. 200px is about two fields. 24rem is closer to four while still leaving the
 *    later headers and the submit button on screen.
 *
 * 3. Below the theme's single-column breakpoint the page is already a vertical
 *    scroll and "above the fold" stops meaning much, while nested scrolling on
 *    touch is genuinely awkward. The cap is dropped there.
 */
.rr-register .rr-accordion__body--capped {
	/*
	 * Driven by the viewport rather than a fixed number, because the goal is
	 * "the later headers and the submit button are still on screen" and that is
	 * a question about the viewport, not about pixels. The rem bounds keep it
	 * sane at both extremes and let it grow if the member enlarges text.
	 */
	max-height: clamp(10rem, 22vh, 26rem);
	overflow-y: auto;
	/* Reserve the scrollbar so fields do not shift when it appears. */
	scrollbar-gutter: stable;
}

/* The scrollable region is focusable; it must show that it has focus. */
.rr-register .rr-accordion__body--capped:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

@media (max-width: 782px) {
	.rr-register .rr-accordion__body--capped {
		max-height: none;
		overflow-y: visible;
	}
}

/*
 * If the viewport is short enough that a capped box would be pointless, stop
 * capping rather than shrink it to a slot.
 */
@media (max-height: 620px) {
	.rr-register .rr-accordion__body--capped {
		max-height: none;
		overflow-y: visible;
	}
}

.rr-register .rr-accordion__panel[hidden] {
	display: none;
}

.rr-register .rr-accordion__nav {
	padding: 0 1.25rem 1.25rem;
}

.rr-register .rr-accordion__next,
.rr-register .rr-register__submit {
	padding: 0.6rem 1.5rem;
	border: 0;
	border-radius: 3px;
	background: #c8102e;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.rr-register .rr-accordion__next:hover,
.rr-register .rr-register__submit:hover {
	background: #a20f27;
}

.rr-register .rr-register__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.rr-register .rr-register__actions {
	margin-top: 1.5rem;
	text-align: center;
}

/*
 * A section that has not been reached yet.
 *
 * Sections unlock in order so members cannot submit with gaps and then have to
 * hunt for errors across collapsed panels. The current form does this by leaving
 * headers 2 and 3 inert, which reads to a keyboard or screen-reader user as a
 * control that is simply broken. Dimmed plus aria-disabled says the same thing
 * honestly, and activating it explains what to do.
 */
.rr-register .rr-accordion__item.is-locked > .rr-accordion__header > .rr-accordion__trigger {
	color: #6b6b6b;
	cursor: not-allowed;
}

/* Not colour alone: the chevron is muted and a padlock is shown. */
.rr-register .rr-accordion__item.is-locked .rr-accordion__chevron {
	opacity: 0.45;
}

.rr-register .rr-accordion__item.is-locked .rr-accordion__title::after {
	content: " \1F512";
	font-size: 0.85em;
}

.rr-register .rr-accordion__item.is-locked > .rr-accordion__header > .rr-accordion__trigger:hover {
	background: #f0f0f0;
}

/* ---------------------------------------------------------------
   Password reveal
   --------------------------------------------------------------- */

.rr-register .rr-field__control {
	position: relative;
}

.rr-register .rr-field__control--password > input {
	/* Room for the button, so long passwords do not run underneath it. */
	padding-right: 7.5rem;
}

.rr-register .rr-field__reveal {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	padding: 0.3rem 0.6rem;
	border: 1px solid #b9b9b9;
	border-radius: 3px;
	background: #f7f7f7;
	font: inherit;
	font-size: 0.85em;
	color: #333;
	cursor: pointer;
}

.rr-register .rr-field__reveal:hover {
	background: #ececec;
}

.rr-register .rr-field__reveal[aria-pressed="true"] {
	background: #e7f1ff;
	border-color: #7aa7e6;
}

/* ---------------------------------------------------------------
   Agreement gate
   --------------------------------------------------------------- */

.rr-register .rr-agreement__gate {
	margin: 0.75rem 0 0.35rem;
	font-weight: 600;
	color: #8a5300;
}

.rr-register .rr-agreement__gate::before {
	content: "\2193\FE0E";
	margin-right: 0.4rem;
}

.rr-register #Agrees:disabled + label {
	color: #6b6b6b;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------
   Submit progress
   --------------------------------------------------------------- */

.rr-register .rr-register__progress {
	margin: 1rem auto 0;
	max-width: 22rem;
}

.rr-register .rr-register__progress[hidden] {
	display: none;
}

.rr-register .rr-register__progress-track {
	height: 6px;
	border-radius: 3px;
	background: #e3e3e3;
	overflow: hidden;
}

.rr-register .rr-register__progress-bar {
	width: 40%;
	height: 100%;
	border-radius: 3px;
	background: #c8102e;
	animation: rr-progress 1.1s ease-in-out infinite;
}

@keyframes rr-progress {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(250%); }
}

.rr-register .rr-register__progress-text {
	margin: 0.5rem 0 0;
	font-size: 0.9em;
	color: #5a6470;
}

.rr-register .rr-register__submit.is-working {
	opacity: 0.75;
	cursor: progress;
}

/*
 * With motion reduced, hold the bar still and let the text carry the message
 * rather than removing the indicator altogether.
 */
@media (prefers-reduced-motion: reduce) {
	.rr-register .rr-register__progress-bar {
		width: 100%;
		animation: none;
	}
}

/* ---------------------------------------------------------------
   Field grid
   Reproduces the live form's Bootstrap columns: half-width fields
   pair up, full-width fields take the row. Flex wrap rather than a
   fixed grid, so a half-width field with nothing beside it simply
   sits alone, exactly as postal code does on the live form.
   --------------------------------------------------------------- */

.rr-register .rr-accordion__body {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	align-content: flex-start;
}

.rr-register .rr-field {
	flex: 1 1 100%;
	min-width: 0;
}

.rr-register .rr-field--half {
	flex: 0 1 calc(50% - 0.75rem);
}

/* Below the theme's single-column breakpoint everything goes full width. */
@media (max-width: 782px) {
	.rr-register .rr-field--half {
		flex-basis: 100%;
	}
}

/*
 * The agreement section is not a field grid; keep it in normal flow so the
 * scroll box and the accept control stack predictably.
 */
.rr-register .rr-accordion__item:last-child .rr-accordion__body {
	display: block;
}

/* ---------------------------------------------------------------
   Field state: the green / red outline the live form uses
   ---------------------------------------------------------------
   The outline is the visible signal, and it is deliberately not the
   only one. Colour alone fails WCAG 1.4.1 and is invisible to about
   one man in twelve, so every state also carries a shape - a tick or
   a warning mark - and wording, and aria-invalid for assistive tech.

   Both colours clear 3:1 against white, the minimum for a control
   boundary under WCAG 1.4.11: #1b6b4a is 6.4:1 and #d31220 is 5.9:1.
   The stock Red Cross red would not have: #ED1C24 is 3.9:1.
   --------------------------------------------------------------- */

.rr-register .rr-field input[data-rr-state],
.rr-register .rr-field select[data-rr-state] {
	border-width: 2px;
	border-style: solid;
}

.rr-register .rr-field input[data-rr-state="valid"],
.rr-register .rr-field select[data-rr-state="valid"] {
	border-color: #1b6b4a;
	background-color: #f4faf6;
}

.rr-register .rr-field input[data-rr-state="invalid"],
.rr-register .rr-field select[data-rr-state="invalid"] {
	border-color: #d31220;
	background-color: #fdf5f6;
}

/*
 * Server-rendered errors get the same treatment, so a field refused on
 * submit looks exactly like one refused as you type.
 */
.rr-register .rr-field--invalid > .rr-field__control > input,
.rr-register .rr-field--invalid > input,
.rr-register .rr-field--invalid > select {
	border: 2px solid #d31220;
	background-color: #fdf5f6;
}

/* Focus must still win over the state colour. */
.rr-register .rr-field input[data-rr-state]:focus-visible,
.rr-register .rr-field select[data-rr-state]:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/*
 * Windows High Contrast throws away author colours entirely. Without this
 * the outline disappears and only the icon and wording remain.
 */
@media (forced-colors: active) {
	.rr-register .rr-field input[data-rr-state],
	.rr-register .rr-field select[data-rr-state] {
		border-style: solid;
		border-width: 3px;
	}

	.rr-register .rr-field input[data-rr-state="invalid"],
	.rr-register .rr-field select[data-rr-state="invalid"] {
		border-style: dashed;
	}
}

/* ---------------------------------------------------------------
   Account screen
   Shares the registration form's field styling; only the parts
   unique to this screen are defined here.
   --------------------------------------------------------------- */

.rr-account .rr-account__section {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	align-content: flex-start;
	padding: 1.25rem 0;
	border-bottom: 1px solid #dcdcdc;
}

.rr-account .rr-account__section:last-of-type {
	border-bottom: 0;
}

.rr-account .rr-account__saved {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1.1rem;
	border-left: 4px solid #1b6b4a;
	background: #eff7f2;
	font-weight: 600;
	color: #14512f;
}

/* Not colour alone. */
.rr-account .rr-account__saved::before {
	content: "\2713";
	margin-right: 0.5rem;
}

.rr-account .rr-account__avatar {
	display: block;
	margin: 0 0 0.6rem;
	border-radius: 50%;
	object-fit: cover;
}

/* A readonly field should look inert without looking broken. */
.rr-account input[readonly] {
	background: #f2f2f2;
	color: #4a4a4a;
	cursor: default;
}