/* ============================================================================
   Forms 2.0 — Member-Facing Styles
   Mobile-first. All widths collapse to 100% below 768px.
   WCAG 2.1 AA: focus states, color contrast, readable sizes.
   ============================================================================ */


/* ---- layout scaffolding ---- */
.forms2-form {
	max-width: 960px;
	margin: 0 auto;
	padding: 1rem;
}

.forms2-header {
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #e5e5e5;
}

.forms2-title {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
	line-height: 1.3;
}

.forms2-description {
	color: #555;
	line-height: 1.5;
}


/* ---- rows + columns: mobile-first (all full width) ---- */
.forms2-row {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.forms2-field {
	width: 100%;
	padding: 0;
}

.forms2-col-full,
.forms2-col-half,
.forms2-col-third,
.forms2-col-two-thirds {
	flex: 1 1 100%;
	max-width: 100%;
}

/* desktop: side-by-side */
@media (min-width: 768px) {
	.forms2-row {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}
	.forms2-col-full       { flex: 1 1 100%;     max-width: 100%; }
	.forms2-col-half       { flex: 0 1 calc(50% - 0.5rem);    max-width: calc(50% - 0.5rem); }
	.forms2-col-third      { flex: 0 1 calc(33.333% - 0.667rem); max-width: calc(33.333% - 0.667rem); }
	.forms2-col-two-thirds { flex: 0 1 calc(66.666% - 0.333rem); max-width: calc(66.666% - 0.333rem); }
}


/* ---- labels + help ---- */
/* Breathing room above each field's label so stacked fields aren't cramped.
   Targets field labels only (custom fields + the identity block's plain
   <label>s) — NOT .forms2-section-header, so section headers keep their own
   spacing and stay grouped with the fields below them. */
.forms2-label,
.forms2-identity .forms2-field > label {
	margin-top: 0.6rem;
}

.forms2-label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	color: #222;
	line-height: 1.4;
}

.forms2-required {
	color: #c00;
	margin-left: 0.2em;
}

.forms2-help {
	margin-bottom: 0.5rem;
	color: #666;
	font-size: 0.9rem;
	line-height: 1.45;
}

.forms2-sublabel {
	display: block;
	margin: 0.5rem 0 0.25rem;
	font-size: 0.9rem;
	color: #444;
}


/* ---- inputs ---- */
.forms2-field input[type="text"],
.forms2-field input[type="email"],
.forms2-field input[type="number"],
.forms2-field input[type="date"],
.forms2-field input[type="time"],
.forms2-field input[type="file"],
.forms2-field select,
.forms2-field textarea {
	width: 100%;
	/* height:auto overrides Bootstrap's fixed .form-control height:34px (Bootstrap
	   is force-loaded on the admin preview page). Our larger padding + font need
	   more room than 34px, so without this the text clips at the bottom — most
	   visibly on <select>. No-op where Bootstrap isn't loaded. */
	height: auto;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #222;
	background-color: #fff;
	border: 1px solid #b5b5b5;
	border-radius: 4px;
	box-sizing: border-box;
}

.forms2-field input:focus,
.forms2-field select:focus,
.forms2-field textarea:focus {
	outline: none;
	border-color: #2684ff;
	box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.25);
}

.forms2-field input[aria-invalid="true"],
.forms2-field select[aria-invalid="true"],
.forms2-field textarea[aria-invalid="true"] {
	border-color: #c00;
}

.forms2-field textarea {
	min-height: 6rem;
	resize: vertical;
}


/* ---- choice (radio / checkbox / dropdown) ---- */
.forms2-choice-group,
.forms2-yesno-group {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.forms2-choice-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.5rem;
	border-radius: 4px;
	cursor: pointer;
	line-height: 1.4;
}

.forms2-choice-item:hover {
	background-color: #f5f7fa;
}

.forms2-choice-item input {
	margin: 0;
	flex-shrink: 0;
}

/* ---- "Other" option (free-text capture next to a choice option) ----
   The wrapper holds the radio/checkbox + label as one row, with the
   free-text input flowing inline next to the label. Mobile collapse
   stacks the input below the label so it doesn't fight for width. */
.forms2-choice-item-other {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.forms2-choice-item-other .forms2-choice-item {
	margin: 0;
}

.forms2-other-input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.35rem 0.5rem;
	border: 0;
	border-bottom: 1px solid #c0c8d2;
	background: transparent;
	font: inherit;
	color: inherit;
}

.forms2-other-input:focus {
	outline: none;
	border-bottom-color: #3d6db5;
}

.forms2-other-input:disabled {
	color: #8a92a0;
	border-bottom-style: dashed;
}

.forms2-other-input[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.forms2-choice-item-other {
		flex-direction: column;
		align-items: stretch;
	}

	.forms2-other-input {
		flex: 1 1 auto;
	}
}

.forms2-yesno-group {
	flex-direction: row;
	gap: 1rem;
}


/* ---- rating ---- */
.forms2-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.forms2-rating-label-low,
.forms2-rating-label-high {
	font-size: 0.85rem;
	color: #666;
	padding: 0 0.5rem;
}

.forms2-rating-item {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	background-color: #fafafa;
	line-height: 1;
}

.forms2-rating-item input:checked ~ span {
	font-weight: 700;
	color: #1557b2;
}

.forms2-rating-item:has(input:checked) {
	background-color: #e7f0fb;
	border-color: #2684ff;
}

.forms2-rating-na {
	margin-left: 0.75rem;
	opacity: 0.85;
}


/* ---- grid ---- */
.forms2-grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.forms2-grid th,
.forms2-grid td {
	padding: 0.5rem;
	border: 1px solid #e5e5e5;
	text-align: center;
	vertical-align: middle;
}

.forms2-grid thead th {
	background-color: #f5f7fa;
	font-weight: 600;
}

.forms2-grid tbody th {
	text-align: left;
	font-weight: 500;
	background-color: #fafafa;
}

.forms2-grid-cell {
	display: block;
	cursor: pointer;
}

/* mobile grid: stack rows */
@media (max-width: 767px) {
	.forms2-grid thead { display: none; }
	.forms2-grid tbody tr {
		display: block;
		margin-bottom: 1rem;
		border: 1px solid #e5e5e5;
	}
	.forms2-grid tbody th {
		display: block;
		text-align: left;
		padding: 0.5rem;
		border-bottom: 1px solid #e5e5e5;
	}
	.forms2-grid tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 0;
		border-bottom: 1px dotted #eee;
		text-align: left;
	}
	.forms2-grid tbody td::before {
		content: attr(data-col-label);
		color: #555;
	}
}


/* ---- file upload ---- */
.forms2-file {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}


/* ---- section header ---- */
.forms2-section-header {
	margin: 2.25rem 0 0;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid #2684ff;
	color: #1557b2;
	font-size: 1.25rem;
}

/* mms_component_styles.css resets heading margins via an ID selector
   (#mms-main / #mheader_5_wrapper :is(h1..h6) { margin: 0 }) that outranks the
   class rule above, zeroing the section header's top margin and leaving it
   cramped against the field above — on both the admin preview and the live
   form, which both render inside #mms-main. Re-assert the separation at
   matching specificity. The separation lives ABOVE the header; below it the
   header should hug the fields it introduces. */
#mms-main .forms2-section-header,
#mheader_5_wrapper .forms2-section-header {
	margin-top: 2.25rem;
	margin-bottom: 0;
}

/* The section field renders in its own row, whose normal inter-field bottom
   margin would otherwise stack beneath the header (header margin + row margin +
   next label margin = a big gap below). Drop the row's bottom margin so the
   only space under the header is the next field's normal label spacing. */
.forms2-row:has(.forms2-section-header) {
	margin-bottom: 0;
}

.forms2-section-desc {
	margin: 0 0 1rem;
	color: #555;
}


/* ---- progress bar ---- */
.forms2-progress {
	width: 100%;
	height: 6px;
	background-color: #eee;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.forms2-progress-bar {
	height: 100%;
	background-color: #2684ff;
	transition: width 0.2s ease;
}


/* ---- word counter ---- */
.forms2-word-counter {
	margin-top: 0.25rem;
	font-size: 0.85rem;
	color: #666;
	text-align: right;
}

.forms2-word-counter.is-invalid {
	color: #c00;
	font-weight: 600;
}


/* ---- submit row ---- */
.forms2-submit-row {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e5e5;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
}


/* ---- identity block ---- */
.forms2-identity {
	margin-bottom: 1rem;
}


/* ---- error + notice ---- */
.forms2-errors {
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	background-color: #fdecea;
	border-left: 4px solid #c00;
	color: #5a1515;
}

.forms2-errors ul {
	margin: 0;
	padding-left: 1.25rem;
}

.forms2-notice {
	padding: 1rem;
	background-color: #eef4fb;
	border-left: 4px solid #2684ff;
	color: #1557b2;
	margin: 1rem 0;
}


/* ---- confirmation page ---- */
.forms2-confirm {
	max-width: 800px;
	margin: 2rem auto;
	padding: 1.5rem;
	line-height: 1.5;
}

.forms2-payment-block {
	margin-top: 2rem;
	padding: 1rem;
	background-color: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
}

.forms2-return-link {
	margin-top: 1.5rem;
	text-align: center;
}


/* ---- visually hidden (screen reader only) ---- */
.forms2-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ---- condition-hidden fields ---- */
.forms2-field.is-hidden-by-condition {
	display: none;
}


/* ============================================================================
   ACCESS GATE (form_edit.php email + code prompt)
   ============================================================================ */
.forms2-access-gate {
	max-width: 480px;
	margin: 2rem auto;
	padding: 1.5rem;
	background-color: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
}
.forms2-access-gate h1 {
	margin: 0 0 0.75rem;
	font-size: 1.4rem;
}


/* ============================================================================
   PUBLIC RESPONSE LIST (form_list.php)
   ============================================================================ */
.forms2-list-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
}

.forms2-list-header {
	margin-bottom: 1.5rem;
}
.forms2-list-header h1 {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
}
.forms2-list-description {
	color: #555;
	line-height: 1.5;
}

.forms2-list-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 600px) {
	.forms2-list-grid[data-cols="2"],
	.forms2-list-grid[data-cols="3"],
	.forms2-list-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.forms2-list-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
	.forms2-list-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

.forms2-list-card {
	padding: 1rem 1.25rem;
	background-color: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.forms2-list-name {
	margin: 0 0 0.25rem;
	font-size: 1.1rem;
	color: #222;
}
.forms2-list-employer {
	margin-bottom: 0.25rem;
	font-size: 0.9rem;
	color: #555;
}
.forms2-list-address {
	margin-bottom: 0.5rem;
	font-size: 0.85rem;
	color: #777;
}
.forms2-list-values {
	margin: 0.5rem 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 0.75rem;
	font-size: 0.9rem;
}
.forms2-list-values dt { font-weight: 600; color: #555; }
.forms2-list-values dd { margin: 0; color: #222; }

.forms2-list-expand {
	margin-top: 1.25rem;
	text-align: right;
}


/* ============================================================================
   MEMBER SUBMISSIONS PAGE (form_submissions.php)
   ============================================================================ */
.forms2-submissions-page {
	max-width: 900px;
	margin: 0 auto;
	padding: 1rem;
}
.forms2-submissions-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}
.forms2-submissions-table th,
.forms2-submissions-table td {
	padding: 0.6rem;
	text-align: left;
	border-bottom: 1px solid #e5e5e5;
	vertical-align: top;
}
.forms2-submissions-table thead th {
	background-color: #f5f7fa;
	font-weight: 600;
}

/* ============================================================================
   Quiz score panel (form_confirm.php — quiz_mode_ind='X')
   Uses --mms-* color tokens from mms_component_styles.css (linked on that page).
   ============================================================================ */

.forms2-quiz-score {
	text-align: center;
	padding: 1.5rem 1rem;
	margin: 1.5rem 0;
	border-radius: 4px;
	background: var(--mms-success, #dcfce7);
	border: 1px solid var(--mms-success-dark, #166534);
}
.forms2-quiz-score-number {
	font-size: 2rem;
	font-weight: 700;
	color: var(--mms-success-dark, #166534);
	line-height: 1.2;
}
.forms2-quiz-score-label {
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: var(--mms-success-dark, #166534);
	opacity: 0.85;
}

.forms2-quiz-results {
	margin-top: 1.5rem;
}
.forms2-quiz-result-item {
	border: 1px solid var(--mms-secondary-light, #d1d5db);
	border-radius: 4px;
	margin-bottom: 0.75rem;
	overflow: hidden;
}
.forms2-quiz-result-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1rem;
}
.forms2-quiz-result-item.is-correct .forms2-quiz-result-header {
	background: var(--mms-success, #dcfce7);
	border-left: 4px solid var(--mms-success-dark, #166534);
}
.forms2-quiz-result-item.is-partial .forms2-quiz-result-header {
	background: var(--mms-warning, #fef3c7);
	border-left: 4px solid var(--mms-warning-dark, #92400e);
}
.forms2-quiz-result-item.is-incorrect .forms2-quiz-result-header {
	background: var(--mms-error, #fef2f2);
	border-left: 4px solid var(--mms-error-dark, #991b1b);
}
.forms2-quiz-result-icon {
	font-size: 1rem;
	flex-shrink: 0;
}
.forms2-quiz-result-item.is-correct  .forms2-quiz-result-icon { color: var(--mms-success-dark, #166534); }
.forms2-quiz-result-item.is-partial  .forms2-quiz-result-icon { color: var(--mms-warning-dark, #92400e); }
.forms2-quiz-result-item.is-incorrect .forms2-quiz-result-icon { color: var(--mms-error-dark, #991b1b); }
.forms2-quiz-result-name {
	flex: 1;
	font-weight: 500;
	font-size: 0.95rem;
}
.forms2-quiz-result-pts {
	font-size: 0.82rem;
	color: var(--mms-secondary, #6b7280);
	white-space: nowrap;
}
.forms2-quiz-result-detail {
	padding: 0.6rem 1rem;
	font-size: 0.88rem;
	border-top: 1px solid var(--mms-secondary-light, #d1d5db);
}
.forms2-quiz-result-detail p { margin: 0.2rem 0; }
.forms2-quiz-result-your-answer  { color: var(--mms-secondary-dark, #374151); }
.forms2-quiz-result-correct-answer { color: var(--mms-success-dark, #166534); font-weight: 500; }
.forms2-quiz-result-feedback {
	padding: 0.6rem 1rem;
	font-size: 0.88rem;
	font-style: italic;
	color: var(--mms-secondary-dark, #374151);
	border-top: 1px solid var(--mms-secondary-light, #d1d5db);
	background: var(--mms-light-gray, #f3f4f6);
}
.forms2-quiz-result-feedback p { margin: 0.2rem 0; }

/* Empty state shared across pages */
.forms2-empty-state {
	padding: 2rem;
	text-align: center;
	color: #777;
	background-color: #fafafa;
	border: 1px dashed #ccc;
	border-radius: 4px;
}