/**
 * Optionz Coaching — Executive Login Portal Stylesheet
 * High-performance, luxury responsive design for wp-login.php
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
	--opt-primary: #f39200;
	--opt-primary-hover: #d47b00;
	--opt-primary-glow: rgba(243, 146, 0, 0.28);
	--opt-navy-dark: #07111e;
	--opt-navy-mid: #0d1b2a;
	--opt-navy-card: #122338;
	--opt-accent-blue: #1e3a8a;
	--opt-text-dark: #1e293b;
	--opt-text-muted: #64748b;
	--opt-border: #e2e8f0;
	--opt-radius-lg: 20px;
	--opt-radius-md: 12px;
	--opt-radius-sm: 8px;
	--opt-shadow-card: 0 25px 60px -15px rgba(0, 0, 0, 0.45);
}

/* Reset & Base Body */
html, body.login {
	height: 100% !important;
	min-height: 100vh !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--opt-navy-dark) !important;
	font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif !important;
	color: var(--opt-text-dark) !important;
	overflow-x: hidden;
}

/* Enforce System Fonts Globally */
html, body.login, #login, #loginform, #loginform label, #loginform input, #wp-submit, #nav, #nav a, #backtoblog, #backtoblog a, .optionz-portal-wrapper, .optionz-portal-showcase, .optionz-showcase-title, .optionz-showcase-desc, .optionz-showcase-features, .optionz-quote-text, .optionz-author-name, .optionz-author-title, .optionz-form-intro h2, .optionz-form-intro p, .language-switcher, .language-switcher label, .language-switcher select, #login_error, .notice, .message {
	font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.locale-en-us html, .locale-en-us body.login, .locale-en-us #login, .locale-en-us #loginform, .locale-en-us input, .locale-en-us label, .locale-en-us button, .locale-en-us select {
	font-family: 'Cairo', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Outer Portal Layout */
.optionz-portal-wrapper {
	display: flex;
	min-height: 100vh;
	width: 100%;
	position: relative;
	background: radial-gradient(circle at 10% 20%, rgba(243, 146, 0, 0.08) 0%, transparent 40%),
	            radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.08) 0%, transparent 40%),
	            linear-gradient(135deg, var(--opt-navy-dark) 0%, var(--opt-navy-mid) 100%);
}

/* Left/Showcase Column (Brand & Social Proof) */
.optionz-portal-showcase {
	flex: 1.15;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 28px 38px 24px;
	position: relative;
	overflow: hidden;
	color: #ffffff;
	background: linear-gradient(135deg, rgba(7, 17, 30, 0.94) 0%, rgba(13, 27, 42, 0.88) 100%),
	            url('/wp-content/uploads/2026/08/BG-1.png') center/cover no-repeat;
	border-inline-end: 1px solid rgba(243, 146, 0, 0.18);
}

.optionz-portal-showcase::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 30%, rgba(243, 146, 0, 0.12) 0%, transparent 60%);
	pointer-events: none;
}

/* Showcase Header */
.optionz-showcase-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}

.optionz-academy-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 5px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 700;
	color: #ffffff;
	backdrop-filter: blur(8px);
}

.optionz-academy-pill .dashicons {
	color: var(--opt-primary);
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.optionz-icf-accredited-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(243, 146, 0, 0.15);
	border: 1px solid rgba(243, 146, 0, 0.45);
	padding: 5px 12px;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 700;
	color: #ffaa2b;
	backdrop-filter: blur(8px);
}

.optionz-icf-accredited-pill img {
	height: 18px;
	width: 18px;
	border-radius: 50%;
}

/* Showcase Main Body */
.optionz-showcase-content {
	position: relative;
	z-index: 2;
	margin: 12px 0;
	max-width: 580px;
}

.optionz-showcase-tagline {
	display: inline-block;
	color: var(--opt-primary);
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 6px;
}

.optionz-showcase-title {
	font-size: 25px;
	line-height: 1.35;
	font-weight: 900;
	color: #ffffff;
	margin: 0 0 10px 0;
	text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.optionz-showcase-desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: #cbd5e1;
	margin-bottom: 14px;
}

/* Feature Bullets */
.optionz-showcase-features {
	list-style: none;
	padding: 0;
	margin: 0 0 16px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.optionz-showcase-features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: #f1f5f9;
}

.optionz-feat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(243, 146, 0, 0.20);
	border: 1px solid rgba(243, 146, 0, 0.40);
	color: var(--opt-primary);
	flex-shrink: 0;
	font-size: 13px;
}

/* Quote Card */
.optionz-showcase-quote {
	position: relative;
	z-index: 2;
	background: rgba(18, 35, 56, 0.75);
	border: 1px solid rgba(243, 146, 0, 0.35);
	border-radius: 12px;
	padding: 12px 16px;
	backdrop-filter: blur(12px);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.optionz-quote-text {
	font-size: 13px;
	line-height: 1.55;
	font-style: italic;
	color: #e2e8f0;
	margin-bottom: 8px;
}

.optionz-quote-author {
	display: flex;
	align-items: center;
	gap: 10px;
}

.optionz-author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--opt-primary);
	object-fit: cover;
}

.optionz-author-info {
	display: flex;
	flex-direction: column;
}

.optionz-author-name {
	font-size: 13px;
	font-weight: 800;
	color: #ffffff;
}

.optionz-author-title {
	font-size: 11px;
	color: #94a3b8;
}

/* Right/Form Column */
.optionz-portal-form-area {
	flex: 0.95;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 20px;
	position: relative;
	z-index: 5;
}

/* Target WordPress #login wrapper */
#login {
	width: 100% !important;
	max-width: 480px !important;
	padding: 0 !important;
	margin: auto !important;
	position: relative;
}

/* Brand Logo inside #login */
#login h1 {
	text-align: center;
	margin-bottom: 26px;
}

#login h1 a {
	background-image: url('/wp-content/themes/eduma-child/images/logo-white-text.svg') !important;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: 215px !important;
	height: 60px !important;
	padding: 0 !important;
	margin: 0 auto 24px !important;
	border-radius: 0 !important;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)) !important;
	transition: transform 0.3s ease !important;
}

#login h1 a:hover {
	transform: scale(1.04);
}

/* Welcome Box right above the form */
.optionz-form-intro {
	text-align: center;
	margin-bottom: 22px;
}

.optionz-form-intro h2 {
	font-size: 23px !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	margin: 0 0 6px 0 !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
	letter-spacing: -0.5px;
}

.optionz-form-intro p {
	font-size: 14px !important;
	color: #cbd5e1 !important;
	margin: 0 !important;
	line-height: 1.5;
}

/* Main Form Card */
#loginform, #lostpasswordform, #resetpassform {
	background: #ffffff !important;
	border-radius: var(--opt-radius-lg) !important;
	padding: 28px 30px !important;
	border: 1px solid rgba(243, 146, 0, 0.22) !important;
	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
	position: relative;
}

/* Form Labels & Paragraphs */
#loginform p, #lostpasswordform p, #resetpassform p {
	margin-bottom: 14px;
}

#loginform label, #lostpasswordform label, #resetpassform label {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: #334155;
	margin-bottom: 6px;
	line-height: 1.4;
}

/* Inputs */
#loginform input[type="text"],
#loginform input[type="password"],
#lostpasswordform input[type="text"],
#resetpassform input[type="password"] {
	width: 100% !important;
	background: #f8fafc !important;
	border: 1.5px solid #cbd5e1 !important;
	border-radius: var(--opt-radius-md) !important;
	padding: 13px 16px !important;
	font-size: 15px !important;
	font-family: 'Cairo', sans-serif !important;
	color: #0f172a !important;
	transition: all 0.25s ease !important;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#lostpasswordform input[type="text"]:focus,
#resetpassform input[type="password"]:focus {
	background: #ffffff !important;
	border-color: var(--opt-primary) !important;
	box-shadow: 0 0 0 4px var(--opt-primary-glow) !important;
	outline: none !important;
}

/* Password eye button wrapper */
.user-pass-wrap {
	margin-bottom: 20px !important;
}

.wp-pwd {
	position: relative;
}

.wp-pwd .wp-hide-pw {
	color: #64748b !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	height: auto !important;
	padding: 6px !important;
	cursor: pointer;
	transition: color 0.2s ease;
}

.wp-pwd .wp-hide-pw:hover {
	color: var(--opt-primary) !important;
}

/* Forget Me Not / Remember Me */
.forgetmenot {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 10px !important;
	margin-bottom: 24px !important;
	float: none !important;
}

.forgetmenot input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	border: 1.5px solid #cbd5e1 !important;
	border-radius: 4px !important;
	accent-color: var(--opt-primary) !important;
	cursor: pointer;
}

.forgetmenot label {
	margin: 0 !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #475569 !important;
	cursor: pointer;
}

/* Submit Button */
p.submit {
	margin-top: 15px !important;
	margin-bottom: 0 !important;
	float: none !important;
}

#wp-submit {
	width: 100% !important;
	background: linear-gradient(135deg, var(--opt-primary) 0%, var(--opt-primary-hover) 100%) !important;
	border: none !important;
	border-radius: var(--opt-radius-md) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	font-family: 'Cairo', sans-serif !important;
	padding: 14px 28px !important;
	min-height: 52px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: 0 10px 22px -5px rgba(243, 146, 0, 0.45) !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	text-shadow: none !important;
}

#wp-submit:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 15px 30px -5px rgba(243, 146, 0, 0.6) !important;
	filter: brightness(1.04) !important;
}

#wp-submit:active {
	transform: translateY(0) !important;
}

/* Notices & Error Messages */
#login_error, .notice, .message {
	border-radius: var(--opt-radius-md) !important;
	padding: 14px 18px !important;
	margin-bottom: 22px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
}

#login_error {
	background: #fef2f2 !important;
	border: 1.5px solid #f87171 !important;
	border-right: 5px solid #ef4444 !important;
	border-left: 1.5px solid #f87171 !important;
	color: #991b1b !important;
}

.locale-en-us #login_error {
	border-left: 5px solid #ef4444 !important;
	border-right: 1.5px solid #f87171 !important;
}

.notice, .message {
	background: #f0fdf4 !important;
	border: 1.5px solid #86efac !important;
	border-right: 5px solid #22c55e !important;
	color: #166534 !important;
}

/* Navigation Links (#nav & #backtoblog) */
#nav, #backtoblog {
	text-align: center !important;
	margin: 18px 0 0 0 !important;
	padding: 0 !important;
}

#nav a, #backtoblog a {
	color: #cbd5e1 !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#nav a:hover, #backtoblog a:hover {
	color: var(--opt-primary) !important;
	text-decoration: underline !important;
}

/* Bottom Security & Trust Footer */
.optionz-login-footer-trust {
	margin-top: 25px;
	text-align: center;
	font-size: 12px;
	color: #94a3b8;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.optionz-login-footer-trust .dashicons {
	color: #22c55e;
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Language Switcher */
.language-switcher {
	margin-top: 22px !important;
	text-align: center !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.language-switcher form {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	background: rgba(18, 35, 56, 0.90) !important;
	border: 1.5px solid rgba(243, 146, 0, 0.40) !important;
	padding: 8px 18px !important;
	border-radius: 50px !important;
	backdrop-filter: blur(10px) !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

.language-switcher label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	margin: 0 !important;
	cursor: pointer !important;
}

.language-switcher label .dashicons-translation {
	color: var(--opt-primary) !important;
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
	vertical-align: middle !important;
}

.language-switcher label .screen-reader-text {
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	color: #ffaa2b !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	display: inline !important;
}

.language-switcher label::after {
	content: ":" !important;
	color: #ffaa2b !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	margin-inline-start: 2px !important;
}

.language-switcher select {
	background: #091524 !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 8px !important;
	padding: 5px 12px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	font-family: 'Cairo', sans-serif !important;
	cursor: pointer !important;
	outline: none !important;
}

.language-switcher select:focus {
	border-color: var(--opt-primary) !important;
	box-shadow: 0 0 0 2px var(--opt-primary-glow) !important;
}

.language-switcher input[type="submit"] {
	background: linear-gradient(135deg, var(--opt-primary) 0%, var(--opt-primary-hover) 100%) !important;
	border: none !important;
	color: #ffffff !important;
	border-radius: 20px !important;
	padding: 6px 14px !important;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	font-family: 'Cairo', sans-serif !important;
	cursor: pointer !important;
	box-shadow: 0 2px 8px rgba(243, 146, 0, 0.35) !important;
}

.language-switcher input[type="submit"]:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(243, 146, 0, 0.5) !important;
}

/* ===================================================
   RESPONSIVE DESIGN (Tablets & Mobile Screens)
   =================================================== */

@media (max-width: 991px) {
	.optionz-portal-wrapper {
		flex-direction: column;
		justify-content: flex-start;
	}

	.optionz-portal-showcase {
		flex: none;
		padding: 35px 25px;
		border-inline-end: none;
		border-bottom: 1px solid rgba(243, 146, 0, 0.2);
	}

	.optionz-showcase-title {
		font-size: 26px;
	}

	.optionz-showcase-desc {
		font-size: 14.5px;
		margin-bottom: 20px;
	}

	.optionz-showcase-features {
		display: none;
	}

	.optionz-showcase-quote {
		display: none;
	}

	.optionz-portal-form-area {
		flex: none;
		padding: 30px 20px 50px;
	}

	#loginform, #lostpasswordform, #resetpassform {
		padding: 30px 24px !important;
	}
}

@media (max-width: 480px) {
	.optionz-showcase-header {
		flex-direction: column;
		gap: 14px;
		align-items: flex-start;
	}

	.optionz-portal-showcase {
		padding: 25px 20px;
	}

	.optionz-showcase-title {
		font-size: 22px;
	}

	#loginform, #lostpasswordform, #resetpassform {
		padding: 26px 18px !important;
	}

	#wp-submit {
		font-size: 15px !important;
		padding: 12px 20px !important;
	}
}