/* Nepal Freelance Hub — mobile-first frontend styles */

.nfh-form { max-width: 640px; }
.nfh-form input[type="text"], .nfh-form input[type="email"], .nfh-form input[type="password"],
.nfh-form input[type="tel"], .nfh-form input[type="url"], .nfh-form input[type="number"],
.nfh-form select, .nfh-form textarea {
	width: 100%; padding: 10px 12px; border: 1px solid #ccd0d4; border-radius: 6px;
	font-size: 16px; box-sizing: border-box;
}
.nfh-form input[type="file"] { font-size: 15px; }
.nfh-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .nfh-row { grid-template-columns: 1fr 1fr; } }

.nfh-btn {
	display: inline-block; padding: 10px 20px; border-radius: 6px; border: 1px solid #0a2540;
	background: #fff; color: #0a2540; text-decoration: none; cursor: pointer; font-size: 16px;
}
.nfh-btn:hover { background: #f0f4f8; }
.nfh-btn-primary { background: #0a2540; color: #fff; border-color: #0a2540; }
.nfh-btn-primary:hover { background: #123a63; }
.nfh-btn-accent { background: #c9a227; border-color: #c9a227; color: #0a2540; }
.nfh-btn-small { padding: 6px 12px; font-size: 14px; }

.nfh-notice { border-left: 4px solid #999; background: #f8f9fa; padding: 12px 16px; margin: 16px 0; border-radius: 0 6px 6px 0; }
.nfh-notice p, .nfh-notice ul { margin: 0.4em 0; }
.nfh-success { border-color: #2e7d32; background: #eef7ee; }
.nfh-error { border-color: #c62828; background: #fdecea; }
.nfh-info { border-color: #1565c0; background: #e8f0fe; }
.nfh-success-text { color: #2e7d32; font-weight: 600; }
.nfh-muted { color: #777; font-size: 14px; }

.nfh-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 13px; font-weight: 600; background: #eee; color: #333; }
.nfh-status-verified, .nfh-status-selected { background: #dff0d8; color: #2e7d32; }
.nfh-status-pending, .nfh-status-submitted, .nfh-status-under_review { background: #fff3cd; color: #856404; }
.nfh-status-rejected { background: #fdecea; color: #c62828; }
.nfh-status-shortlisted, .nfh-status-interview { background: #e8f0fe; color: #1565c0; }
.nfh-status-email_verified, .nfh-status-info_required { background: #e3f2fd; color: #1565c0; }
.nfh-status-withdrawn, .nfh-status-suspended, .nfh-status-unverified { background: #f0f0f0; color: #666; }

.nfh-badge { display: inline-block; background: #0a2540; color: #fff; font-size: 12px; font-weight: 700;
	padding: 2px 10px; border-radius: 20px; vertical-align: middle; }

.nfh-role-choice { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 520px) { .nfh-role-choice { grid-template-columns: 1fr 1fr; } }
.nfh-role-card { border: 2px solid #ccd0d4; border-radius: 8px; padding: 14px; cursor: pointer; display: block; }
.nfh-role-card strong { display: block; font-size: 17px; }
.nfh-role-card span { color: #666; font-size: 14px; }
.nfh-role-card:has(input:checked) { border-color: #0a2540; background: #f0f4f8; }

.nfh-hero { background: linear-gradient(135deg, #0a2540, #123a63); color: #fff; padding: 48px 24px; border-radius: 12px; text-align: center; margin-bottom: 32px; }
.nfh-hero h1 { color: #fff; margin-top: 0; font-size: 32px; }
.nfh-hero-sub { font-size: 18px; opacity: 0.9; max-width: 640px; margin: 0 auto 20px; }
.nfh-hero .nfh-search-form { max-width: 560px; margin: 0 auto 20px; }
.nfh-hero-buttons .nfh-btn { margin: 4px; }

.nfh-search-form { display: flex; flex-wrap: wrap; gap: 8px; }
.nfh-search-form input[type="text"] { flex: 1 1 180px; padding: 10px 12px; border: 1px solid #ccd0d4; border-radius: 6px; font-size: 16px; }

.nfh-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 32px; }
.nfh-cat { background: #f0f4f8; border-radius: 8px; padding: 16px 8px; text-align: center; font-weight: 600; }

.nfh-steps { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
@media (min-width: 640px) { .nfh-steps { grid-template-columns: repeat(3, 1fr); } }
.nfh-step { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; }

.nfh-dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.nfh-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; }
.nfh-card h4 { margin: 0 0 8px; }
.nfh-big { font-size: 28px; font-weight: 700; margin: 8px 0; }

.nfh-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.nfh-table th, .nfh-table td { border: 1px solid #e0e0e0; padding: 10px; text-align: left; vertical-align: top; }
.nfh-table th { background: #f5f7fa; }
.nfh-table .nfh-actions { white-space: nowrap; }
@media (max-width: 640px) {
	.nfh-table, .nfh-table thead, .nfh-table tbody, .nfh-table th, .nfh-table td, .nfh-table tr { display: block; }
	.nfh-table thead { display: none; }
	.nfh-table tr { border: 1px solid #e0e0e0; margin-bottom: 12px; border-radius: 6px; }
	.nfh-table td { border: none; border-bottom: 1px solid #f0f0f0; }
}

.nfh-list { list-style: disc; padding-left: 20px; }
.nfh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 16px 0; }
.nfh-person { border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; text-align: center; }
.nfh-person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.nfh-person h4 { margin: 8px 0 4px; }

.nfh-profile-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }

.nfh-verify-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; max-width: 640px; }
.nfh-checklist { list-style: none; padding: 0; }
.nfh-checklist li { padding: 6px 0 6px 28px; position: relative; }
.nfh-checklist li::before { content: "○"; position: absolute; left: 4px; color: #999; }
.nfh-checklist li.done::before { content: "●"; color: #2e7d32; }

.nfh-apply-box { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-top: 24px; }
.nfh-job-salary { font-size: 18px; }
.nfh-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.nfh-filter-row select, .nfh-filter-row input { flex: 1 1 140px; padding: 8px; border: 1px solid #ccd0d4; border-radius: 6px; }
.nfh-status-select { padding: 6px; border-radius: 4px; }
details summary { cursor: pointer; color: #1565c0; }