/* GAP — Ultimate Member registration form
 *
 * Scoped to the registration form only. Login, password reset, account and
 * profile keep UM's default appearance.
 *
 * Tokens come from tokens.css. No colour literals below.
 *
 * ------------------------------------------------------------------
 * SCOPE — verify this before anything else
 * ------------------------------------------------------------------
 * UM 2.x builds the wrapper class from the form mode, giving:
 *
 *     <div class="um um-register um-142">   <- 142 = your form ID
 *
 * Every rule here is prefixed with `.um.um-register`. Right-click the
 * registration form → Inspect and confirm that wrapper. If yours reads
 * `um-registration` instead, find-and-replace `um-register` throughout.
 *
 * To target one specific form rather than all registration forms, swap the
 * prefix for `.um.um-142` using your own form ID.
 *
 * ------------------------------------------------------------------
 * ON !important
 * ------------------------------------------------------------------
 * UM generates a stylesheet from Settings → Appearance at higher specificity
 * than a plain class selector. Rules that must beat it are marked. If you
 * clear UM's colour settings instead, most can be deleted — see the note at
 * the bottom of this file.
 */


/* ==================================================================
 * 1. Wrapper
 * ============================================================== */

.um.um-register {
	font-size: var(--gap-field-size);
	line-height: 1.5;
	color: var(--gap-ink);
}

.um.um-register .um-form-fieldset { border: 0; }

/* UM sets form width in the form's own settings (UM → Forms → your form →
   Registration Form → Form Width). Prefer setting it there. */


/* ==================================================================
 * 2. Field labels
 * ============================================================== */

.um.um-register .um-field-label label {
	font-size: var(--gap-label-size);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--gap-ink);
	margin-bottom: 6px;
	padding: 0;
}

/* UM rules off under every label — too busy at this field density. */
.um.um-register .um-field-label {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 6px;
}

.um.um-register .um-field-label .um-field-label-required,
.um.um-register .um-field-label .required {
	color: var(--gap-accent);
	font-weight: 400;
}

.um.um-register .um-field-description {
	font-size: 13px;
	color: var(--gap-mute);
	margin-top: 4px;
}


/* ==================================================================
 * 3. Text inputs, textareas, selects
 * ============================================================== */

.um.um-register .um-form input[type="text"],
.um.um-register .um-form input[type="email"],
.um.um-register .um-form input[type="tel"],
.um.um-register .um-form input[type="url"],
.um.um-register .um-form input[type="number"],
.um.um-register .um-form input[type="password"],
.um.um-register .um-form textarea,
.um.um-register .um-form select,
.um.um-register .um-form-field {
	width: 100%;
	box-sizing: border-box;
	padding: var(--gap-field-pad-y) var(--gap-field-pad-x) !important;
	border: 1px solid var(--gap-line) !important;
	border-radius: var(--gap-radius) !important;
	background: var(--gap-field) !important;
	color: var(--gap-ink) !important;
	font-size: var(--gap-field-size);
	font-family: inherit;
	line-height: 1.5;
	box-shadow: none !important;
	transition: border-color 0.12s, box-shadow 0.12s;
}

.um.um-register .um-form textarea {
	resize: vertical;
	min-height: 110px;
}

.um.um-register .um-form input:focus,
.um.um-register .um-form textarea:focus,
.um.um-register .um-form select:focus,
.um.um-register .um-form-field:focus {
	outline: none;
	border-color: var(--gap-navy) !important;
	box-shadow: var(--gap-focus-ring) !important;
}

.um.um-register .um-form ::placeholder {
	color: var(--gap-mute);
	opacity: 0.75;
}

.um.um-register .um-form input:disabled,
.um.um-register .um-form textarea:disabled {
	background: var(--gap-sunk) !important;
	color: var(--gap-mute) !important;
}

/* UM's inline validation state */
.um.um-register .um-form-field.um-error-field,
.um.um-register .um-form input.um-error-field {
	border-color: var(--gap-err) !important;
}

/* Icon UM parks inside certain field types */
.um.um-register .um-field-icon {
	color: var(--gap-mute);
	border-right: 1px solid var(--gap-line);
}


/* ==================================================================
 * 4. Field spacing
 * ============================================================== */

.um.um-register .um-field { padding: 0 0 20px !important; }
.um.um-register .um-field:last-of-type { padding-bottom: 0 !important; }
.um.um-register .um-field-area { position: relative; }


/* ==================================================================
 * 5. Checkboxes & radios
 *
 * UM 2.x renders these as icon-font glyphs in <i>, not native inputs — the
 * real input is visually hidden. accent-color does nothing here; the glyph
 * has to be coloured directly.
 * ============================================================== */

.um.um-register .um-field-checkbox,
.um.um-register .um-field-radio {
	padding: 6px 0;
	font-size: 14px;
	color: var(--gap-ink);
	border: 0 !important;
	background: none !important;
}

.um.um-register .um-field-checkbox i,
.um.um-register .um-field-radio i {
	color: var(--gap-line);
	font-size: 18px;
	transition: color 0.12s;
}

.um.um-register .um-field-checkbox.active i,
.um.um-register .um-field-radio.active i,
.um.um-register .um-field-checkbox:hover i,
.um.um-register .um-field-radio:hover i {
	color: var(--gap-navy);
}

.um.um-register .um-field-checkbox-option,
.um.um-register .um-field-radio-option { vertical-align: middle; }

/* Terms & conditions field, if enabled on the form */
.um.um-register .um-field-terms {
	background: var(--gap-sunk);
	border: 1px solid var(--gap-line);
	border-radius: var(--gap-radius);
	padding: 12px 14px !important;
	font-size: 13px;
	color: var(--gap-mute);
}


/* ==================================================================
 * 6. select2 (country, dropdowns, multiselect)
 *
 * The dropdown panel renders in a portal at the end of <body>, outside the
 * .um-register wrapper — so those two rules can't be scoped. They're written
 * against select2's UM-specific classes to limit the blast radius.
 * ============================================================== */

.um.um-register .select2-container--default .select2-selection--single,
.um.um-register .select2-container--default .select2-selection--multiple {
	height: auto !important;
	min-height: 0;
	padding: calc( var(--gap-field-pad-y) - 1px ) var(--gap-field-pad-x);
	border: 1px solid var(--gap-line) !important;
	border-radius: var(--gap-radius) !important;
	background: var(--gap-field);
}

.um.um-register .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.5;
	color: var(--gap-ink);
}

.um.um-register .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 6px;
}

.um.um-register .select2-container--default.select2-container--focus .select2-selection--multiple,
.um.um-register .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--gap-navy) !important;
	box-shadow: var(--gap-focus-ring);
}

.um.um-register .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: var(--gap-tint) !important;
	border: 1px solid var(--gap-line) !important;
	border-radius: var(--gap-radius) !important;
	color: var(--gap-ink);
}

/* Portaled dropdown panel — unscopeable. Delete these two if they bleed
   into other select2 instances on the site. */
.um-dropdown .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--gap-navy) !important;
}


/* ==================================================================
 * 7. Submit button
 *
 * All !important — UM writes these from Settings → Appearance.
 * ============================================================== */

.um.um-register .um-button,
.um.um-register input[type="submit"].um-button,
.um.um-register a.um-button {
	display: inline-block;
	width: auto;
	min-width: 150px;
	padding: 10px 22px !important;
	border: 1px solid transparent !important;
	border-radius: var(--gap-radius) !important;
	background: var(--gap-navy) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.01em;
	text-transform: none !important;
	text-decoration: none;
	box-shadow: none !important;
	transition: background 0.12s;
}

.um.um-register .um-button:hover,
.um.um-register input[type="submit"].um-button:hover {
	background: var(--gap-navy-lo) !important;
	color: #fff !important;
}

.um.um-register .um-button:focus-visible {
	outline: none;
	box-shadow: var(--gap-focus-ring) !important;
}

/* "Already have an account? Login" secondary link */
.um.um-register .um-button.um-alt,
.um.um-register a.um-button.um-alt {
	background: transparent !important;
	border-color: var(--gap-line) !important;
	color: var(--gap-navy) !important;
}

.um.um-register .um-button.um-alt:hover {
	background: var(--gap-sunk) !important;
	border-color: var(--gap-navy) !important;
	color: var(--gap-navy) !important;
}

@media (max-width: 480px) {
	.um.um-register .um-button { width: 100% !important; }
}


/* ==================================================================
 * 8. Errors & notices
 * ============================================================== */

.um.um-register .um-field-error,
.um.um-register .um-notice.err {
	background: none !important;
	border: 0 !important;
	border-left: 3px solid var(--gap-err) !important;
	border-radius: 0 !important;
	padding: 8px 12px !important;
	margin-top: 6px;
	color: var(--gap-err) !important;
	font-size: 13px !important;
	font-weight: 400;
}

/* UM points a CSS triangle at the field — reads as a tooltip, which this
   flatter treatment isn't. */
.um.um-register .um-field-error .um-field-arrow { display: none !important; }

.um.um-register .um-notice.success {
	background: none !important;
	border: 0 !important;
	border-left: 3px solid var(--gap-ok) !important;
	border-radius: 0 !important;
	padding: 10px 14px !important;
	color: var(--gap-ink) !important;
	font-size: 14px !important;
}

/* Password strength meter */
.um.um-register .um_password_strength,
.um.um-register .um-field-error.um-password-strength {
	font-size: 12px;
	color: var(--gap-mute);
}


/* ==================================================================
 * 9. Layout
 * ============================================================== */

.um.um-register .um-col-alt { padding-top: 8px; border: 0; }

/* UM centres the submit; the profile form left-aligns it. Delete to keep
   UM's centring. */
.um.um-register .um-center { text-align: left; }

.um.um-register .um-left.um-half,
.um.um-register .um-right.um-half { width: calc( 50% - 8px ); }

@media (max-width: 600px) {
	.um.um-register .um-left.um-half,
	.um.um-register .um-right.um-half { width: 100%; float: none; }
}


/* ==================================================================
 * 10. Reduced motion
 * ============================================================== */

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


/* ==================================================================
 * Removing the !important declarations
 * ------------------------------------------------------------------
 * Go to UM → Settings → Appearance → Registration Form. Clear the colour
 * and button overrides there (or set them to the token values). UM then
 * stops emitting its generated stylesheet for those properties, and the
 * !important flags in sections 3, 7 and 8 can come out.
 *
 * Do that before adding more rules — otherwise every new rule needs the
 * same escape hatch and the file becomes unmaintainable.
 * ============================================================== */