/* LOOP Email — Login + App Branding v8 */

/* ===== LOGIN PAGE ===== */

/* Gradient overlay on the dark bg (theme sets --main-bg-color: #0f0f14) */
body#rl-app {
	background-image:
		radial-gradient(ellipse at 30% 20%, rgba(255,124,30,0.12) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 80%, rgba(255,100,20,0.08) 0%, transparent 50%) !important;
}

/* Login card — glassmorphism */
#V-Login {
	background: rgba(255, 255, 255, 0.05) !important;
	backdrop-filter: blur(28px) !important;
	-webkit-backdrop-filter: blur(28px) !important;
	border: 1px solid rgba(255, 255, 255, 0.10) !important;
	border-radius: 20px !important;
	box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) !important;
	padding: 40px 36px !important;
	max-width: 420px !important;
	width: 90% !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	right: auto !important;
	bottom: auto !important;
}

/* LOOP logo */
#V-Login::before {
	content: '';
	display: block;
	width: 120px;
	height: 36px;
	margin: 0 auto 20px;
	background: url('/assets/images/logos/loop-logo-200.webp') center/contain no-repeat;
}

/* Hide default title */
#V-Login .descWrapper {
	font-size: 0 !important;
	line-height: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Subtitle */
#V-Login form::before {
	content: 'Sign in to access your webmail';
	display: block;
	text-align: center;
	font-size: 13px;
	color: #9ca3af;
	margin: -8px 0 24px;
}

/* All login text white */
#V-Login, #V-Login * { color: #f1f0ee !important; }

/* Inputs — glass */
#V-Login .input-block-level {
	background: rgba(255, 255, 255, 0.07) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 10px !important;
	color: #f1f0ee !important;
	padding: 12px 14px 12px 36px !important;
	font-size: 14px !important;
}
#V-Login input::placeholder { color: rgba(241, 240, 238, 0.4) !important; }
#V-Login input:focus {
	border-color: rgba(255, 124, 30, 0.5) !important;
	box-shadow: 0 0 0 3px rgba(255, 124, 30, 0.35) !important;
	outline: none !important;
}

/* Icons */
#V-Login .controls .fontastic { color: rgba(255,124,30,0.45) !important; }

/* Sign In button */
#V-Login .buttonLogin {
	width: 100% !important;
	padding: 12px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	background: #ff7c1e !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: 0 2px 8px rgba(255, 124, 30, 0.40) !important;
}
#V-Login .buttonLogin:hover {
	background: #e66f1a !important;
	transform: translateY(-1px) !important;
}

/* Remember Me */
#V-Login .e-checkbox, #V-Login .e-checkbox * { color: #9ca3af !important; font-size: 13px !important; }

/* Forgot password */
.loop-forgot-link { font-size: 12px !important; color: #ff7c1e !important; text-decoration: none !important; }
.loop-forgot-link:hover { text-decoration: underline !important; }

/* Error alert */
#V-Login .alert { background: rgba(239,68,68,0.15) !important; border: 1px solid rgba(239,68,68,0.3) !important; border-radius: 10px !important; color: #fca5a5 !important; }

/* Hide language globe */
#V-Login .language-buttons { display: none !important; }

/* Footer */
.loop-login-footer { text-align: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.07); }
.loop-support { font-size: 12px; color: #9ca3af; margin-bottom: 8px; }
.loop-support a { color: #ff7c1e !important; text-decoration: none !important; }
.loop-support a:hover { text-decoration: underline !important; }
.loop-copyright { font-size: 11px; color: rgba(107,114,128,0.5); }

/* Loading screen */
#rl-loading { font-size: 0 !important; color: transparent !important; }
#rl-loading::before { content: ''; display: block; width: 140px; height: 42px; margin: 0 auto 16px; background: url('/assets/images/logos/loop-logo-200.webp') center/contain no-repeat; }
#rl-loading .icon-spinner { color: #ff7c1e !important; }

/* ===== MAILBOX (post-login) ===== */
/* Override dark bg + gradient when mailbox is showing */
#rl-left { background: #1a1a2e !important; }
#rl-left, #rl-left * { color: #e0dfdd !important; }
#rl-left .focused, #rl-left .selected, #rl-left .active { background: rgba(255,124,30,0.15) !important; }
#rl-left .focused *, #rl-left .selected *, #rl-left .active * { color: #ff7c1e !important; }
.buttonCompose, .btn-warning { background: #ff7c1e !important; color: #fff !important; border-radius: 8px !important; }
.badge, .count { background: #ff7c1e !important; color: #fff !important; }

/* Fix mailbox bg — use JS class approach instead of :has */

/* When mailbox is visible, switch to light bg */
body#rl-app.loop-mailbox {
	--main-bg-color: #f5f5f7 !important;
	background-image: none !important;
	background-color: #f5f5f7 !important;
}

/* Mailbox input/text overrides back to dark */
body#rl-app.loop-mailbox input,
body#rl-app.loop-mailbox textarea,
body#rl-app.loop-mailbox select {
	background: #fff !important;
	border-color: #d1d5db !important;
	color: #333 !important;
}