/* WP Popup Login - Frontend Styles */

.wpl-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.wpl-overlay.wpl-embedded-mode {
	position: static;
	background: none;
	padding: 0;
	display: block;
}

.wpl-modal-content {
	background: #fff;
	border-radius: 8px;
	max-width: 460px;
	width: 100%;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	display: flex;
	overflow: hidden;
	max-height: 90vh;
}

.wpl-embedded-mode .wpl-modal-content {
	box-shadow: none;
	max-width: 520px;
	margin: 0 auto;
	border: 1px solid #e2e2e2;
}

.wpl-modal-content.wpl-has-banner.wpl-banner-vertical {
	max-width: 780px;
}

.wpl-modal-content.wpl-has-banner.wpl-banner-vertical.wpl-banner-pos-right {
	flex-direction: row-reverse;
}

.wpl-modal-content.wpl-has-banner.wpl-banner-horizontal {
	flex-direction: column;
	max-width: 460px;
}

.wpl-banner-panel {
	flex: 0 0 40%;
	overflow: hidden;
}

.wpl-banner-horizontal .wpl-banner-panel {
	flex: 0 0 auto;
	max-height: 180px;
}

.wpl-banner-panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wpl-form-panel {
	flex: 1 1 auto;
	padding: 32px;
	overflow-y: auto;
}

.wpl-close-btn {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #666;
	z-index: 2;
}

.wpl-close-btn:hover {
	color: #000;
}

.wpl-tabs {
	display: flex;
	border-bottom: 2px solid #eee;
	margin-bottom: 20px;
}

.wpl-tab-btn {
	background: none;
	border: none;
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	color: #777;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
}

.wpl-tab-btn.active {
	color: #2271b1;
	border-bottom-color: #2271b1;
}

.wpl-tab-content {
	display: none;
}

.wpl-tab-content.active {
	display: block;
}

.wpl-form-title {
	margin: 0 0 6px;
	font-size: 20px;
}

.wpl-form-desc {
	font-size: 13px;
	color: #666;
	margin-top: 0;
}

.wpl-field {
	margin-bottom: 14px;
}

.wpl-field label {
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
	font-size: 13px;
}

.wpl-checkbox-field label,
.wpl-field-type-checkbox label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
}

.wpl-field input[type="text"],
.wpl-field input[type="email"],
.wpl-field input[type="password"],
.wpl-field input[type="tel"],
.wpl-field input[type="number"],
.wpl-field input[type="url"],
.wpl-field textarea {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 14px;
}

.wpl-field textarea {
	min-height: 70px;
}

.wpl-submit-btn {
	width: 100%;
	background: #2271b1;
	color: #fff;
	border: none;
	padding: 11px 16px;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wpl-submit-btn:hover {
	background: #135e96;
}

.wpl-submit-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.wpl-links {
	text-align: center;
	margin-top: 12px;
	font-size: 13px;
}

.wpl-links a {
	text-decoration: none;
}

.wpl-notice {
	padding: 10px 14px;
	border-radius: 4px;
	margin-bottom: 16px;
	font-size: 13px;
	line-height: 1.5;
}

.wpl-notice.wpl-notice-error {
	background: #fbeaea;
	color: #9b1c1c;
	border: 1px solid #f3c2c2;
}

.wpl-notice.wpl-notice-success {
	background: #e9f8ee;
	color: #16653e;
	border: 1px solid #b7e6c7;
}

.wpl-notice-static {
	font-size: 13px;
	color: #9b1c1c;
	background: #fbeaea;
	padding: 10px;
	border-radius: 4px;
}

.wpl-recaptcha-field {
	display: flex;
	justify-content: center;
}

.wpl-password-strength-meter {
	display: none;
	margin-top: 6px;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	box-sizing: border-box;
}

.wpl-password-strength-meter.wpl-pw-visible {
	display: block;
}

.wpl-password-strength-meter::before {
	content: "";
	display: block;
	height: 4px;
	border-radius: 2px;
	margin-bottom: 5px;
	background: #ddd;
	width: 100%;
}

.wpl-password-strength-meter[data-score="-1"] {
	background: #f3f3f3;
	color: #777;
}
.wpl-password-strength-meter[data-score="-1"]::before {
	width: 10%;
	background: #ccc;
}

.wpl-password-strength-meter[data-score="0"] {
	background: #fbeaea;
	color: #9b1c1c;
}
.wpl-password-strength-meter[data-score="0"]::before {
	width: 20%;
	background: #dc3232;
}

.wpl-password-strength-meter[data-score="1"] {
	background: #fdf0e6;
	color: #a5580d;
}
.wpl-password-strength-meter[data-score="1"]::before {
	width: 45%;
	background: #f56e28;
}

.wpl-password-strength-meter[data-score="2"] {
	background: #fdf8e3;
	color: #8a6d1a;
}
.wpl-password-strength-meter[data-score="2"]::before {
	width: 70%;
	background: #ffb900;
}

.wpl-password-strength-meter[data-score="3"],
.wpl-password-strength-meter[data-score="4"] {
	background: #e9f8ee;
	color: #16653e;
}
.wpl-password-strength-meter[data-score="3"]::before,
.wpl-password-strength-meter[data-score="4"]::before {
	width: 100%;
	background: #46b450;
}

.wpl-trigger-btn {
	cursor: pointer;
}

@media (max-width: 600px) {
	.wpl-modal-content.wpl-has-banner.wpl-banner-vertical {
		flex-direction: column;
		max-width: 460px;
	}
	.wpl-modal-content.wpl-has-banner.wpl-banner-vertical .wpl-banner-panel {
		max-height: 140px;
	}
}