/**
 * UAWPF Form Locker - Frontend Styles
 *
 * @package UAWPF_Form_Locker
 * @since 1.0.0
 */

/* Screen Reader Only */
.uawpf-form-locker-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Password Form Wrapper */
.uawpf-form-locker-password-wrapper {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.uawpf-form-locker-password-container {
	background: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 40px 30px;
	text-align: center;
	max-width: 450px;
	margin: 0 auto;
}

/* Lock Icon */
.uawpf-form-locker-password-icon {
	margin-bottom: 20px;
}

.uawpf-form-locker-password-icon svg {
	color: #6c757d;
}

/* Message */
.uawpf-form-locker-password-message {
	margin-bottom: 25px;
	color: #495057;
	font-size: 15px;
	line-height: 1.6;
}

/* Password Form */
.uawpf-form-locker-password-form {
	max-width: 300px;
	margin: 0 auto;
}

/* Password Field */
.uawpf-form-locker-password-field {
	margin-bottom: 15px;
}

.uawpf-form-locker-password-input {
	display: block;
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 6px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	text-align: center;
}

.uawpf-form-locker-password-input:focus {
	border-color: #e27730;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(226, 119, 48, 0.15);
}

.uawpf-form-locker-password-input::placeholder {
	color: #adb5bd;
}

/* Error Message */
.uawpf-form-locker-password-error {
	margin-bottom: 15px;
	padding: 10px 15px;
	background: #fef0f0;
	border: 1px solid #f5c6cb;
	border-radius: 6px;
	color: #721c24;
	font-size: 14px;
	text-align: center;
}

/* Submit Button */
.uawpf-form-locker-password-submit {
	margin-top: 15px;
}

.uawpf-form-locker-password-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	background-color: #e27730;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, transform 0.1s ease;
}

.uawpf-form-locker-password-button:hover {
	background-color: #c9661f;
}

.uawpf-form-locker-password-button:active {
	transform: scale(0.98);
}

.uawpf-form-locker-password-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Loading State */
.uawpf-form-locker-button-loading {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.uawpf-form-locker-spinner {
	animation: uawpf-form-locker-spin 1s linear infinite;
}

@keyframes uawpf-form-locker-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Restriction Message */
.uawpf-form-locker-restriction {
	background: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 40px 30px;
	text-align: center;
	max-width: 450px;
	margin: 0 auto;
}

.uawpf-form-locker-restriction-icon {
	margin-bottom: 20px;
}

.uawpf-form-locker-restriction-icon svg {
	color: #6c757d;
}

.uawpf-form-locker-restriction-message {
	color: #495057;
	font-size: 15px;
	line-height: 1.6;
}

/* Hide locked form */
.uawpf-form-locker-locked .wpforms-form {
	display: none !important;
}

/* Success State Animation */
.uawpf-form-locker-password-wrapper.uawpf-form-locker-success {
	animation: uawpf-form-locker-fadeout 0.3s ease-out forwards;
}

@keyframes uawpf-form-locker-fadeout {
	to {
		opacity: 0;
		transform: translateY(-10px);
	}
}

/* Form Reveal Animation */
.uawpf-form-locker-form-revealed {
	animation: uawpf-form-locker-fadein 0.3s ease-out;
}

@keyframes uawpf-form-locker-fadein {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Age Verification Styles (Pro) */
.uawpf-form-locker-age-wrapper {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.uawpf-form-locker-age-container {
	background: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 40px 30px;
	text-align: center;
	max-width: 500px;
	margin: 0 auto;
}

.uawpf-form-locker-age-form {
	max-width: 400px;
	margin: 0 auto;
}

.uawpf-form-locker-age-selects {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-bottom: 20px;
}

.uawpf-form-locker-age-select {
	flex: 1;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s ease-in-out;
}

.uawpf-form-locker-age-select:focus {
	border-color: #e27730;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(226, 119, 48, 0.15);
}

/* Email Verification Styles (Pro) */
.uawpf-form-locker-email-wrapper {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.uawpf-form-locker-email-container {
	background: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 40px 30px;
	text-align: center;
	max-width: 450px;
	margin: 0 auto;
}

.uawpf-form-locker-email-input {
	display: block;
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 6px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.uawpf-form-locker-email-input:focus {
	border-color: #e27730;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(226, 119, 48, 0.15);
}

.uawpf-form-locker-email-sent {
	background: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 6px;
	padding: 15px;
	margin-top: 15px;
	color: #155724;
}

.uawpf-form-locker-email-sent svg {
	vertical-align: middle;
	margin-right: 8px;
}

/* Responsive */
@media screen and (max-width: 480px) {
	.uawpf-form-locker-password-container,
	.uawpf-form-locker-age-container,
	.uawpf-form-locker-email-container,
	.uawpf-form-locker-restriction {
		padding: 30px 20px;
	}
	
	.uawpf-form-locker-age-selects {
		flex-direction: column;
	}
}