/* DADI Email Verification – register form styling.
 *
 * IMPORTANT: the Woodmart theme on the My-Account page (body.page-id-13) forces
 * ALL form inputs to width:100% with tall pill styling using !important rules
 * such as:  .page-id-13 .woocommerce form input[type=text] { width:100% !important; padding:18px 30px !important; ... }
 *
 * To win against those, the verification code input is targeted by its #id
 * (specificity 100, beats the theme's class-based !important rules) and the
 * "Get code" button is positioned INSIDE the input pill on the right. This keeps
 * the field looking exactly like the email / password fields above it.
 */

.dadi-verify-row {
	position: relative;
}

.dadi-verify-row .dadi-code-group {
	position: relative;
	display: block;
	width: 100%;
}

/* Reserve space on the right of the field for the button.
   #id selector + !important overrides the theme's forced padding. */
#dadi_verify_code.dadi-code-input {
	padding-right: 150px !important;
	box-sizing: border-box !important;
	text-align: left !important;
}

/* The "Get code" button, sitting inside the field on the right. */
.dadi-verify-row .dadi-code-group .dadi-get-code,
.dadi-verify-row .dadi-code-group button.dadi-get-code {
	position: absolute !important;
	top: 50% !important;
	right: 8px !important;
	transform: translateY(-50%) !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	border: none !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	background-image: none !important;
	color: #0a0a0a !important;
	white-space: nowrap !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer !important;
	transition: background .2s ease, opacity .2s ease !important;
}

.dadi-verify-row .dadi-code-group .dadi-get-code:hover {
	background: #f0f0f0 !important;
	color: #0a0a0a !important;
}

.dadi-verify-row .dadi-code-group .dadi-get-code:disabled {
	opacity: .55 !important;
	cursor: not-allowed !important;
}

/* Status message under the field – bright colours that read on the dark theme. */
.dadi-verify-msg {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	min-height: 1em;
}

.dadi-verify-msg.is-ok {
	color: #4ade80 !important;
}

.dadi-verify-msg.is-error {
	color: #ff6b6b !important;
}

/* Small screens: keep the button compact so the typing area stays usable. */
@media (max-width: 480px) {
	#dadi_verify_code.dadi-code-input {
		padding-right: 132px !important;
	}
	.dadi-verify-row .dadi-code-group .dadi-get-code,
	.dadi-verify-row .dadi-code-group button.dadi-get-code {
		padding: 9px 14px !important;
		font-size: 13px !important;
		right: 6px !important;
	}
}