/**
 * WooCommerce WhatsApp OTP Verify - Premium Modal Stylesheet
 *
 * @package WooWhatsAppOtpVerify
 */

:root {
	--wwov-green: hsl(142, 70%, 45%);
	--wwov-green-hover: hsl(142, 70%, 38%);
	--wwov-text-dark: #1a1a1a;
	--wwov-text-muted: #666666;
	--wwov-border: #e5e5e5;
	--wwov-error-bg: hsl(0, 100%, 97%);
	--wwov-error-border: hsl(0, 84%, 60%);
	--wwov-error-text: hsl(0, 84%, 25%);
	--wwov-success-text: hsl(142, 72%, 20%);
}

/* Modal Overlay (Glassmorphism) */
.wwov-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.wwov-modal-overlay.wwov-show {
	opacity: 1;
	visibility: visible;
}

/* Modal Content Box */
.wwov-modal-content {
	background: #ffffff;
	border-radius: 12px;
	width: 100%;
	max-width: 420px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
	transform: translateY(20px);
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	margin: 0 15px;
}

.wwov-modal-overlay.wwov-show .wwov-modal-content {
	transform: translateY(0);
}

/* Header */
.wwov-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid var(--wwov-border);
}

.wwov-modal-header h3 {
	margin: 0 !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--wwov-text-dark) !important;
}

.wwov-modal-close {
	background: none !important;
	border: none !important;
	font-size: 28px !important;
	line-height: 1 !important;
	color: var(--wwov-text-muted) !important;
	cursor: pointer;
	padding: 0 !important;
	margin: 0 !important;
	outline: none;
	transition: color 0.2s ease;
}

.wwov-modal-close:hover {
	color: var(--wwov-text-dark) !important;
}

/* Body */
.wwov-modal-body {
	padding: 24px;
	text-align: center;
}

.wwov-modal-desc {
	margin: 0 0 20px 0 !important;
	font-size: 15px !important;
	color: var(--wwov-text-muted) !important;
	line-height: 1.5 !important;
}

/* Input */
.wwov-input-group {
	margin-bottom: 20px;
}

.wwov-input-text {
	width: 100%;
	max-width: 250px;
	height: 54px !important;
	font-size: 24px !important;
	letter-spacing: 6px !important;
	text-align: center !important;
	font-weight: 700 !important;
	border: 2px solid var(--wwov-border) !important;
	border-radius: 8px !important;
	color: var(--wwov-text-dark) !important;
	outline: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.wwov-input-text:focus {
	border-color: var(--wwov-green) !important;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}

/* Primary Button */
.wwov-btn-primary {
	width: 100% !important;
	background-color: var(--wwov-green) !important;
	color: white !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 14px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

.wwov-btn-primary:hover:not(:disabled) {
	background-color: var(--wwov-green-hover) !important;
}

.wwov-btn-primary:disabled {
	opacity: 0.7 !important;
	cursor: not-allowed !important;
}

/* Footer / Link Button */
.wwov-modal-footer {
	margin-top: 20px;
}

.wwov-btn-link {
	background: none !important;
	border: none !important;
	color: var(--wwov-green) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	padding: 0 !important;
	text-decoration: underline !important;
}

.wwov-btn-link:disabled {
	color: var(--wwov-text-muted) !important;
	text-decoration: none !important;
	cursor: not-allowed !important;
}

/* Messages */
.wwov-status-message {
	margin-bottom: 20px;
	padding: 12px;
	font-size: 14px;
	border-radius: 6px;
	text-align: left;
}

.wwov-status-message.wwov-error {
	background-color: var(--wwov-error-bg);
	border-left: 4px solid var(--wwov-error-border);
	color: var(--wwov-error-text);
}
.wwov-status-message.wwov-success {
	background-color: #ecfdf5;
	border-left: 4px solid #10b981;
	color: var(--wwov-success-text);
}