/**
 * Member portal — directory tables, login gate, citywise chart, matrimonial,
 * family detail, downloads, FAQ and the print sticker sheet.
 */

/* ------------------------------------------------------------ Login gate */

.sd-gate {
	max-width: 520px;
	margin: 0 auto;
	padding: 44px 32px;
	border: 1px solid var(--sd-border-strong);
	border-radius: var(--sd-radius-lg);
	background-color: var(--sd-surface-card-tint);
	text-align: center;
}

.sd-gate__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 16px;
	border-radius: 50%;
	background-color: var(--sd-secondary-saffron-soft);
	color: var(--sd-primary-maroon);
}

.sd-gate__icon svg { width: 26px; height: 26px; }

.sd-gate h3 { margin: 0 0 8px; }

.sd-gate p {
	margin: 0 0 18px;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-body);
	line-height: 1.6;
	color: var(--sd-text-muted);
}

.sd-gate p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Filters */

.sd-dir__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 26px;
}

.sd-dir__field { margin: 0; }

.sd-dir__field input[type="search"],
.sd-dir__field select {
	min-width: 220px;
	border: 1px solid var(--sd-border-strong);
	border-radius: var(--sd-radius-pill);
	padding: 11px 18px;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-body);
	background-color: var(--sd-surface-white);
	color: var(--sd-text-primary);
}

/* ---------------------------------------------------------------- Table */

.sd-dir__scroll {
	overflow-x: auto;
	border: 1px solid var(--sd-border-default);
	border-radius: var(--sd-radius);
	background-color: var(--sd-surface-white);
}

.sd-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-body);
}

.sd-table th,
.sd-table td {
	padding: 13px 18px;
	text-align: start;
	border-bottom: 1px solid var(--sd-border-default);
}

.sd-table th {
	background-color: var(--sd-bg-cream-deep);
	font-weight: 600;
	font-size: var(--sd-fs-small);
	letter-spacing: 0.3px;
	color: var(--sd-text-primary);
	white-space: nowrap;
}

.sd-table tbody tr:last-child td { border-bottom: 0; }
.sd-table tbody tr:hover { background-color: var(--sd-surface-card-tint); }

/* ----------------------------------------------------------- Pagination */

.sd-pager { margin-top: 26px; }

.sd-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sd-pager a,
.sd-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--sd-border-strong);
	border-radius: var(--sd-radius-sm);
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
	text-decoration: none;
	color: var(--sd-text-primary);
}

.sd-pager .current {
	background-color: var(--sd-primary-maroon);
	border-color: var(--sd-primary-maroon);
	color: var(--sd-text-on-dark);
}

/* ----------------------------------------------------------------- Tabs */

.sd-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 26px;
}

.sd-tabs__tab {
	padding: 9px 20px;
	border: 1px solid var(--sd-border-strong);
	border-radius: var(--sd-radius-pill);
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
	font-weight: 600;
	text-decoration: none;
	color: var(--sd-text-primary);
}

.sd-tabs__tab.is-active {
	background-color: var(--sd-primary-maroon);
	border-color: var(--sd-primary-maroon);
	color: var(--sd-text-on-dark);
}

/* -------------------------------------------------------- Address cards */

.sd-dir__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sd-addr { padding: 20px 22px; }
.sd-addr h3 { margin: 0 0 8px; }

.sd-addr__lines,
.sd-addr__phone {
	margin: 0;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
	line-height: 1.6;
	color: var(--sd-text-muted);
}

.sd-addr__phone { margin-top: 8px; }
.sd-addr__phone a { color: var(--sd-primary-maroon); }

/* ------------------------------------------------------ Print stickers */

.sd-stickers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sd-sticker {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 120px;
	padding: 12px 14px;
	border: 1px dashed var(--sd-border-strong);
	border-radius: 4px;
	font-family: var(--sd-font-body);
	font-size: 12px;
	line-height: 1.45;
	color: var(--sd-text-primary);
}

.sd-sticker strong { font-size: 13px; }

/* Only the sticker sheet should reach the printer. */
@media print {

	body * { visibility: hidden; }

	.sd-stickers,
	.sd-stickers * { visibility: visible; }

	.sd-stickers {
		position: absolute;
		inset-inline-start: 0;
		top: 0;
		width: 100%;
		gap: 0;
	}

	.sd-sticker {
		border-color: #999;
		break-inside: avoid;
	}
}

/* ---------------------------------------------------------- Citywise */

.sd-city__totals {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 30px;
}

.sd-city__totals p {
	flex: 1 1 160px;
	margin: 0;
	padding: 18px 22px;
	border: 1px solid var(--sd-border-default);
	border-radius: var(--sd-radius);
	background-color: var(--sd-surface-card-tint);
	text-align: center;
}

.sd-city__totals b {
	display: block;
	font-family: var(--sd-font-heading);
	font-size: 32px;
	font-weight: 700;
	color: var(--sd-primary-maroon);
}

.sd-city__totals span {
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
	color: var(--sd-text-muted);
}

.sd-city__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sd-city__row {
	display: grid;
	grid-template-columns: 170px 1fr 150px;
	align-items: center;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sd-border-default);
}

.sd-city__name,
.sd-city__value {
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
	color: var(--sd-text-primary);
}

.sd-city__value { text-align: end; font-weight: 600; }
.sd-city__value small { font-weight: 400; color: var(--sd-text-muted); }

.sd-city__bar {
	display: block;
	height: 12px;
	border-radius: var(--sd-radius-pill);
	background-color: var(--sd-bg-cream-deep);
	overflow: hidden;
}

.sd-city__bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--sd-primary-maroon), var(--sd-secondary-saffron));
}

/* ------------------------------------------------------- Matrimonial */

.sd-mat__list,
.sd-family__members {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sd-mat__card,
.sd-member { overflow: hidden; }

.sd-mat__media,
.sd-member__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-bottom: 1px solid var(--sd-border-default);
}

.sd-member__media { aspect-ratio: 1 / 1; }

.sd-mat__body,
.sd-member__body { padding: 18px 20px 22px; }

.sd-mat__body h3,
.sd-member__body h4 { margin: 0; }

.sd-mat__age,
.sd-member__relation {
	margin: 4px 0 10px;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
	font-weight: 600;
	color: var(--sd-primary-maroon);
}

.sd-mat__facts,
.sd-family__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	margin: 0;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
}

.sd-mat__facts dt,
.sd-family__facts dt { color: var(--sd-text-muted); }

.sd-mat__facts dd,
.sd-family__facts dd { margin: 0; color: var(--sd-text-primary); }

.sd-mat__contact,
.sd-member__facts,
.sd-member__phone {
	margin: 10px 0 0;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
	color: var(--sd-text-muted);
}

.sd-mat__contact a,
.sd-member__phone a { color: var(--sd-primary-maroon); }

/* ------------------------------------------------------------ Family */

.sd-family__head { padding: 26px 28px; margin-bottom: 26px; }
.sd-family__head h3 { margin: 0 0 6px; }

.sd-family__address {
	margin: 0 0 14px;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-body);
	color: var(--sd-text-muted);
}

.sd-family__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.sd-family__bar h3 { margin: 0; }

/* ---------------------------------------------------------- Downloads */

.sd-dl__list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sd-dl__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
}

.sd-dl__info { flex: 1 1 260px; }
.sd-dl__info h3 { margin: 0; }

.sd-dl__meta {
	margin: 4px 0 0;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-caption);
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--sd-secondary-saffron);
}

.sd-dl__text {
	margin: 8px 0 0;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
	color: var(--sd-text-muted);
}

/* ----------------------------------------------------------------- FAQ */

.sd-faq__item {
	border: 1px solid var(--sd-border-default);
	border-radius: var(--sd-radius);
	background-color: var(--sd-surface-card-tint);
	margin-bottom: 12px;
}

.sd-faq__item summary {
	padding: 18px 22px;
	cursor: pointer;
	font-family: var(--sd-font-heading);
	font-size: var(--sd-fs-h4);
	font-weight: 600;
	color: var(--sd-text-primary);
	list-style: none;
}

.sd-faq__item summary::-webkit-details-marker { display: none; }

.sd-faq__item summary::after {
	content: "+";
	float: inline-end;
	font-family: var(--sd-font-body);
	color: var(--sd-primary-maroon);
}

.sd-faq__item[open] summary::after { content: "–"; }

.sd-faq__item summary:focus-visible {
	outline: 2px solid var(--sd-secondary-saffron);
	outline-offset: -2px;
}

.sd-faq__answer {
	padding: 0 22px 20px;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-body);
	line-height: 1.65;
	color: var(--sd-text-muted);
}

/* ------------------------------------------------------------- Login */

.sd-login__panel { max-width: 460px; padding: 30px 32px; }
.sd-login__panel label { display: block; margin-bottom: 6px; font-weight: 600; }

.sd-login__panel input[type="text"],
.sd-login__panel input[type="password"] {
	width: 100%;
	border: 1px solid var(--sd-border-strong);
	border-radius: var(--sd-radius-sm);
	padding: 12px 14px;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-body);
	margin-bottom: 14px;
}

.sd-login__panel .login-submit input,
.sd-login__panel button[type="submit"] {
	border: 0;
	border-radius: var(--sd-radius-pill);
	padding: 13px 28px;
	background-color: var(--sd-primary-maroon);
	color: var(--sd-text-on-dark);
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-button);
	font-weight: 600;
	cursor: pointer;
}

.sd-login__lost,
.sd-login__note {
	margin: 14px 0 0;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
	color: var(--sd-text-muted);
}

.sd-login__lost a { color: var(--sd-primary-maroon); }

.sd-form__context {
	margin: 0 0 16px;
	font-family: var(--sd-font-body);
	font-size: var(--sd-fs-small);
	font-weight: 600;
	color: var(--sd-primary-maroon);
}

/* ------------------------------------------------------- Responsive */

@media (max-width: 900px) {

	.sd-city__row { grid-template-columns: 120px 1fr; }

	.sd-city__value {
		grid-column: 2;
		text-align: start;
	}

	.sd-stickers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {

	/* Stacked table: each cell announces its own column label, so a wide
	   register stays readable on a phone without horizontal scrolling. */
	.sd-dir__scroll { border: 0; background: transparent; }

	.sd-table thead { display: none; }

	.sd-table,
	.sd-table tbody,
	.sd-table tr,
	.sd-table td { display: block; width: 100%; }

	.sd-table tr {
		margin-bottom: 12px;
		border: 1px solid var(--sd-border-default);
		border-radius: var(--sd-radius);
		background-color: var(--sd-surface-white);
		overflow: hidden;
	}

	.sd-table td {
		display: flex;
		justify-content: space-between;
		gap: 14px;
		padding: 10px 16px;
	}

	.sd-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--sd-text-muted);
	}

	.sd-dir__filters { flex-direction: column; align-items: stretch; }
	.sd-dir__field input[type="search"],
	.sd-dir__field select { width: 100%; min-width: 0; }

	.sd-stickers { grid-template-columns: 1fr; }
}