/* ═══════════════════════════════════════════════════════════
   WP Job Portal v4 — Scoped under .wjp & .wjp-reg-card
   Primary #1B3A6B | No conflicts with theme/admin
═══════════════════════════════════════════════════════════ */

/* ── CSS Variables ──────────────────────────────────────── */
.wjp,
.wjp-reg-card,
.wjp-dashboard {
     --wjp-primary: #1b3a6b;
     --wjp-hover: #2a5298;
     --wjp-bg: #e8f0fe;
     --wjp-success: #28a745;
     --wjp-danger: #dc3545;
     --wjp-warning: #ffc107;
     --wjp-border: #dee2e6;
     --wjp-text: #212529;
     --wjp-muted: #6c757d;
     --wjp-radius: 10px;
     --wjp-shadow: 0 4px 16px rgba(27, 58, 107, 0.1);
}

/* ── Base reset — scoped only ───────────────────────────── */
.wjp *,
.wjp-reg-card *,
.wjp-dashboard * {
     box-sizing: border-box;
}
.wjp,
.wjp-reg-card,
.wjp-dashboard {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     color: var(--wjp-text);
     line-height: 1.6;
}

/* ── Registration Card ──────────────────────────────────── */
.wjp-reg-card {
     background: #fff;
     border: 1px solid var(--wjp-border);
     border-radius: var(--wjp-radius);
     padding: 36px 40px;
     max-width: 620px;
     margin: 32px auto;
     box-shadow: var(--wjp-shadow);
}
.wjp-reg-card h2 {
     color: var(--wjp-primary);
     font-size: 1.4rem;
     margin: 0 0 4px;
}
.wjp-reg-card .wjp-step-sub {
     color: var(--wjp-muted);
     font-size: 0.9rem;
     margin: 0 0 24px;
     display: block;
}
.wjp-reg-card .wjp-alt-link {
     text-align: center;
     margin-top: 18px;
     font-size: 0.9rem;
     color: var(--wjp-muted);
}
.wjp-reg-card .wjp-alt-link a {
     color: var(--wjp-primary);
     text-decoration: none;
     font-weight: 600;
}

/* ── Step Indicator ─────────────────────────────────────── */
.wjp-reg-card .wjp-steps {
     display: flex;
     align-items: center;
     margin-bottom: 28px;
}
.wjp-reg-card .wjp-step {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
}
.wjp-reg-card .wjp-step-circle {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: var(--wjp-border);
     color: var(--wjp-muted);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 0.9rem;
     transition: all 0.3s;
}
.wjp-reg-card .wjp-step.active .wjp-step-circle {
     background: var(--wjp-primary);
     color: #fff;
}
.wjp-reg-card .wjp-step.done .wjp-step-circle {
     background: var(--wjp-success);
     color: #fff;
}
.wjp-reg-card .wjp-step-label {
     font-size: 0.75rem;
     color: var(--wjp-muted);
     font-weight: 600;
}
.wjp-reg-card .wjp-step.active .wjp-step-label {
     color: var(--wjp-primary);
}
.wjp-reg-card .wjp-step-line {
     flex: 1;
     height: 2px;
     background: var(--wjp-border);
     margin: 0 10px 18px;
}

/* ── Form Fields — ONLY inside .wjp or .wjp-reg-card ─────── */
.wjp .wjp-field,
.wjp-reg-card .wjp-field {
     margin-bottom: 16px;
}
.wjp .wjp-field label,
.wjp-reg-card .wjp-field label {
     display: block;
     font-weight: 600;
     font-size: 0.88rem;
     margin-bottom: 5px;
     color: var(--wjp-text);
}
.wjp .wjp-field input,
.wjp .wjp-field select,
.wjp .wjp-field textarea,
.wjp-reg-card .wjp-field input,
.wjp-reg-card .wjp-field select,
.wjp-reg-card .wjp-field textarea {
     display: block;
     width: 100%;
     padding: 9px 13px;
     border: 1.5px solid var(--wjp-border);
     border-radius: 7px;
     font-size: 0.93rem;
     font-family: inherit;
     color: var(--wjp-text);
     background: #fff;
     outline: none;
     transition:
          border-color 0.2s,
          box-shadow 0.2s;
     -webkit-appearance: none;
     appearance: none;
}
.wjp .wjp-field input:focus,
.wjp .wjp-field select:focus,
.wjp .wjp-field textarea:focus,
.wjp-reg-card .wjp-field input:focus,
.wjp-reg-card .wjp-field select:focus,
.wjp-reg-card .wjp-field textarea:focus {
     border-color: var(--wjp-primary);
     box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.08);
}
.wjp .wjp-field textarea,
.wjp-reg-card .wjp-field textarea {
     resize: vertical;
     min-height: 90px;
}
.wjp .wjp-field-full,
.wjp-reg-card .wjp-field-full {
     grid-column: 1 / -1;
}

/* Password toggle */
.wjp-reg-card .wjp-field label .wjp-pass-toggle,
.wjp .wjp-field label .wjp-pass-toggle {
     display: inline-block;
     margin-left: 6px;
     cursor: pointer;
     opacity: 0.65;
     font-size: 0.9rem;
     user-select: none;
}
.wjp-reg-card .wjp-field label .wjp-pass-toggle:hover,
.wjp .wjp-field label .wjp-pass-toggle:hover {
     opacity: 1;
}

/* Password strength */
.wjp-reg-card .wjp-pass-strength,
.wjp .wjp-pass-strength {
     margin-top: 6px;
}
.wjp-pass-bar {
     height: 4px;
     background: var(--wjp-border);
     border-radius: 3px;
     overflow: hidden;
     margin-bottom: 5px;
}
.wjp-pass-fill {
     height: 100%;
     width: 0%;
     background: var(--wjp-danger);
     border-radius: 3px;
     transition:
          width 0.3s,
          background 0.3s;
}
.wjp-pass-hints {
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 0.78rem;
}
.wjp-pass-hints li {
     margin-bottom: 1px;
}

/* 2-col grid */
.wjp-reg-card .wjp-form-grid,
.wjp .wjp-form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0 14px;
}

/* ── Alerts ─────────────────────────────────────────────── */
.wjp .wjp-alert,
.wjp-reg-card .wjp-alert {
     padding: 11px 15px;
     border-radius: 7px;
     margin-bottom: 14px;
     font-size: 0.88rem;
     line-height: 1.5;
}
.wjp-alert-error {
     background: #f8d7da;
     color: #721c24;
     border-left: 4px solid var(--wjp-danger);
}
.wjp-alert-success {
     background: #d4edda;
     color: #155724;
     border-left: 4px solid var(--wjp-success);
}
.wjp-alert-info {
     background: var(--wjp-bg);
     color: var(--wjp-primary);
     border-left: 4px solid var(--wjp-primary);
}

/* ── Buttons ─────────────────────────────────────────────── */
.wjp .wjp-btn,
.wjp-reg-card .wjp-btn,
.wjp-dashboard .wjp-btn {
     display: inline-block;
     padding: 9px 20px;
     border-radius: 7px;
     font-size: 0.92rem;
     font-weight: 600;
     cursor: pointer;
     border: none;
     text-decoration: none;
     font-family: inherit;
     line-height: 1.4;
     transition:
          background 0.18s,
          opacity 0.18s;
     vertical-align: middle;
}
.wjp .wjp-btn:disabled,
.wjp-reg-card .wjp-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
}

.wjp-btn-primary {
     background: var(--wjp-primary) !important;
     color: #fff !important;
}
.wjp-btn-primary:hover {
     background: var(--wjp-hover) !important;
}
.wjp-btn-outline {
     background: transparent !important;
     border: 2px solid var(--wjp-primary) !important;
     color: var(--wjp-primary) !important;
}
.wjp-btn-outline:hover {
     background: var(--wjp-primary) !important;
     color: #fff !important;
}
.wjp-btn-danger {
     background: var(--wjp-danger) !important;
     color: #fff !important;
}
.wjp-btn-success {
     background: var(--wjp-success) !important;
     color: #fff !important;
}
.wjp-btn-sm {
     padding: 5px 11px !important;
     font-size: 0.8rem !important;
}
.wjp-btn-block {
     width: 100%;
     text-align: center;
     display: block;
}

/* Spinner */
.wjp-spinner {
     display: inline-block;
     width: 13px;
     height: 13px;
     border: 2px solid rgba(255, 255, 255, 0.35);
     border-top-color: #fff;
     border-radius: 50%;
     animation: wjp-spin 0.55s linear infinite;
     vertical-align: middle;
     margin-right: 5px;
}
@keyframes wjp-spin {
     to {
          transform: rotate(360deg);
     }
}

/* ── Payment methods ────────────────────────────────────── */
.wjp-payment-methods {
     display: flex;
     gap: 12px;
     margin-bottom: 18px;
}
.wjp-pay-option {
     flex: 1;
     border: 2px solid var(--wjp-border);
     border-radius: 9px;
     padding: 13px 14px;
     cursor: pointer;
     transition: all 0.18s;
     background: #fff;
     text-align: center;
}
.wjp-pay-option:hover {
     border-color: var(--wjp-primary);
}
.wjp-pay-option.active {
     border-color: var(--wjp-primary);
     background: var(--wjp-bg);
}
.wjp-pay-icons {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
}
.wjp-pay-label {
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--wjp-text);
}
.wjp-pay-panel {
     margin-bottom: 14px;
}
.wjp-pay-actions {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 18px;
     gap: 10px;
}
.wjp-ssl-note {
     padding: 13px 15px;
     background: #f0fdf4;
     border: 1px solid #bbf7d0;
     border-radius: 7px;
     color: #166534;
     font-size: 0.88rem;
     line-height: 1.6;
}

/* Stripe element */
.wjp-card-element {
     padding: 12px 14px;
     border: 1.5px solid var(--wjp-border);
     border-radius: 7px;
     background: #fff;
     min-height: 44px;
     transition:
          border-color 0.2s,
          box-shadow 0.2s;
}
.wjp-card-element.StripeElement--focus {
     border-color: var(--wjp-primary);
     box-shadow: 0 0 0 3px rgba(27, 58, 107, 0.08);
}
.wjp-card-element.StripeElement--invalid {
     border-color: var(--wjp-danger);
     box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.08);
}
.wjp-card-element.StripeElement--complete {
     border-color: var(--wjp-success);
}
.wjp-field-error {
     color: var(--wjp-danger);
     font-size: 0.8rem;
     margin-top: 4px;
     display: block;
}

/* ── Dashboard layout ───────────────────────────────────── */
.wjp-dashboard {
     display: flex;
     gap: 22px;
     max-width: 1180px;
     margin: 0 auto;
     padding: 24px 16px;
     align-items: flex-start;
}
.wjp-dashboard .wjp-sidebar {
     width: 230px;
     flex-shrink: 0;
     position: sticky;
     top: 20px;
}
.wjp-dashboard .wjp-main {
     flex: 1;
     min-width: 0;
}

/* Profile box */
.wjp-profile-box {
     background: #fff;
     border: 1px solid var(--wjp-border);
     border-radius: var(--wjp-radius);
     padding: 22px 18px;
     text-align: center;
     margin-bottom: 14px;
     box-shadow: var(--wjp-shadow);
}
.wjp-avatar {
     width: 76px;
     height: 76px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid var(--wjp-primary);
     margin: 0 auto 9px;
     display: block;
}
.wjp-avatar-placeholder {
     width: 76px;
     height: 76px;
     border-radius: 50%;
     background: var(--wjp-bg);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.9rem;
     margin: 0 auto 9px;
     border: 3px solid var(--wjp-primary);
}
.wjp-photo-btn {
     display: inline-block;
     font-size: 0.78rem;
     color: var(--wjp-primary);
     cursor: pointer;
     text-decoration: underline;
     font-weight: 600;
     margin-bottom: 7px;
}
.wjp-profile-box h3 {
     font-size: 0.95rem;
     color: var(--wjp-primary);
     margin: 0 0 2px;
}
.wjp-profile-box p {
     font-size: 0.8rem;
     color: var(--wjp-muted);
     margin: 2px 0 0;
}

/* Sidebar nav */
.wjp-nav {
     background: #fff;
     border: 1px solid var(--wjp-border);
     border-radius: var(--wjp-radius);
     padding: 8px;
     list-style: none;
     margin: 0;
     box-shadow: var(--wjp-shadow);
}
.wjp-nav li {
     margin-bottom: 1px;
}
.wjp-nav a {
     display: block;
     padding: 8px 13px;
     border-radius: 6px;
     color: var(--wjp-text);
     text-decoration: none;
     font-size: 0.88rem;
     font-weight: 500;
     transition: all 0.14s;
}
.wjp-nav a:hover,
.wjp-nav a.active {
     background: var(--wjp-bg);
     color: var(--wjp-primary);
     font-weight: 700;
}

/* Dashboard section */
.wjp-section {
     background: #fff;
     border: 1px solid var(--wjp-border);
     border-radius: var(--wjp-radius);
     padding: 22px;
     margin-bottom: 18px;
     box-shadow: var(--wjp-shadow);
}
.wjp-section h3 {
     color: var(--wjp-primary);
     font-size: 1rem;
     margin: 0 0 16px;
     padding-bottom: 10px;
     border-bottom: 1px solid var(--wjp-border);
}

/* Stats row */
.wjp-stats-row {
     display: flex;
     gap: 12px;
     margin-bottom: 18px;
     flex-wrap: wrap;
}
.wjp-stat {
     flex: 1;
     min-width: 90px;
     background: var(--wjp-bg);
     border-radius: var(--wjp-radius);
     padding: 16px;
     text-align: center;
     border: 1px solid rgba(27, 58, 107, 0.1);
}
.wjp-stat .num {
     font-size: 1.8rem;
     font-weight: 700;
     color: var(--wjp-primary);
}
.wjp-stat .lbl {
     font-size: 0.75rem;
     color: var(--wjp-muted);
     margin-top: 2px;
}

/* Tables */
.wjp-table-responsive {
     overflow-x: auto;
}
.wjp-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.88rem;
}
.wjp-table th {
     background: var(--wjp-primary);
     color: #fff;
     padding: 9px 13px;
     text-align: left;
     font-weight: 600;
     font-size: 0.8rem;
     white-space: nowrap;
}
.wjp-table td {
     padding: 9px 13px;
     border-bottom: 1px solid var(--wjp-border);
     vertical-align: middle;
}
.wjp-table tr:last-child td {
     border-bottom: none;
}
.wjp-table tr:hover td {
     background: var(--wjp-bg);
}
.wjp-select-sm {
     padding: 4px 7px;
     border: 1px solid var(--wjp-border);
     border-radius: 5px;
     font-size: 0.8rem;
     background: #fff;
     cursor: pointer;
}

/* Badges */
.wjp-badge {
     display: inline-block;
     padding: 2px 9px;
     border-radius: 20px;
     font-size: 0.72rem;
     font-weight: 600;
}
.wjp-badge-success {
     background: #d4edda;
     color: #155724;
}
.wjp-badge-danger {
     background: #f8d7da;
     color: #721c24;
}
.wjp-badge-warning {
     background: #fff3cd;
     color: #856404;
}
.wjp-badge-info {
     background: #d1ecf1;
     color: #0c5460;
}
.wjp-badge-primary {
     background: var(--wjp-bg);
     color: var(--wjp-primary);
}

/* ── Jobs listing ────────────────────────────────────────── */
.wjp .wjp-search-bar {
     display: flex;
     gap: 10px;
     margin-bottom: 22px;
     flex-wrap: wrap;
}
.wjp .wjp-search-bar input,
.wjp .wjp-search-bar select {
     display: block;
     padding: 9px 13px;
     border: 1.5px solid var(--wjp-border);
     border-radius: 7px;
     flex: 1;
     min-width: 140px;
     font-size: 0.9rem;
     font-family: inherit;
     background: #fff;
     color: var(--wjp-text);
     outline: none;
     transition: border-color 0.2s;
     -webkit-appearance: none;
     appearance: none;
}
.wjp .wjp-search-bar input:focus,
.wjp .wjp-search-bar select:focus {
     border-color: var(--wjp-primary);
}

.wjp-jobs-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 18px;
}
.wjp-job-card {
     background: #fff;
     border: 1px solid var(--wjp-border);
     border-radius: var(--wjp-radius);
     padding: 18px;
     box-shadow: var(--wjp-shadow);
     transition:
          transform 0.18s,
          box-shadow 0.18s;
     display: flex;
     flex-direction: column;
}
.wjp-job-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(27, 58, 107, 0.14);
}
.wjp-job-card h4 {
     margin: 9px 0 4px;
     color: var(--wjp-primary);
     font-size: 0.95rem;
}
.wjp-job-card .company-name {
     font-size: 0.82rem;
     color: var(--wjp-muted);
     margin-bottom: 9px;
}
.wjp-job-meta {
     display: flex;
     gap: 5px;
     flex-wrap: wrap;
     margin-bottom: 10px;
}
.wjp-job-card .wjp-btn {
     margin-top: auto;
}

/* Pagination */
.wjp-pagination {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 5px;
     margin-top: 28px;
     flex-wrap: wrap;
}
.wjp-pagination-dots {
     color: var(--wjp-muted);
     padding: 0 3px;
}

/* ── Modal ───────────────────────────────────────────────── */
.wjp-modal-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.48);
     z-index: 99998;
     display: none;
}
.wjp-modal {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: #fff;
     border-radius: var(--wjp-radius);
     padding: 28px;
     max-width: 500px;
     width: 92%;
     z-index: 99999;
     display: none;
     box-shadow: 0 16px 50px rgba(0, 0, 0, 0.22);
     max-height: 88vh;
     overflow-y: auto;
     /* needed for absolute close button */
     position: fixed;
}
.wjp-modal.open,
.wjp-modal-backdrop.open {
     display: block;
}
.wjp-modal h3 {
     color: var(--wjp-primary);
     margin: 0 0 14px;
     font-size: 1.05rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
     .wjp-dashboard {
          flex-direction: column;
          padding: 12px;
     }
     .wjp-dashboard .wjp-sidebar {
          width: 100%;
          position: static;
     }
     .wjp-reg-card {
          padding: 22px 14px;
          margin: 12px;
     }
     .wjp-reg-card .wjp-form-grid,
     .wjp .wjp-form-grid {
          grid-template-columns: 1fr;
     }
     .wjp-payment-methods {
          flex-direction: column;
     }
     .wjp-pay-actions {
          flex-direction: column-reverse;
     }
     .wjp-stats-row {
          gap: 8px;
     }
}