/* NGO Member Registration — front end */

.ngomr-wrap {
	--ngomr-accent: #1a5fb4;
	--ngomr-border: #d8dde3;
	--ngomr-bg: #f7f9fb;
	--ngomr-text: #1f2933;
	--ngomr-muted: #667085;
	--ngomr-error: #b42318;
	--ngomr-success: #067647;
	--ngomr-radius: 8px;

	box-sizing: border-box;
	color: var(--ngomr-text);
	max-width: 1100px;
	margin: 0 auto;
}

.ngomr-wrap *,
.ngomr-wrap *::before,
.ngomr-wrap *::after {
	box-sizing: inherit;
}

/* Alerts */

.ngomr-alert {
	border-left: 4px solid;
	border-radius: var(--ngomr-radius);
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
}

.ngomr-alert--success {
	background: #ecfdf3;
	border-color: var(--ngomr-success);
}

.ngomr-alert--error {
	background: #fef3f2;
	border-color: var(--ngomr-error);
}

.ngomr-alert h3 {
	margin: 0 0 .5rem;
}

.ngomr-uid {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.25em;
	letter-spacing: .05em;
}

/* Header + payment media */

.ngomr-title {
	margin: 0 0 1rem;
}

.ngomr-media {
	align-items: center;
	background: var(--ngomr-bg);
	border: 1px solid var(--ngomr-border);
	border-radius: var(--ngomr-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 1.75rem;
	padding: 1.25rem;
}

.ngomr-media figure {
	margin: 0;
}

.ngomr-media__qr {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.ngomr-media__qr img {
	border: 1px solid var(--ngomr-border);
	border-radius: var(--ngomr-radius);
	background: #fff;
	height: auto;
	max-width: 180px;
	padding: .5rem;
}

.ngomr-media__qr figcaption {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.ngomr-amount {
	color: var(--ngomr-accent);
	font-size: 1.5rem;
	font-weight: 700;
}

.ngomr-upi {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ngomr-media__qr small {
	color: var(--ngomr-muted);
	max-width: 32ch;
}

.ngomr-media__side {
	flex: 1 1 220px;
}

.ngomr-media__side img {
	border-radius: var(--ngomr-radius);
	height: auto;
	max-width: 100%;
}

/* Form */

.ngomr-hp {
	left: -9999px;
	position: absolute;
}

.ngomr-fieldset {
	border: 1px solid var(--ngomr-border);
	border-radius: var(--ngomr-radius);
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem 1.5rem;
}

.ngomr-fieldset legend {
	font-size: 1.05rem;
	font-weight: 600;
	padding: 0 .5rem;
}

.ngomr-grid {
	display: grid;
	gap: 1.15rem 1.35rem;
	/* Fixed two-column track. auto-fit gave 1-4 columns depending on the
	   container width, which is what made the rows look ragged. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ngomr-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* An author `display` rule beats the UA stylesheet's [hidden] rule, so the
   conditional department field would stay visible without this. */
.ngomr-wrap [hidden] {
	display: none !important;
}

.ngomr-field--full,
.ngomr-field--wide {
	grid-column: 1 / -1;
}

/* Reserve two lines for every label so that a label which wraps does not
   push its own input below the neighbouring input in the same row. */
.ngomr-field > label:not(.ngomr-check),
.ngomr-label {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	font-size: .9rem;
	font-weight: 600;
	gap: .25rem;
	line-height: 1.3;
	margin-bottom: .4rem;
	min-height: 2.6em;
}

.ngomr-field .req {
	color: var(--ngomr-error);
}

.ngomr-field input[type="text"],
.ngomr-field input[type="tel"],
.ngomr-field input[type="email"],
.ngomr-field input[type="date"],
.ngomr-field input[type="search"],
.ngomr-field select,
.ngomr-field textarea {
	-webkit-appearance: none;
	appearance: none;
	background: #fff;
	border: 1px solid var(--ngomr-border);
	border-radius: 6px;
	color: inherit;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	/* One shared height for every control, so nothing sits high or low. */
	min-height: 46px;
	padding: .6rem .75rem;
	width: 100%;
}

/* Native select and date controls size themselves differently per browser;
   normalising the appearance keeps them level with the text inputs. */
.ngomr-field select {
	background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"%3E%3Cpath fill="%23667085" d="M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z"/%3E%3C/svg%3E');
	background-position: right .75rem center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	padding-right: 2.25rem;
}

.ngomr-field input[type="date"] {
	min-height: 46px;
}

.ngomr-field textarea {
	min-height: 96px;
	resize: vertical;
}

/* File inputs cannot share the text-input box model, so give the button
   itself the same height instead. */
.ngomr-field input[type="file"] {
	background: #fff;
	border: 1px dashed var(--ngomr-border);
	border-radius: 6px;
	font-family: inherit;
	font-size: .95rem;
	min-height: 46px;
	padding: .6rem .75rem;
	width: 100%;
}

.ngomr-field input[type="file"]::file-selector-button {
	background: var(--ngomr-bg);
	border: 1px solid var(--ngomr-border);
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	margin-right: .75rem;
	padding: .3rem .8rem;
}

.ngomr-field input:focus,
.ngomr-field select:focus,
.ngomr-field textarea:focus {
	border-color: var(--ngomr-accent);
	outline: 2px solid rgba(26, 95, 180, .2);
	outline-offset: 1px;
}

.ngomr-field.has-error input,
.ngomr-field.has-error select,
.ngomr-field.has-error textarea {
	border-color: var(--ngomr-error);
}

/* Hints and errors sit under the control and must not shift it. */
.ngomr-hint,
.ngomr-error {
	font-size: .82rem;
	margin-top: .3rem;
}

.ngomr-hint {
	color: var(--ngomr-muted);
}

.ngomr-error {
	color: var(--ngomr-error);
	font-weight: 600;
}

.ngomr-radios {
	display: grid;
	gap: .6rem;
	/* Fixed track count keeps the eight occupation tiles on a tidy grid
	   instead of a ragged last row. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ngomr-radio,
.ngomr-check {
	align-items: center;
	background: var(--ngomr-bg);
	border: 1px solid var(--ngomr-border);
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	font-size: .92rem;
	font-weight: 400;
	gap: .5rem;
	line-height: 1.3;
	/* Equal height regardless of whether the label wraps. */
	min-height: 46px;
	padding: .5rem .75rem;
}

.ngomr-radio:hover,
.ngomr-check:hover {
	border-color: var(--ngomr-accent);
}

.ngomr-radio input,
.ngomr-check input {
	flex: 0 0 auto;
	margin: 0;
}

.ngomr-radio:focus-within,
.ngomr-check:focus-within {
	border-color: var(--ngomr-accent);
	outline: 2px solid rgba(26, 95, 180, .2);
}

.ngomr-check {
	align-items: flex-start;
	margin: 0 0 1.35rem;
	padding: .85rem 1rem;
}

.ngomr-check input {
	margin-top: .15rem;
}

.ngomr-submit {
	background: var(--ngomr-accent);
	border: 0;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	padding: .8rem 2.25rem;
}

.ngomr-submit:hover,
.ngomr-submit:focus {
	background: #164e93;
}

/* Filters */

.ngomr-filters {
	background: var(--ngomr-bg);
	border: 1px solid var(--ngomr-border);
	border-radius: var(--ngomr-radius);
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
}

.ngomr-filters__row {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.ngomr-filters__field {
	display: flex;
	flex: 1 1 200px;
	flex-direction: column;
	gap: .3rem;
}

.ngomr-filters__field label {
	font-size: .85rem;
	font-weight: 600;
}

.ngomr-filters__field select,
.ngomr-filters__field input {
	background: #fff;
	border: 1px solid var(--ngomr-border);
	border-radius: 6px;
	font: inherit;
	padding: .55rem .65rem;
	width: 100%;
}

.ngomr-filters__actions {
	display: flex;
	gap: .5rem;
}

.ngomr-btn {
	background: var(--ngomr-accent);
	border: 1px solid var(--ngomr-accent);
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	padding: .55rem 1.25rem;
	text-decoration: none;
}

.ngomr-btn--ghost {
	background: transparent;
	border-color: var(--ngomr-border);
	color: var(--ngomr-text);
}

.ngomr-count {
	color: var(--ngomr-muted);
	margin: 0 0 .75rem;
}

/* Table */

.ngomr-table-scroll {
	border: 1px solid var(--ngomr-border);
	border-radius: var(--ngomr-radius);
	overflow-x: auto;
}

.ngomr-table {
	border-collapse: collapse;
	min-width: 900px;
	width: 100%;
}

.ngomr-table th,
.ngomr-table td {
	border-bottom: 1px solid var(--ngomr-border);
	padding: .7rem .85rem;
	text-align: left;
	vertical-align: top;
}

.ngomr-table thead th {
	background: var(--ngomr-bg);
	font-size: .85rem;
	letter-spacing: .02em;
	position: sticky;
	text-transform: uppercase;
	top: 0;
	white-space: nowrap;
}

.ngomr-table tbody tr:nth-child(even) {
	background: #fbfcfd;
}

.ngomr-table tbody tr:last-child td {
	border-bottom: 0;
}

.ngomr-badge {
	border-radius: 999px;
	display: inline-block;
	font-size: .78rem;
	font-weight: 600;
	padding: .18rem .6rem;
	white-space: nowrap;
}

.ngomr-badge--active {
	background: #ecfdf3;
	color: var(--ngomr-success);
}

.ngomr-badge--pending {
	background: #fffaeb;
	color: #b54708;
}

.ngomr-badge--inactive {
	background: #fef3f2;
	color: var(--ngomr-error);
}

.ngomr-empty {
	background: var(--ngomr-bg);
	border: 1px dashed var(--ngomr-border);
	border-radius: var(--ngomr-radius);
	color: var(--ngomr-muted);
	padding: 2rem;
	text-align: center;
}

/* Pagination */

.ngomr-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: space-between;
	margin-top: 1.25rem;
}

.ngomr-pagination .page-numbers {
	border: 1px solid var(--ngomr-border);
	border-radius: 6px;
	color: var(--ngomr-text);
	display: inline-block;
	margin-right: .25rem;
	padding: .4rem .75rem;
	text-decoration: none;
}

.ngomr-pagination .page-numbers.current {
	background: var(--ngomr-accent);
	border-color: var(--ngomr-accent);
	color: #fff;
}

.ngomr-pagination .page-numbers.dots {
	border-color: transparent;
}

.ngomr-pagination__info {
	color: var(--ngomr-muted);
	margin: 0;
}

/* Small screens: stack the table into cards */

/* Occupation tiles step down before the form does. */
@media (max-width: 900px) {
	.ngomr-radios {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.ngomr-radios {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 782px) {
	/* Single column: labels no longer need to reserve a second line
	   because nothing sits beside them to stay level with. */
	.ngomr-grid {
		/* Slightly more row gap to make up for the label reserve dropping away. */
		gap: 1.4rem;
		grid-template-columns: 1fr;
	}

	.ngomr-field > label:not(.ngomr-check),
	.ngomr-label {
		min-height: 0;
	}

	.ngomr-fieldset {
		padding: 1rem 1rem 1.25rem;
	}

	.ngomr-media__qr {
		flex-direction: column;
		text-align: center;
	}

	.ngomr-submit {
		width: 100%;
	}

	.ngomr-table-scroll {
		border: 0;
		overflow: visible;
	}

	.ngomr-table {
		min-width: 0;
	}

	.ngomr-table thead {
		clip: rect(0 0 0 0);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	.ngomr-table tr {
		border: 1px solid var(--ngomr-border);
		border-radius: var(--ngomr-radius);
		display: block;
		margin-bottom: .85rem;
		padding: .35rem .75rem;
	}

	.ngomr-table td {
		border-bottom: 1px dashed var(--ngomr-border);
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		padding: .5rem 0;
	}

	.ngomr-table td::before {
		color: var(--ngomr-muted);
		content: attr(data-label);
		flex: 0 0 45%;
		font-size: .8rem;
		font-weight: 600;
		text-transform: uppercase;
	}
}