/**
 * Full styles for Password Protect Elite blocks.
 * These styles provide complete visual styling with colors, borders, and backgrounds.
 *
 * MODE: All - Full visual styling
 * - Complete colors, borders, and backgrounds
 * - Full button and form styling
 * - All visual enhancements
 */

@import url('../admin/css/vars.css');

.ppe-password-entry-block.ppe-authenticated {
	background: var(--ppe-color-success-bg);
	border: 2px solid var(--ppe-color-success-border);
	border-radius: var(--ppe-radius-lg);
	box-shadow: var(--ppe-shadow-sm);
	padding: var(--ppe-spacing-2xl);
}

.ppe-authenticated-message {
	text-align: center;
}

.ppe-authenticated-message p {
	color: var(--ppe-color-success-text);
	font-size: var(--ppe-font-md);
	font-weight: 500;
	margin: 0 0 var(--ppe-spacing-xl) 0;
}

.ppe-authenticated-message p:last-child {
	margin-bottom: 0;
}

.ppe-redirect-link {
	background: var(--ppe-color-success);
	border-radius: var(--ppe-radius-md);
	color: var(--ppe-color-white);
	display: inline-block;
	font-size: var(--ppe-font-md);
	font-weight: 600;
	padding: var(--ppe-spacing-lg) var(--ppe-spacing-3xl);
	text-decoration: none;
	transition: background-color var(--ppe-transition-base), transform var(--ppe-transition-fast);
}

.ppe-redirect-link:hover {
	background: var(--ppe-color-success-dark);
	color: var(--ppe-color-white);
	text-decoration: none;
	transform: translateY(-1px);
}

.ppe-redirect-link:active {
	transform: translateY(0);
}

.ppe-password-form {
	display: flex;
	flex-direction: column;
	gap: var(--ppe-spacing-xl);
}

.ppe-password-form .ppe-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--ppe-spacing-sm);
}

.ppe-password-form .ppe-password-input {
	border: 2px solid var(--ppe-color-gray-500);
	border-radius: var(--ppe-radius-md);
	font-size: var(--ppe-font-md);
	padding: var(--ppe-spacing-lg) var(--ppe-spacing-xl);
	transition: border-color var(--ppe-transition-base), box-shadow var(--ppe-transition-base);
}

.ppe-password-form .ppe-password-input:focus {
	border-color: var(--ppe-color-primary);
	box-shadow: var(--ppe-shadow-focus);
	outline: none;
}

.ppe-password-form .ppe-submit-button {
	background: var(--ppe-color-primary);
	border: none;
	border-radius: var(--ppe-radius-md);
	color: var(--ppe-color-white);
	cursor: pointer;
	font-size: var(--ppe-font-md);
	font-weight: 600;
	padding: var(--ppe-spacing-lg) var(--ppe-spacing-3xl);
	transition: background-color var(--ppe-transition-base), transform var(--ppe-transition-fast);
}

.ppe-password-form .ppe-submit-button:hover {
	background: var(--ppe-color-primary-dark);
	transform: translateY(-1px);
}

.ppe-password-form .ppe-submit-button:active {
	transform: translateY(0);
}

.ppe-password-form .ppe-message {
	border-radius: var(--ppe-radius-base);
	font-size: var(--ppe-font-base);
	margin-top: var(--ppe-spacing-base);
	padding: var(--ppe-spacing-base);
}

.ppe-password-form .ppe-message.ppe-success {
	background: var(--ppe-color-success-bg);
	border: 1px solid var(--ppe-color-success-border);
	color: var(--ppe-color-success-text);
}

.ppe-password-form .ppe-message.ppe-error {
	background: var(--ppe-color-error-bg);
	border: 1px solid var(--ppe-color-error-border);
	color: var(--ppe-color-error-text);
}

.ppe-password-form .ppe-error-message {
	background: var(--ppe-color-error-bg);
	border: 1px solid var(--ppe-color-error-border);
	border-radius: var(--ppe-radius-base);
	color: var(--ppe-color-error-text);
	font-size: var(--ppe-font-base);
	margin-bottom: var(--ppe-spacing-base);
	padding: var(--ppe-spacing-base);
}

.ppe-protected-content-block.ppe-locked {
	background: var(--ppe-color-gray-200);
	border: 2px solid var(--ppe-color-gray-600);
	border-radius: var(--ppe-radius-lg);
	box-shadow: var(--ppe-shadow-sm);
	padding: var(--ppe-spacing-2xl);
	position: relative;
}

.ppe-protected-message {
	background: var(--ppe-color-warning-bg);
	border: 1px solid var(--ppe-color-warning-border);
	border-radius: var(--ppe-radius-base);
	color: var(--ppe-color-warning-text);
	font-size: var(--ppe-font-md);
	margin-bottom: var(--ppe-spacing-2xl);
	padding: var(--ppe-spacing-xl);
	text-align: center;
}

.ppe-protected-content-block.ppe-locked .ppe-password-form {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin-top: 0;
	padding: 0;
}

.ppe-protected-content-block.ppe-locked .ppe-password-form .ppe-password-input {
	background: var(--ppe-color-white);
	border: 2px solid var(--ppe-color-white);
	border-radius: var(--ppe-radius-md);
	font-size: var(--ppe-font-md);
	padding: var(--ppe-spacing-lg) var(--ppe-spacing-xl);
	transition: border-color var(--ppe-transition-base), box-shadow var(--ppe-transition-base);
}

.ppe-protected-content-block.ppe-locked .ppe-password-form .ppe-password-input:focus {
	border-color: var(--ppe-color-primary);
	box-shadow: var(--ppe-shadow-focus);
	outline: none;
}

.ppe-protected-content-block.ppe-locked .ppe-password-form .ppe-submit-button {
	background: var(--ppe-color-primary);
	border: none;
	border-radius: var(--ppe-radius-md);
	color: var(--ppe-color-white);
	cursor: pointer;
	font-size: var(--ppe-font-md);
	font-weight: 600;
	padding: var(--ppe-spacing-lg) var(--ppe-spacing-3xl);
	transition: background-color var(--ppe-transition-base), transform var(--ppe-transition-fast);
}

.ppe-protected-content-block.ppe-locked .ppe-password-form .ppe-submit-button:hover {
	background: var(--ppe-color-primary-dark);
	transform: translateY(-1px);
}

.ppe-protected-content-block.ppe-locked .ppe-password-form .ppe-submit-button:active {
	transform: translateY(0);
}

.ppe-protected-content-block.ppe-locked .ppe-password-form .ppe-message {
	border-radius: var(--ppe-radius-base);
	font-size: var(--ppe-font-base);
	margin-top: var(--ppe-spacing-base);
	padding: var(--ppe-spacing-base);
}

.ppe-protected-content-block.ppe-locked .ppe-password-form .ppe-message.ppe-success {
	background: var(--ppe-color-success-bg);
	border: 1px solid var(--ppe-color-success-border);
	color: var(--ppe-color-success-text);
}

.ppe-protected-content-block.ppe-locked .ppe-password-form .ppe-message.ppe-error {
	background: var(--ppe-color-error-bg);
	border: 1px solid var(--ppe-color-error-border);
	color: var(--ppe-color-error-text);
}

.ppe-protected-content-block.ppe-locked .ppe-password-form .ppe-error-message {
	background: var(--ppe-color-error-bg);
	border: 1px solid var(--ppe-color-error-border);
	border-radius: var(--ppe-radius-base);
	color: var(--ppe-color-error-text);
	font-size: var(--ppe-font-base);
	margin-bottom: var(--ppe-spacing-base);
	padding: var(--ppe-spacing-base);
}

/* Responsive adjustments */
@media (max-width: 480px) {
	.ppe-password-form {
		max-width: 100%;
	}

	.ppe-password-form .ppe-submit-button {
		width: 100%;
	}

	.ppe-protected-content-block.ppe-locked {
		padding: var(--ppe-spacing-xl);
	}
}