/**
 * CEV — checkout / login-authentication front-end extras.
 *
 * The shared popup card (overlay, card, typography, OTP input, buttons,
 * states, motion, responsive) lives in cev-popup.css and is loaded as a
 * dependency of this file. Only checkout-specific surfaces belong here.
 *
 * Colours and radii come from the popup tokens — do not hardcode values a
 * merchant can configure. See cev-popup.css section 1.
 *
 * @package Customer_Email_Verification_Pro
 * @since   3.1.0
 */

/* ==========================================================================
   Checkout — email entry step
   ========================================================================== */

#cev_verify_email input.cev_pin_box_email {
	width: 90%;
	height: 46px;
	padding: 10px 12px;
	margin: 10px 0;
	text-align: initial;
	color: var( --cev-popup-text, #0f172a );
	border: 1.5px solid var( --cev-popup-field-border, #d8dee9 );
	border-radius: var( --cev-popup-radius-sm, 10px );
	background: var( --cev-popup-field-bg, #fff );
	box-sizing: border-box;
	display: inline-block;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#cev_verify_email input.cev_pin_box_email:focus {
	outline: none;
	border-color: var( --cev-popup-accent, #4338ca );
	box-shadow: var( --cev-popup-ring, 0 0 0 4px rgba( 67, 56, 202, 0.16 ) );
}

.cev_pin_verification_form_pro {
	margin-bottom: 0;
}

.cev_pin_verification_form_pro input.cev_pin_box_email::-webkit-inner-spin-button,
.cev_pin_verification_form_pro input.cev_pin_box_email::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.cev_send_email_tag {
	/* Follow the popup's Content Align token (Customizer → Popup Style), so the
	   Verify button centres with the rest of the popup content by default. */
	text-align: var( --cev-popup-align, center );
}

/* Close (X) control on the checkout OTP step. It lives inside the OTP-step
   heading block (.cev-show-reg-content), which is .cev-authorization__heading
   and therefore position:relative — that anchored the absolutely-positioned
   .back_btn to the middle of the popup instead of the card corner. Dropping
   the positioning context here lets .back_btn anchor to the card (the
   position:relative .cev-authorization__holder), matching the signup /
   account-verify popups where the close sits neatly in the top-right. */
#cev_verify_email .cev-show-reg-content {
	position: static;
}

/* ==========================================================================
   Checkout — inline verification (rendered into the checkout form)
   ========================================================================== */

input.input-text.cev_pro_chekout_input {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var( --cev-popup-field-border, #d8dee9 );
	border-radius: var( --cev-popup-radius-sm, 10px );
	background: var( --cev-popup-field-bg, #fff );
	font-size: 14px;
	margin-bottom: 15px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.input-text.cev_pro_chekout_input:focus {
	outline: none;
	border-color: var( --cev-popup-accent, #4338ca );
	box-shadow: var( --cev-popup-ring, 0 0 0 4px rgba( 67, 56, 202, 0.16 ) );
}

button.verify_account_email_chekout_page {
	display: none;
	padding: 10px 16px;
	background-color: var( --cev-popup-accent, #4338ca );
	color: var( --cev-popup-on-accent, #fff );
	border: none;
	border-radius: var( --cev-popup-radius-sm, 10px );
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button.verify_account_email_chekout_page:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 16px -4px rgba( 15, 23, 42, 0.24 );
}

.cev_pro_chekout_button {
	margin: 10px 0;
}

.cev_pro_append {
	margin-bottom: 1rem;
}

small.cev_verification__failure_code_checkout {
	display: inline-block;
	width: 100%;
}

/* ==========================================================================
   Checkout — resend affordance
   ========================================================================== */

a.a_cev_resend_checkout {
	padding: 8px 12px;
	background-color: transparent;
	color: var( --cev-popup-accent, #4338ca );
	text-decoration: none;
	border-radius: var( --cev-popup-radius-sm, 10px );
	font-size: 14px;
	font-weight: 500;
	float: right;
	vertical-align: text-bottom;
	pointer-events: auto;
}

a.a_cev_resend_checkout:hover {
	text-decoration: underline;
}

span.cev_resend_timer {
	float: right;
	padding: 8px 12px;
}

span.cev_resend_timer.cev_resend_front {
	float: none !important;
}

/* ==========================================================================
   Inline email-error message (spam protection + format rejections).
   Renders below the email input inside the verification popup so we never
   have to fall back to a native browser alert().
   ========================================================================== */

.cev_email_error_message {
	margin: 8px 0 4px;
	padding: 10px 12px;
	background: var( --cev-popup-danger-soft, #fef2f2 );
	border: 1px solid rgba( 220, 38, 38, 0.22 );
	border-left: 3px solid var( --cev-popup-danger, #dc2626 );
	border-radius: var( --cev-popup-radius-sm, 10px );
	color: var( --cev-popup-danger, #dc2626 );
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
}