/*
 * Scoped resets: page builders and themes (Elementor, WoodMart, and many
 * others) commonly apply aggressive global resets to form elements
 * (e.g. button { all: unset; background: none; border: none; }), which can
 * silently make this widget's buttons/inputs invisible or unusable even
 * though the markup renders correctly. Every interactive element below
 * re-asserts its own box model and appearance explicitly so the widget
 * remains visible and usable regardless of the host theme.
 */
.ocwv-box,
.ocwv-box * {
	box-sizing: border-box;
}

.ocwv-box {
	all: revert;
	display: block;
	margin: 16px 0;
	padding: 16px;
	border: 1px solid #d7dade;
	border-radius: 6px;
	background: #f9fafb;
	font-size: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	color: #23282d;
	text-align: left;
}

.ocwv-channel {
	display: block;
	margin-bottom: 14px;
}

.ocwv-channel:last-child {
	margin-bottom: 0;
}

.ocwv-channel-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}

.ocwv-channel-label {
	font-weight: 600;
	color: #23282d;
}

.ocwv-status {
	font-size: 12px;
	font-weight: 600;
	color: transparent;
}

.ocwv-status--verified {
	color: #1a7f37 !important;
}

.ocwv-status--verified::before {
	content: "\2713 ";
}

.ocwv-box button.ocwv-send-btn,
.ocwv-box button.ocwv-verify-btn,
.ocwv-box button.ocwv-resend-btn {
	appearance: auto !important;
	-webkit-appearance: auto !important;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1;
	background: #2271b1 !important;
	color: #ffffff !important;
	border: 1px solid #2271b1 !important;
	border-radius: 4px !important;
	padding: 8px 14px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	min-width: auto !important;
	min-height: auto !important;
	width: auto !important;
	height: auto !important;
}

.ocwv-box button.ocwv-send-btn:hover,
.ocwv-box button.ocwv-verify-btn:hover,
.ocwv-box button.ocwv-resend-btn:hover {
	background: #135e96 !important;
	border-color: #135e96 !important;
	color: #ffffff !important;
}

.ocwv-box button:disabled,
.ocwv-box .ocwv-busy {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

.ocwv-otp-wrap {
	display: none;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed #d7dade;
}

.ocwv-otp-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ocwv-box input.ocwv-otp-input {
	display: inline-block !important;
	visibility: visible !important;
	width: 140px !important;
	max-width: 100%;
	letter-spacing: 3px !important;
	font-size: 16px !important;
	font-family: inherit !important;
	padding: 6px 10px !important;
	margin: 0 !important;
	border: 1px solid #8c8f94 !important;
	border-radius: 4px !important;
	background: #ffffff !important;
	color: #1d2327 !important;
	box-shadow: none !important;
}

.ocwv-timer {
	font-variant-numeric: tabular-nums;
	color: #646970;
	font-size: 12px;
}

.ocwv-resend-line {
	margin-top: 6px;
	font-size: 12px;
	color: #646970;
}

.ocwv-box button.ocwv-resend-btn {
	background: transparent !important;
	color: #2271b1 !important;
	border-color: transparent !important;
	padding: 2px 4px !important;
	text-decoration: underline !important;
}

.ocwv-error {
	display: none;
	color: #d63638;
	font-size: 12px;
	margin-top: 6px;
}

.ocwv-error[role="alert"]:not(:empty) {
	display: block;
}

.wpforms-submit.ocwv-submit-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

@media ( max-width: 480px ) {
	.ocwv-box input.ocwv-otp-input {
		width: 100% !important;
	}
	.ocwv-channel-row {
		flex-direction: column;
		align-items: flex-start;
	}
}