/* ══════════════════════════════════════
   ULTIMATE MEMBER — Theme Integration
   Styles login, register, and account pages.
   Uses high-specificity selectors to override
   UM's aggressive inline/plugin styles.
══════════════════════════════════════ */

/* ── Page wrapper ── */
.um {
	max-width: 480px !important;
	margin: 48px auto 80px !important;
	padding: 40px 36px !important;
	background: var(--surface) !important;
	border: 1px solid var(--border-hi) !important;
	border-radius: var(--r-xl) !important;
	box-shadow: var(--shadow-card) !important;
	transition: background .35s, border-color .35s, box-shadow .35s;
}

/* ── Page-level title (Register / Login heading above the form) ── */
.um-page-head h2,
.entry-content > h2:first-child,
.site-main h2.um-page-head {
	font-family: var(--font-d) !important;
	font-size: clamp(30px, 4vw, 42px) !important;
	font-weight: 300 !important;
	color: var(--t1) !important;
	letter-spacing: -.02em;
	margin: 0 0 28px !important;
	padding: 0 !important;
	transition: color .35s;
}

/* ── Form headings ── */
.um .um-form h2,
.um .um-login h2,
.um .um-register h2,
.um h3.um-name {
	font-family: var(--font-d) !important;
	font-size: clamp(30px, 4vw, 42px) !important;
	font-weight: 300 !important;
	color: var(--t1) !important;
	letter-spacing: -.02em;
	margin-bottom: 28px !important;
	transition: color .35s;
}

/* ── Labels ── */
.um .um-field-label,
.um label.um-field-label,
.um .um-field .um-field-label {
	font-family: var(--font-b) !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--ocean) !important;
	margin-bottom: 8px !important;
	transition: color .35s;
}

/* ── Inputs — override UM defaults in both modes ── */
.um .um-form input[type="text"],
.um .um-form input[type="password"],
.um .um-form input[type="email"],
.um .um-form input[type="url"],
.um .um-form input[type="tel"],
.um .um-form input[type="number"],
.um .um-form textarea,
.um .um-form select,
.um input.um-form-field,
.um .um-field-area input,
.um .um-field-area textarea,
.um .um-field-area select {
	width: 100% !important;
	box-sizing: border-box !important;
	background: var(--surface2) !important;
	border: 1.5px solid var(--border-hi) !important;
	border-radius: var(--r) !important;
	padding: 14px 18px !important;
	font-family: var(--font-b) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--t1) !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	transition: border-color .2s, box-shadow .2s, background .35s, color .35s;
}
.um .um-form input:focus,
.um .um-form textarea:focus,
.um .um-form select:focus,
.um .um-field-area input:focus,
.um .um-field-area textarea:focus {
	border-color: var(--ocean-bdr) !important;
	box-shadow: 0 0 0 3px var(--ocean-dim) !important;
	background: var(--surface) !important;
}
.um .um-form input::placeholder,
.um .um-form textarea::placeholder {
	color: var(--t3) !important;
	font-style: italic !important;
}

/* ── Primary button (Login / Register submit) ── */
.um .um-form input[type="submit"],
.um .um-form button[type="submit"],
.um input.um-button,
.um .um-button.um-alt,
.um .um-col-alt input.um-button {
	display: block !important;
	width: 100% !important;
	padding: 14px 28px !important;
	background: var(--gold) !important;
	color: var(--btn-text) !important;
	font-family: var(--font-b) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: var(--r) !important;
	cursor: pointer !important;
	box-shadow: 0 4px 16px var(--shadow-btn) !important;
	transition: transform .22s var(--spring), box-shadow .22s, background .35s, color .35s;
}
.um .um-form input[type="submit"]:hover,
.um .um-form button[type="submit"]:hover,
.um input.um-button:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 24px var(--shadow-btn) !important;
	background: var(--gold-lt) !important;
}

/* ── Secondary / ghost buttons (Register link button) ── */
.um .um-col-alt input[type="submit"],
.um a.um-button,
.um .um-button:not(.um-alt) {
	background: transparent !important;
	color: var(--gold) !important;
	border: 1px solid var(--gold-bdr) !important;
	box-shadow: none !important;
}
.um .um-col-alt input[type="submit"]:hover,
.um a.um-button:hover {
	background: var(--gold-dim) !important;
	border-color: var(--gold) !important;
	color: var(--gold-lt) !important;
}

/* ── Button row (login + register side by side) ── */
.um .um-col-alt-b {
	display: flex !important;
	gap: 12px !important;
	margin-top: 8px !important;
}
.um .um-col-alt-b .um-left,
.um .um-col-alt-b .um-right {
	flex: 1 !important;
}

/* ── Checkbox ── */
.um .um-form .um-field-checkbox label,
.um .um-remember label,
.um .um-misc-form-field label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--t2) !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
}
.um .um-form input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	border: 1.5px solid var(--border-hi) !important;
	border-radius: 4px !important;
	background: var(--surface2) !important;
	accent-color: var(--ocean) !important;
}

/* ── Links ── */
.um a,
.um .um-link,
.um .um-forgot-pass-link a,
.um .um-register-link a {
	color: var(--gold) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	transition: color .2s;
}
.um a:hover,
.um .um-link:hover {
	color: var(--gold-lt) !important;
}

/* ── Error / notice messages ── */
.um .um-form .um-notice,
.um .um-error-message {
	background: rgba(194,86,86,0.08) !important;
	border: 1px solid rgba(194,86,86,0.22) !important;
	border-radius: var(--r) !important;
	padding: 12px 16px !important;
	color: #c25656 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	margin-bottom: 18px !important;
}
.um .um-notice-success {
	background: var(--ocean-dim) !important;
	border-color: var(--ocean-bdr) !important;
	color: var(--ocean) !important;
}

/* ── Field spacing ── */
.um .um-field {
	margin-bottom: 20px !important;
}
.um .um-field-area {
	background: transparent !important;
}

/* ── Password field eye toggle (UM adds this) ── */
.um .um-field-password-view {
	color: var(--t3) !important;
}
.um .um-field-password-view:hover {
	color: var(--t1) !important;
}

/* ── Account page tabs ── */
.um .um-account-nav a {
	color: var(--t3) !important;
	font-family: var(--font-b) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	padding: 10px 18px !important;
	border-radius: var(--r) !important;
	transition: color .2s, background .2s;
}
.um .um-account-nav a:hover,
.um .um-account-nav .um-account-tab-active a {
	color: var(--t1) !important;
	background: var(--surface2) !important;
}

/* ── Profile header ── */
.um .um-profile-header {
	background: var(--surface2) !important;
	border-radius: var(--r-lg) !important;
	border: 1px solid var(--border) !important;
	transition: background .35s, border-color .35s;
}

/* ── UM icon colors ── */
.um .um-tip,
.um .um-field-icon {
	color: var(--t3) !important;
}

/* ── Remove UM default box-shadows ── */
.um .um-form .um-row,
.um .um-form .um-col-1 {
	background: transparent !important;
	box-shadow: none !important;
}

/* ── Responsive ── */
@media (max-width: 580px) {
	.um {
		margin: 24px 16px 60px !important;
		padding: 28px 22px !important;
		border-radius: var(--r-lg) !important;
	}
	.um .um-col-alt-b {
		flex-direction: column !important;
	}
}