/*
 * Ultimate Member login/register form styling.
 *
 * Scoped entirely to Ultimate Member's own class names (.um, .um-form,
 * .um-field, .um-error, etc.) - these are UM's public, stable markup hooks
 * used across every UM form, not internal implementation detail, so a
 * plugin update is very unlikely to rename them. Nothing here edits or
 * replaces a UM plugin/template file, and this stylesheet is only enqueued
 * on the site's UM pages (see custom_enqueue_scripts() in functions.php),
 * so updating Ultimate Member should not affect this styling.
 *
 * Loaded after UM's own CSS (custom_enqueue_scripts runs at priority 999,
 * well after UM registers its styles), so these rules win the cascade
 * without needing !important everywhere - only used where UM's own CSS
 * already uses !important on the same property (e.g. .um-error borders).
 */

/* ---------------- Card wrapper ---------------- */
.um {
	max-width: 640px;
	margin: 0 auto 40px;
	padding: 32px 36px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
}
@media (max-width: 680px) {
	.um {
		padding: 22px 18px;
		border-radius: 6px;
	}
}

/* ---------------- Field spacing ---------------- */
.um-field {
	margin-bottom: 20px;
}
.um-field-area {
	position: relative;
}
/* A field with a stacked second input (e.g. address line 2) - give it
   breathing room instead of sitting flush under the first input. */
.um-field-area > input + input,
.um-field-area > select + select {
	margin-top: 8px;
}

/* ---------------- Labels ---------------- */
.um-field-label {
	font-weight: 600;
	font-size: 14px;
	color: #1a1a1a;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.um-req {
	color: #ED1B24;
}
/* Help tooltip icon - previously floated on its own line below the label
   with no alignment; keep it inline with the label text instead. */
.um-field-label .um-icon-help-circled {
	font-size: 15px;
	color: #9a9a9a;
	cursor: help;
}
.um-field-label .um-icon-help-circled:hover {
	color: #ED1B24;
}

/* ---------------- Inputs / selects / textareas ---------------- */
.um-form-field,
.um-field select,
.um-field textarea {
	height: 46px;
	padding: 0 14px;
	border: 1px solid #d6d6d6 !important;
	border-radius: 6px !important;
	font-size: 14px;
	color: #1a1a1a;
	background: #fff;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}
.um-field textarea {
	height: auto;
	padding: 12px 14px;
}
.um-form-field:focus,
.um-field select:focus,
.um-field textarea:focus {
	border-color: #ED1B24 !important;
	box-shadow: 0 0 0 3px rgba(237, 27, 36, 0.12) !important;
	outline: none;
}
.um-form-field::placeholder {
	color: #a8a8a8;
}

/* Password visibility toggle - make sure the icon never overlaps typed text */
.um-field-area-password .um-form-field {
	padding-right: 42px;
}
.um-toggle-password {
	color: #9a9a9a;
}
.um-toggle-password:hover {
	color: #ED1B24;
}

/* ---------------- Section dividers (Billing Address / Shipping Address) ---------------- */
.um-field-divider {
	margin: 32px 0 22px;
	border-top: 2px solid #f1f1f1;
	position: relative;
}
.um-field-divider-text {
	background: #fff;
	padding-right: 12px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ED1B24;
	position: relative;
	top: -10px;
}

/* ---------------- Buttons ---------------- */
.um-button,
#um-submit-btn {
	background-color: #ED1B24 !important;
	border: none !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	height: 48px;
	border-radius: 6px !important;
	transition: background-color 0.15s ease;
	cursor: pointer;
}
.um-button:hover,
#um-submit-btn:hover {
	background-color: #c9151d !important;
}
/* Secondary/alt button - e.g. the "Register" link shown under the login form */
.um-button.um-alt {
	background: #fff !important;
	border: 1px solid #ED1B24 !important;
	color: #ED1B24 !important;
}
.um-button.um-alt:hover {
	background: #fdeceb !important;
}
.um-link-alt {
	color: #ED1B24;
}
.um-link-alt:hover {
	text-decoration: underline;
}

/* ---------------- Validation errors ---------------- */
/* UM's own error classes/logic are untouched - only made more visible. */
.um-form input.um-error,
.um-form select.um-error,
.um-form textarea.um-error {
	border-color: #C74A4A !important;
	background: #fff6f6;
}
.um-error-block {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.4 !important;
}
.um-error-block::before {
	content: "!";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
}