/* ═══════════════════════════════════════════════════════════
   V2 Careers – Front-end Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Jobs list ──────────────────────────────────────────── */
.v2c-jobs { margin: 24px 0; }

.v2c-jobs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px;
}

.v2c-job-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 24px;
    background: #fff;
    transition: box-shadow .25s, transform .25s;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.v2c-job-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.09);
    transform: translateY(-2px);
    border-color: var(--hover-color);
}

.v2c-job-title {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
}
.v2c-job-title:hover { color: var(--hover-color); }

.v2c-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: #555;
    font-size: .92em;
    margin-bottom: 6px;
}

.v2c-job-skills {
    font-size: .88em;
    color: #666;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
}

/* ── Pagination ─────────────────────────────────────────── */
.v2c-pagination {
    margin-top: 24px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.v2c-pagination a {
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: .9em;
    transition: background .2s;
}
.v2c-pagination a:hover { background: #f5f5f5; }
.v2c-pagination a.is-active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    pointer-events: none;
}

/* ── Job detail ─────────────────────────────────────────── */

.v2c-detail-title {
    margin-bottom: 30px;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.4;
}

.v2c-detail-info {
    background: #f2f2f2;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0 24px;
}

.v2c-detail-info p { 
    margin: 6px 0; 
}

.v2c-detail-section { 
    margin: 32px 0; 
}

.v2c-detail-section h2 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 25px;
    margin-bottom: 30px;
    font-weight: 600;
    color: var(--primary-color);
}

.v2c-rich-content {
    line-height: 1.8;
    color: #444;
    font-size: 1.02em;
}

.v2c-rich-content p {
    margin-bottom: 1em;
    font-size: 16px;
}

.v2c-apply-section h2, .v2c-track-section h2 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 30px;
}

.v2c-rich-content ul,
.v2c-rich-content ol { padding-left: 2em; margin: 1em 0; }
.v2c-rich-content li { margin-bottom: .5em; }

.v2c-detail-actions {
    margin: 28px 0;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.v2c-rich-content p strong {
    color: var(--primary-color);
    word-wrap: break-word;
}

/* ── Buttons ────────────────────────────────────────────── */
.v2c-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 4px;
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background .2s, opacity .2s;
}
.v2c-btn:disabled { opacity: .6; cursor: not-allowed; }
.v2c-btn-primary  { background: var(--primary-color); color: #fff; }
.v2c-btn-primary:hover { background: var(--hover-color); color: #fff; }
.v2c-btn-secondary { background: #555; color: #fff; }
.v2c-btn-secondary:hover { background: #444; color: #fff; }

/* ── Forms ──────────────────────────────────────────────── */
.v2c-apply-wrap,
.v2c-track-wrap {
    max-width: 600px;
    margin: 20px 0;
}

.v2c-apply-form,
.v2c-track-form {
    padding: 24px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

.v2c-field { margin-bottom: 18px; }

.v2c-field label {
    display: block;
    margin-bottom: 4px;
    font-weight: 400;
    font-size: .95em;
    color: #494949;
}

.v2c-req { color: #d63638; }

.v2c-field input[type="text"],
.v2c-field input[type="email"],
.v2c-field input[type="number"],
.v2c-field input[type="tel"],
.v2c-field input[type="file"],
.v2c-field textarea,
.v2c-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    color: #2c3338;
    min-height: 40px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.v2c-field input:focus,
.v2c-field textarea:focus,
.v2c-field select:focus {
    border-color: #0073aa;
    outline: none;
}

.v2c-field input[type="file"] {
    padding: 8px;
    min-height: auto;
}

.v2c-field small {
    display: block;
    margin-top: 4px;
    color: #666;
    font-size: .85em;
}

.v2c-position-code { margin-bottom: 16px; }

/* ── Messages ───────────────────────────────────────────── */
.v2c-message { margin-top: 14px; padding: 12px; border-radius: 4px; }
.v2c-message:empty { display: none; }

.v2c-msg-ok {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 12px;
    border-radius: 4px;
}

.v2c-msg-err {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 12px;
    border-radius: 4px;
}

/* ── Status card ────────────────────────────────────────── */
.v2c-status-result { margin-top: 18px; }

.v2c-status-card {
    padding: 16px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
}
.v2c-status-card p { margin: 6px 0; }

.v2c-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #0073aa;
    color: #fff;
    border-radius: 4px;
    font-size: .88em;
    font-weight: 500;
}
.v2c-badge-pending { background: #e67e22; }

.v2c-hint { font-size: .9em; color: #666; }

.v2c-appointment {
    margin-top: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* ── Sections ───────────────────────────────────────────── */
.v2c-apply-section,
.v2c-track-section {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid #e0e0e0;
}

/* ── Error / notice ─────────────────────────────────────── */
.v2c-error {
    padding: 16px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #721c24;
    margin: 20px 0;
}

.v2c-notice {
    padding: 14px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
    margin: 20px 0;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .v2c-job-meta { flex-direction: column; gap: 4px; }
    .v2c-detail-actions { flex-direction: column; }
    .v2c-apply-form, .v2c-track-form { padding: 16px; }
}
