/*
 * Vitalink Mesotech Skin — Registration screen
 * Reuses the login layout/variables (login.css) and adds step UI.
 */

.vlk-register-body .vlk-login-card-inner { max-width: 460px; }

/* step indicator */
.vlk-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 22px;
}
.vlk-step {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--vlk-blue-light);
	color: var(--vlk-blue-dark);
	font-weight: 700;
	font-size: .95rem;
}
.vlk-step.is-active {
	background: var(--vlk-blue);
	color: #fff;
}
.vlk-step-line {
	width: 54px;
	height: 3px;
	background: var(--vlk-blue-soft);
	border-radius: 2px;
}

/* OTP row: timer + resend */
.vlk-otp-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: -6px 0 16px;
	font-size: .88rem;
}
.vlk-timer { color: var(--vlk-text-muted); }
.vlk-resend {
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--vlk-font);
	font-size: .9rem;
	padding: 0;
}
.vlk-resend[disabled] {
	color: #aab4be;
	cursor: not-allowed;
	text-decoration: none;
}

/* two-column field grid */
.vlk-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}

/* selects styled like inputs */
.vlk-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	border: 1px solid var(--vlk-border);
	border-radius: var(--vlk-radius);
	font-family: var(--vlk-font);
	font-size: 1rem;
	background: #fff;
}
.vlk-field select:focus {
	outline: none;
	border-color: var(--vlk-blue);
	box-shadow: 0 0 0 3px var(--vlk-blue-light);
}

/* doctor checkbox */
.vlk-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 16px;
	font-size: .95rem;
	color: var(--vlk-text);
}

/* success state for the message box */
.vlk-login-error.is-ok {
	background: #e9f7ee;
	border-color: #b7e3c6;
	color: #176a31;
}

@media (max-width: 560px) {
	.vlk-grid2 { grid-template-columns: 1fr; }
}

/* Enlarged textareas (e.g. clinic address) */
.vlk-field textarea,
.vlk-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font: inherit;
	line-height: 1.7;
	min-height: 110px;
	resize: vertical;
	border: 1px solid var(--vlk-border, #d7dee6);
	border-radius: 10px;
	background: #fff;
	color: inherit;
}
.vlk-field textarea:focus,
.vlk-textarea:focus {
	outline: none;
	border-color: var(--vlk-primary, #0074BA);
	box-shadow: 0 0 0 3px rgba(0, 116, 186, .15);
}

/* Success screen after registration */
.vlk-success { text-align: center; padding: 28px 12px; }
.vlk-success-tick {
	width: 76px; height: 76px; margin: 0 auto 18px;
	border-radius: 50%; background: rgba(26, 127, 55, .12);
	color: #1a7f37; font-size: 42px; line-height: 76px;
}
.vlk-success h2 { margin: 0 0 8px; font-size: 20px; }
.vlk-success p { margin: 0; color: #6b7785; }