/**
 * SDI Login Page - Frontend Stylesheet
 * Modern 2-Column Custom Login Layout & Fullscreen Shortcode Styling
 *
 * @package SDI_Login_Page
 */

:root {
	--sdi-left-bg: #0065B3;
	--sdi-left-bg-img: none;
	--sdi-right-bg: #FFFFFF;
	--sdi-right-bg-img: none;
	--sdi-btn-bg: #0065B3;
	--sdi-btn-hover-bg: #004f8c;
	--sdi-btn-text-color: #FFFFFF;
	--sdi-accent-color: #0065B3;
	--sdi-logo-width: 280px;
	--sdi-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sdi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Ensure WordPress Dashicons retain their icon font family */
.dashicons,
.dashicons-before:before,
[class*="dashicons-"] {
	font-family: dashicons !important;
}

/* Reset WordPress Default Login Styles */
html, body.login {
	margin: 0 !important;
	padding: 0 !important;
	height: 100% !important;
	width: 100% !important;
	min-height: 100vh !important;
	background: #F8FAFC !important;
	font-family: var(--sdi-font-body) !important;
	color: #1E293B !important;
	overflow-x: hidden !important;
}

/* Hide Default WP Logo & Wrapper elements */
body.login #login h1,
body.login > h1,
body.login .language-switcher {
	display: none !important;
}

/* Main 2-Column Container */
.sdi-login-container {
	display: flex;
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
}

/* ==========================================================================
   LEFT COLUMN: Branding & Logo (Center Horizontally & Vertically)
   ========================================================================== */
.sdi-login-left-column {
	flex: 1 1 50% !important;
	max-width: 50% !important;
	background-color: var(--sdi-left-bg) !important;
	background-image: var(--sdi-left-bg-img) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	position: relative !important;
	padding: 40px !important;
	color: #FFFFFF !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	z-index: 1 !important;
}

.sdi-login-left-column::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background-color: var(--sdi-left-overlay-color, #000000) !important;
	opacity: var(--sdi-left-overlay-op, 0.5) !important;
	display: var(--sdi-left-overlay-disp, none) !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

/* Decorative background circles */
.sdi-left-decor-circle-1 {
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	top: -100px;
	left: -100px;
	pointer-events: none;
}

.sdi-left-decor-circle-2 {
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	bottom: -80px;
	right: -80px;
	pointer-events: none;
}

.sdi-brand-content-center {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	max-width: 460px !important;
	width: 100% !important;
	margin: auto 0 !important;
	position: relative !important;
	z-index: 2 !important;
	animation: sdiFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sdi-logo-wrapper {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin-bottom: 24px !important;
	filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15)) !important;
}

.sdi-main-logo {
	max-width: var(--sdi-logo-width) !important;
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
	transition: transform 0.3s ease !important;
}

.sdi-main-logo:hover {
	transform: scale(1.02) !important;
}

.sdi-brand-tagline {
	font-family: var(--sdi-font-heading) !important;
	font-size: 1.15rem !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	margin: 0 !important;
	letter-spacing: 0.2px !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
	text-align: center !important;
}

.sdi-left-footer {
	position: absolute !important;
	bottom: 24px !important;
	left: 0 !important;
	right: 0 !important;
	text-align: center !important;
	font-size: 0.82rem !important;
	color: rgba(255, 255, 255, 0.6) !important;
	position: relative !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

/* ==========================================================================
   RIGHT COLUMN: Login Form Centered in Column, All Elements Left-Aligned
   ========================================================================== */
.sdi-login-right-column {
	flex: 1 1 50% !important;
	max-width: 50% !important;
	background-color: var(--sdi-right-bg) !important;
	background-image: var(--sdi-right-bg-img) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 40px 24px !important;
	box-sizing: border-box !important;
	min-height: 100vh !important;
	position: relative !important;
	overflow-y: auto !important;
}

.sdi-login-right-column::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background-color: var(--sdi-right-overlay-color, #000000) !important;
	opacity: var(--sdi-right-overlay-op, 0.5) !important;
	display: var(--sdi-right-overlay-disp, none) !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

.sdi-right-column-inner {
	width: 100% !important;
	max-width: 420px !important;
	margin: auto !important;
	padding: 20px 0 !important;
	animation: sdiFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
	text-align: left !important;
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 2 !important;
}

/* Mobile Brand Banner - Hidden by default on desktop */
.sdi-mobile-brand-banner {
	display: none !important;
	justify-content: center !important;
	align-items: center !important;
	margin-bottom: 24px !important;
	text-align: center !important;
}

.sdi-mobile-brand-banner img {
	max-width: 220px !important;
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
}

/* Form Greeting Header - Rata Kiri */
.sdi-form-header {
	margin-bottom: 28px !important;
	text-align: left !important;
	width: 100% !important;
}

.sdi-form-title {
	font-family: var(--sdi-font-heading) !important;
	font-size: 1.85rem !important;
	font-weight: 700 !important;
	color: #0F172A !important;
	margin: 0 0 8px 0 !important;
	letter-spacing: -0.5px !important;
	line-height: 1.25 !important;
	text-align: left !important;
}

.sdi-form-subtitle {
	font-size: 0.95rem !important;
	color: #64748B !important;
	margin: 0 !important;
	line-height: 1.5 !important;
	text-align: left !important;
}

/* WordPress Core #login Overrides - Rata Kiri & Full Width */
body.login #login {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	text-align: left !important;
	box-sizing: border-box !important;
}

/* WordPress Error / Message Banners - Full Width */
body.login #login_error,
body.login .message,
body.login .success {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 0 20px 0 !important;
	padding: 14px 16px !important;
	border-radius: 10px !important;
	border: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
	font-size: 0.9rem !important;
	line-height: 1.5 !important;
	animation: sdiSlideDown 0.4s ease !important;
	text-align: left !important;
}

body.login #login_error {
	background: #FEF2F2 !important;
	color: #991B1B !important;
	border-left: 4px solid #EF4444 !important;
}

body.login #login_error a {
	color: #991B1B !important;
	text-decoration: underline !important;
	font-weight: 600;
}

body.login .message {
	background: #EFF6FF !important;
	color: #1E40AF !important;
	border-left: 4px solid #3B82F6 !important;
}

/* Login, Register, Lost Password & Reset Pass Form Boxes - 100% Full Width */
body.login form#loginform,
body.login form#registerform,
body.login form#lostpasswordform,
body.login form#resetpassform,
body.login form#confirmaction,
body.login form,
.sdi-custom-login-form {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	margin-top: 0 !important;
	margin-bottom: 24px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	overflow: visible !important;
	text-align: left !important;
	box-sizing: border-box !important;
	display: block !important;
	clear: both !important;
}

body.login form::after,
body.login form#loginform::after,
body.login form#registerform::after,
body.login form#lostpasswordform::after,
body.login form#resetpassform::after {
	content: "" !important;
	display: table !important;
	clear: both !important;
}

/* WordPress notices on register & lost password */
body.login p#reg_passmail,
body.login p.message.register,
body.login p.login-info {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	font-size: 0.9rem !important;
	color: #475569 !important;
	margin: 0 0 20px 0 !important;
	padding: 0 !important;
	line-height: 1.5 !important;
	box-sizing: border-box !important;
}

/* WordPress core password generator, strength meter and weak confirm on reset pass - Hide completely */
.wp-generate-pw,
button.wp-generate-pw,
#pass-strength-result,
.pw-weak,
.user-pass-hint,
p.user-pass-hint,
.wp-hide-pw:not(.sdi-pwd-toggle-btn),
button.wp-hide-pw:not(.sdi-pwd-toggle-btn),
.button.wp-hide-pw:not(.sdi-pwd-toggle-btn),
body.login .button.wp-hide-pw:not(.sdi-pwd-toggle-btn),
form#resetpassform .wp-generate-pw,
form#resetpassform #pass-strength-result,
form#resetpassform .pw-weak,
form#resetpassform .user-pass-hint,
form#resetpassform .wp-hide-pw:not(.sdi-pwd-toggle-btn),
.wp-pwd > button.wp-hide-pw:not(.sdi-pwd-toggle-btn),
.sdi-input-password-wrap > button.wp-hide-pw:not(.sdi-pwd-toggle-btn),
.wp-pwd .dashicons-visibility,
.wp-pwd .dashicons-hidden,
.sdi-input-password-wrap .dashicons-visibility,
.sdi-input-password-wrap .dashicons-hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	position: absolute !important;
	left: -9999px !important;
}

/* Disable native browser password reveal icon in Edge, Chrome, Safari */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ==========================================================================
   GMAIL-STYLE OUTLINED FLOATING LABELS (EXCLUDING CHECKBOXES)
   ========================================================================== */
body.login form .user-pass-wrap,
body.login .user-pass-wrap,
body.login .user-pass1-wrap,
body.login form .user-pass1-wrap,
body.login .user-pass2-wrap,
body.login form .user-pass2-wrap,
form#resetpassform .user-pass-wrap,
form#resetpassform .user-pass1-wrap,
form#resetpassform .user-pass2-wrap,
.user-pass-wrap,
.user-pass1-wrap,
.user-pass2-wrap,
.sdi-reset-pass-group,
body.login form p:not(.forgetmenot):not(.submit),
.sdi-form-group:not(.sdi-form-extra),
.sdi-floating-group:not(.forgetmenot) {
	position: relative !important;
	margin: 0 0 24px 0 !important;
	margin-top: 0 !important;
	margin-bottom: 24px !important;
	padding: 0 !important;
	text-align: left !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	display: block !important;
	box-sizing: border-box !important;
	clear: both !important;
	float: none !important;
}

/* Explicit separation between password groups to guarantee no touching */
body.login form .user-pass-wrap + .user-pass-wrap,
body.login form .user-pass-wrap + .user-pass2-wrap,
body.login form .user-pass1-wrap + .user-pass2-wrap,
body.login form .user-pass1-wrap + .user-pass-wrap,
body.login form .sdi-reset-pass-group + .sdi-reset-pass-group,
form#resetpassform .user-pass-wrap + .user-pass-wrap,
form#resetpassform .user-pass-wrap + .user-pass2-wrap,
form#resetpassform .user-pass1-wrap + .user-pass2-wrap,
.user-pass-wrap + .user-pass-wrap,
.user-pass-wrap + .user-pass2-wrap,
.user-pass1-wrap + .user-pass2-wrap,
.sdi-reset-pass-group + .sdi-reset-pass-group {
	margin-top: 24px !important;
	margin-bottom: 24px !important;
}

/* Base Floating Label (Resting inside input like Gmail placeholder - NEVER applied to rememberme) */
body.login form p:not(.forgetmenot):not(.submit) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass-wrap label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass1-wrap label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass2-wrap label:not([for="rememberme"]):not([for="pw-weak"]),
form#resetpassform label:not([for="rememberme"]):not([for="pw-weak"]),
.sdi-reset-pass-group label:not([for="rememberme"]):not([for="pw-weak"]),
.sdi-floating-group:not(.forgetmenot) label:not([for="rememberme"]):not(.sdi-remember-label) {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	bottom: auto !important;
	right: auto !important;
	transform: translateY(-50%) !important;
	font-size: 0.95rem !important;
	font-weight: 400 !important;
	color: #64748B !important;
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 4px !important;
	margin: 0 !important;
	line-height: 1 !important;
	pointer-events: none !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	transform-origin: left top !important;
	z-index: 5 !important;
	white-space: nowrap !important;
	display: inline-block !important;
	font-family: var(--sdi-font-body) !important;
	text-align: left !important;
}

/* Text, Email & Password Input Fields (Gmail Outlined Style) - Full Width */
body.login .input,
body.login input[type="text"]:not(#rememberme),
body.login input[type="email"],
body.login input[type="password"],
body.login input[type="url"],
body.login .password-input,
body.login .wp-pwd input,
body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"],
body.login #pass1,
body.login #pass2,
form#resetpassform input[type="password"],
form#resetpassform input[type="text"],
form#resetpassform #pass1,
form#resetpassform #pass2,
#pass1,
#pass2,
.sdi-input {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	height: 52px !important;
	min-height: 52px !important;
	max-height: 52px !important;
	margin: 0 !important;
	padding: 14px 48px 14px 16px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 1.5px solid #CBD5E1 !important;
	border-radius: 8px !important;
	font-size: 0.95rem !important;
	color: #0F172A !important;
	box-shadow: none !important;
	transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-sizing: border-box !important;
	font-family: var(--sdi-font-body) !important;
	display: block !important;
	text-align: left !important;
	position: relative !important;
	z-index: 1 !important;
	outline: none !important;
	float: none !important;
	flex: none !important;
	flex-grow: 0 !important;
}

/* Input Focus Outline */
body.login .input:focus,
body.login input[type="text"]:not(#rememberme):focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus,
body.login .password-input:focus,
body.login .wp-pwd input:focus,
body.login #pass1:focus,
body.login #pass2:focus,
form#resetpassform #pass1:focus,
form#resetpassform #pass2:focus,
.sdi-input:focus {
	background: transparent !important;
	border-color: var(--sdi-accent-color) !important;
	border-width: 2px !important;
	box-shadow: 0 0 0 3px rgba(0, 101, 179, 0.12) !important;
	outline: none !important;
}

/* Active / Floated Label State (Focused, Has Value, Autofilled, Active Class - STRICTLY NO CHECKBOX) */
.sdi-floating-group:not(.forgetmenot) input:focus ~ label:not([for="rememberme"]):not([for="pw-weak"]),
.sdi-floating-group:not(.forgetmenot) input:not(:placeholder-shown) ~ label:not([for="rememberme"]):not([for="pw-weak"]),
.sdi-floating-group:not(.forgetmenot) input:-webkit-autofill ~ label:not([for="rememberme"]):not([for="pw-weak"]),
.sdi-floating-group:not(.forgetmenot).is-active label:not([for="rememberme"]):not([for="pw-weak"]),
.sdi-floating-group:not(.forgetmenot).is-focused label:not([for="rememberme"]):not([for="pw-weak"]),
.sdi-floating-group:not(.forgetmenot).has-value label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form p:not(.forgetmenot):not(.submit):has(input:focus) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form p:not(.forgetmenot):not(.submit):has(input:not(:placeholder-shown)) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form p:not(.forgetmenot):not(.submit):has(input:-webkit-autofill) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass-wrap:has(input:focus) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass-wrap:has(input:not(:placeholder-shown)) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass-wrap:has(input:-webkit-autofill) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass1-wrap:has(input:focus) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass1-wrap:has(input:not(:placeholder-shown)) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass1-wrap:has(input:-webkit-autofill) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass2-wrap:has(input:focus) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass2-wrap:has(input:not(:placeholder-shown)) label:not([for="rememberme"]):not([for="pw-weak"]),
form#resetpassform .user-pass-wrap:has(input:focus) label:not([for="rememberme"]):not([for="pw-weak"]),
form#resetpassform .user-pass-wrap:has(input:not(:placeholder-shown)) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form p:not(.forgetmenot):not(.submit).is-active label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form p:not(.forgetmenot):not(.submit).has-value label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass-wrap.is-active label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass-wrap.has-value label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass1-wrap.is-active label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass1-wrap.has-value label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass2-wrap.is-active label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass2-wrap.has-value label:not([for="rememberme"]):not([for="pw-weak"]),
.sdi-reset-pass-group.is-focused label,
.sdi-reset-pass-group.has-value label,
.sdi-reset-pass-group.is-active label {
	top: 0 !important;
	transform: translateY(-50%) scale(0.82) !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: #475569 !important;
	background: var(--sdi-right-bg, #FFFFFF) !important;
	padding: 0 6px !important;
	border-radius: 3px !important;
	z-index: 5 !important;
}

/* Focused State Label Color Accent */
.sdi-floating-group:not(.forgetmenot) input:focus ~ label:not([for="rememberme"]):not([for="pw-weak"]),
.sdi-floating-group:not(.forgetmenot).is-focused label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form p:not(.forgetmenot):not(.submit).is-focused label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form p:not(.forgetmenot):not(.submit):has(input:focus) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass-wrap.is-focused label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass-wrap:has(input:focus) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass1-wrap.is-focused label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass1-wrap:has(input:focus) label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass2-wrap.is-focused label:not([for="rememberme"]):not([for="pw-weak"]),
body.login form .user-pass2-wrap:has(input:focus) label:not([for="rememberme"]):not([for="pw-weak"]),
form#resetpassform .user-pass-wrap:has(input:focus) label:not([for="rememberme"]):not([for="pw-weak"]),
.sdi-reset-pass-group.is-focused label {
	color: var(--sdi-accent-color) !important;
}

/* Password Toggle Wrapper & Absolute Eye Icon - Full Width */
body.login .wp-pwd,
body.login form .wp-pwd,
form#resetpassform .wp-pwd,
.wp-pwd,
.sdi-input-password-wrap {
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	height: 52px !important;
	min-height: 52px !important;
	max-height: 52px !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
	flex: none !important;
}

/* Explicit Reset for Show/Hide Password Toggle Button across all themes/WooCommerce */
button.sdi-pwd-toggle-btn,
button.button.sdi-pwd-toggle-btn,
button.button-secondary.sdi-pwd-toggle-btn,
.sdi-modal-dialog button.sdi-pwd-toggle-btn,
.sdi-custom-login-form button.sdi-pwd-toggle-btn,
.sdi-input-password-wrap button.sdi-pwd-toggle-btn,
.sdi-input-password-wrap .sdi-pwd-toggle-btn,
.wp-pwd button.sdi-pwd-toggle-btn,
.wp-pwd .sdi-pwd-toggle-btn,
.sdi-pwd-toggle-btn,
body.login .sdi-pwd-toggle-btn,
body.login .wp-pwd .sdi-pwd-toggle-btn,
body.login form#resetpassform .sdi-pwd-toggle-btn {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	bottom: auto !important;
	left: auto !important;
	transform: translateY(-50%) !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	outline: none !important;
	color: #64748B !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 10 !important;
	transition: all 0.2s ease !important;
	line-height: 1 !important;
	font-size: 0 !important;
	text-shadow: none !important;
	box-sizing: border-box !important;
	float: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

button.sdi-pwd-toggle-btn:hover,
button.button.sdi-pwd-toggle-btn:hover,
.sdi-modal-dialog button.sdi-pwd-toggle-btn:hover,
.sdi-input-password-wrap .sdi-pwd-toggle-btn:hover,
.sdi-pwd-toggle-btn:hover,
body.login .sdi-pwd-toggle-btn:hover {
	color: var(--sdi-accent-color, #0065B3) !important;
	background: rgba(0, 0, 0, 0.06) !important;
	background-color: rgba(0, 0, 0, 0.06) !important;
	border: none !important;
	box-shadow: none !important;
}

.sdi-pwd-toggle-btn.sdi-pwd-active,
body.login .sdi-pwd-toggle-btn.sdi-pwd-active {
	color: var(--sdi-accent-color, #0065B3) !important;
}

button.sdi-pwd-toggle-btn svg,
.wp-pwd .sdi-pwd-toggle-btn svg,
.sdi-input-password-wrap .sdi-pwd-toggle-btn svg,
.sdi-pwd-toggle-btn svg {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	display: block !important;
	stroke: currentColor !important;
	fill: none !important;
	pointer-events: none !important;
	margin: 0 !important;
}

/* Cloudflare Turnstile Wrapper - Rata Kiri & Full Width */

.sdi-turnstile-wrapper {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	margin: 18px 0 24px 0 !important;
	min-height: 65px !important;
	box-sizing: border-box !important;
}

.sdi-turnstile-wrapper .cf-turnstile,
.sdi-turnstile-wrapper .cf-turnstile > div,
.sdi-turnstile-wrapper iframe {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	display: block !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   CHECKBOX "INGAT SAYA" & EXTRA LINKS
   ========================================================================== */
body.login .forgetmenot,
body.login p.forgetmenot {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	position: static !important;
	margin: 0 0 24px 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	text-align: left !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
}

.sdi-form-extra {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	position: static !important;
	margin: 0 0 20px 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	text-align: left !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
}

.sdi-form-extra-links {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 0.88rem !important;
	color: #64748B !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

.sdi-form-extra-links a {
	color: var(--sdi-accent-color, #0065B3) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
}

.sdi-form-extra-links a:hover {
	text-decoration: underline !important;
	color: var(--sdi-btn-hover-bg, #004f8c) !important;
}

.sdi-form-extra-links .sdi-separator {
	color: #CBD5E1 !important;
	user-select: none !important;
}

body.login .forgetmenot label,
body.login p.forgetmenot label,
body.login label[for="rememberme"],
.sdi-remember-label {
	position: static !important;
	transform: none !important;
	display: inline-flex !important;
	align-items: center !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	color: #475569 !important;
	cursor: pointer !important;
	user-select: none !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	pointer-events: auto !important;
	z-index: 1 !important;
	white-space: normal !important;
	font-family: var(--sdi-font-body) !important;
}

body.login .forgetmenot input[type="checkbox"],
body.login p.forgetmenot input[type="checkbox"],
.sdi-remember-label input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	border: 1.5px solid #CBD5E1 !important;
	border-radius: 5px !important;
	margin: 0 10px 0 0 !important;
	padding: 0 !important;
	position: static !important;
	transform: none !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	display: inline-grid !important;
	place-content: center !important;
	background: #FFFFFF !important;
	flex-shrink: 0 !important;
	float: none !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	outline: none !important;
}

body.login .forgetmenot input[type="checkbox"]:checked,
body.login p.forgetmenot input[type="checkbox"]:checked,
.sdi-remember-label input[type="checkbox"]:checked {
	background-color: var(--sdi-accent-color) !important;
	border-color: var(--sdi-accent-color) !important;
}

body.login .forgetmenot input[type="checkbox"]:checked::before,
body.login p.forgetmenot input[type="checkbox"]:checked::before,
.sdi-remember-label input[type="checkbox"]:checked::before {
	content: "" !important;
	width: 5px !important;
	height: 9px !important;
	border: solid #FFFFFF !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
	margin-bottom: 2px !important;
}

/* Submit Button - 100% Full Width & Proper Spacing */
body.login .submit,
body.login p.submit,
.sdi-form-submit-wrap {
	float: none !important;
	clear: both !important;
	margin: 10px 0 26px 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	text-align: left !important;
	box-sizing: border-box !important;
	display: block !important;
}

body.login .button.button-primary,
body.login .button-primary,
body.login input[type="submit"],
body.login button[type="submit"],
#wp-submit,
.sdi-submit-button {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	height: 50px !important;
	background: var(--sdi-btn-bg) !important;
	color: var(--sdi-btn-text-color) !important;
	border: none !important;
	border-radius: 9999px !important;
	font-family: var(--sdi-font-heading) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.3px !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px rgba(0, 101, 179, 0.25) !important;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-shadow: none !important;
	box-sizing: border-box !important;
}

body.login .button.button-primary:hover,
body.login .button-primary:hover,
body.login input[type="submit"]:hover,
body.login button[type="submit"]:hover,
.sdi-submit-button:hover {
	background: var(--sdi-btn-hover-bg) !important;
	box-shadow: 0 6px 20px rgba(0, 101, 179, 0.35) !important;
	transform: translateY(-1px) !important;
}

body.login .button.button-primary:active,
body.login .button-primary:active,
body.login input[type="submit"]:active,
body.login button[type="submit"]:active,
.sdi-submit-button:active {
	transform: translateY(1px) !important;
	box-shadow: 0 2px 8px rgba(0, 101, 179, 0.2) !important;
}

/* Loading State on Form Submit */
body.login .button-primary.sdi-loading,
.sdi-submit-button.sdi-loading {
	position: relative !important;
	pointer-events: none !important;
	color: transparent !important;
}

body.login .button-primary.sdi-loading::after,
.sdi-submit-button.sdi-loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	border: 2.5px solid rgba(255, 255, 255, 0.3);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: sdiSpin 0.7s linear infinite;
}

/* Links (Lost password, Register & Back to Blog) - Full Width & Clean Space Above */
body.login #nav,
body.login #backtoblog,
.sdi-nav-links-wrap {
	padding: 0 !important;
	text-align: left !important;
	font-size: 0.9rem !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box !important;
	clear: both !important;
}

body.login #nav {
	margin: 26px 0 10px 0 !important;
	text-align: left !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	align-items: center !important;
	color: #94A3B8 !important;
}

.sdi-form-extra-links {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.sdi-separator,
body.login #nav .sdi-separator,
.sdi-nav-links-wrap .sdi-separator {
	color: #CBD5E1 !important;
	font-weight: 300 !important;
	user-select: none !important;
	display: inline-block !important;
	margin: 0 4px !important;
	font-size: 0.9rem !important;
}

body.login #backtoblog {
	margin: 12px 0 0 0 !important;
	text-align: left !important;
	display: block !important;
}

body.login #nav a,
body.login #backtoblog a,
.sdi-lost-pass-link,
.sdi-back-link,
.sdi-register-link {
	color: var(--sdi-accent-color) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	display: inline-block !important;
	text-align: left !important;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
.sdi-lost-pass-link:hover,
.sdi-back-link:hover,
.sdi-register-link:hover {
	color: var(--sdi-btn-hover-bg) !important;
	text-decoration: underline !important;
}

body.login #backtoblog {
	margin-top: 10px !important;
	text-align: left !important;
}

body.login #backtoblog a,
.sdi-back-link {
	color: #64748B !important;
	font-size: 0.86rem !important;
}

/* Privacy policy link */
body.login .privacy-policy-page-link {
	text-align: left !important;
	margin-top: 16px !important;
}

body.login .privacy-policy-page-link a {
	color: #94A3B8 !important;
	font-size: 0.82rem !important;
	text-decoration: none !important;
}

/* ==========================================================================
   SHORTCODE EMBEDDED & FULLSCREEN BREAKOUT STYLES
   ========================================================================== */
.sdi-shortcode-wrapper {
	font-family: var(--sdi-font-body);
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

.sdi-shortcode-wrapper * {
	box-sizing: border-box;
}

/* FULLSCREEN OVERLAY MODE */
.sdi-shortcode-wrapper.sdi-fullscreen {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: 100vw !important;
	z-index: 999999 !important;
	background: #FFFFFF !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-y: auto !important;
}

/* Adjust when WP Admin Bar is present */
body.admin-bar .sdi-shortcode-wrapper.sdi-fullscreen {
	top: 32px !important;
	height: calc(100vh - 32px) !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar .sdi-shortcode-wrapper.sdi-fullscreen {
		top: 46px !important;
		height: calc(100vh - 46px) !important;
	}
}

.sdi-shortcode-wrapper.sdi-fullscreen .sdi-login-container {
	min-height: 100vh !important;
	height: 100% !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Non-Fullscreen 2-Column Embed */
.sdi-shortcode-container {
	min-height: 540px;
	border-radius: 16px;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* Form-Only Embed */
.sdi-shortcode-wrapper.sdi-layout-form-only {
	display: flex;
	justify-content: center;
	padding: 20px 0;
}

.sdi-shortcode-card {
	width: 100%;
	max-width: 440px;
	background: var(--sdi-right-bg);
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
	text-align: left;
}

.sdi-shortcode-logo-wrap {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 20px;
}

.sdi-shortcode-logo {
	max-width: var(--sdi-logo-width);
	height: auto;
}

/* Logged In Box */
.sdi-shortcode-logged-in {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 400px;
	padding: 30px 20px;
	font-family: var(--sdi-font-body);
}

.sdi-logged-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	padding: 36px 44px;
	text-align: center;
	max-width: 440px;
	width: 100%;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.sdi-logged-avatar {
	border-radius: 50%;
	margin-bottom: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sdi-logged-card h3 {
	font-family: var(--sdi-font-heading);
	margin: 0 0 6px 0;
	color: #0F172A;
}

.sdi-logged-card p {
	color: #64748B;
	margin: 0 0 20px 0;
	font-size: 0.95rem;
}

.sdi-logged-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.sdi-logged-actions a,
.sdi-logged-actions .button,
.sdi-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px 22px !important;
	border-radius: 9999px !important;
	font-family: var(--sdi-font-body) !important;
	font-size: 0.92rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes sdiFadeInUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes sdiFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes sdiSlideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes sdiSpin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (TABLET & MOBILE)
   ========================================================================== */
@media screen and (max-width: 992px) {
	.sdi-login-container {
		flex-direction: column !important;
		min-height: 100vh !important;
		width: 100% !important;
		overflow-x: hidden !important;
	}

	/* Completely hide desktop left column on tablets and mobile */
	.sdi-login-left-column {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		overflow: hidden !important;
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
	}

	/* Full width centered right column */
	.sdi-login-right-column {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		min-height: 100vh !important;
		padding: 40px 24px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
		background: var(--sdi-right-bg, #FFFFFF) !important;
	}

	.sdi-right-column-inner {
		max-width: 440px !important;
		width: 100% !important;
		margin: auto !important;
		padding: 0 !important;
	}

	/* Show elegant rounded mobile brand banner on top of form */
	.sdi-mobile-brand-banner {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		background-color: var(--sdi-left-bg, #0065B3) !important;
		background-image: var(--sdi-left-bg-img, none) !important;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		padding: 22px 24px !important;
		border-radius: 14px !important;
		margin-bottom: 24px !important;
		box-shadow: 0 8px 25px rgba(0, 101, 179, 0.18) !important;
		text-align: center !important;
		position: relative !important;
		overflow: hidden !important;
	}

	.sdi-mobile-brand-banner::before {
		content: "" !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		background-color: var(--sdi-left-overlay-color, #000000) !important;
		opacity: var(--sdi-left-overlay-op, 0.5) !important;
		display: var(--sdi-left-overlay-disp, none) !important;
		pointer-events: none !important;
		z-index: 1 !important;
		border-radius: 14px !important;
	}

	.sdi-mobile-brand-banner img {
		max-width: 220px !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
		display: block !important;
		filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12)) !important;
		position: relative !important;
		z-index: 2 !important;
	}

	.sdi-form-title {
		font-size: 1.65rem !important;
		line-height: 1.3 !important;
	}

	.sdi-form-subtitle {
		font-size: 0.92rem !important;
	}
}

@media screen and (max-width: 480px) {
	.sdi-login-right-column {
		padding: 28px 16px !important;
	}

	.sdi-right-column-inner {
		max-width: 100% !important;
	}

	.sdi-mobile-brand-banner {
		padding: 16px 20px !important;
		margin-bottom: 20px !important;
		border-radius: 12px !important;
	}

	.sdi-mobile-brand-banner img {
		max-width: 180px !important;
	}

	.sdi-form-title {
		font-size: 1.45rem !important;
	}

	.sdi-form-subtitle {
		font-size: 0.88rem !important;
	}

	.sdi-shortcode-card {
		padding: 24px 16px !important;
		border-radius: 12px !important;
	}
}

/* ==========================================================================
   SEARCH BOX & DROPDOWN FILTER ATTACHED GROUPS (HALF-PILL LEFT + HALF-PILL RIGHT)
   ========================================================================== */
.sdi-search-group,
.sdi-filter-group,
.sdi-searchbox-wrap,
.sdi-search-box {
	display: inline-flex !important;
	align-items: stretch !important;
	position: relative !important;
	box-sizing: border-box !important;
}

.sdi-search-group .sdi-input,
.sdi-search-group .sdi-search-input,
.sdi-search-group input[type="text"],
.sdi-search-group input[type="search"],
.sdi-search-group select,
.sdi-filter-group .sdi-input,
.sdi-filter-group .sdi-select,
.sdi-filter-group input[type="text"],
.sdi-filter-group input[type="search"],
.sdi-filter-group select,
.sdi-searchbox-wrap input[type="search"],
.sdi-searchbox-wrap input[type="text"],
.sdi-search-box input[type="search"],
.sdi-search-box input[type="text"] {
	height: 42px !important;
	min-height: 42px !important;
	border: 1.5px solid #CBD5E1 !important;
	border-right: none !important;
	border-radius: 9999px 0 0 9999px !important;
	padding: 0 16px !important;
	font-family: var(--sdi-font-body) !important;
	font-size: 0.92rem !important;
	color: #0F172A !important;
	background: #FFFFFF !important;
	box-sizing: border-box !important;
	outline: none !important;
	transition: all 0.2s ease !important;
}

.sdi-search-group .sdi-input:focus,
.sdi-search-group .sdi-search-input:focus,
.sdi-search-group input[type="text"]:focus,
.sdi-search-group input[type="search"]:focus,
.sdi-search-group select:focus,
.sdi-filter-group .sdi-input:focus,
.sdi-filter-group .sdi-select:focus,
.sdi-filter-group input[type="text"]:focus,
.sdi-filter-group input[type="search"]:focus,
.sdi-filter-group select:focus,
.sdi-searchbox-wrap input[type="search"]:focus,
.sdi-searchbox-wrap input[type="text"]:focus,
.sdi-search-box input[type="search"]:focus,
.sdi-search-box input[type="text"]:focus {
	border-color: var(--sdi-accent-color) !important;
	box-shadow: 0 0 0 3px rgba(0, 101, 179, 0.15) !important;
	z-index: 2 !important;
}

.sdi-search-group .sdi-btn,
.sdi-search-group button,
.sdi-search-group input[type="submit"],
.sdi-filter-group .sdi-btn,
.sdi-filter-group button,
.sdi-filter-group input[type="submit"],
.sdi-searchbox-wrap button,
.sdi-searchbox-wrap input[type="submit"],
.sdi-search-box button,
.sdi-search-box input[type="submit"] {
	height: 42px !important;
	min-height: 42px !important;
	border-radius: 0 9999px 9999px 0 !important;
	padding: 0 20px !important;
	font-family: var(--sdi-font-body) !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	line-height: normal !important;
	margin-left: -1px !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}

/* ==========================================================================
   SDI LOGIN POPUP MODAL (CHECKOUT & FRONTEND AJAX)
   ========================================================================== */
body.sdi-modal-active {
	overflow: hidden !important;
}

.sdi-modal-backdrop {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(15, 23, 42, 0.65) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	z-index: 999999 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
	box-sizing: border-box !important;
}

.sdi-modal-backdrop.sdi-modal-show {
	display: flex !important;
	animation: sdiModalFadeIn 0.25s ease-out forwards;
}

.sdi-modal-dialog {
	position: relative !important;
	width: 100% !important;
	max-width: 440px !important;
	background: #FFFFFF !important;
	border-radius: 20px !important;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	animation: sdiModalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sdi-modal-content {
	padding: 36px 32px 32px 32px !important;
	box-sizing: border-box !important;
	max-height: 90vh !important;
	overflow-y: auto !important;
}

.sdi-modal-close-btn {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: #F1F5F9 !important;
	border: none !important;
	color: #64748B !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	z-index: 10 !important;
	padding: 0 !important;
}

.sdi-modal-close-btn:hover {
	background: #E2E8F0 !important;
	color: #0F172A !important;
	transform: scale(1.05) !important;
}

.sdi-modal-header {
	text-align: center !important;
	margin-bottom: 24px !important;
}

.sdi-modal-logo-wrap {
	margin: 0 0 20px 0 !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #0065B3 !important;
	padding: 16px 24px !important;
	border-radius: 14px !important;
	box-shadow: 0 4px 14px rgba(0, 101, 179, 0.2) !important;
	box-sizing: border-box !important;
}

.sdi-modal-logo {
	max-width: 200px !important;
	max-height: 48px !important;
	height: auto !important;
	width: auto !important;
	object-fit: contain !important;
	display: block !important;
}

.sdi-modal-header .sdi-form-title {
	font-size: 1.45rem !important;
	font-weight: 700 !important;
	color: #0F172A !important;
	margin: 0 0 6px 0 !important;
	font-family: var(--sdi-font-heading) !important;
	line-height: 1.3 !important;
}

.sdi-modal-header .sdi-form-subtitle {
	font-size: 0.88rem !important;
	color: #64748B !important;
	margin: 0 !important;
	font-family: var(--sdi-font-body) !important;
	line-height: 1.4 !important;
}

/* Modal Alerts */
.sdi-modal-alert {
	padding: 12px 16px !important;
	border-radius: 10px !important;
	font-size: 0.88rem !important;
	line-height: 1.45 !important;
	margin-bottom: 20px !important;
	box-sizing: border-box !important;
}

.sdi-alert-error {
	background: #FEF2F2 !important;
	border: 1px solid #FCA5A5 !important;
	color: #991B1B !important;
}

.sdi-alert-success {
	background: #F0FDF4 !important;
	border: 1px solid #86EFAC !important;
	color: #166534 !important;
}

/* Modal Turnstile Wrapper */
.sdi-modal-turnstile-wrap {
	margin: 16px 0 !important;
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 65px !important;
}

.sdi-modal-form .sdi-form-submit-wrap {
	margin-top: 20px !important;
}

.sdi-modal-form .sdi-submit-button {
	width: 100% !important;
	height: 48px !important;
	border-radius: 12px !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	background-color: var(--sdi-btn-bg, #0065B3) !important;
	color: var(--sdi-btn-text-color, #FFFFFF) !important;
	border: none !important;
}

.sdi-modal-form .sdi-submit-button:hover {
	background-color: var(--sdi-btn-hover-bg, #004f8c) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(0, 101, 179, 0.25) !important;
}

.sdi-modal-form .sdi-submit-button.sdi-loading {
	color: var(--sdi-btn-text-color, #FFFFFF) !important;
	opacity: 0.85 !important;
	pointer-events: none !important;
}

.sdi-modal-form .sdi-submit-button.sdi-loading::after {
	content: none !important;
	display: none !important;
}

.sdi-modal-form .sdi-submit-button.sdi-loading .sdi-btn-label {
	color: inherit !important;
}

.sdi-modal-form .sdi-submit-button .sdi-btn-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: sdiBtnSpin 0.7s linear infinite;
	vertical-align: middle;
	flex-shrink: 0;
	box-sizing: border-box;
}

.sdi-modal-form .sdi-submit-button.sdi-loading .sdi-btn-spinner {
	display: inline-block !important;
}

@keyframes sdiModalFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sdiModalSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes sdiBtnSpin {
	to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
	.sdi-modal-dialog {
		max-width: 100% !important;
		border-radius: 16px !important;
	}
	.sdi-modal-content {
		padding: 28px 20px 24px 20px !important;
	}
	.sdi-modal-header .sdi-form-title {
		font-size: 1.3rem !important;
	}
}