/* ============================================
   NIRU - Identidade tipográfica
   Fonte única: Google Sans (variável 400-700, self-hosted)
   Carregar DEPOIS de style.css/responsive.css
   ============================================ */

@font-face {
    font-family: 'Google Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/google-sans/latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Google Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/google-sans/latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Substitui gordita (corpo) e EB Garamond (títulos) em tudo */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, li, span, div, small, blockquote, label, strong, em,
button, input, select, textarea, optgroup,
.title-one h2, .title-two h2,
.hero-banner-one h1, .hero-banner-two h1,
.navbar-nav .nav-link,
.btn-one, .btn-two, .btn-three, .btn-four, .btn-five, .btn-six, .btn-nine, .btn-eleven,
.job-post-btn, .apply-btn, .get-plan-btn,
.accordion-button, .accordion-body {
    font-family: 'Google Sans', 'Segoe UI', Tahoma, sans-serif !important;
}

/* Ícones continuam com a fonte de ícones */
i.bi,
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    font-family: 'bootstrap-icons' !important;
}

/* ============================================
   Paleta oficial Niru
   Marca:   #244034 (verde-escuro)
   Ação:    #D2F34C (lima — só CTA principal)
   Estado+: #00BF58 (sucesso, lugares, selo)
   Hover:   #005025 (verde-profundo)
   Fundo:   #EFF6F3 (verde-suave)
   ============================================ */

/* Chips de filtro (pills) */
.niru-chip {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 30px;
    background: #EFF6F3;
    color: #244034;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    transition: all .2s;
    border: 1px solid transparent;
}

.niru-chip:hover {
    background: #dfe9e4;
    color: #244034;
}

.niru-chip.active {
    background: #244034;
    color: #fff;
}

/* Header claro (padrão index-2): transparente sobre hero claro, branco ao fixar no scroll */

/* Nunca all-caps: sentence case em tudo (regra da marca) */
.apply-btn, .search-btn, .text-uppercase, button, .btn-one, .btn-two {
    text-transform: none !important;
}

/* Pills de categorias flutuando sobre a imagem do hero (home).
   Fiel ao index-2: pares por linha, a pill da direita sai cortada pela borda. */
.hero-banner-two {
    overflow: hidden;
}

.niru-hero-pills {
    position: absolute;
    top: 9%;
    right: -70px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 62px;
    z-index: 2;
    margin: 0;
    padding: 0;
}

.niru-hero-pills li {
    display: flex;
    gap: 44px;
    align-items: center;
}

.niru-hero-pill {
    display: inline-block;
    background: #fff;
    color: #2e7d5b;
    font-weight: 500;
    font-size: 18px;
    padding: 16px 34px;
    border-radius: 50px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .06);
    white-space: nowrap;
    transition: all .25s;
}

.niru-hero-pill:hover {
    background: #244034;
    color: #fff;
}

.niru-hero-pills li:nth-child(1) { margin-right: 130px; }
.niru-hero-pills li:nth-child(2) { margin-right: 40px; }
.niru-hero-pills li:nth-child(3) { margin-right: 90px; }

/* ============================================
   Cadastro split (estilo Overpay)
   ============================================ */
.niru-auth {
    min-height: 100vh;
    background: #eef1ef;
    display: flex;
    align-items: stretch;
    padding: 20px;
    gap: 0;
}

.niru-auth-card {
    background: #fff;
    border-radius: 18px;
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}

.niru-auth-left {
    background: #244034;
    color: #fff;
    width: 44%;
    padding: 48px;
    display: flex;
    flex-direction: column;
    border-radius: 18px 0 0 18px;
}

.niru-auth-left h3 {
    color: #fff;
    margin-top: auto;
}

.niru-auth-left p {
    color: rgba(255, 255, 255, .75);
}

.niru-auth-right {
    flex: 1;
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.niru-auth-form {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* Mockup de oportunidade no painel esquerdo (HTML puro) */
.niru-mock {
    background: #fff;
    color: #244034;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
    max-width: 340px;
    margin: 40px auto;
}

.niru-mock .selo {
    display: inline-block;
    background: #EFF6F3;
    color: #2e7d5b;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
}

/* Etapas */
.niru-step-tag {
    font-size: 13px;
    font-weight: 500;
    color: #2e7d5b;
    letter-spacing: .3px;
}

/* Campos do cadastro split */
.niru-auth-form .input-group-meta label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #244034;
    margin-bottom: 8px;
}

.niru-auth-form .input-group-meta input {
    width: 100%;
    height: 56px;
    border: 1px solid #d5ddd9;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 16px;
    background: #fff;
    transition: border-color .2s;
}

.niru-auth-form .input-group-meta input:focus {
    outline: none;
    border-color: #244034;
}

.niru-auth-form .btn-eleven {
    border-radius: 10px;
}

/* Autocomplete de cidade */
.niru-city { position: relative; }

.niru-city-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d5ddd9;
    border-radius: 10px;
    margin-top: 6px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .1);
    z-index: 20;
    max-height: 280px;
    overflow-y: auto;
}

.niru-city-lista button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 12px 16px;
    font-size: 15px;
    color: #244034;
    cursor: pointer;
}

.niru-city-lista button:hover {
    background: #EFF6F3;
}

/* Radio-pills (área que mais combina) */
.niru-radio-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.niru-radio-pills input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.niru-radio-pills label {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 30px;
    background: #EFF6F3;
    color: #244034;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .2s;
    user-select: none;
}

.niru-radio-pills label:hover {
    background: #dfe9e4;
}

.niru-radio-pills input:checked + label {
    background: #244034;
    color: #fff;
}

.niru-radio-pills input:focus-visible + label {
    outline: 2px solid #00BF58;
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .niru-auth { padding: 10px; }
    .niru-auth-left { display: none; }
    .niru-auth-right { padding: 40px 22px; }
}

/* Autocomplete de cidade */
.niru-cidade-sugestoes {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d5ddd9;
    border-radius: 10px;
    margin-top: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
    z-index: 20;
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}

.niru-cidade-opt {
    padding: 11px 16px;
    font-size: 15px;
    cursor: pointer;
    color: #244034;
}

.niru-cidade-opt:hover,
.niru-cidade-opt.ativo {
    background: #EFF6F3;
}

/* Badge informativo sobre fundo escuro (modelo de comissão no detalhe) */
.niru-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    background: #EFF6F3;
    color: #244034;
    font-weight: 500;
    font-size: 14px;
}

/* Stack de avatares circulares (hero, prova social) */
.niru-avatar-stack {
    display: flex;
    align-items: center;
}

.niru-avatar-slot {
    position: relative;
    width: 40px;
    height: 40px;
    margin-left: -12px;
}

.niru-avatar-slot:first-child {
    margin-left: 0;
}

.niru-avatar-slot img {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.niru-avatar-front {
    z-index: 1;
}

.niru-avatar-back {
    z-index: 2;
    opacity: 0;
    transition: opacity .6s ease-in-out;
}

.niru-avatar-item:first-child {
    margin-left: 0;
}

/* Toast de erro/aviso: flutua no rodapé centralizado, nao empurra o layout */
.niru-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: calc(100% - 32px);
    width: max-content;
    animation: niruToastIn .25s ease;
}

@keyframes niruToastIn {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Barra de verificar conta: 100% no topo, acima do sidebar fixo */
.niru-verify-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    gap: 10px;
    background: #D2F34C;
    padding: 10px 16px;
}

/* Empurra sidebar e o header fixo pra baixo da barra (altura ~40px) */
.has-verify-bar .dash-aside-navbar {
    top: 40px;
}

.has-verify-bar .dashboard-body .dashboard-header {
    top: 40px;
}

.has-verify-bar .dashboard-body {
    padding-top: 190px;
}

/* ------------------------------------------------------------------
   Sidebar compacta (rail): icone em cima, rotulo pequeno embaixo.
   O tema vinha com 260px de largura, o que roubava espaco do conteudo.
   Larguras casadas: sidebar 96px | dashboard-body margin | header fixo.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .dash-aside-navbar {
        width: 116px;
        padding: 24px 10px;
    }

    .dashboard-body {
        margin-left: 116px;
        padding: 150px 30px 50px;
        border-radius: 30px 0 0 30px;
    }

    .dashboard-body .dashboard-header {
        left: 146px;
        right: 30px;
    }

    .dash-aside-navbar .logo img {
        height: 30px !important;
    }

    .dash-aside-navbar .user-data .user-avatar {
        width: 44px;
        height: 44px;
        margin: 20px auto 0;
        font-size: 18px !important;
    }

    .dash-aside-navbar .user-data .user-avatar.online:before {
        width: 10px;
        height: 10px;
        border-width: 2px;
    }

    /* Nome inteiro não cabe: mostra o primeiro nome, centralizado */
    .dash-aside-navbar .user-data .user-name-data .user-name {
        font-size: 11px;
        line-height: 1.3;
        text-align: center;
        margin-top: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Item de menu: coluna (icone sobre rotulo) */
    .dash-aside-navbar .dasboard-main-nav li a,
    .dash-aside-navbar .logout-btn {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 12px 8px;
        border-radius: 14px;
        font-size: 11px;
        line-height: 1.25;
        gap: 6px;
    }

    .dash-aside-navbar .dasboard-main-nav li a span,
    .dash-aside-navbar .logout-btn span {
        padding-left: 0;
    }

    /* Tema alinhava o "Sair" à esquerda (margin-left: 20px); na rail centralizada
       isso deslocava o ícone. Zera e deixa igual aos outros itens. */
    .dash-aside-navbar .logout-btn {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }

    .dash-aside-navbar .dasboard-main-nav li a img,
    .dash-aside-navbar .logout-btn img {
        max-width: 20px;
    }
}

/* Listagem rodando dentro do painel: o .offcanvas do Bootstrap tem fundo branco,
   que ficava aparecendo como caixa atras do "Filtrar por" sobre o fundo do painel.
   No mobile o offcanvas volta a ser branco (ele abre por cima do conteudo). */
@media (min-width: 992px) {
    .painel .filter-area-tab {
        background: transparent;
    }
}

/* ------------------------------------------------------------------
   Spinner de carregamento (niru-loading.js)
   ------------------------------------------------------------------ */
.niru-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: niruGira .6s linear infinite;
    vertical-align: -3px;
}

.niru-carregando {
    opacity: .75;
    cursor: wait;
}

/* Espaço entre o spinner e o "Aguarde" sem depender de margin no HTML */
.niru-carregando .niru-spinner + span {
    margin-left: 8px;
}

@keyframes niruGira {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .niru-spinner {
        animation-duration: 1.6s;
    }
}

/* ------------------------------------------------------------------
   Wizard da preparação: barra de progresso + alternativas clicáveis
   ------------------------------------------------------------------ */
.niru-prep-barra {
    height: 8px;
    background: #e4ebe7;
    border-radius: 20px;
    overflow: hidden;
}

.niru-prep-barra-fill {
    height: 100%;
    background: #00BF58;
    border-radius: 20px;
    transition: width .4s ease;
}

/* Hierarquia de texto do material da preparação */
.niru-prep-titulo {
    font-size: 17px;
    font-weight: 500;
    color: #244034;
}

.niru-prep-sub {
    font-size: 14px;
    font-weight: 500;
    color: #244034;
}

.niru-prep-dado > span {
    display: block;
    font-size: 13px;
    color: rgba(0, 0, 0, .45);
    margin-bottom: 2px;
}

.niru-prep-dado > div {
    font-size: 15px;
    color: #254035;
    line-height: 1.5;
}

/* Voltar do wizard: sem o ícone que o .btn-six do tema injeta depois do texto */
.niru-prep-voltar {
    flex: 0 0 auto;
    background: #fff;
    border: 1.5px solid #d9e0da;
    border-radius: 30px;
    color: #244034;
    font-weight: 500;
    font-size: 15px;
    padding: 0 22px;
    height: 55px;
    transition: border-color .15s ease;
}

.niru-prep-voltar:hover {
    border-color: #244034;
}

/* Alternativa: o rótulo inteiro é o alvo de clique (área grande, sem mira no radio) */
.niru-prep-alt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1.5px solid #e4ebe7;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    color: #254035;
    line-height: 1.45;
    transition: border-color .15s ease, background .15s ease;
}

.niru-prep-alt:hover {
    border-color: #00BF58;
    background: #f7fbf9;
}

.niru-prep-alt.escolhida {
    border-color: #00BF58;
    background: #EFF6F3;
}

.niru-prep-alt input {
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: #00BF58;
    width: 18px;
    height: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .niru-prep-barra-fill {
        transition: none;
    }
}

/* Card de oportunidade clicavel por inteiro (stretched-link do Bootstrap no titulo) */
.niru-card-clicavel {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.niru-card-clicavel:hover {
    border-color: #00BF58 !important;
    box-shadow: 0 6px 20px rgba(36, 64, 52, .1);
    transform: translateY(-2px);
}

/* Botao "Ver" fica acima da camada do stretched-link (mesmo destino, mas mantem o hover proprio) */
.niru-card-clicavel .apply-btn {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .niru-card-clicavel,
    .niru-card-clicavel:hover {
        transition: none;
        transform: none;
    }
}

/* Filtro "Ganho a partir de": campos ocupam a largura toda e legiveis
   (template vinha com 45x20px e fonte 11px) */
.filter-area-tab .salary-slider .price-input {
    gap: 6px;
}

.filter-area-tab .salary-slider .price-input .field {
    flex: 1;
    min-width: 0;
}

.filter-area-tab .salary-slider .price-input .currency {
    font-size: 14px;
    color: #244034;
    flex: 0 0 auto;
}

.filter-area-tab .salary-slider .price-input input {
    width: 100%;
    height: 42px;
    padding: 0 8px;
    font-size: 15px;
    font-weight: 500;
    color: #244034;
    border: 1px solid #d9e0da;
    border-radius: 8px;
}

/* Input de codigo OTP: 6 caixas separadas grandes */
.niru-otp {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.niru-otp input {
    width: 56px;
    height: 66px;
    padding: 0;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #244034;
    border: 2px solid #d9e0da;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.niru-otp input:focus {
    outline: none;
    border-color: #244034;
    box-shadow: 0 0 0 3px rgba(36, 64, 52, .12);
}

@media (max-width: 420px) {
    .niru-otp {
        gap: 6px;
    }

    .niru-otp input {
        width: 46px;
        height: 58px;
        font-size: 24px;
    }
}