/*
 * Account recovery pages (reset password + username recovery).
 *
 * This lives in an external file rather than an inline <style> block on
 * purpose. GemstoneRO runs an output filter that wraps inline block contents
 * in a bare, uncommented XML CDATA opener. The two unmatched square brackets in
 * that token make the CSS parser consume the rest of the stylesheet looking for
 * a closing bracket, so every rule in an inline block is silently dropped on
 * that site. A linked file has no content for the filter to wrap and is immune.
 *
 * Colours are declared !important because the theme's bootstrap.min.css sets
 *   button,input,optgroup,select,textarea { ... color: black !important }
 * which otherwise beats even inline style attributes and renders form text
 * black on these dark panels. The !important here is scoped to .ur-* classes
 * so every other form on the site keeps its existing styling.
 */

.ur-pagetabs { display: flex; gap: 8px; margin: 0 0 28px; border-bottom: 2px solid #2a2a2a; }
.ur-ptab {
	flex: 1;
	text-align: center;
	padding: 14px 10px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	color: #909090 !important;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: all .2s;
	letter-spacing: .3px;
}
.ur-ptab:hover { color: #e0e0e0 !important; background: #1e1e1e; text-decoration: none; }
.ur-ptab.active { color: #a67cff !important; border-bottom-color: #a67cff; background: #1e1e1e; }

.ur-tabs { display: flex; margin-bottom: 25px; border: 1px solid #2a2a2a; border-radius: 8px; overflow: hidden; }
.ur-tab {
	flex: 1;
	background: #121212;
	color: #b0b0b0 !important;
	border: none;
	padding: 14px 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all .25s;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.ur-tab:hover { color: #ffffff !important; background: #252525; }
.ur-tab.active { background: linear-gradient(135deg, #a67cff 0%, #9f42fa 100%); color: #ffffff !important; }
.ur-tab + .ur-tab { border-left: 1px solid #2a2a2a; }

.ur-pane { display: none; }
.ur-pane.active { display: block; }

.ur-label {
	display: block;
	color: #a67cff !important;
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.ur-input {
	width: 100%;
	padding: 14px 16px;
	background: #121212 !important;
	background-color: #121212 !important;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff;
	font-size: 16px;
	box-sizing: border-box;
	font-family: inherit;
}
.ur-input:focus { outline: none; border-color: #a67cff; }
.ur-input::placeholder { color: #707070 !important; opacity: 1; }

/*
 * Chrome paints autofilled fields with its own near-white background and
 * ignores "background-color", which left light text sitting on white and
 * unreadable. The background cannot be overridden directly, so it is covered
 * with a large inset box-shadow, and the text colour is set through
 * -webkit-text-fill-color, which is the property Chrome actually honours on an
 * autofilled field. The long transition stops the white flash from returning.
 */
.ur-input:-webkit-autofill,
.ur-input:-webkit-autofill:hover,
.ur-input:-webkit-autofill:focus,
.ur-input:-webkit-autofill:active,
.ur-input:autofill {
	-webkit-text-fill-color: #ffffff !important;
	color: #ffffff !important;
	-webkit-box-shadow: 0 0 0 1000px #121212 inset !important;
	box-shadow: 0 0 0 1000px #121212 inset !important;
	background-color: #121212 !important;
	background-image: none !important;
	caret-color: #ffffff;
	filter: none !important;
	transition: background-color 9999s ease-in-out 0s;
}

.ur-hint { color: #808080; font-size: 13px; margin-top: 8px; line-height: 1.5; }

.ur-submit {
	background: linear-gradient(135deg, #a67cff 0%, #9f42fa 100%);
	color: #ffffff !important;
	padding: 16px 40px;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(166, 124, 255, .3);
}
.ur-submit:hover { filter: brightness(1.1); }

.ur-err {
	background: linear-gradient(135deg, #4a1515 0%, #2d0a0a 100%);
	border: 1px solid #dc3545;
	color: #ff6b6b;
	padding: 15px 20px;
	border-radius: 8px;
	margin-bottom: 25px;
}
.ur-ok {
	background: linear-gradient(135deg, #12401f 0%, #0a2412 100%);
	border: 1px solid #28a745;
	color: #5ddb85;
	padding: 15px 20px;
	border-radius: 8px;
	margin-bottom: 25px;
}