/**
 * Auth login UI — visual parity with dp frontend-2/css/login.css
 * (Microsoft / Feedback / Support / mobile radios intentionally omitted).
 */
html, body {
	margin: 0;
	padding: 0;
	background: #fff;
	color: #333;
}

/* DP-style full-page loader — hidden by default */
.loader_animation {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.55);
}

.loader_animation.is-visible {
	display: flex;
}

.loader_animation .spinnerspin {
	width: 48px;
	height: 48px;
	border: 4px solid #f0d0d0;
	border-top-color: #f85050;
	border-radius: 50%;
	animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
	to { transform: rotate(360deg); }
}

.dp-login-page {
	min-height: 100dvh;
	background: #fff;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #333;
}

.dp-login-page .site_brand {
	text-align: center;
	padding-top: 50px;
}

.dp-login-page .site_brand h1 {
	font-weight: normal;
	font-size: 22px;
	color: #222;
	margin: 0;
}

.dp-login-page .site_brand a {
	color: var(--sg-accent);
	text-decoration: none;
	font-size: 27px;
	font-weight: 300;
}

.dp-login-page .site_brand_sub {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 400;
	color: #666;
	letter-spacing: 0.01em;
}

.dp-login-page .login-content {
	border: 1px solid #f85050;
	border-radius: 7px;
	width: 400px;
	max-width: calc(100vw - 32px);
	margin: 40px auto 30px auto;
	padding: 10px 30px 0 30px;
	overflow: visible;
	position: relative;
	background: #fff;
	box-sizing: border-box;
}

.dp-login-page .form-title {
	color: #000;
	text-align: center;
	font-size: 28px;
	font-weight: 300 !important;
	margin: 16px 0 20px;
}

.dp-login-page .alert-danger {
	background: #f2dede;
	border: 1px solid #ebccd1;
	color: #a94442;
	padding: 10px 14px;
	border-radius: 4px;
	margin-bottom: 14px;
	font-size: 13px;
}

.dp-login-page .alert-success {
	background: #dff0d8;
	border: 1px solid #d6e9c6;
	color: #3c763d;
	padding: 10px 14px;
	border-radius: 4px;
	margin-bottom: 14px;
	font-size: 13px;
}

.dp-login-page .forgot-success-box p {
	margin: 0 0 10px;
	line-height: 1.5;
}

/* Metronic-style buttons (dp login.php) */
.dp-login-page .btn {
	display: inline-block;
	margin-bottom: 0;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	white-space: nowrap;
	/* Matches .form-control: same 14px text and the same 43px box, so a button
	   and an input sitting together are the same height and radius. */
	padding: 10px 16px;
	font-size: 14px;
	line-height: 1.44;
	border-radius: 10px !important;
	text-decoration: none !important;
	color: #333;
	background-color: #ededed;
	font-family: inherit;
}

.dp-login-page .btn:hover {
	background-color: #e0e0e0;
	color: #000;
}

.dp-login-page .btn.blue,
.dp-login-page .btn.blue:focus,
.dp-login-page .blue.btn,
.dp-login-page .blue.btn:focus {
	color: #fff !important;
	background-color: #4B8DF8;
	border-color: #4B8DF8;
}

.dp-login-page .btn.blue:hover,
.dp-login-page .blue.btn:hover {
	background-color: #2977f7;
	border-color: #2977f7;
	color: #fff !important;
}

.dp-login-page .btn.blue:active,
.dp-login-page .blue.btn:active {
	background-color: #1068f6;
	border-color: #1068f6;
	color: #fff !important;
}

.dp-login-page .btn.red,
.dp-login-page .btn.red:focus {
	color: #fff !important;
	background-color: #f85050;
	border-color: #f85050;
}

.dp-login-page .btn.red:hover {
	background-color: #d63c3c;
	border-color: #d63c3c;
	color: #fff !important;
}

.dp-login-page .btn > .fa {
	margin-right: 4px;
}

.dp-login-page .btn-block {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.dp-login-page .pull-right {
	float: right;
}

/*
 * bootstrap-social Google button (dp).
 * Higher specificity so Metronic .btn padding does not crush the left icon gutter.
 */
.dp-login-page a.btn.btn-social {
	display: block;
	width: 100%;
	position: relative;
	padding: 10px 15px 10px 44px !important;
	border: 1px solid rgba(0, 0, 0, 0.2) !important;
	border-radius: 10px !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.42857;
	text-align: left;
	text-decoration: none !important;
	margin: 0 0 15px 0;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-image: none;
}

.dp-login-page a.btn.btn-social > .fa:first-child {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 32px;
	line-height: 36px;
	font-size: 1.6em;
	text-align: center;
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	margin-right: 0;
}

.dp-login-page a.btn.btn-social.btn-google {
	background-color: #dd4b39 !important;
	border-color: rgba(0, 0, 0, 0.2) !important;
}

.dp-login-page a.btn.btn-social.btn-google:hover,
.dp-login-page a.btn.btn-social.btn-google:focus {
	background-color: #c23321 !important;
	color: #fff !important;
}

.dp-login-page .form-group {
	margin-bottom: 14px;
}

.dp-login-page .form-group.has-error .form-control {
	border-color: #dca7b0 !important;
	background-color: #fee9ea !important;
}

.dp-login-page .form-group.has-error .input-group-addon {
	border-color: #dca7b0 !important;
	background-color: #fee9ea !important;
	color: #a94442;
}

.dp-login-page .help-block {
	display: block;
	color: #a94442;
	font-size: 13px;
	font-weight: 700;
	margin-top: 4px;
	line-height: 17px;
}

.dp-login-page .help-block:empty {
	display: none;
}

.dp-login-page .form-actions-plain {
	border-bottom: none !important;
	padding-bottom: 22px;
}

/* Same, but closing a step rather than a form — replaces the inline
   "border-bottom:0; padding-bottom:10px" that was repeated in the markup. */
.dp-login-page .form-actions-tight {
	border-bottom: none !important;
	padding-bottom: 10px;
}

.dp-login-page .btn.default,
.dp-login-page .btn.default:focus {
	color: #333 !important;
	background-color: #e5e5e5;
	border-color: #e5e5e5;
}

.dp-login-page .btn.default:hover {
	background-color: #d8d8d8;
	border-color: #d8d8d8;
	color: #000 !important;
}

.dp-login-page .reset-form .form-group {
	margin-bottom: 16px;
}

.dp-login-page .control-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #000;
	margin-bottom: 4px;
}

.dp-login-page .required {
	color: #e02222;
}

.dp-login-page .form-control {
	display: block;
	width: 100%;
	height: 43px;
	padding: 6px 12px;
	font-size: 14px;
	color: #000;
	background: #fff;
	border: 1px solid #c3c3c3;
	border-radius: 10px;
	box-sizing: border-box;
	font-family: inherit;
}

.dp-login-page .form-control:focus {
	outline: none;
	border-color: #c3ccda;
}

.dp-login-page .input-group {
	display: flex;
	align-items: stretch;
}

/* The field and its show/hide addon are one rounded box, not two. */
.dp-login-page .input-group .form-control {
	border-right: none;
	border-radius: 10px 0 0 10px;
	flex: 1;
}

.dp-login-page .input-group-addon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	border: 1px solid #c3c3c3;
	border-left: none;
	border-radius: 0 10px 10px 0;
	background: transparent;
	cursor: pointer;
	color: #555;
	font-size: 16px;
	user-select: none;
}

.dp-login-page .recaptcha-wrapper {
	margin: 8px 0 16px;
	overflow: visible !important;
	min-height: 78px;
	position: relative;
	z-index: 5;
}

/* Do not force-show every iframe — Google injects a hidden challenge frame
   that must stay hidden until needed (otherwise an empty bordered box appears). */
.dp-login-page .recaptcha-wrapper iframe {
	max-width: none !important;
}

.dp-login-page .form-actions {
	clear: both;
	border-bottom: 1px solid #eee;
	padding: 0 30px 22px 30px;
	margin-left: -30px;
	margin-right: -30px;
	overflow: hidden;
}

.dp-login-page .form-actions .row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}

.dp-login-page .col-actions-left,
.dp-login-page .col-actions-right {
	flex: 1 1 140px;
}

.dp-login-page .col-actions-right {
	text-align: right;
}

.dp-login-page .rememberme {
	color: #000;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	cursor: pointer;
}

.dp-login-page .forget-password {
	font-size: 14px;
	color: var(--sg-accent);
	text-decoration: none;
	font-weight: 600;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.dp-login-page .forget-password:hover {
	text-decoration: underline;
	color: var(--sg-accent-hover);
}

.dp-login-page .create-account {
	margin: 8px -30px 0 -30px;
	padding: 12px 0 15px 0;
	text-align: center;
	background-color: #f85050;
	border-radius: 0 0 6px 6px;
}

.dp-login-page .create-account p {
	margin: 0;
}

.dp-login-page .create-account a {
	display: inline-block;
	font-weight: 600;
	font-size: 14px;
	color: #fff !important;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.dp-login-page .create-account a:hover {
	opacity: 0.92;
}

.dp-login-page .hint {
	color: var(--sg-accent);
	font-size: 18px;
	margin: 10px 0;
}

.dp-login-page .verify-box {
	margin: 10px 0 16px;
	padding: 12px;
	border: 1px solid #eee;
	background: #fafafa;
}

.dp-login-page .hidden {
	display: none !important;
}

.dp-login-page select.form-control {
	appearance: auto;
}

.dp-login-page .tnc-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	margin: 12px 0;
}

.dp-login-page .tnc-row a {
	color: #4B8DF8;
}

.dp-login-page .copyright {
	text-align: center;
	margin: 0 auto 30px;
	padding: 10px;
	color: #7a8ca5;
	font-size: 13px;
}

@media (max-width: 440px) {
	.dp-login-page .site_brand {
		padding-top: 20px;
	}
	.dp-login-page .login-content {
		width: 280px;
		margin-top: 16px;
		padding: 10px 20px 0;
	}
	.dp-login-page .form-title {
		font-size: 22px;
	}
	.dp-login-page .form-actions {
		padding-left: 20px;
		padding-right: 20px;
		margin-left: -20px;
		margin-right: -20px;
	}
	.dp-login-page .create-account {
		margin-left: -20px;
		margin-right: -20px;
	}
	.dp-login-page .form-actions .row {
		flex-direction: column;
	}
	/* Stacked, the 140px flex-basis becomes a HEIGHT and padded each column out
	   to 140px — leaving ~80px of dead space under a 43px button. Size to
	   content instead. */
	.dp-login-page .col-actions-left,
	.dp-login-page .col-actions-right {
		flex: 0 0 auto;
	}
	.dp-login-page .col-actions-right {
		text-align: left;
	}
	.dp-login-page .pull-right {
		float: none;
		margin-top: 8px;
	}
}

/* ============================================================================
 * Sacred re-theme — bring the sign-in / sign-up screens into the app's warm
 * maroon-and-gold identity (was Metronic blue/red), so a first-time devotee
 * meets one continuous, trusted place. Theme-aware: honours a dark OS setting.
 * Appended last so these win over the dp defaults above.
 * ========================================================================== */
:root, .dp-login-page {
	color-scheme: light;
	--sg-bg: #fdfbf7;
	--sg-ink: #241c17;
	--sg-ink-2: #5a4e44;
	--sg-ink-3: #857868;
	--sg-surface: #ffffff;
	--sg-surface-2: #f4eee3;
	--sg-line: #e6ddce;
	--sg-accent: #c02e2e;
	--sg-accent-hover: #a82626;
	--sg-accent-wash: #fbeae6;
	--sg-accent-line: #f0c9c4;
	--sg-gold: #83610f;
	--sg-on-accent: #ffffff;
	--sg-accent-solid: #c02e2e;
	--sg-accent-solid-hover: #a82626;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]), :root:not([data-theme="light"]) .dp-login-page {
		color-scheme: dark;
		--sg-bg: #171310;
		--sg-ink: #f1e9dd;
		--sg-ink-2: #c4b6a5;
		--sg-ink-3: #948676;
		--sg-surface: #201a16;
		--sg-surface-2: #2a231d;
		--sg-line: #3a2f27;
		--sg-accent: #e88a80;
		--sg-accent-hover: #f0a096;
		--sg-accent-wash: #33201d;
		--sg-accent-line: #5c322d;
		--sg-gold: #d6a94e;
		--sg-on-accent: #ffffff;
		--sg-accent-solid: #c02e2e;
		--sg-accent-solid-hover: #d63c3c;
	}
}
/* The in-app theme choice (documentElement[data-theme], stored by theme.js)
   wins over the OS setting — same rule the main app follows. */
:root[data-theme="dark"], :root[data-theme="dark"] .dp-login-page {
	color-scheme: dark;
	--sg-bg: #171310;
	--sg-ink: #f1e9dd;
	--sg-ink-2: #c4b6a5;
	--sg-ink-3: #948676;
	--sg-surface: #201a16;
	--sg-surface-2: #2a231d;
	--sg-line: #3a2f27;
	--sg-accent: #e88a80;
	--sg-accent-hover: #f0a096;
	--sg-accent-wash: #33201d;
	--sg-accent-line: #5c322d;
	--sg-gold: #d6a94e;
	--sg-on-accent: #ffffff;
	--sg-accent-solid: #c02e2e;
	--sg-accent-solid-hover: #d63c3c;
}

html, body, .dp-login-page { background: var(--sg-bg); color: var(--sg-ink); }

/* Brand wordmark + sub */
.dp-login-page .site_brand h1 { color: var(--sg-ink); font-family: Georgia, "Times New Roman", serif; }
.dp-login-page .site_brand a { color: var(--sg-accent); }
.dp-login-page .site_brand_sub { color: var(--sg-ink-3); }

/* The card — warm border, soft shadow, gentler radius */
.dp-login-page .login-content {
	border: 1px solid var(--sg-accent-line);
	border-radius: 16px;
	background: var(--sg-surface);
	box-shadow: 0 1px 2px rgba(36,28,23,.04), 0 10px 30px rgba(36,28,23,.07);
}
.dp-login-page .form-title { color: var(--sg-ink); font-family: Georgia, "Times New Roman", serif; }

/* Section hints (Account Details / Personal Details) → gold, smaller */
.dp-login-page .hint { color: var(--sg-gold); font-size: 15px; font-weight: 600; }
.dp-login-page .hint-reassure { color: var(--sg-ink-3); font-size: 13px; font-weight: 400; margin-top: -4px; }

/* Labels + fields */
.dp-login-page .control-label { color: var(--sg-ink-2); }
.dp-login-page .form-control {
	background: var(--sg-surface); color: var(--sg-ink);
	border: 1px solid var(--sg-line); border-radius: 10px;
}
.dp-login-page .form-control:focus {
	border-color: var(--sg-accent);
	box-shadow: 0 0 0 3px var(--sg-accent-wash);
	outline: none;
}
.dp-login-page .form-control::placeholder { color: var(--sg-ink-3); }
.dp-login-page .input-group-addon { background: var(--sg-surface); border-color: var(--sg-line); color: var(--sg-ink-3); border-radius: 0 10px 10px 0; }

/* Buttons — rounded, sacred */
.dp-login-page .btn {
	border-radius: 10px !important;
	/* 21 + 20 padding + 2 border = 43px, the exact height of .form-control,
	   so a button and a field side by side line up. */
	padding: 10px 16px;
	line-height: 1.5;
}
.dp-login-page .btn.blue,
.dp-login-page .btn.blue:focus,
.dp-login-page .blue.btn,
.dp-login-page .blue.btn:focus {
	background-color: var(--sg-accent-solid) !important; border-color: var(--sg-accent-solid) !important; color: var(--sg-on-accent) !important;
}
.dp-login-page .btn.blue:hover, .dp-login-page .blue.btn:hover,
.dp-login-page .btn.blue:active, .dp-login-page .blue.btn:active {
	background-color: var(--sg-accent-solid-hover) !important; border-color: var(--sg-accent-solid-hover) !important; color: var(--sg-on-accent) !important;
}
/* Secondary (e.g. "Send new code") → soft ghost, not a second red */
.dp-login-page .btn.red, .dp-login-page .btn.red:focus {
	background-color: var(--sg-surface-2) !important; border-color: var(--sg-line) !important; color: var(--sg-ink-2) !important;
}
.dp-login-page .btn.red:hover {
	background-color: var(--sg-accent-wash) !important; border-color: var(--sg-accent-line) !important; color: var(--sg-accent) !important;
}
/* Neutral default / "Back" */
.dp-login-page .btn { color: var(--sg-ink-2); background-color: var(--sg-surface-2); }
.dp-login-page .btn:hover { background-color: var(--sg-accent-wash); color: var(--sg-accent); }

/* The "Create an account" bar at the card foot → maroon, rounded to card */
.dp-login-page .create-account { background-color: var(--sg-accent-solid); border-radius: 0 0 15px 15px; }

.dp-login-page .create-account, .dp-login-page .create-account a, .dp-login-page .create-account .btn { color: var(--sg-on-accent) !important; }
.dp-login-page .rememberme { color: var(--sg-ink-2); }
.dp-login-page input[type="checkbox"] { accent-color: var(--sg-accent); }

/* Messages retinted */
.dp-login-page .alert-danger { background: var(--sg-accent-wash); border-color: var(--sg-accent-line); color: var(--sg-accent); }
.dp-login-page .help-block, .dp-login-page .forgot-spam-note { color: var(--sg-accent); }
.dp-login-page .form-group.has-error .form-control { border-color: var(--sg-accent-line) !important; background-color: var(--sg-accent-wash) !important; }

/* Copyright + loader */
.dp-login-page .copyright { color: var(--sg-ink-3); }
.dp-login-page .copyright a { color: var(--sg-ink-2); }
.loader_animation { background: color-mix(in srgb, var(--sg-bg) 70%, transparent); }
.loader_animation .spinnerspin { border-color: var(--sg-accent-line); border-top-color: var(--sg-accent); }

/* Language switcher (dark-aware) */
.auth-lang-details > summary { background: var(--sg-surface) !important; border-color: var(--sg-line) !important; color: var(--sg-ink-2) !important; }
.auth-lang-details > summary:hover { color: var(--sg-ink) !important; border-color: var(--sg-accent-line) !important; }
.auth-lang-menu { background: var(--sg-surface) !important; border-color: var(--sg-line) !important; }

/* ============================================================================
   Signed-out header — wordmark home, language, light/dark. Theme-aware via the
   --sg-* tokens above, so it follows the same palette as the card below.
   ========================================================================== */
.dp-login-page .dp-auth-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--sg-line);
}

.dp-login-page .dp-auth-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.dp-login-page .dp-auth-brand img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.dp-login-page .dp-auth-brand span {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: 600;
	color: var(--sg-ink);
}

.dp-login-page .dp-auth-brand em { font-style: normal; color: var(--sg-accent); }
.dp-login-page .dp-auth-brand:hover { opacity: 0.85; }

.dp-login-page .dp-auth-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Square to match the language pill's height, so the pair reads as one group. */
.dp-login-page .dp-auth-theme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	cursor: pointer;
	color: var(--sg-ink-3);
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	border-radius: 999px;
}

.dp-login-page .dp-auth-theme:hover { color: var(--sg-ink); border-color: var(--sg-ink-3); }

/* Language switcher. Opens DOWNWARD now that it sits in the header. */
.dp-login-page .auth-lang-details { display: inline-block; position: relative; }

.dp-login-page .auth-lang-details > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	font-size: 13px;
	color: var(--sg-ink-3);
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	border-radius: 999px;
	box-sizing: border-box;
}

.dp-login-page .auth-lang-details > summary::-webkit-details-marker { display: none; }
.dp-login-page .auth-lang-details > summary:hover { color: var(--sg-ink); border-color: var(--sg-ink-3); }
.dp-login-page .auth-lang-globe { line-height: 1; }

.dp-login-page .auth-lang-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 150px;
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	border-radius: 10px;
	padding: 5px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	z-index: 50;
}

.dp-login-page .auth-lang-menu a {
	display: block;
	padding: 7px 12px;
	font-size: 13px;
	color: var(--sg-ink-2);
	text-decoration: none;
	border-radius: 7px;
}

.dp-login-page .auth-lang-menu a:hover { background: var(--sg-surface-2); }

.dp-login-page .auth-lang-menu a.active {
	background: var(--sg-accent-wash);
	color: var(--sg-accent);
	font-weight: 600;
}