/* ===== WJAI Membership - Frontend Styles ===== */
/* !important is used deliberately throughout so this layout survives
   busy multi-purpose themes that apply their own global input/form CSS. */

.wjai-registration-layout {
	display: grid !important;
	grid-template-columns: 1.3fr 1fr !important;
	gap: 32px !important;
	align-items: start !important;
	max-width: 1100px !important;
	margin: 0 auto !important;
	width: 100% !important;
}
.wjai-registration-layout .wjai-registration-main,
.wjai-registration-layout .wjai-registration-sidebar {
	width: 100% !important;
	min-width: 0 !important;
}
.wjai-registration-layout .wjai-form { max-width: 100% !important; }
.wjai-registration-sidebar { position: sticky !important; top: 20px !important; }

@media (max-width: 900px) {
	.wjai-registration-layout { grid-template-columns: 1fr !important; }
	.wjai-registration-sidebar { position: static !important; order: -1 !important; }
}

.wjai-form {
	max-width: 640px;
	margin: 0 auto;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	background: #fff !important;
	padding: 28px 32px !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 20px rgba(20,49,93,0.09) !important;
	border: 1px solid #eef0f3 !important;
	box-sizing: border-box !important;
}
.wjai-form h3 {
	grid-column: 1 / -1 !important;
	margin: 6px 0 2px !important;
	padding-bottom: 8px !important;
	border-bottom: 2px solid #14315d !important;
	color: #14315d !important;
	font-size: 15px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	font-weight: 700 !important;
}
.wjai-form h3:first-child { margin-top: 0 !important; }
.wjai-form label {
	display: flex !important;
	flex-direction: column !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: #333 !important;
	gap: 6px !important;
}
.wjai-form input[type="text"],
.wjai-form input[type="email"],
.wjai-form input[type="password"],
.wjai-form input[type="number"],
.wjai-form input[type="date"],
.wjai-form input[type="file"],
.wjai-form select,
.wjai-form textarea {
	padding: 11px 13px !important;
	border: 1px solid #d5d9e0 !important;
	border-radius: 8px !important;
	font-weight: normal !important;
	font-size: 15px !important;
	width: 100% !important;
	height: auto !important;
	box-sizing: border-box !important;
	font-family: inherit !important;
	background: #fbfcfe !important;
	line-height: normal !important;
	margin: 0 !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wjai-form input:focus,
.wjai-form select:focus,
.wjai-form textarea:focus {
	outline: none !important;
	border-color: #14315d !important;
	box-shadow: 0 0 0 3px rgba(20,49,93,0.12) !important;
	background: #fff !important;
}

/* Two-column grid specifically for the registration form (matches the
   grouped, side-by-side field style of typical admission/registration forms).
   Full-width elements (headings, textareas, file uploads, the submit button,
   and the portal-details sub-section) span both columns automatically. */
.wjai-registration-layout .wjai-registration-main .wjai-form {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px 22px !important;
	max-width: 100% !important;
}
.wjai-registration-layout .wjai-registration-main .wjai-form > button,
.wjai-registration-layout .wjai-registration-main .wjai-form label:has(textarea),
.wjai-registration-layout .wjai-registration-main .wjai-form label:has(input[type="file"]),
.wjai-registration-layout .wjai-registration-main .wjai-form label:has(#wjai_membership_type),
.wjai-registration-layout .wjai-registration-main .wjai-form #wjai-portal-fields {
	grid-column: 1 / -1 !important;
}
#wjai-portal-fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px 22px !important;
}
#wjai-portal-fields label:has(textarea) { grid-column: 1 / -1 !important; }
#wjai-portal-fields.wjai-hidden { display: none !important; }

@media (max-width: 640px) {
	.wjai-registration-layout .wjai-registration-main .wjai-form,
	#wjai-portal-fields {
		grid-template-columns: 1fr !important;
	}
}

.wjai-form-title {
	font-size: 22px !important; color: #14315d !important; margin: 0 0 6px !important;
	text-align: center !important;
}
.wjai-btn, .wjai-link-btn {
	display: inline-block !important;
	background: #14315d !important;
	color: #fff !important;
	border: none !important;
	padding: 13px 24px !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	cursor: pointer;
	text-decoration: none !important;
	text-align: center !important;
	box-shadow: 0 2px 8px rgba(20,49,93,0.25) !important;
	transition: background 0.15s ease, transform 0.1s ease !important;
}
.wjai-btn:hover, .wjai-link-btn:hover { background: #0d2140 !important; transform: translateY(-1px) !important; }
.wjai-registration-layout .wjai-registration-main .wjai-form > button.wjai-btn {
	width: 100% !important; padding: 14px !important; font-size: 16px !important;
}

.wjai-login-form {
	max-width: 420px !important;
	margin: 0 auto !important;
	background: #fff !important;
	padding: 32px !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 20px rgba(20,49,93,0.09) !important;
	border: 1px solid #eef0f3 !important;
	box-sizing: border-box !important;
}
.wjai-login-form #loginform {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}
.wjai-login-form #loginform p { margin: 0 !important; }
.wjai-login-form #loginform label {
	display: block !important; font-weight: 600 !important; font-size: 14px !important;
	color: #333 !important; margin-bottom: 6px !important;
}
.wjai-login-form #loginform input[type="text"],
.wjai-login-form #loginform input[type="password"] {
	width: 100% !important; padding: 11px 13px !important; border: 1px solid #d5d9e0 !important;
	border-radius: 8px !important; font-size: 15px !important; box-sizing: border-box !important;
	background: #fbfcfe !important;
}
.wjai-login-form #loginform input:focus {
	outline: none !important; border-color: #14315d !important;
	box-shadow: 0 0 0 3px rgba(20,49,93,0.12) !important; background: #fff !important;
}
.wjai-login-form #loginform p.login-remember {
	font-weight: normal !important; font-size: 13px !important;
}
.wjai-login-form #loginform p.login-remember label {
	display: flex !important; align-items: center !important; gap: 6px !important; font-weight: normal !important;
}
.wjai-login-form #loginform p.login-submit input[type="submit"] {
	width: 100% !important; background: #14315d !important; color: #fff !important; border: none !important;
	padding: 13px 24px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 16px !important;
	cursor: pointer !important; box-shadow: 0 2px 8px rgba(20,49,93,0.25) !important;
}
.wjai-login-form #loginform p.login-submit input[type="submit"]:hover { background: #0d2140 !important; }
.wjai-login-form p { text-align: center !important; font-size: 14px !important; margin-top: 14px !important; }

.wjai-notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 14px; }
.wjai-notice-success { background: #e6f4ea; color: #1e4620; border: 1px solid #b7dfc0; }
.wjai-notice-error { background: #fdeaea; color: #7a1f1f; border: 1px solid #f3b3b3; }
.wjai-small-note { font-size: 13px; color: #666; }

.wjai-current-photo { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; margin-top: -6px; }

.wjai-form h4 {
	margin: 10px 0 0; padding-top: 14px; border-top: 1px solid #e2e2e2;
	font-size: 15px; color: #14315d;
}
.wjai-form h4:first-child { border-top: none; padding-top: 0; }

/* Dashboard status card */
.wjai-status-card { padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; background: #f4f6f9; border-left: 5px solid #14315d; }
.wjai-status-pending { border-left-color: #d9a441; }
.wjai-status-denied { border-left-color: #c0392b; }

/* Directory */
.wjai-directory { max-width: 1100px; margin: 0 auto; }
.wjai-directory-search {
	display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap;
	background: #fff; border: 1px solid #eef0f3; border-radius: 14px; padding: 18px;
	box-shadow: 0 2px 20px rgba(20,49,93,0.08);
}
.wjai-directory-search input,
.wjai-directory-search select {
	padding: 11px 14px !important; border: 1px solid #d5d9e0 !important; border-radius: 8px !important;
	flex: 1; min-width: 160px; font-size: 14.5px !important; background: #fbfcfe !important;
}
.wjai-directory-search .wjai-btn { flex-shrink: 0; }
.wjai-directory-empty { text-align: center; padding: 40px 0; color: #888; }

.wjai-directory-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px;
}
.wjai-member-card {
	position: relative; overflow: hidden;
	border: 1px solid #eef0f3; border-radius: 16px; padding: 28px 18px 22px; text-align: center;
	background: #fff; box-shadow: 0 2px 12px rgba(20,49,93,0.06);
	display: flex; flex-direction: column; align-items: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	text-decoration: none !important; color: inherit !important; cursor: pointer;
}
.wjai-member-card::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
	background: linear-gradient(90deg, #14315d, #4a7fd6);
}
.wjai-member-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(20,49,93,0.14); }
.wjai-member-card-photo {
	width: 110px; height: 110px; object-fit: cover; border-radius: 50%; margin: 6px 0 14px;
	border: 3px solid #fff; box-shadow: 0 0 0 3px #eaf0fb;
}
.wjai-member-card h4 { margin: 0 0 2px; font-size: 16.5px; color: #14315d; }
.wjai-member-card-official { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; color: #b8860b; text-transform: uppercase; letter-spacing: 0.03em; }
.wjai-member-card .wjai-designation { margin: 0; font-size: 13px; color: #555; font-weight: 600; }
.wjai-member-card .wjai-media-house { margin: 2px 0 0; font-size: 12.5px; color: #888; }
.wjai-member-card-badges { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; justify-content: center; }
.wjai-member-card .wjai-member-id {
	margin: 0; font-size: 11.5px; color: #14315d; font-weight: 700; letter-spacing: 0.03em;
	background: #f4f6f9; padding: 4px 12px; border-radius: 999px;
}
.wjai-member-card-embed { max-width: 240px; margin: 0 auto; }

.wjai-public-profile {
	max-width: 480px; margin: 0 auto; background: #fff; border: 1px solid #eef0f3; border-radius: 14px;
	padding: 36px 30px; text-align: center; box-shadow: 0 2px 20px rgba(20,49,93,0.08);
}
.wjai-public-profile-photo {
	display: block !important; margin: 0 auto 18px !important;
	width: 250px !important; height: 250px !important; max-width: 100% !important;
	object-fit: cover !important; border-radius: 50% !important; border: 4px solid #f0f2f5 !important;
	float: none !important;
}
.wjai-public-profile h2 { margin: 0 0 4px; color: #14315d; font-size: 22px; text-align: center; }
.wjai-public-profile-desig { margin: 0; color: #666; font-size: 14px; text-align: center; }
.wjai-public-profile-official {
	margin: 6px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: #b8860b;
	text-transform: uppercase; letter-spacing: 0.04em;
}
.wjai-badge-label { font-size: 13px; font-weight: 600; color: #555; }

.wjai-pagination {
	margin-top: 32px; display: flex; justify-content: center; align-items: center;
	gap: 4px; flex-wrap: wrap;
}
.wjai-page-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 10px;
	border: 1px solid #e2e5ea; border-radius: 8px;
	text-decoration: none; color: #14315d; font-weight: 600; font-size: 13.5px;
	background: #fff; transition: background .15s ease, border-color .15s ease;
	cursor: pointer; line-height: 1;
}
.wjai-page-btn:hover { background: #f4f6f9; border-color: #c8ced8; }
.wjai-page-current { background: #14315d !important; color: #fff !important; border-color: #14315d !important; cursor: default; }
.wjai-page-disabled { color: #b0b8c4; background: #f9fafb; cursor: default; pointer-events: none; }
.wjai-page-ellipsis { padding: 0 6px; color: #8a96a3; font-weight: 600; line-height: 36px; }
.wjai-dir-count { margin-left: 8px; font-size: 13px; color: #6b7280; font-weight: 500; }

/* Certificate - positions calibrated against the official WJAI template.
   Uses percentage-based absolute positioning so it scales with any print size. */
.wjai-certificate {
	width: 100%;
	max-width: 1000px;
	aspect-ratio: 1.408 / 1;
	margin: 0 auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	font-family: Georgia, serif;
	color: #1a1a1a;
}
.wjai-cert-srno  { position: absolute; top: 9%; left: 80%; width: 14%; font-size: 0.85em; font-weight: 600; font-family: Arial, sans-serif; }
.wjai-cert-name  { position: absolute; top: 54.5%; left: 15%; width: 70%; text-align: center; font-size: 2.1em; font-weight: bold; }
.wjai-cert-desig { position: absolute; top: 60.5%; left: 15%; width: 70%; text-align: center; font-size: 1.15em; font-style: italic; }
.wjai-cert-date  { position: absolute; top: 96.3%; left: 1%; width: 28%; font-size: 0.8em; font-family: Arial, sans-serif; }

/* ID Card - single flat sheet with front (left half) and back (right half)
   side by side, matching the official printed template exactly. */
.wjai-idcard {
	width: 100%;
	max-width: 700px;
	aspect-ratio: 1.366 / 1;
	margin: 0 auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	font-family: Arial, sans-serif;
	color: #111;
}
/* Front (left half) */
.wjai-idcard-photo { position: absolute; top: 34%; left: 14%; width: 23%; height: 25%; object-fit: cover; }
.wjai-idcard-id-no { position: absolute; top: 13.5%; left: 37%; width: 15%; font-size: 0.85em; font-weight: 700; }

.wjai-idcard-name-block { position: absolute; top: 60%; left: 2%; width: 46%; text-align: center; }
.wjai-idcard-name  { font-size: 1.45em; font-weight: 700; color: #0c2899; line-height: 1.25; }
.wjai-idcard-desig { font-size: 0.75em; font-weight: 700; margin-top: 2px; }

.wjai-idcard-sentence {
	position: absolute; top: 80.5%; width: 48%; height: 12%;
	text-align: center;
	color: #fff; font-size: 0.8em; font-weight: 600; line-height: 1.3;
	word-break: keep-all; overflow-wrap: normal; padding: 0 2%; box-sizing: border-box;
}

/* Back (right half) - one naturally-flowing text block instead of per-field
   percentages, so line spacing always matches the actual rendered text
   height rather than a guessed pixel position. */
.wjai-idcard-backinfo {
	position: absolute; top: 1.5%; left: 52%; width: 47%; font-size: 0.7em; line-height: 1.7;
}
.wjai-idcard-backinfo div { margin: 0; }
.wjai-idcard-validtill { position: absolute; top: 27.5%; left: 51%; width: 47%; font-size: 0.72em; font-weight: 600; color: #1e7a4a; text-align: center; }
.wjai-idcard-qr-back { position: absolute; top: 2%; left: 84%; width: 14%; height: auto; }

.wjai-print-btn { display: block; margin: 20px auto 0; }

@media print {
	@page { margin: 0; }

	.wjai-print-btn, .wjai-notice, header, footer, nav, .site-header, .site-footer, #wpadminbar { display: none !important; }
	html, body {
		height: auto !important; min-height: 0 !important; overflow: visible !important;
		background: #fff !important; margin: 0 !important; padding: 0 !important;
	}
	body * { visibility: hidden; }
	.wjai-certificate, .wjai-certificate *, .wjai-idcard, .wjai-idcard *,
	.wjai-official-form-wrap, .wjai-official-form-wrap *,
	.wjai-official-form, .wjai-official-form * { visibility: visible !important; }
	/* Static (not absolute) positioning + full width means the browser paginates
	   naturally across as many pages as the content needs, instead of clipping
	   it to whatever height an ancestor container (from the theme) allows.
	   .wjai-official-form is covered separately since the admin "Official Form"
	   page renders it without the front-end's .wjai-official-form-wrap parent. */
	/* Static (not absolute) positioning + full width means the browser paginates
	   naturally across as many pages as the content needs, instead of clipping
	   it to whatever height an ancestor container (from the theme) allows.
	   .wjai-official-form-wrap is a pass-through on the front-end only (the
	   admin "Official Form" page has no such wrapper) - it must contribute
	   ZERO padding of its own, or the front-end version ends up with double
	   the inset margin compared to admin. Only .wjai-official-form itself,
	   the actual content box in both places, gets the real padding. */
	.wjai-official-form-wrap {
		position: static !important; width: 100% !important; max-width: 100% !important;
		margin: 0 !important; padding: 0 !important; overflow: visible !important;
	}
	.wjai-official-form {
		position: static !important; top: 0 !important; left: 0 !important;
		width: 100% !important; max-width: 100% !important;
		margin: 0 !important; padding: 0 !important; overflow: visible !important;
		page-break-inside: auto; border: none !important;
	}
	.wjai-certificate, .wjai-idcard { position: absolute; top: 0; left: 0; }
	.wjai-of-header, .wjai-of-footer-block { page-break-inside: avoid; }
}

.wjai-instructions {
	margin: 0 0 20px !important; padding: 16px 20px !important;
	background: #fff8e6 !important; border-left: 5px solid #d9a441 !important; border-radius: 8px !important; font-size: 14px !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
}
.wjai-eligibility {
	margin: 0 !important; padding: 20px 24px !important;
	background: #f4f6f9 !important; border-radius: 8px !important; font-size: 14px !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
}
.wjai-eligibility h3 {
	color: #14315d !important; font-size: 15px !important; text-transform: uppercase !important;
	letter-spacing: 0.05em !important; border-bottom: 2px solid #14315d !important; padding-bottom: 8px !important;
	margin-top: 0 !important;
}
.wjai-eligibility ol { padding-left: 20px; }

.wjai-pay-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.wjai-pay-tab-btn {
	padding: 9px 16px; border-radius: 999px; border: 1px solid #d5d9e0; background: #fff;
	font-weight: 600; font-size: 13.5px; color: #14315d; cursor: pointer; transition: background 0.15s ease;
}
.wjai-pay-tab-btn:hover { background: #f4f6f9; }
.wjai-pay-tab-btn.wjai-pay-tab-active { background: #14315d; color: #fff; border-color: #14315d; }
.wjai-pay-tab-panel { padding-top: 4px; }

.wjai-bank-details {
	margin-top: 12px; padding: 14px 18px; background: #eef3fb; border-radius: 6px; font-size: 14px;
}
.wjai-claim-form { max-width: 100%; margin-top: 10px; }
.wjai-type-badge {
	display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 12px;
	background: #14315d; color: #fff; font-size: 11px; text-transform: uppercase;
}

/* Application summary */
.wjai-application-summary { max-width: 700px; margin: 0 auto; }
.wjai-summary-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.wjai-summary-table th, .wjai-summary-table td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; font-size: 14px; }
.wjai-summary-table th { background: #f4f6f9; width: 35%; }
.wjai-signature-line { margin-top: 30px; font-size: 14px; }
.wjai-office-address { margin-top: 20px; padding: 12px 16px; background: #f4f6f9; border-radius: 6px; font-size: 14px; }

/* Official Membership Application Form replica */
.wjai-official-form-wrap { max-width: 900px !important; margin: 0 auto !important; }
.wjai-official-form, .wjai-official-form * { box-sizing: border-box !important; }
.wjai-official-form {
	background: #fff !important; border: 1px solid #ccc !important; padding: 30px 40px !important;
	font-family: Arial, Helvetica, sans-serif !important; color: #111 !important; width: 100% !important;
	line-height: 1.4 !important;
}
.wjai-of-header {
	display: flex !important; align-items: flex-start !important; gap: 16px !important;
	border-bottom: 2px solid #14315d !important; padding-bottom: 8px !important; margin-bottom: 6px !important;
}
.wjai-of-logo { width: 110px !important; height: auto !important; flex-shrink: 0 !important; max-width: none !important; }
.wjai-of-header-text { text-align: center !important; flex: 1 !important; }
.wjai-of-header-text h1 {
	margin: 0 0 3px !important; font-size: 20px !important; color: #1a3b8f !important;
	letter-spacing: 0 !important; font-weight: 800 !important; line-height: 1.2 !important;
	white-space: nowrap !important;
}
.wjai-of-reg { margin: 1px 0 0 !important; font-size: 12px !important; color: #1a3b8f !important; font-weight: 600 !important; line-height: 1.3 !important; }
.wjai-of-office { margin: 4px 0 0 !important; font-size: 13px !important; line-height: 1.3 !important; color: #1a3b8f !important; font-weight: 600 !important; }
.wjai-of-contact { margin: 3px 0 0 !important; font-size: 12.5px !important; color: #1a3b8f !important; font-weight: 600 !important; line-height: 1.3 !important; }
.wjai-of-formno-row { display: flex !important; justify-content: space-between !important; font-size: 12px !important; margin: 8px 0 4px !important; font-weight: 700 !important; }
.wjai-of-title { text-align: center !important; text-decoration: underline !important; font-size: 16px !important; margin: 4px 0 12px !important; font-weight: 700 !important; }
.wjai-of-body { display: flex !important; gap: 24px !important; align-items: flex-start !important; }
.wjai-of-fields { flex: 1 !important; font-size: 14px !important; min-width: 0 !important; }
.wjai-of-photo { width: 120px !important; height: 150px !important; object-fit: cover !important; border: 2px solid #7ab648 !important; border-radius: 2px !important; flex-shrink: 0 !important; max-width: none !important; }
.wjai-of-field { margin-bottom: 9px !important; line-height: 1.4 !important; }
.wjai-of-num { font-weight: 700 !important; margin-right: 2px !important; }
.wjai-of-field strong { margin-right: 4px !important; font-weight: 700 !important; }
.wjai-of-inline-2, .wjai-of-inline-4 { display: flex !important; flex-wrap: wrap !important; gap: 6px 28px !important; margin-bottom: 9px !important; }
.wjai-of-inline-2 > span, .wjai-of-inline-4 > span { margin-bottom: 0 !important; }
.wjai-of-declaration { margin-top: 16px !important; }
.wjai-of-decl-title { font-weight: 700 !important; text-align: center !important; margin-bottom: 6px !important; font-size: 15px !important; }
.wjai-of-declaration p:not(.wjai-of-decl-title) { font-size: 13.5px !important; line-height: 1.55 !important; margin: 0 !important; }
.wjai-of-signrow { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; margin-top: 24px !important; font-size: 14px !important; font-weight: 700 !important; }
.wjai-of-signrow-sign { margin-top: 22px !important; }
.wjai-of-sign-block { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; }
.wjai-of-signature-img { max-width: 140px !important; max-height: 55px !important; object-fit: contain !important; }
.wjai-of-sign-label { border-top: 1px solid #333 !important; padding-top: 3px !important; min-width: 120px !important; text-align: center !important; }
.wjai-of-office-use { text-align: center !important; font-weight: 700 !important; margin-top: 18px !important; border-top: 1px solid #ccc !important; padding-top: 10px !important; font-size: 14px !important; }

@media print {
	.wjai-of-photo { border-color: #7ab648 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.wjai-of-header-text h1, .wjai-of-reg, .wjai-of-office, .wjai-of-contact {
		color: #1a3b8f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
	}
}

.wjai-official-form-link {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin: 0 0 20px; padding: 14px 18px; background: #f4f6f9; border-radius: 8px;
}

/* Valid-till banner */
.wjai-valid-till-banner {
	padding: 12px 18px; border-radius: 8px; margin-bottom: 16px; font-size: 15px; font-weight: 600;
	background: #e6f4ea; color: #1e4620; border: 1px solid #b7dfc0;
}
.wjai-valid-till-banner.wjai-expired { background: #fdeaea; color: #7a1f1f; border-color: #f3b3b3; }

/* Bank details / QR grid */
.wjai-bank-details-grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.wjai-qr-box { text-align: center; }
.wjai-qr-box img { border: 1px solid #ddd; border-radius: 6px; padding: 6px; background: #fff; }

/* Tabs */
.wjai-tabs { margin-top: 10px; }
.wjai-tab-buttons { display: flex; gap: 6px; border-bottom: 2px solid #e2e2e2; margin-bottom: 20px; flex-wrap: wrap; }
.wjai-tab-btn {
	background: none; border: none; padding: 10px 16px; font-size: 14px; font-weight: 600;
	cursor: pointer; color: #666; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.wjai-tab-btn.wjai-tab-active { color: #14315d; border-bottom-color: #14315d; }
.wjai-tab-panel { display: none; }
.wjai-tab-panel.wjai-tab-active { display: block; }

/* ===== Listing-Card Dashboard Layout ===== */
/* =================================================================
   MEMBER DASHBOARD — full professional redesign
   Desktop: max 900px centered, single-column stack of cards.
   Mobile: reflows at 640px. Everything tested at 320px–1440px.
   ================================================================= */

.wjai-dashboard-v3 {
	max-width: 900px; margin: 0 auto 56px;
	display: flex; flex-direction: column; gap: 22px;
	padding: 0 16px;
}

/* ---- Profile Hero Card ---- */
.wjai-listing-card {
	background: #fff; border: 1px solid #e8edf4; border-radius: 18px;
	padding: 32px 28px; box-shadow: 0 4px 24px rgba(20,49,93,0.09);
	display: flex; gap: 28px; align-items: flex-start;
}
.wjai-listing-photo {
	width: 120px; height: 120px; object-fit: cover; border-radius: 14px;
	flex-shrink: 0; border: 2px solid #e8edf4;
	box-shadow: 0 2px 12px rgba(20,49,93,0.12);
}
.wjai-listing-info { flex: 1; min-width: 0; }
.wjai-listing-name {
	margin: 0 0 4px; font-size: 24px; font-weight: 800;
	color: #0f2744; letter-spacing: -0.02em; line-height: 1.2;
}
.wjai-listing-desig { margin: 0 0 12px; color: #5a6a7a; font-size: 14px; font-weight: 500; }
.wjai-listing-official {
	margin: 2px 0 12px; font-size: 11.5px; font-weight: 700; color: #b07d10;
	text-transform: uppercase; letter-spacing: 0.06em;
}

/* Status / ID Tags */
.wjai-fact-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.wjai-fact-tag {
	display: inline-block; padding: 5px 13px; border-radius: 999px;
	font-size: 12px; font-weight: 700; background: #eef1f6; color: #14315d;
	letter-spacing: 0.01em; border: 1px solid #dce3ed;
}
.wjai-fact-tag-good { background: #e6f4ec; color: #1a5c2a; border-color: #b6dfca; }
.wjai-fact-tag-bad  { background: #fdeaea; color: #7a1f1f; border-color: #f2c0c0; }

/* Download Action Buttons */
.wjai-profile-actions-v2 {
	display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
}
.wjai-pill-btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 10px 18px; border-radius: 10px;
	background: #f4f6f9; color: #14315d !important; font-weight: 700; font-size: 13.5px;
	text-decoration: none !important; border: 1.5px solid #dce3ed;
	transition: background .15s, border-color .15s, transform .1s;
	line-height: 1; white-space: nowrap;
}
.wjai-pill-btn:hover { background: #e8edf5; border-color: #c5cfde; transform: translateY(-1px); }
.wjai-pill-btn-primary {
	background: #14315d; color: #fff !important; border-color: #14315d;
	box-shadow: 0 2px 8px rgba(20,49,93,0.25);
}
.wjai-pill-btn-primary:hover { background: #0d2140; border-color: #0d2140; }
.wjai-pill-btn-disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }

/* ---- Generic Content Card ---- */
.wjai-checklist-card, .wjai-details-card {
	background: #fff; border: 1px solid #e8edf4; border-radius: 16px;
	padding: 26px 28px; box-shadow: 0 2px 14px rgba(20,49,93,0.06);
}
.wjai-content-card-title {
	margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #0f2744;
	letter-spacing: -0.01em;
}

/* ---- Membership Checklist ---- */
.wjai-checklist-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px 24px; margin-top: 14px;
}
.wjai-check-item {
	font-size: 13.5px; color: #9aa3ae; font-weight: 600; padding: 10px 14px;
	border-radius: 8px; background: #f8f9fb; border: 1px solid #eef0f3;
}
.wjai-check-item.wjai-check-done {
	color: #1a5c2a; background: #e6f4ec; border-color: #b6dfca;
}

/* ---- Alerts / Status ---- */
.wjai-dashboard-alerts:empty { display: none; }
.wjai-dashboard-alerts { margin: 0; }
.wjai-status-card {
	padding: 18px 22px; border-radius: 12px; border-left: 5px solid #14315d;
	background: #f4f7fb; font-size: 14px; line-height: 1.6;
}
.wjai-status-card p { margin: 0 0 8px; }
.wjai-status-card p:last-child { margin: 0; }
.wjai-status-card.wjai-status-denied { border-left-color: #c0392b; background: #fef5f5; }

/* ---- Section headings inside cards ---- */
.wjai-details-card h4 {
	font-size: 14px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.05em; color: #6a7a8a; margin: 24px 0 12px;
	padding-bottom: 8px; border-bottom: 1px solid #eef0f3;
}
.wjai-details-card h4:first-of-type { margin-top: 16px; }

/* ---- Personal Information grid ---- */
.wjai-profile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px 24px;
}
.wjai-profile-item { display: flex; flex-direction: column; gap: 3px; }
.wjai-profile-label {
	font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.06em; color: #8a96a4;
}
.wjai-profile-value {
	font-size: 14.5px; color: #1a2a3a; line-height: 1.5;
	word-break: break-word;
}
.wjai-editable-flag {
	font-style: normal; font-size: 10px; font-weight: 700;
	color: #1a7a4a; text-transform: uppercase; letter-spacing: 0.05em;
}
.wjai-profile-item input[type="text"],
.wjai-profile-item input[type="date"],
.wjai-profile-item select,
.wjai-profile-item textarea {
	padding: 9px 12px !important; border: 1.5px solid #d0d8e4 !important;
	border-radius: 8px !important; font-size: 14px !important;
	background: #fbfcfe !important; width: 100%; box-sizing: border-box;
	transition: border-color .15s;
}
.wjai-profile-item input:focus, .wjai-profile-item select:focus, .wjai-profile-item textarea:focus {
	border-color: #14315d !important; outline: none;
}

/* ---- Download / Certificate Section ---- */
.wjai-download-actions {
	display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.wjai-download-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px; border-radius: 10px; font-weight: 700; font-size: 14px;
	text-decoration: none !important; border: 1.5px solid; transition: all .15s;
	line-height: 1;
}
.wjai-download-btn--primary {
	background: #14315d; color: #fff !important; border-color: #14315d;
	box-shadow: 0 2px 10px rgba(20,49,93,0.22);
}
.wjai-download-btn--primary:hover { background: #0d2140; box-shadow: 0 4px 14px rgba(20,49,93,0.3); transform: translateY(-1px); }
.wjai-download-btn--outline {
	background: #fff; color: #14315d !important; border-color: #c5cfde;
}
.wjai-download-btn--outline:hover { background: #f0f4f9; border-color: #14315d; }

/* ---- Payment Summary Table ---- */
.wjai-summary-table { width: 100%; border-collapse: collapse; margin: 14px 0; border-radius: 8px; overflow: hidden; border: 1px solid #e8edf4; }
.wjai-summary-table th,
.wjai-summary-table td { padding: 10px 14px; text-align: left; font-size: 13.5px; border-bottom: 1px solid #e8edf4; }
.wjai-summary-table tr:last-child th,
.wjai-summary-table tr:last-child td { border-bottom: none; }
.wjai-summary-table th { background: #f4f7fb; color: #4a5a6a; font-weight: 700; font-size: 12.5px; width: 38%; }
.wjai-summary-table td { color: #1a2a3a; }
.wjai-summary-table thead tr th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---- Payment options (bank/UPI/online) ---- */
.wjai-pay-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.wjai-pay-tab-btn {
	padding: 9px 16px; border-radius: 999px; border: 1.5px solid #d0d8e4;
	background: #fff; font-weight: 700; font-size: 13px; color: #14315d;
	cursor: pointer; transition: all .15s;
}
.wjai-pay-tab-btn:hover { background: #f0f4f9; }
.wjai-pay-tab-btn.wjai-pay-tab-active { background: #14315d; color: #fff; border-color: #14315d; }
.wjai-pay-tab-panel { padding-top: 6px; }
.wjai-bank-details {
	margin-top: 14px; padding: 18px 20px; background: #f4f7fb;
	border-radius: 12px; border: 1px solid #e0e8f0; font-size: 14px;
}
.wjai-bank-details ul { margin: 8px 0 0; padding-left: 20px; }
.wjai-bank-details ul li { margin-bottom: 4px; }
.wjai-bank-details-grid { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.wjai-qr-box { text-align: center; }
.wjai-qr-box img { border-radius: 8px; border: 1px solid #e0e8f0; }
.wjai-claim-form { max-width: 100%; margin-top: 16px; }
.wjai-claim-form label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; color: #3a4a5a; }
.wjai-claim-form input[type="text"],
.wjai-claim-form input[type="file"] {
	padding: 9px 12px; border: 1.5px solid #d0d8e4; border-radius: 8px;
	font-size: 14px; background: #fff; width: 100%; box-sizing: border-box;
}
.wjai-claim-form input:focus { border-color: #14315d; outline: none; }

/* ---- Payment history table inside card ---- */
.wjai-details-card .wjai-summary-table { font-size: 13px; }
.wjai-details-card .wjai-summary-table td,
.wjai-details-card .wjai-summary-table th { padding: 9px 12px; }

/* ---- Logout ---- */
.wjai-logout-link { text-align: center; margin-top: 6px; }
.wjai-logout-link a { color: #8a96a4; font-size: 13px; text-decoration: none; font-weight: 600; }
.wjai-logout-link a:hover { color: #c0392b; }

/* ---- Mobile (≤ 640px) ---- */
@media (max-width: 640px) {
	.wjai-dashboard-v3 { padding: 0 12px; gap: 16px; }
	.wjai-listing-card { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; gap: 18px; }
	.wjai-listing-photo { width: 100px; height: 100px; }
	.wjai-listing-name { font-size: 20px; }
	.wjai-fact-tags, .wjai-profile-actions-v2 { justify-content: center; }
	.wjai-pill-btn { font-size: 13px; padding: 9px 15px; }
	.wjai-checklist-card, .wjai-details-card { padding: 20px 16px; }
	.wjai-profile-grid { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
	.wjai-download-actions { flex-direction: column; }
	.wjai-download-btn { justify-content: center; text-align: center; }
	.wjai-bank-details-grid { flex-direction: column; gap: 16px; }
	.wjai-summary-table th { width: 42%; }
	.wjai-checklist-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
	.wjai-profile-grid { grid-template-columns: 1fr; }
	.wjai-checklist-grid { grid-template-columns: 1fr; }
	.wjai-profile-actions-v2 { flex-direction: column; align-items: center; }
}

/* ===== Mobile responsive sizing for Certificate, ID Card, and Official
   Application Form. All three position text as percentages (which already
   scale fine with a shrinking container), but their FONT SIZES are either
   fixed px or em relative to a static root size - neither shrinks along with
   the container on a narrow phone screen, so text ends up proportionally
   much bigger than intended. These overrides scale every text element down
   to match. ===== */
@media (max-width: 640px) {

	/* Certificate: em-based, so shrinking the container's own base font-size
	   scales every child (.wjai-cert-name is 2.1em, etc.) proportionally. */
	.wjai-certificate { font-size: 9px; }

	/* ID Card: same technique, smaller card so a smaller base. */
	.wjai-idcard { font-size: 7px; }

	/* Official Application Form: built with fixed px sizes throughout, so
	   each rule needs its own smaller mobile value rather than one base
	   font-size fix. */
	.wjai-official-form { padding: 14px 16px !important; }
	.wjai-of-logo { width: 60px !important; }
	.wjai-of-header-text h1 { font-size: 13px !important; }
	.wjai-of-reg { font-size: 8px !important; }
	.wjai-of-office { font-size: 8.5px !important; }
	.wjai-of-contact { font-size: 8px !important; }
	.wjai-of-formno-row { font-size: 9px !important; }
	.wjai-of-title { font-size: 12px !important; }
	.wjai-of-fields { font-size: 9px !important; }
	.wjai-of-photo { width: 70px !important; height: 88px !important; }
	.wjai-of-decl-title { font-size: 10px !important; }
	.wjai-of-declaration p:not(.wjai-of-decl-title) { font-size: 8.5px !important; }
	.wjai-of-signrow { font-size: 9px !important; }
	.wjai-of-sign-label { min-width: 80px !important; }
	.wjai-of-signature-img { max-width: 90px !important; max-height: 36px !important; }
	.wjai-of-office-use { font-size: 9px !important; }
}

@media (max-width: 400px) {
	.wjai-certificate { font-size: 7.5px; }
	.wjai-idcard { font-size: 6px; }
}

/* ---- Portal logo (v2.8.0) ---- */
.wjai-portal-logo, .wjai-member-card-photo.wjai-portal-logo, .wjai-public-profile-photo.wjai-portal-logo, .wjai-listing-photo.wjai-portal-logo {
	object-fit: contain !important; background: #fff; border-radius: 14px !important; border: 1px solid #e2e5ea !important; box-shadow: none !important; padding: 6px; box-sizing: border-box;
}
.wjai-member-card-photo.wjai-portal-logo { width: 120px; height: 120px; margin: 6px auto 14px; display: block; }
.wjai-public-profile-photo.wjai-portal-logo { width: 200px !important; height: 200px !important; }
.wjai-portal-logo-ph {
	display: flex !important; align-items: center; justify-content: center; font-weight: 800; color: #14315d;
	background: linear-gradient(135deg, #eaf0fb, #f7f9fd) !important; font-size: 44px; line-height: 1;
}
.wjai-public-profile-photo.wjai-portal-logo-ph { font-size: 72px; }
.wjai-member-card .wjai-portal-url { word-break: break-all; color: #2563c9; }
.wjai-onfile { display: flex; gap: 14px; align-items: center; background: #f4f8ff; border: 1px solid #d7e4fb; border-radius: 10px; padding: 12px 14px; margin: 4px 0 8px; }
.wjai-onfile-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.wjai-logo-form { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.wjai-logo-form input[type=file] { max-width: 240px; }

/* =====================================================================
   v2.9.0 - Bootstrap-5-style design layer (no Bootstrap dependency, so it
   cannot clash with the theme). Same tokens Bootstrap uses: 0.5rem radius,
   42px controls, #ced4da borders, soft focus ring, subtle card shadows,
   44px touch targets on phones.
   ===================================================================== */
:root { --wjai-primary: #14315d; --wjai-primary-dk: #0d2140; --wjai-ring: rgba(20,49,93,.22); --wjai-border: #dee2e6; --wjai-muted: #6c757d; }

/* ---- Form controls (also fixes type=tel / url / search, which were unstyled) ---- */
.wjai-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.wjai-form select,
.wjai-form textarea,
.wjai-directory-search input,
.wjai-directory-search select {
	display: block; width: 100% !important; box-sizing: border-box !important;
	min-height: 42px; padding: .5rem .85rem !important; font-size: .95rem !important; line-height: 1.5 !important;
	color: #212529 !important; background-color: #fff !important;
	border: 1px solid #ced4da !important; border-radius: .5rem !important; box-shadow: none !important;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.wjai-form textarea { min-height: 84px; resize: vertical; }
.wjai-form input[type="file"] { padding: .35rem .5rem !important; background: #f8f9fa !important; }
.wjai-form input[type="file"]::file-selector-button {
	margin-right: .75rem; padding: .4rem .85rem; border: 0; border-radius: .4rem; background: var(--wjai-primary); color: #fff; font-weight: 600; cursor: pointer;
}
.wjai-form input[type="file"]::file-selector-button:hover { background: var(--wjai-primary-dk); }
.wjai-form input:focus, .wjai-form select:focus, .wjai-form textarea:focus,
.wjai-directory-search input:focus, .wjai-directory-search select:focus {
	outline: 0 !important; border-color: #4a7fd6 !important; box-shadow: 0 0 0 .25rem var(--wjai-ring) !important;
}
.wjai-form input:user-invalid, .wjai-form select:user-invalid, .wjai-form textarea:user-invalid { border-color: #dc3545 !important; }
.wjai-form input::placeholder, .wjai-form textarea::placeholder { color: #9aa3ab; opacity: 1; }
.wjai-form label { font-weight: 600 !important; font-size: .875rem !important; color: #344054 !important; line-height: 1.35; }
.wjai-form label .wjai-small-note, .wjai-form .wjai-small-note { font-weight: 400; color: var(--wjai-muted); }
.wjai-form h3 { letter-spacing: .04em; }

/* ---- Cards ---- */
.wjai-form, .wjai-checklist-card, .wjai-details-card, .wjai-listing-card, .wjai-eligibility, .wjai-instructions, .wjai-public-profile {
	border: 1px solid rgba(16,24,40,.08) !important; border-radius: .75rem !important;
	box-shadow: 0 .125rem .5rem rgba(16,24,40,.06) !important;
}
.wjai-registration-layout .wjai-registration-main .wjai-form { padding: 28px !important; background: #fff; }
.wjai-onfile { background: #f1f6ff; border: 1px solid #cfe0fb; border-radius: .6rem; }

/* ---- Buttons ---- */
.wjai-btn, .wjai-link-btn {
	padding: .65rem 1.4rem !important; border-radius: .5rem !important; font-size: .95rem !important; font-weight: 600 !important;
	box-shadow: 0 1px 2px rgba(16,24,40,.12) !important; min-height: 42px; line-height: 1.4 !important; box-sizing: border-box;
}
.wjai-btn:focus-visible, .wjai-link-btn:focus-visible, .wjai-pill-btn:focus-visible { outline: 0 !important; box-shadow: 0 0 0 .25rem var(--wjai-ring) !important; }
.wjai-btn:active { transform: translateY(0) !important; }
.wjai-pill-btn { border-radius: .5rem !important; font-weight: 600 !important; min-height: 38px; box-sizing: border-box; }
.wjai-owner-actions { gap: 8px !important; }
.wjai-owner-tab { white-space: nowrap; }

/* ---- Alerts ---- */
.wjai-notice { border-radius: .5rem !important; padding: .85rem 1.1rem !important; font-size: .92rem; line-height: 1.5; }
.wjai-notice-success { background: #d1e7dd !important; color: #0a3622 !important; border: 1px solid #a3cfbb !important; }
.wjai-notice-error { background: #f8d7da !important; color: #58151c !important; border: 1px solid #f1aeb5 !important; }
.wjai-notice-error ul { margin: 0; padding-left: 1.1rem; }

/* ---- Badges ---- */
.wjai-fact-tag { border-radius: 50rem !important; font-weight: 600 !important; font-size: .78rem !important; padding: .35em .85em !important; }

/* ---- Tables (Bootstrap .table-striped .table-hover look) ---- */
.wjai-summary-table { border-radius: .5rem; overflow: hidden; border: 1px solid var(--wjai-border) !important; }
.wjai-summary-table tr:nth-child(even) td { background: #fafbfc; }
.wjai-summary-table tbody tr:hover td, .wjai-summary-table tbody tr:hover th { background: #f1f6ff; }
.wjai-summary-table td, .wjai-summary-table th { overflow-wrap: break-word; word-break: normal; vertical-align: top; }
.wjai-summary-table thead th { white-space: nowrap; }
.wjai-summary-table td { min-width: 70px; }
@media (max-width: 640px) { .wjai-summary-table:has(thead) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .wjai-summary-table:has(thead) td { white-space: nowrap; } }

/* ---- Directory cards ---- */
.wjai-directory-search { background: #fff; border: 1px solid rgba(16,24,40,.08); border-radius: .75rem; padding: 14px; box-shadow: 0 .125rem .5rem rgba(16,24,40,.05); }
.wjai-member-card { border: 1px solid rgba(16,24,40,.08) !important; border-radius: .75rem !important; box-shadow: 0 .125rem .5rem rgba(16,24,40,.06) !important; }
.wjai-member-card:hover { box-shadow: 0 .5rem 1.25rem rgba(16,24,40,.12) !important; }
.wjai-directory-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 20px !important; }

/* ---- Phones ---- */
@media (max-width: 640px) {
	.wjai-registration-layout { gap: 16px !important; }
	.wjai-registration-layout .wjai-registration-main .wjai-form { padding: 18px 16px !important; }
	.wjai-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .wjai-form select, .wjai-form textarea { min-height: 46px; font-size: 16px !important; } /* 16px stops iOS zoom-on-focus */
	.wjai-btn, .wjai-link-btn { width: 100%; min-height: 46px; }
	.wjai-owner-actions { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; }
	.wjai-owner-actions .wjai-pill-btn { flex: 0 0 auto; }
	.wjai-directory-search { flex-wrap: wrap; }
	.wjai-directory-search input { flex: 1 1 100%; }
	.wjai-directory-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
	.wjai-member-card { padding: 16px 10px !important; }
	.wjai-member-card-photo, .wjai-member-card-photo.wjai-portal-logo { width: 84px !important; height: 84px !important; }
	.wjai-portal-logo-ph { font-size: 32px; }
	.wjai-member-card h4 { font-size: 14.5px; }
	.wjai-pagination { flex-wrap: wrap; }
}
@media (max-width: 380px) { .wjai-directory-grid { grid-template-columns: 1fr !important; } }

/* Eligibility panel is a <details>: collapsible on phones, always open on desktop */
details.wjai-eligibility > summary { cursor: pointer; list-style: none; font-weight: 700; color: #14315d; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; padding: 2px 0 10px; border-bottom: 2px solid #14315d; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
details.wjai-eligibility > summary::-webkit-details-marker { display: none; }
details.wjai-eligibility > summary::after { content: '\25BE'; font-size: 1.1rem; transition: transform .15s; }
details.wjai-eligibility:not([open]) > summary { border-bottom-color: transparent; margin-bottom: 0; padding-bottom: 2px; }
details.wjai-eligibility:not([open]) > summary::after { transform: rotate(-90deg); }
@media (max-width: 640px) {
	.wjai-member-card .wjai-member-id { font-size: 10.5px !important; letter-spacing: 0 !important; padding: 4px 8px !important; }
}

/* Payment history: on phones each payment becomes a small stacked card instead of a wide table */
@media (max-width: 640px) {
	.wjai-stack-table, .wjai-stack-table tbody, .wjai-stack-table tr, .wjai-stack-table td { display: block; width: 100%; box-sizing: border-box; }
	.wjai-stack-table thead { display: none; }
	.wjai-stack-table tr { border: 1px solid var(--wjai-border); border-radius: .6rem; margin-bottom: 10px; padding: 6px 12px; background: #fff; }
	.wjai-stack-table tbody tr:nth-child(even) td { background: transparent; }
	.wjai-stack-table td { border: 0 !important; padding: 6px 0 !important; display: flex; justify-content: space-between; gap: 14px; text-align: right !important; }
	.wjai-stack-table td::before { content: attr(data-label); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--wjai-muted); text-align: left; flex: 0 0 auto; }
	.wjai-stack-table { border: 0 !important; }
}
@media (max-width: 640px) { .wjai-stack-table td { overflow-wrap: anywhere; } .wjai-stack-table td::before { white-space: nowrap; } }

/* Change-password card */
.wjai-password-card label { display:block; font-weight:600; font-size:.92rem; }
.wjai-password-card input[type="password"] { display:block; width:100%; margin-top:6px; padding:.6rem .75rem; border:1px solid #ced4da; border-radius:.5rem; font-size:1rem; background:#fff; box-sizing:border-box; }
.wjai-password-card input[type="password"]:focus { outline:0; border-color:#2563eb; box-shadow:0 0 0 .2rem rgba(37,99,235,.2); }
.wjai-password-card .wjai-pill-btn { margin-top:4px; }