/**
 * mlsg-pwa-login.css — Light theme, no box shadow on logo.
 */

.mlsg-pwa-login-modal {
	position:        fixed;
	inset:           0;
	z-index:         9999999;
	background:      var(--mlsg-bg-slate);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         24px;
	font-family:     -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.mlsg-login-card {
	width:          100%;
	max-width:      380px;
	display:        flex;
	flex-direction: column;
	align-items:    center;
}

.mlsg-login-logo {
	max-width:     100%;
	height:        auto;
	display:       block;
	margin:        0;
}

.mlsg-login-tagline {
	text-align:    center;
	font-size:     12px;
	color:         var(--mlsg-text-slate);
	font-weight:   500;
	margin:        0 0 28px;
}

.mlsg-login-logo--fallback {
	font-size:      22px;
	font-weight:    700;
	color:          var(--mlsg-navy-deep);
	text-align:     center;
	margin-bottom:  32px;
}

.mlsg-login-error {
	display:       none;
	width:         100%;
	margin-bottom: 16px;
	padding:       12px 14px;
	background:    var(--mlsg-danger-bg);
	border:        1px solid var(--mlsg-danger-border);
	border-radius: 10px;
	color:         var(--mlsg-danger);
	font-size:     13px;
	font-weight:   500;
	text-align:    center;
	line-height:   1.5;
	box-sizing:    border-box;
}

.mlsg-login-field {
	width:         100%;
	margin-bottom: 14px;
	box-sizing:    border-box;
}

.mlsg-login-field label {
	display:        block;
	margin-bottom:  6px;
	font-size:      13px;
	font-weight:    600;
	color:          var(--mlsg-text-slate);
	letter-spacing: 0.01em;
}

.mlsg-login-field input {
	width:              100%;
	padding:            13px 16px;
	background:         var(--mlsg-white);
	border:             1.5px solid var(--mlsg-border-medium);
	border-radius:      12px;
	color:              var(--mlsg-navy-deep);
	font-size:          15px;
	font-family:        inherit;
	outline:            none;
	transition:         border-color 0.18s;
	box-sizing:         border-box;
	-webkit-appearance: none;
}

.mlsg-login-field input::placeholder { color: var(--mlsg-text-subtle); }

.mlsg-login-field input:focus {
	border-color: var(--mlsg-info);
	box-shadow:   0 0 0 3px rgba(59,130,246,0.10);
}

.mlsg-login-pw-wrap { position: relative; }
.mlsg-login-pw-wrap input { padding-right: 48px; }

.mlsg-login-toggle-pw {
	position:    absolute;
	right:       14px;
	top:         50%;
	transform:   translateY(-50%);
	background:  none;
	border:      none;
	padding:     0;
	cursor:      pointer;
	color:       var(--mlsg-text-subtle);
	display:     flex;
	align-items: center;
	transition:  color 0.15s;
}
.mlsg-login-toggle-pw:hover { color: var(--mlsg-text-slate); }

.mlsg-login-btn {
	width:           100%;
	margin-top:      8px;
	padding:         15px;
	background:      linear-gradient(135deg, var(--mlsg-info) 0%, var(--mlsg-info) 100%);
	color:           var(--mlsg-white);
	border:          none;
	border-radius:   12px;
	font-size:       15px;
	font-weight:     700;
	font-family:     inherit;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	transition:      filter 0.18s, transform 0.14s;
	box-shadow:      0 4px 16px rgba(59,130,246,0.25);
	-webkit-appearance: none;
	box-sizing:      border-box;
}
.mlsg-login-btn:hover:not(:disabled)  { filter: brightness(1.08); }
.mlsg-login-btn:active:not(:disabled) { transform: scale(0.98);   }
.mlsg-login-btn:disabled              { opacity: 0.7; cursor: default; }

.mlsg-login-spinner {
	display:          none;
	width:            18px;
	height:           18px;
	border:           2.5px solid rgba(255,255,255,0.35);
	border-top-color: var(--mlsg-white);
	border-radius:    50%;
	animation:        mlsgLoginSpin 0.7s linear infinite;
	flex-shrink:      0;
}
.mlsg-login-btn--loading .mlsg-login-spinner { display: block; }

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

@supports (padding: env(safe-area-inset-bottom)) {
	.mlsg-pwa-login-modal {
		padding-bottom: calc(24px + env(safe-area-inset-bottom));
		padding-top:    calc(24px + env(safe-area-inset-top));
	}
}

/* -- Fingerprint Button ----------------------------------------------------- */

.mlsg-login-biometric-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	width:           100%;
	padding:         14px;
	background:      var(--mlsg-navy-deep);
	color:           var(--mlsg-bg-light);
	border:          none;
	border-radius:   12px;
	font-size:       15px;
	font-weight:     600;
	font-family:     inherit;
	cursor:          pointer;
	margin-bottom:   12px;
	transition:      background 0.18s, transform 0.14s;
	-webkit-appearance: none;
	box-sizing:      border-box;
}
.mlsg-login-biometric-btn:hover  { background: var(--mlsg-navy-mid); }
.mlsg-login-biometric-btn:active { transform: scale(0.98); }

.mlsg-login-divider {
	display:     flex;
	align-items: center;
	width:       100%;
	margin:      0 0 20px;
	gap:         10px;
	color:       var(--mlsg-text-subtle);
	font-size:   12px;
}
.mlsg-login-divider::before,
.mlsg-login-divider::after {
	content:    '';
	flex:       1;
	height:     1px;
	background: var(--mlsg-border-medium);
}

/* -- Enrollment Prompt Overlay --------------------------------------------- */

.mlsg-enroll-overlay {
	position:        fixed;
	inset:           0;
	z-index:         99999999;
	background:      rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(4px);
	display:         flex;
	align-items:     flex-end;
	justify-content: center;
	padding:         0 0 env(safe-area-inset-bottom, 0px);
	opacity:         0;
	transition:      opacity 0.25s ease;
}

.mlsg-enroll-overlay.mlsg-enroll-visible { opacity: 1; }

.mlsg-enroll-card {
	background:       var(--mlsg-white);
	border-radius:    20px 20px 0 0;
	padding:          32px 28px calc(32px + env(safe-area-inset-bottom, 0px));
	width:            100%;
	max-width:        480px;
	display:          flex;
	flex-direction:   column;
	align-items:      center;
	text-align:       center;
	transform:        translateY(100%);
	transition:       transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.mlsg-enroll-overlay.mlsg-enroll-visible .mlsg-enroll-card {
	transform: translateY(0);
}

.mlsg-enroll-icon {
	width:           68px;
	height:          68px;
	background:      var(--mlsg-teal-bg-light);
	border-radius:   20px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--mlsg-google-blue);
	margin-bottom:   20px;
}

.mlsg-enroll-heading {
	font-size:      22px;
	font-weight:    700;
	color:          var(--mlsg-navy-deep);
	letter-spacing: -0.02em;
	margin:         0 0 10px;
}

.mlsg-enroll-body {
	font-size:   14px;
	color:       var(--mlsg-text-slate);
	line-height: 1.5;
	margin:      0 0 28px;
}

.mlsg-enroll-btn {
	width:       100%;
	padding:     14px;
	border:      none;
	border-radius: 12px;
	font-size:   15px;
	font-weight: 600;
	font-family: inherit;
	cursor:      pointer;
	transition:  filter 0.15s, transform 0.12s;
	-webkit-appearance: none;
	box-sizing:  border-box;
}

.mlsg-enroll-btn--yes {
	background: linear-gradient(135deg, var(--mlsg-google-blue) 0%, var(--mlsg-google-blue) 100%);
	color:      var(--mlsg-white);
	margin-bottom: 10px;
	box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}
.mlsg-enroll-btn--yes:hover:not(:disabled)  { filter: brightness(1.08); }
.mlsg-enroll-btn--yes:active:not(:disabled) { transform: scale(0.98); }
.mlsg-enroll-btn--yes:disabled { opacity: 0.65; cursor: default; }

.mlsg-enroll-btn--skip {
	background: transparent;
	color:      var(--mlsg-text-slate);
	border:     1.5px solid var(--mlsg-border-medium) !important;
}
.mlsg-enroll-btn--skip:hover { background: var(--mlsg-bg-slate); }

/* -- Google Sign-In Button ------------------------------------------------- */

.mlsg-login-google-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	width:           100%;
	padding:         13px;
	background:      var(--mlsg-white);
	color:           var(--mlsg-google-text);
	border:          1.5px solid var(--mlsg-google-border);
	border-radius:   12px;
	font-size:       15px;
	font-weight:     600;
	font-family:     inherit;
	cursor:          pointer;
	margin-bottom:   12px;
	transition:      background 0.15s, box-shadow 0.15s, transform 0.12s;
	-webkit-appearance: none;
	box-sizing:      border-box;
	box-shadow:      0 1px 3px rgba(0,0,0,0.08);
}
.mlsg-login-google-btn:hover {
	background:  var(--mlsg-bg-bare);
	box-shadow:  0 2px 8px rgba(0,0,0,0.12);
}
.mlsg-login-google-btn:active  { transform: scale(0.98); }
.mlsg-login-google-btn:disabled { opacity: 0.65; cursor: default; }