/* ─────────────────────────────────────────
   MEMBERSHIP.CSS — All membership pages
   ───────────────────────────────────────── */

/* ─── PAGE HERO ─── */
.page-hero {
	background: linear-gradient(150deg, #0f0173 0%, #1a3a6e 100%);
	padding: 24px 18px 22px;
}
.page-hero h1 {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 5px;
}
.page-hero p {
	color: rgba(255,255,255,0.6);
	font-size: 12px;
	margin: 0;
}

/* ─── ENTRY BUTTONS ─── */
.entry-card {
	background: #fff;
	border-radius: 13px;
	padding: 18px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	border: 0.5px solid rgba(0,0,0,0.06);
	margin-bottom: 10px;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.15s;
}
.entry-card:active { transform: scale(0.97); }
.entry-ic {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.entry-ic svg { width: 22px; height: 22px; }
.entry-text h4 {
	font-size: 14px;
	font-weight: 700;
	color: #0f0173;
	margin: 0 0 3px;
}
.entry-text p {
	font-size: 11.5px;
	color: #777;
	margin: 0;
	line-height: 1.4;
}
.entry-arrow { margin-left: auto; color: #ccc; }
.entry-arrow svg { width: 18px; height: 18px; }

/* ─── PROCESS STEPS ─── */
.process-card {
	background: #fff;
	border-radius: 13px;
	border: 0.5px solid rgba(0,0,0,0.06);
	overflow: hidden;
}
.process-step {
	display: flex;
	gap: 13px;
	padding: 13px 15px;
	border-bottom: 0.5px solid #f5f5f5;
	align-items: flex-start;
}
.process-step:last-child { border-bottom: none; }
.step-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #0f0173;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}
.step-text h5 {
	font-size: 13px;
	font-weight: 600;
	color: #0f0173;
	margin: 0 0 2px;
}
.step-text p {
	font-size: 12px;
	color: #666;
	margin: 0;
	line-height: 1.5;
}

/* ─── FEES TABLE ─── */
.fees-card {
	background: #fff;
	border-radius: 13px;
	border: 0.5px solid rgba(0,0,0,0.06);
	overflow: hidden;
}
.fees-row {
	display: flex;
	padding: 13px 15px;
	border-bottom: 0.5px solid #f5f5f5;
	gap: 12px;
	align-items: center;
}
.fees-row:last-child { border-bottom: none; }
.fees-type {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	color: #0f0173;
}
.fees-type span {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: #888;
	margin-top: 2px;
}
.fees-amount {
	font-size: 16px;
	font-weight: 700;
	color: #1a56db;
}
.fees-note {
	background: #fff8e8;
	border-radius: 10px;
	padding: 11px 13px;
	font-size: 11.5px;
	color: #92600a;
	line-height: 1.6;
	margin-top: 9px;
	border: 0.5px solid #f5d78e;
}

/* ─── OTP FORM ─── */
.otp-card {
	background: #fff;
	border-radius: 13px;
	padding: 20px 16px;
	border: 0.5px solid rgba(0,0,0,0.06);
}
.otp-card h4 {
	font-size: 15px;
	font-weight: 700;
	color: #0f0173;
	margin: 0 0 5px;
}
.otp-card p {
	font-size: 12px;
	color: #777;
	margin: 0 0 18px;
	line-height: 1.5;
}
.sir-input {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid #dde3ee;
	border-radius: 10px;
	font-size: 15px;
	color: #1a1a2e;
	background: #f8f9fc;
	outline: none;
	margin-bottom: 12px;
	-webkit-appearance: none;
}
.sir-input:focus {
	border-color: #1a56db;
	background: #fff;
}
.sir-input::placeholder { color: #bbb; }
.otp-input {
	letter-spacing: 6px;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
}
.btn-primary-sir {
	width: 100%;
	background: #0f0173;
	color: #fff;
	border: none;
	padding: 14px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.btn-primary-sir:active { opacity: 0.85; }
.btn-secondary-sir {
	width: 100%;
	background: #f0f4ff;
	color: #0f0173;
	border: none;
	padding: 12px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 10px;
}
.resend-link {
	text-align: center;
	font-size: 12px;
	color: #888;
	margin-top: 12px;
}
.resend-link a {
	color: #1a56db;
	text-decoration: none;
	font-weight: 600;
}

/* ─── PROFILE STATUS ─── */
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
}
.status-verification { background: #fff8e0; color: #92600a; }
.status-issued       { background: #e8f7ee; color: #166534; }
.status-rejected     { background: #fde8e8; color: #991b1b; }
.status-cancelled    { background: #f3f4f6; color: #6b7280; }
.status-refunded     { background: #f0eeff; color: #6d28d9; }

.profile-card {
	background: #fff;
	border-radius: 13px;
	border: 0.5px solid rgba(0,0,0,0.06);
	overflow: hidden;
}
.profile-head {
	background: linear-gradient(150deg, #0f0173, #1a3a6e);
	padding: 20px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.profile-photo {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255,255,255,0.4);
	flex-shrink: 0;
}
.profile-initials {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
}
.profile-name h3 {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 4px;
}
.profile-name p {
	color: rgba(255,255,255,0.65);
	font-size: 11px;
	margin: 0;
}
.profile-row {
	display: flex;
	padding: 12px 15px;
	border-bottom: 0.5px solid #f5f5f5;
	gap: 10px;
}
.profile-row:last-child { border-bottom: none; }
.profile-label {
	font-size: 11px;
	color: #999;
	min-width: 110px;
	flex-shrink: 0;
}
.profile-value {
	font-size: 13px;
	color: #1a1a2e;
	font-weight: 500;
	flex: 1;
	word-break: break-word;
}

/* ─── PAYMENT STRIP ─── */
.payment-strip {
	background: #fff;
	border-radius: 13px;
	border: 0.5px solid rgba(0,0,0,0.06);
	padding: 14px 15px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.payment-strip .p-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #e8f7ee;
	display: flex;
	align-items: center;
	justify-content: center;
}
.payment-strip .p-icon svg { width: 18px; height: 18px; }
.payment-strip .p-text strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #0f0173;
}
.payment-strip .p-text span {
	font-size: 11px;
	color: #888;
}

/* ─── STEP FORM ─── */
.step-header {
	background: linear-gradient(150deg, #0f0173, #1a3a6e);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.step-badge {
	background: rgba(255,255,255,0.2);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	letter-spacing: 0.5px;
}
.step-header h2 {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	margin: 0;
}
.form-card {
	background: #fff;
	border-radius: 13px;
	border: 0.5px solid rgba(0,0,0,0.06);
	padding: 16px;
}
.form-group-sir {
	margin-bottom: 14px;
}
.form-label-sir {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #0f0173;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-bottom: 6px;
}
.form-label-sir .req { color: #dc2626; }
.sir-select {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid #dde3ee;
	border-radius: 10px;
	font-size: 14px;
	color: #1a1a2e;
	background: #f8f9fc;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.sir-select:focus { border-color: #1a56db; background-color: #fff; }
.sir-textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid #dde3ee;
	border-radius: 10px;
	font-size: 14px;
	color: #1a1a2e;
	background: #f8f9fc;
	outline: none;
	resize: none;
	height: 90px;
	font-family: inherit;
}
.sir-textarea:focus { border-color: #1a56db; background: #fff; }

/* ─── STEP NAV ─── */
.step-nav {
	display: flex;
	gap: 9px;
	padding: 14px 16px;
}
.btn-back {
	flex: 0 0 auto;
	padding: 13px 18px;
	background: #f0f4ff;
	color: #0f0173;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: flex;
	align-items: center;
}
.btn-continue {
	flex: 1;
	padding: 13px;
	background: #0f0173;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn-continue.blue { background: #1a56db; }
.btn-continue:active, .btn-back:active { opacity: 0.8; }

/* ─── BYLAWS MODAL ─── */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	z-index: 200;
	max-width: 480px;
	margin: 0 auto;
}
.modal-overlay.open { display: flex; align-items: flex-end; }
.modal-box {
	background: #fff;
	border-radius: 20px 20px 0 0;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 20px 18px 30px;
}
.modal-box h3 {
	font-size: 16px;
	font-weight: 700;
	color: #0f0173;
	margin: 0 0 4px;
}
.modal-close {
	float: right;
	background: #f0f0f0;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #555;
}
.modal-section { margin-top: 14px; }
.modal-section h4 {
	font-size: 13px;
	font-weight: 700;
	color: #0f0173;
	margin: 0 0 5px;
}
.modal-section p, .modal-section li {
	font-size: 12px;
	color: #555;
	line-height: 1.7;
}
.modal-section ul { padding-left: 16px; }

/* ─── UPLOAD AREA ─── */
.upload-zone {
	border: 2px dashed #c5d0e8;
	border-radius: 13px;
	padding: 28px 16px;
	text-align: center;
	background: #f8f9fc;
	cursor: pointer;
	transition: border-color 0.2s;
}
.upload-zone.active { border-color: #1a56db; background: #f0f4ff; }
.upload-zone svg { width: 36px; height: 36px; color: #aab4cc; margin-bottom: 10px; }
.upload-zone h5 {
	font-size: 14px;
	font-weight: 600;
	color: #0f0173;
	margin: 0 0 4px;
}
.upload-zone p {
	font-size: 11.5px;
	color: #888;
	margin: 0;
}
.upload-zone input[type="file"] { display: none; }

.crop-container {
	display: none;
	margin-top: 14px;
}
.preview-result {
	display: none;
	text-align: center;
	margin-top: 14px;
}
.preview-result img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #e8edf7;
}
.upload-progress {
	background: #e8f7ee;
	border-radius: 8px;
	height: 8px;
	margin-top: 10px;
	overflow: hidden;
	display: none;
}
.upload-progress-bar {
	height: 100%;
	background: #16a34a;
	width: 0%;
	transition: width 0.3s;
}

/* ─── PREVIEW DETAILS ─── */
.preview-section {
	background: #fff;
	border-radius: 13px;
	border: 0.5px solid rgba(0,0,0,0.06);
	overflow: hidden;
	margin-bottom: 10px;
}
.preview-section-head {
	background: #f8f9fc;
	padding: 10px 15px;
	font-size: 11px;
	font-weight: 700;
	color: #0f0173;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	border-bottom: 0.5px solid #eee;
}
.preview-row {
	display: flex;
	padding: 11px 15px;
	border-bottom: 0.5px solid #f5f5f5;
	gap: 10px;
}
.preview-row:last-child { border-bottom: none; }
.preview-label {
	font-size: 11.5px;
	color: #999;
	min-width: 120px;
	flex-shrink: 0;
}
.preview-val {
	font-size: 13px;
	color: #1a1a2e;
	font-weight: 500;
	flex: 1;
	word-break: break-word;
}
.file-check {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
}
.file-check.ok  { color: #16a34a; }
.file-check.no  { color: #dc2626; }

/* ─── EDIT REQUEST ─── */
.edit-compare-row {
	display: flex;
	padding: 11px 15px;
	border-bottom: 0.5px solid #f5f5f5;
	gap: 8px;
	align-items: flex-start;
}
.edit-compare-row:last-child { border-bottom: none; }
.edit-col-label {
	font-size: 11px;
	color: #999;
	min-width: 90px;
	flex-shrink: 0;
	padding-top: 2px;
}
.edit-col-old {
	flex: 1;
	font-size: 12px;
	color: #dc2626;
	text-decoration: line-through;
	word-break: break-word;
}
.edit-col-new {
	flex: 1;
	font-size: 12px;
	color: #16a34a;
	font-weight: 600;
	word-break: break-word;
}