/* ============================================================
   DS Client Portal – Login Page  v2.1
   Dark gradient background · Centered Apple-style form
   digitalstarter. - Online Marketing
   ============================================================ */

:root {
	--ds-primary: #5B4BF5;
}

/* ── Background & layout ──────────────────────────────────── */
body.ds-cp-login,
body.login {
	position: relative;
	min-height: 100vh;
	margin: 0 !important;
	padding: 60px 20px 80px !important;
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

	/* Dark gradient from custom-login-layout */
	background:
		radial-gradient(circle at 0% 100%, rgba(96, 105, 235, 0.25), transparent 55%),
		linear-gradient(to top, #6069EB 0%, #020617 42%, #020617 100%) !important;

	/* Center everything */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ── Login container ── */
body.ds-cp-login #login,
body.login #login {
	width: 100% !important;
	max-width: 420px !important;
	padding: 0 !important;
	margin: 0 auto !important;
	background: transparent !important;
}

/* ── Hide default WP logo link ── */
body.ds-cp-login #login h1 a {
	display: none !important;
}

/* ── Brand block (logo + site name) ── */
#ds-login-brand {
	text-align: center;
	margin-bottom: 32px;
	width: 100%;
	max-width: 420px;
}

.ds-login-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

/* White frosted backdrop — keeps dark logos visible on the dark gradient */
.ds-login-logo-backdrop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 16px;
	padding: 12px 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	min-width: 60px;
	min-height: 60px;
}

.ds-login-logo-img {
	max-height: 48px;
	max-width: 180px;
	object-fit: contain;
	display: block;
}

.ds-login-site {
	font-size: 15px;
	font-weight: 600;
	color: rgba(226, 232, 240, 0.9);
	margin: 0;
}

/* ── Login / Lost-password card ── */
body.ds-cp-login #loginform,
body.ds-cp-login #lostpasswordform,
body.ds-cp-login #resetpassform,
body.login #loginform,
body.login #lostpasswordform,
body.login #resetpassform {
	background: #ffffff !important;
	border: 1px solid #E4E8F2 !important;
	border-radius: 18px !important;
	padding: 36px !important;
	box-shadow: 0 22px 65px rgba(15, 23, 42, 0.45), 0 1px 4px rgba(26, 31, 54, .05) !important;
	margin: 0 !important;
}

/* Form headings via CSS — no extra PHP needed */
body.ds-cp-login #loginform::before,
body.login #loginform::before {
	content: 'Anmelden';
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: #1A1F36;
	letter-spacing: -.4px;
	margin-bottom: 24px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.ds-cp-login #lostpasswordform::before,
body.login #lostpasswordform::before {
	content: 'Passwort zurücksetzen';
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: #1A1F36;
	letter-spacing: -.4px;
	margin-bottom: 24px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.ds-cp-login #resetpassform::before,
body.login #resetpassform::before {
	content: 'Neues Passwort';
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: #1A1F36;
	letter-spacing: -.4px;
	margin-bottom: 24px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Labels ── */
body.ds-cp-login #loginform label,
body.ds-cp-login #lostpasswordform label,
body.ds-cp-login #resetpassform label,
body.login #loginform label,
body.login #lostpasswordform label,
body.login #resetpassform label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #1A1F36 !important;
	margin-bottom: 5px !important;
	display: block !important;
}

/* ── Inputs ── */
body.ds-cp-login #loginform input[type="text"],
body.ds-cp-login #loginform input[type="password"],
body.ds-cp-login #loginform input[type="email"],
body.ds-cp-login #lostpasswordform input[type="text"],
body.ds-cp-login #lostpasswordform input[type="email"],
body.ds-cp-login #resetpassform input[type="password"],
body.login #loginform input[type="text"],
body.login #loginform input[type="password"],
body.login #lostpasswordform input[type="text"],
body.login #lostpasswordform input[type="email"],
body.login #resetpassform input[type="password"] {
	width: 100% !important;
	height: 48px !important;
	border: 1.5px solid #E4E8F2 !important;
	border-radius: 10px !important;
	padding: 0 16px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: #1A1F36 !important;
	background: #FAFBFD !important;
	box-shadow: none !important;
	transition: border-color .18s ease, box-shadow .18s ease !important;
	outline: none !important;
	margin-top: 4px !important;
	margin-bottom: 16px !important;
	box-sizing: border-box !important;
}

body.ds-cp-login #loginform input[type="text"]:focus,
body.ds-cp-login #loginform input[type="password"]:focus,
body.ds-cp-login #lostpasswordform input[type="text"]:focus,
body.ds-cp-login #lostpasswordform input[type="email"]:focus,
body.ds-cp-login #resetpassform input[type="password"]:focus,
body.login #loginform input[type="text"]:focus,
body.login #loginform input[type="password"]:focus,
body.login #lostpasswordform input[type="text"]:focus,
body.login #lostpasswordform input[type="email"]:focus,
body.login #resetpassform input[type="password"]:focus {
	border-color: var(--ds-primary) !important;
	box-shadow: 0 0 0 3px rgba(91, 75, 245, .12) !important;
	background: #fff !important;
}

/* ── Submit buttons ── */
body.ds-cp-login #loginform #wp-submit,
body.ds-cp-login #lostpasswordform .button-primary,
body.ds-cp-login #resetpassform .button-primary,
body.login #loginform #wp-submit,
body.login #lostpasswordform .button-primary,
body.login #resetpassform .button-primary {
	width: 100% !important;
	height: 50px !important;
	background: #1A1F36 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background .18s ease, transform .12s ease !important;
	margin-top: 4px !important;
	letter-spacing: -.1px !important;
	text-shadow: none !important;
}

body.ds-cp-login #loginform #wp-submit:hover,
body.ds-cp-login #lostpasswordform .button-primary:hover,
body.ds-cp-login #resetpassform .button-primary:hover,
body.login #loginform #wp-submit:hover,
body.login #lostpasswordform .button-primary:hover,
body.login #resetpassform .button-primary:hover {
	background: #0f172a !important;
}

body.ds-cp-login #loginform #wp-submit:active,
body.login #loginform #wp-submit:active {
	transform: scale(.99) !important;
}

/* ── Remember me ── */
body.ds-cp-login #loginform .forgetmenot,
body.login #loginform .forgetmenot {
	margin-top: 14px !important;
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	font-size: 13px !important;
	color: #8898AA !important;
}

body.ds-cp-login #loginform .forgetmenot label,
body.login #loginform .forgetmenot label {
	font-weight: 400 !important;
	color: #8898AA !important;
}

body.ds-cp-login #loginform .forgetmenot input[type="checkbox"],
body.login #loginform .forgetmenot input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	accent-color: var(--ds-primary) !important;
	margin: 0 !important;
}

/* ── Navigation links ("Passwort vergessen?" / "Zurück zum Login") ── */
body.ds-cp-login #nav,
body.ds-cp-login #backtoblog-login,
body.login #nav,
body.login #backtoblog-login {
	text-align: center !important;
	margin-top: 20px !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

body.ds-cp-login #nav a,
body.ds-cp-login #backtoblog-login a,
body.login #nav a,
body.login #backtoblog-login a {
	font-size: 13px !important;
	color: rgba(226, 232, 240, 0.75) !important;
	text-decoration: none !important;
	transition: color .18s !important;
}

body.ds-cp-login #nav a:hover,
body.ds-cp-login #backtoblog-login a:hover,
body.login #nav a:hover,
body.login #backtoblog-login a:hover {
	color: #e2e8f0 !important;
	text-decoration: none !important;
}

/* ── Error / notice messages ── */
body.ds-cp-login #login_error,
body.login #login_error {
	background: #FEF2F2 !important;
	border: 1px solid #FECACA !important;
	border-radius: 10px !important;
	color: #B91C1C !important;
	font-size: 13.5px !important;
	padding: 12px 16px !important;
	margin-bottom: 16px !important;
	box-shadow: none !important;
}

body.ds-cp-login .message,
body.login .message {
	background: #EFF6FF !important;
	border: 1px solid #BFDBFE !important;
	border-radius: 10px !important;
	color: #1D4ED8 !important;
	padding: 12px 16px !important;
	font-size: 13.5px !important;
	margin-bottom: 16px !important;
	box-shadow: none !important;
}

/* ── Hide WP extras ── */
body.ds-cp-login #backtoblog,
body.login #backtoblog,
body.ds-cp-login .privacy-policy-page-link,
body.login .privacy-policy-page-link,
body.login #language-switcher,
body.login .language-switcher,
body.login .wpml-login-ls,
body.login .pll-login-ls,
body.login select[name="language"],
body.login .locale-selector { display: none !important; }

/* ── Footer ── */
#ds-login-footer {
	margin-top: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: 420px;
}

/* Portal name — subtle label above badge */
.ds-login-portal-name {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(148, 163, 184, 0.65);
	margin: 0 0 18px 0;
	text-align: center;
}

/* ── digitalstarter Badge ── */
.ds-footer-badge {
	display: flex;
	justify-content: center;
	background: transparent;
	font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	position: relative;
	z-index: 1;
}

.ds-footer-badge a {
	text-decoration: none;
	color: inherit;
}

.ds-badge-inner {
	border-radius: 16px;
	padding: 12px 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	position: relative;
	transition: all 0.3s ease;
	min-width: 260px;
	height: 52px;
}

.ds-badge-inner--dark {
	background-color: #1e1e1e;
	color: #fff;
}

.ds-badge-inner--light {
	background-color: #f9fafb;
	color: #111827;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
	border: 1px solid rgba(148, 163, 184, 0.5);
}

.ds-badge-label {
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	line-height: 1;
}

.ds-logo {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	transition: transform 0.4s ease;
	flex-shrink: 0;
	object-fit: cover;
	display: block;
}

.ds-badge-inner:hover .ds-logo {
	transform: rotate(6deg) scale(1.1);
}

/* Preview popup on hover */
.ds-preview {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	margin-bottom: 14px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.35s ease;
	z-index: 5;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.ds-badge-inner:hover .ds-preview {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.ds-preview img {
	width: 300px;
	height: auto;
	display: block;
	object-fit: cover;
}

/* ── Responsive ── */
@media (max-width: 480px) {
	body.ds-cp-login,
	body.login {
		padding: 40px 16px 60px !important;
	}

	body.ds-cp-login #loginform,
	body.ds-cp-login #lostpasswordform,
	body.ds-cp-login #resetpassform,
	body.login #loginform,
	body.login #lostpasswordform,
	body.login #resetpassform {
		padding: 24px 20px !important;
	}

	.ds-badge-inner {
		min-width: 220px;
		padding: 10px 16px;
		height: auto;
	}

	.ds-preview img {
		width: 240px;
	}
}