@import url("common.css");

@import url("incoices.css");

#user-info-update-form input[type="text"], #user-info-update-form input[type="password"],
	#user-info-update-form input[type="number"], #user-info-update-form select
	{
	width: 97%;
	padding: 0.5rem;
	margin-bottom: 1rem;
	border: 1px solid #ddd;
	border-radius: 3px;
}

#validation-message {
	font-size: 0.9em;
}

#complexity-meter {
	color: var(--primary-color);
}

#card-element {
	width: 100%;
	max-width: 30rem;
	box-sizing: border-box;
	padding: 0.5rem;
	border: 1px solid #ddd;
	border-radius: 3px;
}

#credit-form input[type="number"] {
	width: 100%;
	max-width: 30rem;
	box-sizing: border-box;
	padding: 0.5rem;
	margin-bottom: 1rem;
	border: 1px solid #ddd;
	border-radius: 3px;
	display: block;
}

#qrcode {
	position: absolute;
	height: 180px;
}

#_2FA-form {
	width: 50%;
	margin-left: 200px;
}

input:valid+span::after {
	position: absolute;
	content: "✓";
	padding-left: 5px;
	color: darkgreen;
}

/* Guide page styling */
.guide-content {
	max-width: 900px;
	margin: 0 auto;
}

.guide-screenshot {
	display: block;
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 1.5rem 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* MOBILE start ----------------------------------------------------------- */
@media (max-width: 768px) {
	#_2FA-form {
		width: 100%;
		margin-left: 0;
	}

	/* Absolute positioning overlaps the surrounding copy once the column
	   narrows, so let the QR sit in the flow. */
	#qrcode {
		position: static;
		height: auto;
		max-width: 180px;
	}

	#user-info-update-form input[type="text"],
	#user-info-update-form input[type="password"],
	#user-info-update-form input[type="number"],
	#user-info-update-form select {
		width: 100%;
		box-sizing: border-box;
	}
}
/* MOBILE end */