/* ===== WJAI Membership - Frontend Styles ===== */

.wjai-form {
	max-width: 520px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.wjai-form label {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	font-size: 14px;
	gap: 6px;
}
.wjai-form input[type="text"],
.wjai-form input[type="email"],
.wjai-form input[type="password"],
.wjai-form input[type="number"],
.wjai-form input[type="file"] {
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-weight: normal;
	font-size: 15px;
}
.wjai-btn, .wjai-link-btn {
	display: inline-block;
	background: #14315d;
	color: #fff !important;
	border: none;
	padding: 12px 20px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}
.wjai-btn:hover, .wjai-link-btn:hover { background: #0d2140; }

.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; }

/* 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-search { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.wjai-directory-search input { padding: 10px; border: 1px solid #ccc; border-radius: 6px; flex: 1; min-width: 160px; }
.wjai-directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.wjai-member-card { border: 1px solid #e2e2e2; border-radius: 8px; padding: 16px; text-align: center; background: #fff; }
.wjai-member-card img { width: 90px; height: 90px; object-fit: cover; border-radius: 50%; margin-bottom: 10px; }
.wjai-member-card h4 { margin: 4px 0; }
.wjai-member-card p { margin: 2px 0; font-size: 13px; color: #555; }
.wjai-pagination { margin-top: 20px; text-align: center; }
.wjai-pagination a { padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; margin: 0 3px; text-decoration: none; }
.wjai-pagination a.wjai-page-current { background: #14315d; color: #fff; }

/* Certificate */
.wjai-certificate {
	width: 100%;
	max-width: 1000px;
	aspect-ratio: 1.41 / 1; /* A4 landscape ratio */
	margin: 0 auto;
	background-size: cover;
	background-position: center;
	background-color: #fdfdfa;
	border: 1px solid #ddd;
	position: relative;
	font-family: Georgia, serif;
}
.wjai-cert-name   { position: absolute; top: 42%; left: 50%; transform: translateX(-50%); font-size: 2.2em; font-weight: bold; }
.wjai-cert-id     { position: absolute; top: 55%; left: 50%; transform: translateX(-50%); font-size: 1.1em; }
.wjai-cert-desig  { position: absolute; top: 62%; left: 50%; transform: translateX(-50%); font-size: 1.1em; }
.wjai-cert-date   { position: absolute; top: 72%; left: 50%; transform: translateX(-50%); font-size: 1em; }

/* ID Card - standard CR80 ratio */
.wjai-idcard {
	width: 340px;
	height: 214px;
	margin: 0 auto;
	background-size: cover;
	background-position: center;
	background-color: #fdfdfa;
	border: 1px solid #ddd;
	border-radius: 10px;
	position: relative;
	font-family: Arial, sans-serif;
}
.wjai-idcard-photo  { position: absolute; top: 20px; left: 20px; width: 70px; height: 70px; object-fit: cover; border-radius: 6px; border: 2px solid #fff; }
.wjai-idcard-name   { position: absolute; top: 25px; left: 105px; font-weight: bold; font-size: 1.05em; }
.wjai-idcard-desig  { position: absolute; top: 48px; left: 105px; font-size: 0.85em; }
.wjai-idcard-id     { position: absolute; top: 70px; left: 105px; font-size: 0.8em; }
.wjai-idcard-expiry { position: absolute; bottom: 14px; left: 20px; font-size: 0.75em; }

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

@media print {
	.wjai-print-btn, header, footer, nav, .site-header, .site-footer { display: none !important; }
	body * { visibility: hidden; }
	.wjai-certificate, .wjai-certificate *, .wjai-idcard, .wjai-idcard * { visibility: visible; }
	.wjai-certificate, .wjai-idcard { position: absolute; top: 0; left: 0; }
}