.cfo-widget {
	max-width: 400px;
}

.cfo-widget label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	margin-top: 14px;
}

.cfo-field-group {
	margin-bottom: 4px;
}

.cfo-widget input[type="text"],
.cfo-widget input[type="tel"],
.cfo-widget input[type="email"],
.cfo-widget input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

/* Phone-with-prefix rows (Sign-in OTP tab, and Sign-up inline verify).
   flex:1/min-width:0 on the input is essential — without it, the input's
   width:100% (above) overrides flex-shrink and pushes the +91 prefix out
   of the row instead of sitting in front of the field. */
.cfo-phone-row,
.cfo-inline-verify-row,
.cfo-signup-otp-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cfo-phone-row .cfo-phone-input,
.cfo-inline-verify-row .cfo-signup-phone-input,
.cfo-signup-otp-row .cfo-signup-otp-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.cfo-cc-prefix {
	flex: 0 0 auto;
	padding: 11px 12px;
	background: #f2f2f2;
	border-radius: 4px;
	border: 1px solid #ccc;
	white-space: nowrap;
}

/* Icon-in-field styling for the Sign-up form (Name/Phone/Email/Password),
   matching the theme's icon-prefixed input look. Positioned independently
   of the theme's own icon CSS so it renders correctly regardless of
   stylesheet load order — only relies on the zmdi icon font/glyphs being
   available site-wide, which they already are. */
.cfo-input-icon-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
.cfo-signup-name-input{
	padding-left: 75px !important;
}
.cfo-phone-input{
	padding-left: 10px !important;
}
.cfo-signup-phone-input{
	padding-left: 10px !important;
}
.cfo-input-icon-wrap i {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	color: #d9534f;
	font-size: 18px;
	pointer-events: none;
}

.cfo-signup-verified-badge {
	display: inline-block;
	margin-top: 8px;
}

/* Main action buttons (Send OTP, Verify, Log in equivalent, Create Account)
   — full width pill to match the theme's "Log In" button. */
.cfo-button {
	width: 100%;
	display: block;
	margin-top: 14px;
	padding: 0px 18px;
	background: #ed1c23;
	color: #fff;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
	text-align: center;
}

.cfo-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.cfo-button-secondary {
	background: #555;
}

/* Inline variant — sits beside an input (Sign-up Verify/Confirm buttons)
   instead of stacking full-width below it. */
.cfo-button-inline {
	width: auto;
	display: inline-block;
	flex: 0 0 auto;
	margin-top: 0;
	padding: 0px 18px;
	border-radius: 10px;
	font-size: 14px;
	white-space: nowrap;
}

.cfo-error {
	color: #a00;
	margin-top: 8px;
	font-size: 13px;
	display: none;
}

.cfo-checkout-widget {
	margin-top: 10px;
	margin-bottom: 20px;
}

/* ---------------- Password/OTP tabs (CSS-only toggle) ---------------- */

.cfo-tab-wrap {
	max-width: 420px;
}

.cfo-tab-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cfo-tab-buttons {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #e5e5e5;
	margin-bottom: 18px;
}

.cfo-tab-btn {
	cursor: pointer;
	padding: 10px 18px;
	font-weight: 600;
	color: #777;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	user-select: none;
}

.cfo-tab-panel {
	display: none;
}

.cfo-radio-password:checked ~ .cfo-tab-panel-password,
.cfo-radio-otp:checked ~ .cfo-tab-panel-otp {
	display: block;
}

/* Highlight the active tab label. Relies on radio order: password first, otp second. */
.cfo-radio-password:checked ~ .cfo-tab-buttons .cfo-tab-btn:nth-child(1),
.cfo-radio-otp:checked ~ .cfo-tab-buttons .cfo-tab-btn:nth-child(2) {
	color: #d9534f;
	border-bottom-color: #d9534f;
}