/* ============================================
   BID CUSTOMIZATIONS - Custom Login Page
   ============================================ */

:root {
	--bid-primary: #1a1f36;
	--bid-primary-dark: #111427;
	--bid-primary-light: #e8eaf0;
	--bid-accent: #4f6af5;
	--bid-accent-dark: #3d56d9;
	--bid-bg: #f8f9fc;
	--bid-card-bg: #ffffff;
	--bid-text: #1e293b;
	--bid-text-muted: #64748b;
	--bid-border: #e2e8f0;
	--bid-input-bg: #f8fafc;
	--bid-danger: #ef4444;
	--bid-success: #22c55e;
	--bid-radius-sm: 8px;
	--bid-shadow-lg: 0 12px 48px rgba(26, 31, 54, 0.15);
	--bid-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nuke all Frappe wrappers */
.web-footer, footer, .page-header, .page-header-wrapper { display: none !important; }

body > .page-container,
body > .page-container > .page-body,
body > .page-container > .page-body > .main-section,
body > .page-container > .page-body > .main-section > .container,
body > .page-container > .page-body > .main-section > .container > .page-content-wrapper,
body > .page-container > .page-body > .main-section > .container > .page-content-wrapper > .page-content,
[data-page-container],
.web-content {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

/* Layout */
.bid-login-wrapper {
	display: flex;
	min-height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--bid-bg);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	z-index: 9999;
}
.bid-login-wrapper * { box-sizing: border-box; }

/* Left Brand Panel */
.bid-login-brand {
	flex: 0 0 42%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, #1a1f36 0%, #0f1225 50%, #0a0d1a 100%);
	position: relative;
	overflow: hidden;
	padding: 3rem;
}

.bid-login-brand::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -30%;
	width: 80%;
	height: 120%;
	background: radial-gradient(circle, rgba(79, 106, 245, 0.15) 0%, transparent 70%);
	animation: pulse-glow 6s ease-in-out infinite;
}

.bid-login-brand::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -20%;
	width: 60%;
	height: 80%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
	animation: pulse-glow 8s ease-in-out infinite reverse;
}

@keyframes pulse-glow {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.05); }
}

.brand-content { position: relative; z-index: 1; text-align: center; color: #fff; }
.brand-logo-area { margin-bottom: 2rem; }
.brand-logo { max-width: 120px; max-height: 120px; object-fit: contain; border-radius: 16px; }

.brand-logo-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 24px;
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-title { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.5px; margin: 0 0 0.5rem 0; color: #fff; }
.brand-tagline { font-size: 1.05rem; opacity: 0.8; margin: 0; font-weight: 400; }
.brand-footer { position: absolute; bottom: 2rem; z-index: 1; color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; }
.brand-footer p { margin: 0; }

/* Right Form Panel */
.bid-login-form-area {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: var(--bid-bg);
}

.login-card {
	width: 100%;
	max-width: 420px;
	background: var(--bid-card-bg);
	border-radius: 16px;
	padding: 2.5rem;
	box-shadow: var(--bid-shadow-lg);
	border: 1px solid var(--bid-border);
}

/* Headers */
.login-header { margin-bottom: 2rem; }
.login-header h2 { font-size: 1.65rem; font-weight: 700; color: var(--bid-text); margin: 0 0 0.4rem 0; letter-spacing: -0.3px; }
.login-subtitle { color: var(--bid-text-muted); font-size: 0.95rem; margin: 0; line-height: 1.5; }

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bid-accent);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 1rem;
	transition: var(--bid-transition);
}
.back-link:hover { color: var(--bid-accent-dark); text-decoration: none; }

/* Form Groups */
.bid-form-group { margin-bottom: 1.25rem; }
.bid-form-group label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--bid-text); margin-bottom: 0.4rem; }

.bid-input-wrapper { position: relative; display: flex; align-items: center; }
.bid-input-icon { position: absolute; left: 14px; color: var(--bid-text-muted); pointer-events: none; z-index: 1; }

.bid-input-wrapper input {
	width: 100%;
	padding: 0.75rem 0.9rem 0.75rem 2.75rem;
	border: 1.5px solid var(--bid-border);
	border-radius: var(--bid-radius-sm);
	font-size: 0.95rem;
	color: var(--bid-text);
	background: var(--bid-input-bg);
	transition: var(--bid-transition);
	outline: none;
	height: auto;
	line-height: 1.5;
}

.bid-input-wrapper input:focus {
	border-color: var(--bid-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(79, 106, 245, 0.12);
}

.bid-input-wrapper input::placeholder { color: #94a3b8; }

/* Toggle Password */
.bid-toggle-password {
	position: absolute;
	right: 12px;
	background: none;
	border: none;
	color: var(--bid-text-muted);
	cursor: pointer;
	padding: 4px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	z-index: 2;
	transition: var(--bid-transition);
}
.bid-toggle-password:hover { color: var(--bid-accent); }

/* Form Footer */
.bid-form-footer { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.forgot-link { color: var(--bid-accent); text-decoration: none; font-size: 0.875rem; font-weight: 500; }
.forgot-link:hover { color: var(--bid-accent-dark); text-decoration: none; }

/* Buttons */
.bid-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.8rem 1.5rem;
	border: none;
	border-radius: var(--bid-radius-sm);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--bid-transition);
	gap: 8px;
	text-decoration: none;
}

.bid-btn-primary {
	background: linear-gradient(135deg, var(--bid-accent) 0%, var(--bid-accent-dark) 100%);
	color: #fff;
	box-shadow: 0 4px 12px rgba(79, 106, 245, 0.3);
}
.bid-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79, 106, 245, 0.4); color: #fff; }
.bid-btn-primary:active { transform: translateY(0); }
.bid-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none !important; }

.bid-btn-outline {
	background: transparent;
	color: var(--bid-accent);
	border: 1.5px solid var(--bid-border);
}
.bid-btn-outline:hover {
	border-color: var(--bid-accent);
	background: #eef0fc;
	color: var(--bid-accent-dark);
	text-decoration: none;
}

/* Divider */
.bid-divider { text-align: center; color: var(--bid-text-muted); font-size: 0.85rem; margin: 1.25rem 0; position: relative; }
.bid-divider span { background: var(--bid-card-bg); padding: 0 0.75rem; position: relative; z-index: 1; }
.bid-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--bid-border); }

/* Spinner */
.spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* OTP */
.otp-input-group { display: flex; gap: 10px; justify-content: center; }

.otp-digit {
	width: 50px;
	height: 56px;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--bid-text);
	border: 1.5px solid var(--bid-border);
	border-radius: var(--bid-radius-sm);
	background: var(--bid-input-bg);
	outline: none;
	transition: var(--bid-transition);
	caret-color: var(--bid-accent);
	padding: 0;
}
.otp-digit:focus { border-color: var(--bid-accent); background: #fff; box-shadow: 0 0 0 3px rgba(79, 106, 245, 0.12); }

.otp-timer { text-align: center; font-size: 0.875rem; color: var(--bid-text-muted); margin: 1rem 0 1.5rem; }
.otp-timer a { color: var(--bid-accent); font-weight: 600; text-decoration: none; }
.otp-timer a:hover { text-decoration: underline; }

/* Alerts */
.bid-alert { padding: 0.75rem 1rem; border-radius: var(--bid-radius-sm); font-size: 0.875rem; margin-top: 1.25rem; line-height: 1.5; }
.bid-alert-danger { background: #fef2f2; color: var(--bid-danger); border: 1px solid #fecaca; }
.bid-alert-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* Success */
.success-icon { display: flex; justify-content: center; margin-bottom: 1rem; }

/* Responsive */
@media (max-width: 992px) {
	.bid-login-brand { flex: 0 0 38%; padding: 2rem; }
	.brand-title { font-size: 1.8rem; }
	.login-card { padding: 2rem; }
}

@media (max-width: 768px) {
	.bid-login-wrapper { flex-direction: column; }
	.bid-login-brand { flex: none; min-height: auto; padding: 2.5rem 2rem; }
	.brand-logo-icon { width: 64px; height: 64px; border-radius: 18px; }
	.brand-logo-icon svg { width: 36px; height: 36px; }
	.brand-title { font-size: 1.5rem; }
	.brand-tagline { font-size: 0.9rem; }
	.brand-footer { display: none; }
	.brand-logo-area { margin-bottom: 1rem; }
	.bid-login-form-area { padding: 1.5rem; }
	.login-card { padding: 1.75rem; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08); }
	.otp-digit { width: 44px; height: 50px; font-size: 1.2rem; }
}

@media (max-width: 380px) {
	.otp-input-group { gap: 6px; }
	.otp-digit { width: 38px; height: 44px; font-size: 1.1rem; }
}