/*
 * WA Integration — Verify OTP field (frontend).
 * Loaded only on pages where a Verify OTP field actually renders (see
 * Frontend\AssetManager). Built to sit inside Elementor's own field
 * wrapper markup, reusing Elementor's .elementor-field-textual /
 * .elementor-button classes so the field matches the active theme's
 * existing form styling rather than imposing its own look.
 */

.wa-integration-otp-field {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	clear: both;
	width: 100%;
}

.wa-integration-otp-field__phone-row .iti {
	width: 100%;
}

/*
 * In "linked" phone-source mode, the country selector enhances a
 * field that lives outside .wa-integration-otp-field entirely (the
 * site owner's own phone field elsewhere on the form), so the scoped
 * rule above doesn't reach it. This is loaded only on pages with a
 * Verify OTP field, so it's safe to apply to any .iti wrapper here.
 */
.iti {
	width: 100%;
}

/*
 * The flag/dial-code selector is an absolutely-positioned overlay sitting
 * on top of the actual <input>, which spans the full width underneath it.
 * Chrome's own autofill highlight paints that input's background directly
 * — it only shows through on the portion the overlay doesn't cover, which
 * reads as a jarring color mismatch once the overlay itself has a solid
 * background (e.g. via Settings → CSS's Country Selector Background
 * Color). This neutralizes that highlight instead of fighting it with
 * more colors: -webkit-text-fill-color keeps the typed text itself
 * visible, and the absurdly long transition delay is the standard trick
 * for suppressing the autofill background without an !important fight
 * against the browser's own user-agent styling.
 */
.iti input:-webkit-autofill {
	-webkit-text-fill-color: inherit;
	transition: background-color 5000s ease-in-out 0s;
}

/*
 * intl-tel-input draws its dropdown arrow with no image or icon font at
 * all — just an empty box with only its right and bottom borders set,
 * rotated 45deg, so those two sides form a single clean chevron corner
 * (▾ closed, ▴ open via .iti__arrow--up's opposite rotation). A theme's
 * own broad border-reset rule can add/override the other two sides or
 * the border-color, distorting that corner into a diamond/star shape.
 * Re-asserting every side explicitly (clearing first, then setting only
 * the two that should exist) guarantees the intended shape regardless.
 */
.iti__arrow {
	width: 6px !important;
	height: 6px !important;
	margin-left: 4px !important;
	margin-top: -2px !important;
	box-sizing: border-box !important;
	border: none !important;
	border-right: 2px solid currentColor !important;
	border-bottom: 2px solid currentColor !important;
	transform: rotate(45deg) !important;
}

.iti__arrow--up {
	margin-top: 2px !important;
	transform: rotate(-135deg) !important;
}

.iti__search-icon {
	display: none;
}

.iti__search-input {
	padding: 5px 10px;
	border-color: #626262;
	margin-bottom: 5px;
}

.wa-integration-icon-whatsapp {
	color: #25d366;
	vertical-align: middle;
	margin-left: 0.35em;
	position: relative;
	top: -0.1em;
}

/*
 * Invisible to layout by default: __otp-row and __actions remain
 * direct children of .wa-integration-otp-field, each its own stacked
 * row. The "Display on One Line" CSS setting (AssetManager) overrides
 * this to display:flex so this wrapper becomes a single flex row
 * containing both, without touching the outer container (which also
 * holds __phone-row and __status).
 */
.wa-integration-otp-field__code-actions {
	display: contents;
}

.wa-integration-otp-field__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75em;
}

.wa-integration-otp-field__otp-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75em;
}

.wa-integration-otp-field__code-input {
	max-width: 6em !important;
	letter-spacing: 0.2em;
	text-align: center;
	/*
	 * !important because Elementor Pro's own .elementor-field-textual
	 * default border rule carries equal specificity (both are single
	 * class selectors) and this input also carries that class, so
	 * without it the winner is whichever rule happens to load last.
	 */
	border: none !important;
	border-bottom: 1px solid currentColor !important;
	background: transparent !important;
}

.wa-integration-otp-field__countdown {
	font-size: 0.9em;
	font-weight: bold;
	opacity: 0.75;
}

.wa-integration-otp-field__status {
	font-size: 0.9em;
	min-height: 1.2em;
}

.wa-integration-otp-field__status--error {
	color: #d63638;
}

.wa-integration-otp-field__button--busy {
	opacity: 0.6;
	cursor: progress;
}

.wa-integration-otp-field__submit-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media screen and (max-width: 480px) {
	.wa-integration-otp-field__actions,
	.wa-integration-otp-field__otp-row {
		flex-direction: column;
		align-items: stretch;
	}

	.wa-integration-otp-field__code-input {
		max-width: 100%;
	}
}