/*
 * Candidate join/login/reset-password/dashboard styles. Builds on the
 * shared shell/card/button/banner/tag/progress-bar classes from
 * assets/css/assessment.css (enqueued alongside this file - see
 * Candidate\Front_Controller::maybe_enqueue()) rather than redefining them,
 * so the registration/login funnel, the assessment funnel, and the
 * dashboard all read as one product instead of three.
 */

.accounnect-candidate-card {
	max-width: 560px;
}

.accounnect-candidate-card label {
	display: block;
	margin-bottom: 1em;
	font-weight: 600;
}

.accounnect-candidate-card input[type="text"],
.accounnect-candidate-card input[type="email"],
.accounnect-candidate-card input[type="tel"],
.accounnect-candidate-card input[type="password"],
.accounnect-candidate-card select {
	display: block;
	width: 100%;
	margin-top: 0.35em;
	padding: 0.6em 0.75em;
	font-weight: 400;
	border: 1px solid #ccd0d9;
	border-radius: 6px;
	font-size: 1em;
	box-sizing: border-box;
}

.accounnect-terms-row {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
}

.accounnect-terms-row input {
	margin: 0;
}

.accounnect-join-tabs {
	display: flex;
	gap: 0.5em;
	margin-bottom: 1.5em;
}

.accounnect-join-tab {
	flex: 1;
	padding: 0.75em;
	border: 1px solid #ccd0d9;
	border-radius: 8px;
	background: #f7f8fa;
	cursor: pointer;
	font-weight: 600;
}

.accounnect-join-tab.active {
	background: #2c3e91;
	border-color: #2c3e91;
	color: #fff;
}

.accounnect-step-indicator {
	display: flex;
	justify-content: center;
	gap: 1em;
	margin: 1em 0 1.5em;
}

.accounnect-step-dot {
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border-radius: 50%;
	background: #eceef3;
	color: #6b7280;
	font-weight: 700;
	font-size: 0.9em;
}

.accounnect-step-dot.active {
	background: #2c3e91;
	color: #fff;
}

.accounnect-step-dot.done {
	background: #d5f5e3;
	color: #1e7d46;
}

.accounnect-skill-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.5em;
}

.accounnect-skill-option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
	padding: 0.5em;
	border: 1px solid #e2e4ea;
	border-radius: 6px;
	margin-bottom: 0;
}

.accounnect-skill-option input {
	margin: 0;
}

.accounnect-notice-banner {
	background: #eef1ff;
	color: #2c3e91;
	border: 1px solid #ccd3ff;
	border-radius: 8px;
	padding: 0.85em 1.1em;
	margin-bottom: 1em;
	font-weight: 600;
}

.accounnect-notice-success {
	background: #eafaf1;
	color: #1e7d46;
	border-color: #b7ebce;
}

/* Dashboard */

.accounnect-dashboard {
	max-width: 1080px;
	margin: 2em auto;
	padding: 0 1em;
}

.accounnect-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25em;
	margin-top: 1.5em;
}

.accounnect-dashboard-card {
	background: #fff;
	border: 1px solid #e2e4ea;
	border-radius: 10px;
	padding: 1.25em;
}

.accounnect-dashboard-card h2 {
	margin-top: 0;
	font-size: 1.1em;
}

.accounnect-score-value-small {
	font-size: 2.5em;
	font-weight: 800;
	color: #2c3e91;
	margin: 0.2em 0;
}

@media ( max-width: 600px ) {
	.accounnect-join-tabs {
		flex-direction: column;
	}
}

/* Dashboard badge for candidates selected for the next PACE level. */
.accounnect-upgrade-badge {
	display: inline-block;
	background: #fff8e1;
	border: 1px solid #f5b800;
	color: #7a4b00;
	border-radius: 999px;
	padding: 0.35em 0.9em;
	font-size: 0.9em;
	font-weight: 700;
}

/* ---- Certify page ---- */

.accounnect-cert-intro {
	max-width: 100%;
	margin: 0.75em 0 1.5em;
}

.accounnect-cert-intro p {
	font-size: 1.08em;
	line-height: 1.75;
	color: #3a4356;
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
	word-break: normal;
	overflow-wrap: normal;
	margin: 0;
}

.accounnect-cert-empty {
	background: #fff;
	border: 1px solid #e2e4ea;
	border-radius: 10px;
	padding: 2.5em 1.5em;
	text-align: center;
}

.accounnect-cert-card {
	text-align: center;
}

.accounnect-cert-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	color: #fff;
	font-size: 1.4em;
	margin-bottom: 0.6em;
}

.accounnect-cert-icon::before {
	line-height: 1;
}

.accounnect-cert-icon-certified {
	background: linear-gradient(135deg, #f5b700, #d97706);
}

.accounnect-cert-icon-pending {
	background: linear-gradient(135deg, #94a3b8, #64748b);
}

.accounnect-cert-score-label {
	margin: 0.4em 0 0;
	font-size: 0.85em;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.accounnect-cert-score {
	font-size: 2.4em;
	font-weight: 800;
	color: #2c3e91;
	margin: 0.1em 0 0.5em;
}

.accounnect-cert-badge {
	display: inline-block;
	border-radius: 999px;
	padding: 0.3em 0.9em;
	font-size: 0.8em;
	font-weight: 700;
}

.accounnect-cert-badge-certified {
	background: #eafaf0;
	color: #15803d;
	border: 1px solid #86e0a8;
}

.accounnect-cert-badge-pending {
	background: #f3f4f6;
	color: #4b5563;
	border: 1px solid #d8dbe0;
}

.accounnect-cert-date {
	margin: 0.6em 0 0;
	font-size: 0.85em;
	color: #6b7280;
}

/* ==== Dashboard + Certify polish (navy / teal / green palette) ==== */

.accounnect-dashboard {
	margin: 1.25em auto 2em;
}

.accounnect-dashboard h1 {
	color: #0b2d52;
	font-size: 1.9rem;
	line-height: 1.2;
	margin: 0 0 0.35em;
}

/* Dashboard hero band */
.accounnect-dash-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25em 2em;
	background: linear-gradient(135deg, #0b2d52, #12507a);
	color: #fff;
	border-radius: 16px;
	padding: 1.6em 1.8em;
	box-shadow: 0 14px 34px rgba(11, 45, 82, 0.18);
}

.accounnect-dash-hero h1 {
	color: #fff;
	margin: 0.1em 0 0.5em;
}

.accounnect-dash-eyebrow {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7fd3d9;
}

.accounnect-dash-hero p {
	margin: 0;
}

.accounnect-btn.accounnect-dash-hero-btn {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.55);
	min-height: 0;
	padding: 0.55em 1.2em;
	font-size: 0.9rem;
}

.accounnect-btn.accounnect-dash-hero-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}

.accounnect-dash-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
}

.accounnect-dash-hero-stats div {
	min-width: 110px;
	text-align: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	padding: 0.8em 1em;
}

.accounnect-dash-hero-stats strong {
	display: block;
	font-size: 1.8rem;
	line-height: 1.1;
}

.accounnect-dash-hero-stats span {
	font-size: 0.78rem;
	opacity: 0.85;
}

/* Dashboard cards */
.accounnect-dash-home .accounnect-dashboard-grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.1em;
	margin-top: 1.25em;
}

.accounnect-dashboard-card {
	border: 1px solid #dde6ec;
	border-radius: 14px;
	padding: 1.3em 1.4em;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.accounnect-dash-home .accounnect-dashboard-card:hover {
	box-shadow: 0 10px 24px rgba(11, 45, 82, 0.1);
	transform: translateY(-2px);
}

.accounnect-dashboard-card h2 {
	display: flex;
	align-items: center;
	gap: 0.6em;
	color: #0b2d52;
	font-size: 1.05rem;
	margin: 0 0 0.9em;
}

.accounnect-dash-icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #eaf4f6;
	color: #0b7f89;
	display: flex;
	align-items: center;
	justify-content: center;
}

.accounnect-dash-icon.dashicons::before {
	font-size: 19px;
	width: 19px;
	height: 19px;
	line-height: 19px;
}

.accounnect-score-ring {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: conic-gradient(#0f9aa5 var(--p, 0%), #e6edf2 0);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.2em 0 0.8em;
	position: relative;
}

.accounnect-score-ring span {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
	font-weight: 800;
	color: #0b2d52;
}

.accounnect-dash-home .accounnect-progress-bar-fill {
	background: linear-gradient(90deg, #0f9aa5, #6ab04c);
}

.accounnect-btn-primary {
	background: #0b2d52;
}

.accounnect-btn-primary:hover {
	background: #123e6e;
}

/* Certify: tighter, left-aligned intro and compact cards */
.accounnect-cert-intro {
	margin: 0.4em 0 1.1em;
}

.accounnect-cert-intro p {
	font-size: 1rem;
	line-height: 1.6;
	text-align: left;
	max-width: 820px;
}

.accounnect-cert-empty {
	padding: 1.6em 1.2em;
	border-radius: 14px;
	border-color: #dde6ec;
}

.accounnect-cert-empty p {
	margin: 0.4em 0 0.8em;
}

.accounnect-cert-card {
	padding: 1.1em 1.2em;
}

.accounnect-cert-icon {
	width: 2.2em;
	height: 2.2em;
	font-size: 1.2em;
	margin-bottom: 0.3em;
}

.accounnect-cert-score {
	font-size: 2rem;
	margin: 0.05em 0 0.35em;
	color: #0b2d52;
}

/* ==== Certify redesign (0.9.4) ==== */
.accounnect-certify { max-width: 1120px; margin: 0 auto; padding: 24px 24px 48px; box-sizing: border-box; }
.accounnect-cert-hero {
	display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
	background: linear-gradient(135deg, #0b2d52, #0b7f89);
	color: #fff; border-radius: 18px; padding: 32px 36px; margin-bottom: 28px;
}
.accounnect-cert-hero-copy { flex: 1 1 380px; min-width: 0; }
.accounnect-cert-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9fe0e5; }
.accounnect-certify .accounnect-cert-hero h1 { color: #fff; margin: 0 0 10px; font-size: 2rem; }
.accounnect-cert-hero-text { margin: 0; max-width: 560px; line-height: 1.65; color: rgba(255,255,255,.88); }
.accounnect-cert-hero-stats { display: flex; gap: 14px; }
.accounnect-cert-hero-stats div { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 14px 24px; text-align: center; min-width: 96px; }
.accounnect-cert-hero-stats strong { display: block; font-size: 2rem; line-height: 1.1; }
.accounnect-cert-hero-stats span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

.accounnect-certify .accounnect-cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.accounnect-certify .accounnect-cert-card {
	position: relative; background: #fff; border: 1px solid #dde6ec; border-radius: 16px;
	padding: 24px; text-align: left; overflow: hidden; box-shadow: 0 6px 18px rgba(11,45,82,.06);
}
.accounnect-cert-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: #c3d0d9; }
.accounnect-cert-card.is-certified::before { background: linear-gradient(90deg, #0f9aa5, #6ab04c); }
.accounnect-cert-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.accounnect-certify .accounnect-cert-icon { margin: 0; width: 44px; height: 44px; font-size: 22px; flex: none; }
.accounnect-certify .accounnect-cert-icon-certified { background: linear-gradient(135deg, #0f9aa5, #6ab04c); }
.accounnect-certify .accounnect-cert-icon-pending { background: #e6edf2; color: #6b7f90; }
.accounnect-certify .accounnect-cert-card h2 { margin: 0 0 14px; font-size: 1.15rem; color: #0b2d52; text-transform: none; letter-spacing: 0; }
.accounnect-cert-scorebox { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-top: 1px solid #eef3f6; border-bottom: 1px solid #eef3f6; }
.accounnect-certify .accounnect-cert-score { font-size: 2.6rem; font-weight: 800; color: #0b2d52; margin: 0; line-height: 1; }
.accounnect-certify .accounnect-cert-score-label { margin: 0; font-size: 12px; color: #6b7f90; }
.accounnect-certify .accounnect-cert-badge-certified { background: #e4f3ea; color: #2f6f4e; border-color: #b7dfc6; }
.accounnect-certify .accounnect-cert-badge-pending { background: #f1f5f8; color: #5d7285; border-color: #dde6ec; }
.accounnect-certify .accounnect-cert-date { margin: 12px 0 0; }
.accounnect-certify .accounnect-cert-empty { border-radius: 16px; border: 1px dashed #c3d0d9; background: #f6f9fb; padding: 48px 24px; }
.accounnect-certify .accounnect-cert-empty h2 { color: #0b2d52; margin: 8px 0; }
.accounnect-certify .accounnect-cert-empty p { max-width: 460px; margin-left: auto; margin-right: auto; color: #3b4f63; text-align: center; }

/* Certify badges: stronger, solid, easier to read (0.9.5) */
.accounnect-certify .accounnect-cert-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: 999px;
	font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .02em;
	white-space: nowrap; border: 0;
}
.accounnect-certify .accounnect-cert-badge::before {
	font-family: dashicons; font-size: 16px; line-height: 1; width: 16px; height: 16px;
}
.accounnect-certify .accounnect-cert-badge-certified {
	background: #2f8a4f; color: #fff; box-shadow: 0 4px 10px rgba(47,138,79,.3);
}
.accounnect-certify .accounnect-cert-badge-certified::before { content: "\f147"; }
.accounnect-certify .accounnect-cert-badge-pending {
	background: #fff4dc; color: #8a5a00; border: 1px solid #f0c36b;
}
.accounnect-certify .accounnect-cert-badge-pending::before { content: "\f469"; }
.accounnect-certify .accounnect-cert-card-top { flex-wrap: wrap; }

/* Skill chips (0.9.6) */
.accounnect-dashboard .accounnect-tag-list {
	display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0;
}
.accounnect-dashboard .accounnect-tag {
	display: inline-flex; align-items: center; gap: 8px;
	background: #eaf4f6; color: #0b2d52;
	border: 1px solid #cfe5e8; border-radius: 999px;
	padding: 8px 16px; font-size: 14px; font-weight: 600; line-height: 1.2;
}
.accounnect-dashboard .accounnect-tag::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0f9aa5; flex: none;
}
.accounnect-dashboard .accounnect-tag:nth-child(3n+2)::before { background: #6ab04c; }
.accounnect-dashboard .accounnect-tag:nth-child(3n)::before { background: #0b2d52; }