/*
 * Ultimate Member (UM) — map UM field markup to OTR Field Inputs styles.
 * This file is enqueued after UM's own CSS so our design system wins.
 */

.um .um-field-label {
	margin: 0 0 10px;
}

.um .um-field-label label {
	font-size: var(--otr-font-size-meta-sm) !important;
	line-height: var(--otr-line-height-meta-sm) !important;
	color: var(--otr-text-primary, #1A1A1A) !important;
}

.um .um-tip-text {
	display: block;
	margin-top: 10px;
	font-size: var(--otr-font-size-meta-sm) !important;
	line-height: var(--otr-line-height-meta-sm) !important;
	color: var(--otr-text-tertiary, #6B7280) !important;
}

.um .um-form .um-field-area input.um-form-field[type="text"],
.um .um-form .um-field-area input.um-form-field[type="email"],
.um .um-form .um-field-area input.um-form-field[type="password"],
.um .um-form .um-field-area input.um-form-field[type="tel"],
.um .um-form .um-field-area input.um-form-field[type="url"],
.um .um-form .um-field-area input.um-form-field[type="number"],
.um .um-form .um-field-area input.um-form-field[type="search"],
.um .um-form .um-field-area select.um-form-field,
.um .um-form .um-field-area textarea.um-form-field {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 46px !important;
	min-height: 46px !important;
	padding: 10px 15px !important;
	border-radius: 999px !important;
	border: 1px solid var(--otr-border-dark, #6B7280) !important;
	background: var(--otr-surface-bg, #FFFFFF) !important;
	color: var(--otr-text-primary, #1A1A1A) !important;
	font-size: var(--otr-font-size-body) !important;
	line-height: var(--otr-line-height-body) !important;
	box-shadow: none !important;
}

.um .um-form .um-field-area textarea.um-form-field {
	height: auto !important;
	min-height: 120px !important;
	border-radius: var(--otr-radius-md) !important;
}

.um .um-form .um-field-area input.um-form-field::placeholder,
.um .um-form .um-field-area textarea.um-form-field::placeholder {
	color: var(--otr-text-tertiary, #6B7280) !important;
}

.um .um-form .um-field-area input.um-form-field:active,
.um .um-form .um-field-area select.um-form-field:active,
.um .um-form .um-field-area textarea.um-form-field:active {
	border-width: 2px !important;
	border-color: var(--otr-border-very-dark, #1A1A1A) !important;
}

/* Preserve UM layout affordances (icons + password toggle) while keeping OTR visuals. */
.um .um-form .um-field-area input.um-form-field.um-iconed {
	padding-left: 44px !important;
}

.rtl .um .um-form .um-field-area input.um-form-field.um-iconed {
	padding-left: 15px !important;
	padding-right: 44px !important;
}

.um .um-form .um-field-area-password input.um-form-field {
	padding-right: 40px !important;
}

.um .um-form .um-field-area input.um-form-field:focus,
.um .um-form .um-field-area input.um-form-field:focus-visible,
.um .um-form .um-field-area select.um-form-field:focus,
.um .um-form .um-field-area select.um-form-field:focus-visible,
.um .um-form .um-field-area textarea.um-form-field:focus,
.um .um-form .um-field-area textarea.um-form-field:focus-visible {
	outline: none !important;
	border-width: 2px !important;
	border-color: var(--otr-button-secondary-focus-outline, #0066CC) !important;
	box-shadow: none !important;
}

.um .um-form .um-field-area input.um-form-field.um-error,
.um .um-form .um-field-area select.um-form-field.um-error,
.um .um-form .um-field-area textarea.um-form-field.um-error {
	border-width: 1px !important;
	border-color: var(--otr-alert-error, #EF4444) !important;
}

.um .um-field.um-error .um-field-label label,
.um .um-field.um-error .um-tip-text {
	color: var(--otr-alert-error, #EF4444) !important;
}

.um .um-field-error,
.um .um-error-block {
	margin: 10px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	width: auto !important;
	max-width: 100% !important;
	font-size: var(--otr-font-size-meta-sm) !important;
	line-height: var(--otr-line-height-meta-sm) !important;
	color: var(--otr-alert-error, #EF4444) !important;
}

.um .um-field-error a,
.um .um-error-block a {
	color: inherit !important;
	text-decoration: underline;
}

.um .um-field-arrow {
	display: none !important;
}

body.um-page-register .otr-register-intro__title {
	margin: 0;
	font-size: 20px;
	line-height: 32px;
	font-weight: var(--otr-font-weight-bold);
	color: var(--otr-text-primary);
}

body.um-page-register .otr-register-intro__body {
	margin: 0;
	font-size: var(--otr-font-size-body);
	line-height: var(--otr-line-height-body);
	font-weight: var(--otr-font-weight-regular);
	color: var(--otr-text-primary);
}

body.um-page-register .otr-register-intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body.um-page .um a.um-button, 
body.um-page .um a.um-button.um-disabled:active, 
body.um-page .um a.um-button.um-disabled:focus, 
body.um-page .um input[type=submit].um-button, 
body.um-page .um input[type=submit].um-button:focus {
	display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 15px !important;
    border-radius: var(--otr-radius-sm) !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500 !important;
    line-height: normal !important;
    color: var(--otr-button-primary-label);
	font-family: var(--otr-font-family-sans);
    background: var(--otr-button-primary-bg);
}
 
body.um-page .um input[type=submit].um-button:hover {
    background: var(--otr-button-primary-bg-hover);
    color: var(	--otr-color-neutral-500);
}
 
body.um-page .um input[type=submit].um-button:active {
    background: var(--otr-button-primary-bg-active);
    color: var(	--otr-color-neutral-500);
}

/* Register page (UM) — mobile layout tuned to Figma.
 * Scope tightly to avoid impacting other UM screens.
 */
@media (max-width: 768px) {
	body.um-page-register.separate-containers .inside-article {
		padding: 15px !important;
	}

	body.um-page-register .entry-header {
		display: none !important;
	}

	body.um-page-register .otr-register-intro {
		gap: 15px;
	}

	body.um-page-register #right-sidebar {
		display: none !important;
	}

	body.um-page-register .content-area {
		width: 100% !important;
		float: none !important;
	}

	body.um-page-register .um.um-register {
		width: 100% !important;
	}

	/* UM injects an inline max-width style; override with !important. */
	body.um-page-register .um.um-register.um-39 {
		max-width: 100% !important;
	}

	body.um-page-register .um.um-register .um-form {
		padding: 0 !important;
	}

	body.um-page-register .um.um-register .um-field {
		margin: 0 0 15px !important;
	}

	body.um-page-register .um.um-register .um-field.um-field-type_checkbox {
		margin: 0 0 8px !important;
	}

	body.um-page-register .um.um-register .um-field-type_checkbox .um-field-label {
		display: none !important;
	}

	body.um-page-register .um.um-register .um-field-type_checkbox .um-field-area label.um-field-checkbox {
		display: flex !important;
		align-items: center;
		gap: 10px;
		width: 100% !important;
		margin: 0 !important;
		position: relative;
	}

	body.um-page-register .um.um-register .um-field-type_checkbox .um-field-area label.um-field-checkbox input[type="checkbox"] {
		position: absolute;
		opacity: 0;
		width: 20px;
		height: 20px;
		right: 0;
		top: 0;
		margin: 0;
	}

	body.um-page-register .um.um-register .um-field-type_checkbox .um-field-checkbox-option {
		order: 1;
		flex: 1 1 auto;
		font-size: 14px !important;
		line-height: 1.66 !important;
		color: var(--otr-text-secondary) !important;
		margin: 0 0 0 36px;
	}

	body.um-page-register .um.um-register .um-field.um-field-checkbox {
		margin: 0 !important;
	}

	body.um-page-register .um.um-register .otr-consent__prefix {
		color: var(--otr-text-secondary);
	}

	body.um-page-register .um.um-register .otr-consent__link,
	body.um-page-register .um.um-register .otr-consent__link:visited {
		color: var(--otr-color-brand-500);
		font-weight: var(--otr-font-weight-semibold);
		text-decoration: underline;
	}

	body.um-page-register .um.um-register .um-field-type_checkbox .um-field-checkbox-state {
		order: 2;
		flex: 0 0 auto;
		margin-left: auto;
		width: 20px;
		height: 20px;
		border-radius: var(--otr-radius-xs);
		border: 1px solid var(--otr-border-dark);
		background: var(--otr-surface-bg);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	body.um-page-register .um.um-register .um-field-type_checkbox .um-field-checkbox-state i {
		display: none;
	}

	body.um-page-register .um.um-register .um-field-type_checkbox input[type="checkbox"]:focus-visible + .um-field-checkbox-state {
		outline: 2px solid var(--otr-button-primary-focus-outline);
		outline-offset: 2px;
	}

	body.um-page-register .um.um-register .um-field-type_checkbox input[type="checkbox"]:checked + .um-field-checkbox-state {
		background: var(--otr-button-primary-bg);
		border-color: var(--otr-button-primary-bg);
	}

	body.um-page-register .um.um-register .um-field-type_checkbox input[type="checkbox"]:checked + .um-field-checkbox-state::after {
		content: '';
		width: 10px;
		height: 6px;
		border-left: 2px solid var(--otr-button-primary-label);
		border-bottom: 2px solid var(--otr-button-primary-label);
		transform: rotate(-45deg);
		margin-top: -1px;
	}

	body.um-page-register .um .um-col-alt {
		padding-top: 0 !important;
		margin-top: 15px;
	}

	body.um-page-register .um .um-center {
		padding: 0 !important;
	}

	body.um-page-register .um .um-center input.um-button {
		width: 100% !important;
		height: 44px !important;
		min-height: 44px !important;
		border: 0 !important;
		border-radius: var(--otr-radius-sm) !important;
		background: var(--otr-button-primary-bg) !important;
		color: var(--otr-button-primary-label) !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		line-height: normal !important;
		box-shadow: none !important;
		padding: 12px 15px !important;
	}

	body.um-page-register .um .um-center input.um-button:hover {
		background: var(--otr-button-primary-bg-hover) !important;
	}

	body.um-page-register .um .um-center input.um-button:active {
		background: var(--otr-button-primary-bg-active) !important;
	}

	body.um-page-register .um .um-center input.um-button:focus-visible {
		outline: 2px solid var(--otr-button-primary-focus-outline) !important;
		outline-offset: 2px;
	}
}

@media (min-width: 769px) {
	body.um-page-register .um.um-register .um-field.um-field-checkbox {
		padding-top: 25px;
	}

	body.um-page-register .um.um-register .um-field.um-field-checkbox + .um-field.um-field-checkbox {
		padding-top: 0;
	}
}