/*
 * Botcus WhatsApp OTP login widget — minimal stylesheet.
 *
 * The widget HTML deliberately uses WooCommerce's standard form classes
 * (.woocommerce-form, .woocommerce-Input, .form-row, .woocommerce-Button)
 * so the merchant's theme styles the buttons, inputs, labels, focus rings
 * and typography automatically. This file ONLY contains structural rules
 * that aren't covered by WC's defaults: layout of the country picker, the
 * message line color, the code-row reveal width, and a couple of spacing
 * tweaks. Every color and font is theme-inherited.
 *
 * Add overrides in your theme's CSS by targeting .botcus-wc-otp-login.
 */

.botcus-wc-otp-login {
	margin: 0 0 1.5em;
	font-family: inherit;
	color: inherit;
}

.botcus-wc-otp-login .botcus-wc-otp-title {
	font: inherit;
	font-size: 1.25em;
	font-weight: 600;
	margin: 0 0 1em;
	color: inherit;
}

.botcus-wc-otp-login .form-row {
	margin: 0 0 1em;
}

/* intl-tel-input integrates cleanly with WC inputs when the input keeps
   full width inside the form-row and the country dropdown is positioned
   relative to the wrapper. */
.botcus-wc-otp-login .iti {
	display: block;
	width: 100%;
}
.botcus-wc-otp-login .iti input[type="tel"],
.botcus-wc-otp-login .iti input.input-text {
	width: 100%;
}

.botcus-wc-otp-login .botcus-wc-otp-code {
	letter-spacing: 0.25em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.botcus-wc-otp-login .botcus-wc-otp-msg {
	margin: 0.5em 0 0;
	min-height: 1.25em;
	font-size: 0.9em;
	opacity: 0.8;
	color: inherit;
}

/* Spacing between the phone input row and the Send-code button row. The
   send button intentionally uses the theme's .button class and inherits
   the primary CTA color from WC / the storefront theme. */
.botcus-wc-otp-login .botcus-wc-otp-send-row,
.botcus-wc-otp-login .botcus-wc-otp-verify-row {
	margin-top: 0.25em;
}

/* When the merchant chooses "OTP only" mode and the standard WC login
   form is hidden, give our widget a bit more breathing room so it doesn't
   look orphaned in the column. */
body.woocommerce-account .u-column1.col-1 > .botcus-wc-otp-login {
	max-width: 32rem;
}

/* v0.3.5: small helper paragraph under the Send-code button explaining
   auto-registration. Theme-color-inherited, slightly muted, smaller. */
.botcus-wc-otp-login .botcus-wc-otp-helper {
	margin: 0.25em 0 1em;
	font-size: 0.85em;
	opacity: 0.7;
	color: inherit;
	line-height: 1.4;
}

/* v0.3.6: ensure the helper paragraph wraps inside narrow theme popups
   (RADIANT BY SRK uses a modal with restricted column width). Force
   normal whitespace + word-break so the line breaks cleanly instead of
   overflowing the modal's right edge. */
.botcus-wc-otp-login .botcus-wc-otp-helper {
	display: block;
	width: 100%;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
}