/* =========================
   RESET / BASE
========================= */
.wjmp-container,
.wjmp-container * {
    box-sizing: border-box;
}

/* =========================
   LAYOUT PRINCIPAL
========================= */
.wjmp-container {
    display: grid !important;
    grid-template-columns: 1fr 4fr !important; /* 20% / 80% */
    gap: 40px;
    width: 100%;
}

/* =========================
   FILTROS
========================= */
.wjmp-filters {
    width: 100%;
}

.wjmp-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.wjmp-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================
   TIPOGRAFIA (HIERARQUIA)
========================= */
.wjmp-filters h3 {
    margin-bottom: 15px;
}

.wjmp-filters h4 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.wjmp-filter-group label span {
    font-size: 14px;
}

/* botão como H5 */
#filter-jobs-wrapper {
    margin-top: 15px;
}

/* =========================
   BOTÃO FILTRAR
========================= */
#filter-jobs {
    display: inline-block !important;
    width: auto !important;
    padding: 8px 16px;

    background: #1a346c;
    color: #fff;

    border: none;
    border-radius: 20px;

    cursor: pointer;
    transition: all 0.2s ease;
}

#filter-jobs:hover {
    background: #e72c29;
    transform: translateY(-1px);
}

/* =========================
   GRID VAGAS
========================= */
.wjmp-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px;
}

/* =========================
   CARD
========================= */
.wjmp-card {
    width: 100%;
    min-height: 180px;

    background: #f3f4f6;
    padding: 20px 30px;

    border-radius: 18px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/* =========================
   TITULOS
========================= */
.wjmp-card h1 {
    margin-bottom: 10px;
    text-align: center;
}

.wjmp-card h2 {
    margin-bottom: 15px;
    text-align: center;
}

/* =========================
   AÇÕES (BOTÕES)
========================= */
.wjmp-actions {
    text-align: center;
    margin-bottom: 10px;
}

/* BOTÕES */
.wjmp-button {
    display: inline-block;
    padding: 8px 16px;

    background: #1a346c;
    color: #fff;

    border-radius: 999px;
    text-decoration: none;

    font-weight: 700;
    transition: all 0.2s ease;
}

.wjmp-button:hover {
    background: #e72c29;
    transform: translateY(-1px);
}

/* =========================
   VAGA ATIVA (FULL WIDTH)
========================= */
.wjmp-card.active {
    grid-column: 1 / -1;
    align-items: stretch;
}

/* =========================
   CONTEÚDO EXPANDIDO
========================= */
.wjmp-content {
    width: 100%;
    margin-top: 20px;
}

/* layout interno 60/40 */
.wjmp-content-inner {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* conteúdo */
.wjmp-left {
    width: 60%;
}

/* formulário */
.wjmp-right {
    width: 40%;
}

/* =========================
   FORM BOX
========================= */
.wjmp-form-box {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
}

/* =========================
   LOADING
========================= */
#wjmp-loading {
    margin-top: 10px;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {

    .wjmp-container {
        display: flex !important;
        flex-direction: column;
    }

    .wjmp-jobs {
        order: 1;
    }

    .wjmp-filters {
        order: 2;
    }

    .wjmp-grid {
        grid-template-columns: 1fr !important;
    }

    .wjmp-content-inner {
        flex-direction: column;
    }

    .wjmp-left,
    .wjmp-right {
        width: 100%;
    }
}

/* =========================
   FORMULÁRIO
========================= */
.wjmp-form-box h1 {
    font-size: 20px;
    margin-bottom: 15px;
}

.wjmp-apply-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wjmp-apply-form input,
.wjmp-apply-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.wjmp-apply-form textarea {
    min-height: 100px;
    resize: vertical;
}

.wjmp-apply-form button {
    margin-top: 10px;
}

.wjmp-success {
    text-align: center;
    margin-top: 40px;
    font-weight: 500;
}