/* Dedicated form styles — referenced from pages with form fields.
   Keeps form styling separate from site-wide / master page styles.
   Only overrides form-specific rules (font sizes, padding, rounded inputs, layout helpers). */

.login-wrapper,
.form-wrapper,
.inscricao-wrapper {
	max-width: 75%;
	margin: 0;
	box-sizing: border-box;
	padding: 0 12px;
}

/* row layout for label + control */
.form-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 10px 0;
}

/* label area (field name) */
.form-row .rotuloLinha {
	width: 100%;
	min-width: 100px;
	font-weight: 600;
	padding-right: 8px;
	text-align: left;
	font-size: 14px;
}

/* right cell with inputs */
.form-row .tabelaForm {
	flex: 1 1 auto;
}

/* section headings */
.section-heading {
	font-size: 16px;
	margin: 8px 0;
}

/* message and validation rows */
.message-row,
.validation-row {
	margin: 8px 0 12px 0;
}

/* form groups and helpers */
.radio-row,
.panels-row,
.links-row,
.submit-row {
	margin: 8px 0;
}

/* larger font, padding, and lightly rounded inputs */
.txtBox,
.txtBoxDDD,
.txtBoxTelefone {
	font-size: 14px;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid #004C80;
	background-color: #FFFFFF;
	color: #004C80;
	box-sizing: border-box;
}

/* DDD/small fields keep constrained width */
.txtBoxDDD {
	width: 48px;
	max-width: 48px;
}

/* phone field width handled safely */
.txtBoxTelefone {
	max-width: 200px;
	width: 75%;
}

/* readonly visuals */
.txtBox[readonly],
[readonly="readonly"],
.txtBoxDDD[readonly],
.txtBoxTelefone[readonly] {
	border: none;
	background-color: #FFFFFF;
	padding: 6px 8px;
	font-size: 14px;
	border-radius: 6px;
}

/* make non-rotulo labels/readout larger (validation, summary, category, date, messages) */
.tabelaForm label,
.colspanForm label,
.saudacao label,
.section-heading,
.message-row label,
.validation-row label,
#labMensagemErro,
#lblCategoria,
#lblDataAtual,
#lblSaudacao {
	font-size: 14px;
	padding: 4px 0;
	display: inline-block;
	color: #333333;
}

/* keep field-name label visually distinct */
.rotuloLinha {
	font-weight: 600;
	color: #004C80;
}

/* combo/dropdown sizing */
.combo {
	font-size: 14px;
	padding: 6px 8px;
	border-radius: 6px;
}

/* radio button list: keep each radio and its label on the same line; allow label text to wrap */
.rbl-inline {
	/* ensure the container doesn't force table layout */
	display: block;
}

.rbl-inline span {
	/* each rendered item (ASP.NET usually wraps items in a span) becomes a flex row */
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	margin-right: 12px; /* space between items */
	/* allow label text to shrink/wrap on narrow screens */
	min-width: 0;
}

.rbl-inline span input[type="radio"] {
	flex: 0 0 auto;
	margin-top: 3px; /* vertical alignment */
}

.rbl-inline span label {
	/* label (text) will take the remaining space and wrap if necessary */
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.3;
}

/* keep expected behavior on very small screens: items still flow */
@media (max-width: 600px) {
	.rbl-inline span {
		display: flex;
		width: 100%;
	}
	.rbl-inline span label {
		/* allow wrapping of long label text */
		word-break: break-word;
	}
}

/* responsive: stack label + control on small screens */
@media (max-width: 600px) {
	.form-row {
		flex-direction: column;
		align-items: stretch;
	}
	.form-row .rotuloLinha {
		width: 100%;
		margin-bottom: 6px;
	}
	.login-wrapper,
	.inscricao-wrapper,
	.form-wrapper {
		max-width: 100%;
		padding: 0 10px;
	}
}

/* Inline checkbox: keep checkbox and text on same line; allow text to wrap next to checkbox */
.checkbox-inline {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex-wrap: wrap;
}

.checkbox-inline input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px; /* adjust vertical alignment with text */
	width: 20px;
	height: 20px;
	box-sizing: border-box;
}

.checkbox-inline .checkbox-text {
	flex: 1 1 auto;
	min-width: 0; /* allow flex child to shrink and wrap its text */
	line-height: 1.3;
}