/* Course Email Verification — Windsor University theme (presentation only) */

.cev-box {
	--cev-navy: #0B2A5B;
	--cev-navy-dark: #071D40;
	--cev-orange: #F28C28;
	--cev-orange-soft: rgba(242, 140, 40, .18);
	--cev-text: #3B4556;
	--cev-muted: #6B7689;
	--cev-line: #DCE2EC;
	--cev-surface: #F6F8FC;
	--cev-error: #B42318;
	--cev-success: #127A3E;

	position: relative;
	margin: 10px 0 20px;
	padding: 20px 22px 18px;
	border: 1px solid var(--cev-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(11, 42, 91, .06);
	box-sizing: border-box;
	color: var(--cev-text);
	overflow: hidden;
	animation: cev-in .25s ease-out;
}
/* Brand accent strip (orange → navy), echoing the email */
.cev-box::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cev-orange) 0%, #C9622A 45%, var(--cev-navy) 100%);
}
.cev-box *,
.cev-box *::before,
.cev-box *::after { box-sizing: border-box; }

.cev-box[hidden],
.cev-box [hidden] { display: none !important; }

@keyframes cev-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* Notice: "We sent a code…" with an envelope badge */
.cev-box .cev-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--cev-text);
}
.cev-box .cev-notice::before {
	content: "";
	flex: 0 0 38px;
	height: 38px;
	border-radius: 10px;
	background-color: #FFF1E2;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E07B16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

/* Label — navy, bold, like the reference */
.cev-box .cev-label {
	display: block;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--cev-navy);
}

.cev-box .cev-row {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
}

/* Code input — rounded, orange focus ring. Specific enough to beat Fluent Forms' defaults. */
.cev-box input.cev-code,
.cev-box input.cev-code.ff-el-form-control {
	flex: 1 1 220px;
	min-width: 0;
	max-width: none;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 1.5px solid var(--cev-line);
	border-radius: 10px;
	background: #fff;
	color: var(--cev-navy);
	font-size: 22px;
	font-weight: 700;
	line-height: 52px;
	letter-spacing: .45em;
	text-align: left;
	font-variant-numeric: tabular-nums;
	font-family: inherit;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cev-box input.cev-code::placeholder {
	color: #A3ACBB;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	opacity: 1;
}
.cev-box input.cev-code:hover:not(:disabled) { border-color: #C3CCDA; }
.cev-box input.cev-code:focus,
.cev-box input.cev-code.ff-el-form-control:focus {
	outline: none;
	border-color: var(--cev-orange);
	box-shadow: 0 0 0 4px var(--cev-orange-soft);
}
.cev-box input.cev-code:disabled {
	background: var(--cev-surface);
	color: var(--cev-muted);
	cursor: not-allowed;
}
/* Wrong code: input turns red when an error is showing */
.cev-box:has(.cev-msg.cev-error:not(:empty)) input.cev-code:not(:focus):not(:disabled) {
	border-color: rgba(180, 35, 24, .55);
}

/* Verify button — navy, with orange-tinted hover */
.cev-box .cev-btn {
	flex: 0 0 auto;
	min-width: 120px;
	height: 52px;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	background: var(--cev-navy);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(11, 42, 91, .18);
	transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.cev-box .cev-btn:hover:not(:disabled) {
	background: var(--cev-navy-dark);
	box-shadow: 0 4px 12px rgba(11, 42, 91, .25);
}
.cev-box .cev-btn:active:not(:disabled) { transform: translateY(1px); }
.cev-box .cev-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--cev-orange-soft), 0 0 0 2px var(--cev-orange);
}
.cev-box .cev-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
	box-shadow: none;
}

/* Countdown + resend row */
.cev-box .cev-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 12px;
	font-size: 13px;
}
.cev-box .cev-countdown {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cev-muted);
	font-variant-numeric: tabular-nums;
}
.cev-box .cev-countdown:not(:empty)::before {
	content: "";
	width: 14px;
	height: 14px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7689' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.cev-box .cev-link {
	margin-left: auto;
	padding: 4px 2px;
	border: 0;
	background: none;
	box-shadow: none;
	color: #D9731A;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border-radius: 4px;
	transition: color .15s ease;
}
.cev-box .cev-link:hover:not(:disabled) {
	color: var(--cev-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
}
.cev-box .cev-link:focus-visible {
	outline: 2px solid var(--cev-orange);
	outline-offset: 2px;
}
.cev-box .cev-link:disabled {
	color: var(--cev-muted);
	font-weight: 500;
	cursor: not-allowed;
	opacity: .85;
}

/* Status message */
.cev-box .cev-msg {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	line-height: 1.45;
}
.cev-box .cev-msg:empty { display: none; }
.cev-box .cev-msg.cev-error {
	background: #FEF3F2;
	border: 1px solid #FBD5D1;
	color: var(--cev-error);
}
.cev-box .cev-msg.cev-success {
	background: #ECFDF3;
	border: 1px solid #B7EBC9;
	color: var(--cev-success);
	font-weight: 600;
}
.cev-box .cev-msg.cev-error::before,
.cev-box .cev-msg.cev-success::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	margin-top: 1px;
	background: no-repeat center / contain;
}
.cev-box .cev-msg.cev-error::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E");
}
.cev-box .cev-msg.cev-success::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23127A3E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 10'/%3E%3C/svg%3E");
}

/* Verified state: compact green confirmation card */
.cev-box.cev-verified {
	padding: 14px 18px;
	border-color: #B7EBC9;
	background: #F6FEF9;
	box-shadow: none;
}
.cev-box.cev-verified::before { background: #2DB36B; }
.cev-box.cev-verified {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
}
.cev-box.cev-verified .cev-meta { margin: 0 0 0 auto; order: 2; }
.cev-box.cev-verified .cev-msg {
	order: 1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
}

/* Submit button while locked */
.cev-disabled,
button:disabled.cev-disabled,
input:disabled.cev-disabled {
	opacity: .5;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.cev-box { padding: 18px 16px 16px; }
	.cev-box .cev-btn { flex: 1 1 100%; }
	.cev-box input.cev-code,
	.cev-box input.cev-code.ff-el-form-control { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cev-box { animation: none; }
	.cev-box * { transition: none !important; }
}