/* Private Content Login Protector - public styles
   All theming driven by CSS custom properties set from the admin
   design panel (see includes/class-settings.php get_css_variables()). */

.pclp-auth-body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--pclp-bg-color, #f3f4f6);
	background-image: var(--pclp-bg-image, none);
	background-size: cover;
	background-position: center;
	font-family: var(--pclp-font-family, system-ui, sans-serif);
	color: var(--pclp-text-color, #111827);
}

.pclp-auth-wrapper {
	width: 100%;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pclp-card {
	width: 100%;
	max-width: var(--pclp-card-width, 400px);
	background: var(--pclp-card-color, #ffffff);
	border-radius: var(--pclp-border-radius, 16px);
	padding: 40px 32px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	animation: pclp-fade-in 0.35s ease-out;
	text-align: center;
}

@keyframes pclp-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pclp-logo {
	max-width: 140px;
	max-height: 80px;
	margin: 0 auto 20px;
	display: block;
}

.pclp-heading {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--pclp-text-color, #111827);
}

.pclp-subheading {
	font-size: 14px;
	opacity: 0.7;
	margin: 0 0 28px;
}

.pclp-form {
	text-align: left;
}

.pclp-field {
	margin-bottom: 18px;
}

.pclp-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.pclp-field input[type="text"],
.pclp-field input[type="email"],
.pclp-field input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: calc(var(--pclp-border-radius, 16px) / 2.5);
	font-size: 15px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	background: #fff;
}

.pclp-field input:focus {
	outline: none;
	border-color: var(--pclp-button-color, #4f46e5);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.pclp-button {
	width: 100%;
	border: none;
	cursor: pointer;
	padding: 13px 18px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	border-radius: calc(var(--pclp-border-radius, 16px) / 2.5);
	background: linear-gradient(135deg, var(--pclp-button-color, #4f46e5), var(--pclp-button-hover-color, #4338ca));
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.pclp-button:hover {
	background: var(--pclp-button-hover-color, #4338ca);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
}

.pclp-button:active {
	transform: translateY(0);
}

.pclp-button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.pclp-forgot-link {
	text-align: center;
	margin-top: 18px;
	font-size: 13px;
}

.pclp-forgot-link a {
	color: var(--pclp-button-color, #4f46e5);
	text-decoration: none;
}

.pclp-forgot-link a:hover {
	text-decoration: underline;
}

.pclp-message {
	font-size: 13px;
	border-radius: 8px;
	display: none;
}

.pclp-message.pclp-visible {
	display: block;
	padding: 10px 12px;
	margin-bottom: 14px;
}

.pclp-message.pclp-error {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

.pclp-message.pclp-success {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
}

.pclp-logout-btn {
	border: none;
	cursor: pointer;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	border-radius: 8px;
	background: var(--pclp-button-color, #4f46e5);
}

.pclp-logout-btn:hover {
	background: var(--pclp-button-hover-color, #4338ca);
}

.pclp-current-user {
	font-weight: 600;
}

/* Responsive breakpoints */
@media (max-width: 600px) {
	.pclp-card {
		padding: 32px 22px;
		max-width: 100%;
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	.pclp-card {
		max-width: min(var(--pclp-card-width, 400px), 90vw);
	}
}