/* WP Lead Download v1.0.0 | GPL v2 */
/* ==========================================================================
   WP Lead Download — Public Stylesheet
   All selectors scoped with .wld- prefix. No bare element selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Overlay / Backdrop
   -------------------------------------------------------------------------- */
.wld-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 99999;
	align-items: center;
	justify-content: center;
}

.wld-overlay.wld-open {
	display: flex;
}

/* --------------------------------------------------------------------------
   Modal Box
   -------------------------------------------------------------------------- */
.wld-modal-box {
	background: #fff;
	border-radius: 12px;
	padding: 32px;
	width: 100%;
	max-width: 440px;
	position: relative;
	animation: wldSlideIn 0.25s ease;
	max-height: 90vh;
	overflow-y: auto;
}

@keyframes wldSlideIn {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Close Button
   -------------------------------------------------------------------------- */
.wld-close-btn {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #666;
	padding: 2px 6px;
	border-radius: 4px;
	transition: color 0.15s;
}

.wld-close-btn:hover {
	color: #111;
}

/* --------------------------------------------------------------------------
   Trigger Button (rendered by shortcode)
   -------------------------------------------------------------------------- */
.wld-trigger-btn {
	display: inline-flex;
	align-items: center;
	gap: 0;
	color: #fff;
	border: none;
	padding: 0;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.2s, transform 0.15s;
	line-height: 1;
	overflow: hidden;
	box-shadow: 0 3px 8px rgba(0,0,0,0.22);
	text-decoration: none;
	letter-spacing: 0.01em;
}

.wld-trigger-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(0,0,0,0.28);
}

.wld-trigger-btn:active {
	transform: translateY(0);
	filter: brightness(0.96);
}

/* Label part (left) */
.wld-btn-label {
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

/* PDF icon part (right) */
.wld-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	background: rgba(0, 0, 0, 0.18);
	align-self: stretch;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Form Fields
   -------------------------------------------------------------------------- */
.wld-field {
	margin-bottom: 16px;
}

.wld-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #333;
}

.wld-field input {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
	transition: border-color 0.15s;
	color: #111;
	background: #fff;
}

.wld-field input:focus {
	border-color: var(--wld-color, #0073aa);
	outline: none;
	box-shadow: 0 0 0 2px rgba(var(--wld-color-rgb, 0,115,170), 0.18);
}

/* --------------------------------------------------------------------------
   Submit / Action Button
   -------------------------------------------------------------------------- */
.wld-btn {
	width: 100%;
	padding: 12px;
	background: var(--wld-color, #0073aa);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: filter 0.18s;
}

.wld-btn:hover:not(:disabled) {
	filter: brightness(1.12);
}

.wld-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Spinner
   -------------------------------------------------------------------------- */
.wld-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wldSpin 0.7s linear infinite;
	flex-shrink: 0;
}

@keyframes wldSpin {
	to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   OTP Input
   -------------------------------------------------------------------------- */
#wld-otp-input {
	font-size: 32px;
	letter-spacing: 10px;
	text-align: center;
	width: 100%;
	padding: 16px;
	border: 2px solid #ddd;
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

#wld-otp-input:focus {
	border-color: var(--wld-color, #0073aa);
	outline: none;
}

#wld-otp-input.wld-shake {
	animation: wldShake 0.4s ease;
}

@keyframes wldShake {
	0%,  100% { transform: translateX(0); }
	25%        { transform: translateX(-8px); }
	75%        { transform: translateX(8px); }
}

/* --------------------------------------------------------------------------
   Error Message
   -------------------------------------------------------------------------- */
.wld-error {
	background: #fff2f2;
	color: #c0392b;
	border: 1px solid #f5c6cb;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 13px;
	margin-bottom: 14px;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   OTP Screen — subtext and actions row
   -------------------------------------------------------------------------- */
.wld-otp-subtext {
	color: #555;
	font-size: 14px;
	margin-bottom: 20px;
	line-height: 1.5;
}

.wld-otp-actions {
	text-align: center;
	margin-top: 16px;
	font-size: 13px;
	color: #666;
}

.wld-sep {
	margin: 0 8px;
	color: #ccc;
}

.wld-resend-disabled {
	color: #aaa;
	pointer-events: none;
	text-decoration: none;
	cursor: default;
}

#wld-resend-link:not(.wld-resend-disabled) {
	color: #0073aa;
	text-decoration: underline;
}

#wld-back-link {
	color: #0073aa;
	text-decoration: none;
}

#wld-back-link:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Success Screen
   -------------------------------------------------------------------------- */
.wld-success-icon {
	text-align: center;
	margin-bottom: 16px;
}

#wld-screen-3 {
	text-align: center;
}

#wld-screen-3 h3 {
	font-size: 20px;
	color: #222;
	margin-bottom: 8px;
}

.wld-download-starting {
	color: #888;
	font-size: 13px;
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Modal headings
   -------------------------------------------------------------------------- */
.wld-modal-box h3 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: #1d2327;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Responsive — full-screen modal on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.wld-modal-box {
		padding: 24px 16px;
		border-radius: 0;
		max-width: 100%;
		min-height: 100vh;
		max-height: 100vh;
	}

	.wld-overlay {
		align-items: flex-start;
	}
}