/*
 * IMPORTANT: every interactive element below sets its OWN text color,
 * background, and border explicitly (with !important where needed).
 * This widget can be embedded on WooCommerce checkout pages and other
 * themed pages whose CSS often styles generic <button>/<input> elements
 * assuming a specific context (e.g. "all buttons have white text").
 * Without explicit overrides here, that inherited styling can make our
 * tab labels or field text invisible (e.g. white text on a white
 * background). Everything here is self-contained on purpose.
 */

.teem-otp-wrapper {
	max-width: 400px; margin: 0 auto; font-size: 14px;
	color: #333 !important;
	box-sizing: border-box;
}
.teem-otp-wrapper * { box-sizing: border-box; }
.teem-otp-title { margin-bottom: 15px; color: #222 !important; }

.teem-otp-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.teem-otp-tab {
	flex: 1; padding: 8px 10px;
	border: 1px solid #ccc !important;
	background: #f7f7f7 !important;
	color: #333 !important;
	cursor: pointer; border-radius: 4px; font-size: 13px;
	box-shadow: none !important; text-shadow: none !important;
	font-weight: 600;
}
.teem-otp-tab.active {
	background: #333 !important;
	color: #fff !important;
	border-color: #333 !important;
}

.teem-otp-theme-brand .teem-otp-tab.active { background: #CC0000 !important; border-color: #CC0000 !important; }
.teem-otp-theme-brand .teem-otp-submit,
.teem-otp-theme-brand .teem-otp-send-code { background: #CC0000 !important; border-color: #CC0000 !important; color: #fff !important; }
.teem-otp-theme-brand .teem-otp-title { color: #CC0000 !important; }

.teem-otp-panel p { margin-bottom: 12px; }
.teem-otp-panel label { display: block; font-weight: 600; margin-bottom: 4px; color: #333 !important; }
.teem-otp-panel input[type="text"],
.teem-otp-panel input[type="password"],
.teem-otp-panel input[type="email"] {
	width: 100%; padding: 8px 10px;
	border: 1px solid #ccc !important;
	border-radius: 4px;
	background: #fff !important;
	color: #222 !important;
	box-shadow: none !important;
}
.teem-otp-inline { display: flex; align-items: center; gap: 6px; font-weight: normal; color: #333 !important; }
.teem-otp-inline input[type="checkbox"] { width: auto !important; }

.teem-otp-submit, .teem-otp-send-code {
	width: 100%; padding: 10px; border: none !important; border-radius: 4px;
	background: #333 !important; color: #fff !important; cursor: pointer; font-weight: 600;
	box-shadow: none !important; text-shadow: none !important;
}
.teem-otp-submit:hover, .teem-otp-send-code:hover { opacity: 0.9; color: #fff !important; }
.teem-otp-submit:disabled, .teem-otp-send-code:disabled { opacity: 0.6; cursor: default; }

.teem-otp-resend { background: none !important; border: none !important; color: #666 !important; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.teem-otp-resend:disabled { color: #bbb !important; cursor: default; text-decoration: none; }

.teem-otp-messages { margin-bottom: 10px; }
.teem-otp-messages .teem-otp-msg { padding: 8px 12px; border-radius: 4px; margin-bottom: 8px; font-size: 13px; }
.teem-otp-messages .teem-otp-msg-error { background: #fbdada !important; color: #a30000 !important; }
.teem-otp-messages .teem-otp-msg-success { background: #d7f4dd !important; color: #1a7431 !important; }

.teem-otp-branding { text-align: center; font-size: 11px; color: #999 !important; margin-top: 20px; }
.teem-otp-forgot { font-size: 12px; color: #555 !important; }

.teem-otp-builtin-captcha { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.teem-otp-captcha-img { border: 1px solid #ccc; border-radius: 4px; display: block; }
.teem-otp-captcha-refresh {
	background: #fff !important; color: #333 !important; border: 1px solid #ccc !important; border-radius: 4px; cursor: pointer;
	font-size: 16px; padding: 4px 8px; line-height: 1;
}
.teem-otp-captcha-answer { width: 100% !important; margin-top: 6px; }
.teem-otp-recaptcha, .teem-otp-recaptcha-v2 { margin-bottom: 12px; }