/**
 * KOL Custom Login ETC — Card Styles with Light/Dark Theme
 */

/* =========================================================================
   LOGIN BACKGROUND SHELL
   ========================================================================= */

.kol-login-wrap {
	width: var(--kol-login-shell-width, 1000px);
	height: var(--kol-login-shell-height, 481px);
	min-height: var(--kol-login-shell-height, 481px);
	max-width: none;
	margin: 0 auto;
	background-color: var(--kol-login-bg-color, #f4f7fb);
	color: #1f2937;
	border: 0;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
	border-radius: 8px;
	box-sizing: border-box;
	position: relative;
	overflow: visible;
}

html.dark-mode .kol-login-wrap {
	color: #e0e0e0;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

.kol-login-art {
	width: var(--kol-login-shell-width, 1000px);
	height: var(--kol-login-shell-height, 481px);
	background-color: var(--kol-login-bg-color, #f4f7fb);
	border-radius: inherit;
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.kol-login-art-empty {
	min-height: var(--kol-login-shell-height, 481px);
}

.kol-login-art-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	border-radius: inherit;
}

.kol-login-art-image-dark {
	display: none;
}

html.dark-mode .kol-login-art-has-dark .kol-login-art-image-light {
	display: none;
}

html.dark-mode .kol-login-art-has-dark .kol-login-art-image-dark {
	display: block;
}

.kol-login-form-panel {
	width: var(--kol-login-form-width, 360px);
	background: var(--kol-login-form-bg-color, transparent);
	border-radius: var(--kol-login-form-bg-radius, 10px);
	box-sizing: content-box;
	padding: 10px;
	position: absolute;
	top: 50%;
	right: calc(var(--kol-login-shell-padding, 28px) + var(--kol-login-form-offset, 0px));
	z-index: 2;
	transform: translateY(-50%);
}

/* =========================================================================
   CARD WRAPS — Light Mode
   ========================================================================= */

html.light-mode .kol-register-wrap,
html.light-mode .kol-lostpassword-wrap,
html.light-mode .kol-resetpass-wrap {
	max-width: 420px;
	margin: 0 auto;
	padding: 30px;
	background: white;
	color: #1f2937;
	border: 0px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
}

html.light-mode .kol-form-field label {
	color: #1f2937;
}

html.light-mode .kol-form-field .input,
html.light-mode .kol-form-field input[type="text"],
html.light-mode .kol-form-field input[type="email"],
html.light-mode .kol-form-field input[type="password"] {
	background: #f9fafb;
	border: 1px solid #d1d5db;
	color: #1f2937;
}

html.light-mode .kol-form-field .input:focus,
html.light-mode .kol-form-field input:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	background: white;
}

html.light-mode .kol-toggle-password {
	color: #6b7280;
}

html.light-mode .kol-toggle-password:hover {
	color: #2271b1;
}

html.light-mode .kol-remember label {
	color: #4b5563;
}

html.light-mode .kol-submit input[type="submit"] {
	background: #2271b1;
	color: white;
	border: none;
}

html.light-mode .kol-submit input[type="submit"]:hover {
	background: #135e96;
}

html.light-mode .kol-login-links {
	border-top: 1px solid #e5e7eb;
}

html.light-mode .kol-login-links a {
	color: #2271b1;
}

html.light-mode .kol-form-description {
	color: #6b7280;
}

html.light-mode .kol-login-message {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}

html.light-mode .kol-login-message.kol-login-redirect-message {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #1d4ed8;
}

html.light-mode .kol-login-errors {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

/* =========================================================================
   CARD WRAPS — Dark Mode
   ========================================================================= */

html.dark-mode .kol-register-wrap,
html.dark-mode .kol-lostpassword-wrap,
html.dark-mode .kol-resetpass-wrap {
	max-width: 420px;
	margin: 0 auto;
	padding: 30px;
	background: #1a1a1a;
	color: #e0e0e0;
	border: 0px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
}

html.dark-mode .kol-form-field label {
	color: #e0e0e0;
}

html.dark-mode .kol-form-field .input,
html.dark-mode .kol-form-field input[type="text"],
html.dark-mode .kol-form-field input[type="email"],
html.dark-mode .kol-form-field input[type="password"] {
	background: #2a2a2a;
	border: 1px solid #3a3a3a;
	color: #e0e0e0;
}

html.dark-mode .kol-form-field .input:focus,
html.dark-mode .kol-form-field input:focus {
	border-color: #5b9dd9;
	box-shadow: 0 0 0 1px #5b9dd9;
	background: #333333;
}

html.dark-mode .kol-toggle-password {
	color: #9ca3af;
}

html.dark-mode .kol-toggle-password:hover {
	color: #5b9dd9;
}

html.dark-mode .kol-remember label {
	color: #9ca3af;
}

html.dark-mode .kol-submit input[type="submit"] {
	background: #5b9dd9;
	color: #1a1a1a;
	border: none;
}

html.dark-mode .kol-submit input[type="submit"]:hover {
	background: #7ab3e3;
}

html.dark-mode .kol-login-links {
	border-top: 1px solid #3a3a3a;
}

html.dark-mode .kol-login-links a {
	color: #5b9dd9;
}

html.dark-mode .kol-form-description {
	color: #9ca3af;
}

html.dark-mode .kol-login-message {
	background: #1a2e1a;
	border: 1px solid #2d5a2d;
	color: #86efac;
}

html.dark-mode .kol-login-message.kol-login-redirect-message {
	background: #172554;
	border-color: #1d4ed8;
	color: #bfdbfe;
}

html.dark-mode .kol-login-errors {
	background: #2e1a1a;
	border: 1px solid #5a2d2d;
	color: #fca5a5;
}

/* =========================================================================
   SHARED — Theme-independent styles
   ========================================================================= */

.kol-form-field {
	margin-bottom: 16px;
}

.kol-form-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}

.kol-form-field .input,
.kol-form-field input[type="text"],
.kol-form-field input[type="email"],
.kol-form-field input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	border-radius: 6px;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.kol-form-field .input:focus,
.kol-form-field input:focus {
	outline: none;
}

/* Password toggle */
.kol-password-wrap {
	position: relative;
}

.kol-password-wrap .input {
	padding-right: 44px;
}

.kol-toggle-password {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	transition: color 0.2s;
}

/* Remember me */
.kol-remember {
	display: flex;
	align-items: center;
	gap: 6px;
}

.kol-remember label {
	font-weight: normal;
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

/* Submit */
.kol-submit {
	margin-top: 20px;
}

.kol-submit input[type="submit"] {
	width: 100%;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.2s;
}

/* Messages */
.kol-login-message {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 14px;
}

/* Errors */
.kol-login-errors {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 14px;
}

.kol-login-errors p {
	margin: 0 0 4px 0;
}

.kol-login-errors p:last-child {
	margin-bottom: 0;
}

/* Description text */
.kol-form-description {
	font-size: 13px;
	margin-bottom: 16px;
}

/* Nav links */
.kol-login-links {
	margin-top: 20px;
	padding-top: 16px;
	display: flex;
	justify-content: space-between;
	font-size: 13px;
}

.kol-login-links a {
	text-decoration: none;
}

.kol-login-links a:hover {
	text-decoration: underline;
}

/* Password strength meter */
.kol-pass-strength {
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 16px;
	text-align: center;
	display: none;
}

html.light-mode .kol-pass-strength.short  { display: block; background: #fef2f2; color: #991b1b; }
html.light-mode .kol-pass-strength.bad    { display: block; background: #fffbeb; color: #92400e; }
html.light-mode .kol-pass-strength.good   { display: block; background: #ecfdf5; color: #065f46; }
html.light-mode .kol-pass-strength.strong { display: block; background: #eff6ff; color: #1e40af; }

html.dark-mode .kol-pass-strength.short  { display: block; background: #2e1a1a; color: #fca5a5; }
html.dark-mode .kol-pass-strength.bad    { display: block; background: #2e2a1a; color: #fcd34d; }
html.dark-mode .kol-pass-strength.good   { display: block; background: #1a2e1a; color: #86efac; }
html.dark-mode .kol-pass-strength.strong { display: block; background: #1a1a2e; color: #93c5fd; }

@media (max-width: 782px) {
	.kol-login-wrap {
		width: 100%;
		height: auto;
		min-height: 0;
		max-width: 100%;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
	}

	.kol-login-art {
		display: none;
	}

	.kol-login-form-panel {
		width: min(100%, var(--kol-login-form-width, 360px));
		max-width: 100%;
		box-sizing: border-box;
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		margin: 0 auto;
	}

	.kol-login-links {
		gap: 12px;
		flex-wrap: wrap;
	}
}