* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2937;
    background: #ffffff;
    line-height: 1.6;
}

.container {
    width: min(1120px, 90%);
    margin: 0 auto;
}


/* CABEÇALHO */

.cabecalho {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navegacao {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 26px;
    font-weight: 800;
    color: #1f2937;
}

.logo span {
    color: #16a34a;
}

nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

nav a {
    text-decoration: none;
    color: #374151;
    font-weight: 600;
    transition: 0.2s;
}

nav a:hover {
    color: #16a34a;
}

nav .entrar {
    background: #16a34a;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
}

nav .entrar:hover {
    background: #15803d;
    color: white;
}


/* HERO */

.hero {
    background: linear-gradient(
        135deg,
        #f0fdf4 0%,
        #ffffff 60%,
        #f9fafb 100%
    );

    padding: 100px 0;
}

.hero-conteudo {
    display: flex;
    align-items: center;
}

.hero-texto {
    max-width: 720px;
}

.destaque {
    display: inline-block;
    background: #dcfce7;
    color: #15803d;
    padding: 7px 14px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(42px, 6vw, 64px);
    line-height: 1.08;
    color: #111827;
    margin-bottom: 22px;
    letter-spacing: -2px;
}

.hero h1 span {
    color: #16a34a;
}

.subtitulo {
    max-width: 620px;
    font-size: 19px;
    color: #6b7280;
    margin-bottom: 32px;
}

.busca {
    display: flex;
    background: #ffffff;
    padding: 7px;
    border-radius: 12px;
    max-width: 680px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

.busca input {
    flex: 1;
    border: none;
    outline: none;
    padding: 15px;
    font-size: 16px;
    min-width: 0;
}

.busca button {
    border: none;
    background: #16a34a;
    color: white;
    font-weight: 700;
    font-size: 15px;
    padding: 15px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.busca button:hover {
    background: #15803d;
}

.exemplos {
    margin-top: 13px;
    color: #9ca3af;
    font-size: 14px;
}


/* SEÇÕES */

.categorias,
.profissionais {
    padding: 85px 0;
}

.profissionais {
    background: #f9fafb;
}

.titulo-secao {
    margin-bottom: 38px;
}

.titulo-secao > p {
    color: #16a34a;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}

.titulo-secao h2 {
    color: #111827;
    font-size: 32px;
    line-height: 1.2;
}


/* CATEGORIAS */

.grid-categorias {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.categoria-card {
    padding: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    transition: 0.25s;
    cursor: pointer;
}

.categoria-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-color: #bbf7d0;
}

.icone {
    font-size: 30px;
    margin-bottom: 15px;
}

.categoria-card h3 {
    color: #111827;
    font-size: 19px;
    margin-bottom: 7px;
}

.categoria-card p {
    color: #6b7280;
    font-size: 14px;
}


/* PROFISSIONAIS */

.grid-profissionais {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.profissional-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 25px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
}

.profissional-card h3 {
    color: #111827;
    margin-bottom: 5px;
}

.profissional-card p {
    color: #6b7280;
    font-size: 14px;
}


/* RODAPÉ */

footer {
    background: #111827;
    color: #ffffff;
    padding: 42px 0;
}

footer strong {
    font-size: 22px;
}

footer p {
    color: #9ca3af;
    margin-top: 5px;
}


/* RESPONSIVO */

@media (max-width: 850px) {

    nav a:not(.entrar) {
        display: none;
    }

    .hero {
        padding: 70px 0;
    }

    .grid-categorias {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-profissionais {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {

    .hero h1 {
        font-size: 40px;
    }

    .busca {
        flex-direction: column;
    }

    .busca button {
        width: 100%;
    }

    .grid-categorias,
    .grid-profissionais {
        grid-template-columns: 1fr;
    }

    .categorias,
    .profissionais {
        padding: 60px 0;
    }
}

/* ========================================
   PERFIL DO PROFISSIONAL
======================================== */

.perfil-profissional {
    background: #f9fafb;
    min-height: calc(100vh - 160px);
    padding: 45px 0 80px;
}

.voltar {
    display: inline-block;
    margin-bottom: 25px;
    color: #15803d;
    text-decoration: none;
    font-weight: 600;
}

.voltar:hover {
    text-decoration: underline;
}

.perfil-card {
    background: #ffffff;
    max-width: 850px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.perfil-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 28px;
    border-bottom: 1px solid #e5e7eb;
}

.perfil-categoria {
    display: inline-block;
    background: #dcfce7;
    color: #15803d;
    padding: 6px 13px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.perfil-topo h1 {
    color: #111827;
    font-size: 38px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.perfil-nota {
    font-size: 17px;
    color: #374151;
}

.perfil-bloco {
    padding: 25px 0;
    border-bottom: 1px solid #f0f0f0;
}

.perfil-bloco h2 {
    color: #111827;
    font-size: 20px;
    margin-bottom: 8px;
}

.perfil-bloco p {
    color: #6b7280;
    font-size: 16px;
}

.perfil-acoes {
    padding-top: 30px;
}

.btn-solicitar {
    background: #16a34a;
    color: #ffffff;
    border: none;
    border-radius: 9px;
    padding: 15px 28px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.btn-solicitar:hover {
    background: #15803d;
    transform: translateY(-1px);
}


/* BOTÃO VER PROFISSIONAL DA HOME */

.btn-perfil {
    display: inline-block;
    margin-top: 16px;
    background: #ffffff;
    color: #15803d;
    border: 1px solid #16a34a;
    padding: 9px 16px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: 0.2s;
}

.btn-perfil:hover {
    background: #16a34a;
    color: #ffffff;
}


/* AVALIAÇÃO NO CARD DA HOME */

.avaliacao {
    margin-top: 14px;
    color: #374151;
    font-weight: 600;
}

.avaliacao span {
    color: #6b7280;
    font-weight: 400;
}


/* RESPONSIVO - PERFIL */

@media (max-width: 600px) {

    .perfil-profissional {
        padding: 30px 0 60px;
    }

    .perfil-card {
        padding: 25px;
    }

    .perfil-topo h1 {
        font-size: 30px;
    }

    .btn-solicitar {
        width: 100%;
    }
}

/* ========================================
   LOGIN
======================================== */

.login-pagina {
    min-height: calc(100vh - 80px);
    background: #f9fafb;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

.login-card {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);
}

.login-destaque {
    color: #16a34a;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.login-card h1 {
    color: #111827;
    font-size: 32px;
    margin-bottom: 10px;
}

.login-subtitulo {
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 30px;
}

#form-login {
    display: flex;
    flex-direction: column;
}

#form-login label {
    color: #374151;
    font-weight: 600;
    margin-bottom: 7px;
}

#form-login input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    margin-bottom: 20px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: 0.2s;
}

#form-login input:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.10);
}

.btn-login {
    width: 100%;
    background: #16a34a;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.btn-login:hover {
    background: #15803d;
}

#mensagem-login {
    margin-top: 18px;
    font-size: 14px;
}

@media (max-width: 600px) {
    .login-card {
        padding: 28px 22px;
    }

    .login-card h1 {
        font-size: 27px;
    }
}

/* ========================================
   ÁREA DO CLIENTE
======================================== */

.area-cliente {
    background: #f9fafb;
    min-height: calc(100vh - 160px);
    padding: 55px 0 80px;
}

.cabecalho-pagina {
    margin-bottom: 35px;
}

.cabecalho-pagina h1 {
    font-size: 36px;
    color: #111827;
    margin-bottom: 8px;
}

.cabecalho-pagina > p:not(.destaque) {
    color: #6b7280;
    font-size: 17px;
}

.lista-solicitacoes {
    display: grid;
    gap: 20px;
}

.solicitacao-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
}

.solicitacao-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.solicitacao-card h2 {
    color: #111827;
    font-size: 22px;
    margin-top: 12px;
}

.solicitacao-descricao {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.solicitacao-data {
    color: #9ca3af;
    font-size: 14px;
}

.status-solicitacao {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.status-pendente {
    background: #fef3c7;
    color: #92400e;
}

.status-aceita {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-concluida {
    background: #dcfce7;
    color: #15803d;
}

.status-cancelada {
    background: #fee2e2;
    color: #b91c1c;
}

.solicitacao-vazia {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 35px;
    text-align: center;
}

.solicitacao-vazia h3 {
    color: #111827;
    margin-bottom: 8px;
}

.solicitacao-vazia p {
    color: #6b7280;
    margin-bottom: 18px;
}

@media (max-width: 600px) {

    .area-cliente {
        padding: 35px 0 60px;
    }

    .cabecalho-pagina h1 {
        font-size: 30px;
    }

    .solicitacao-card {
        padding: 20px;
    }
}

/* ========================================
   AÇÕES DA SOLICITAÇÃO - PRESTADOR
======================================== */

.acoes-solicitacao {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

.btn-acao {
    border: none;
    border-radius: 9px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-aceitar {
    background: #55a958;
    color: white;
}

.btn-aceitar:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-concluir {
    background: #55a958;
    color: white;
}

.btn-concluir:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-cancelar {
    background: #ffffff;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.btn-cancelar:hover {
    background: #fef2f2;
}

@media (max-width: 600px) {
    .acoes-solicitacao {
        flex-direction: column;
    }

    .btn-acao {
        width: 100%;
    }
}

/* ========================================
   PÁGINA DE AVALIAÇÃO
======================================== */

.area-avaliacao {
    min-height: calc(100vh - 75px);
    background: #f9fafb;
    padding: 70px 20px;
}

.avaliacao-form-card {
    max-width: 600px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.avaliacao-form-card h1 {
    font-size: 34px;
    margin: 8px 0 10px;
}

.avaliacao-intro {
    color: #6b7280;
    margin-bottom: 32px;
}

.campo-avaliacao {
    margin-bottom: 28px;
}

.campo-avaliacao label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
}

.seletor-estrelas {
    display: flex;
    gap: 5px;
}

.seletor-estrelas button {
    background: none;
    border: none;
    padding: 0;
    font-size: 38px;
    color: #e0b936;
    cursor: pointer;
}

#texto-nota {
    margin-top: 8px;
    color: #6b7280;
    font-size: 14px;
}

.campo-avaliacao textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 14px;
    font: inherit;
    resize: vertical;
}

.campo-avaliacao textarea:focus {
    outline: none;
    border-color: #55a958;
}

.btn-enviar-avaliacao {
    width: 100%;
    background: #55a958;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.btn-enviar-avaliacao:hover {
    opacity: 0.92;
}

.mensagem-avaliacao {
    margin-bottom: 15px;
    font-weight: 600;
}

.avaliacao-realizada {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 9px 14px;
    border-radius: 8px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 14px;
    font-weight: 700;
}

.avaliacao-realizada span {
    color: #374151;
    font-weight: 600;
}

.btn-avaliar {
    margin-top: 18px;
    border: 1px solid #16a34a;
    background: #ffffff;
    color: #15803d;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
}

.btn-avaliar:hover {
    background: #f0fdf4;
}

/* ========================================
   CADASTRO DE CLIENTE
======================================== */

#form-cadastro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 28px;
}

#form-cadastro label {
    display: block;
    font-weight: 600;
    margin-top: 8px;
}

#form-cadastro input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    font-size: 16px;
    outline: none;
}

#form-cadastro input:focus {
    border-color: #55a857;
}

#form-cadastro .btn-login {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    border: none;
    border-radius: 9px;
    background: #55a857;
    color: white;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

#form-cadastro .btn-login:hover {
    opacity: 0.92;
}

#mensagem-cadastro {
    margin-top: 16px;
    text-align: center;
    font-weight: 600;
}

/* ========================================
   CADASTRO DE PRESTADOR
======================================== */

#form-cadastro-prestador {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 28px;
}

#form-cadastro-prestador label {
    display: block;
    font-weight: 600;
    margin-top: 8px;
}

#form-cadastro-prestador input,
#form-cadastro-prestador textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
}

#form-cadastro-prestador textarea {
    resize: vertical;
    min-height: 120px;
}

#form-cadastro-prestador input:focus,
#form-cadastro-prestador textarea:focus {
    border-color: #55a857;
}

#form-cadastro-prestador .btn-login {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    border: none;
    border-radius: 9px;
    background: #55a857;
    color: white;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

#form-cadastro-prestador .btn-login:hover {
    opacity: 0.92;
}

#form-cadastro-prestador .btn-login:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

#mensagem-prestador {
    margin-top: 16px;
    text-align: center;
    font-weight: 600;
}

/* ========================================
   BAIRROS - CADASTRO DO PRESTADOR
======================================== */

.lista-bairros-cadastro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 18px;
}

.bairro-opcao {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 14px;

    border: 1px solid #e5e7eb;
    border-radius: 9px;

    background: #ffffff;

    min-height: 46px;
}

.bairro-opcao:hover {
    border-color: #55a857;
    background: #f9fff9;
}

.bairro-opcao input[type="checkbox"] {
    width: 18px !important;
    height: 18px;
    margin: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
}

.bairro-opcao label {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px;
    font-weight: 500 !important;
    line-height: 1.2;

    cursor: pointer;
}

@media (max-width: 600px) {
    .lista-bairros-cadastro {
        grid-template-columns: 1fr;
    }
}

#area-usuario {
    display: flex;
    align-items: center;
    gap: 14px;
}

.link-minha-conta {
    text-decoration: none;
    color: #374151;
    font-weight: 600;
}

.link-minha-conta:hover {
    color: #16a34a;
}

/* ========================================
   DASHBOARD DO PRESTADOR
======================================== */

.dashboard-prestador {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 45px;
}

.dashboard-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.04);

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dashboard-label {
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
}

.dashboard-card strong {
    color: #111827;
    font-size: 29px;
    line-height: 1.2;
}

.dashboard-card small {
    color: #9ca3af;
    font-size: 12px;
}

.secao-solicitacoes-prestador {
    margin-top: 10px;
}

.titulo-secao-prestador {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 22px;
}

.titulo-secao-prestador h2 {
    color: #111827;
    font-size: 28px;
    margin-top: 5px;
}

@media (max-width: 1000px) {

    .dashboard-prestador {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .dashboard-prestador {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {

    .dashboard-prestador {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   FILTROS - DASHBOARD DO PRESTADOR
======================================== */

.filtros-solicitacoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.filtro-status {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.filtro-status:hover {
    border-color: #55a857;
    color: #15803d;
}

.filtro-status.ativo {
    background: #55a857;
    border-color: #55a857;
    color: #ffffff;
}

/* ========================================
   CATEGORIA SELECIONADA
======================================== */

.categoria-card {
    cursor: pointer;
    transition: 0.2s;
}

.categoria-card:hover {
    transform: translateY(-3px);
    border-color: #55a857;
}

.categoria-card.categoria-selecionada {
    border-color: #55a857;
    background: #f7fff7;
    box-shadow:
        0 5px 18px rgba(85, 168, 87, 0.12);
}

.resultado-vazio {
    padding: 25px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.resultado-vazio h3 {
    margin-bottom: 6px;
}

.resultado-vazio p {
    color: #6b7280;
}

/* ========================================
   BAIRRO NA BUSCA DA HOME
======================================== */

.busca select {
    min-width: 190px;
    padding: 12px 14px;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    background: #ffffff;
    color: #374151;

    font-family: inherit;
    font-size: 14px;

    outline: none;
}

.busca select:focus {
    border-color: #55a857;
}

@media (max-width: 700px) {

    .busca {
        flex-direction: column;
    }

    .busca input,
    .busca select,
    .busca button {
        width: 100%;
    }
}

/* ========================================
   INFORMAÇÕES DOS CARDS
======================================== */

.card-categoria {
    color: #55a857;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.card-bairros {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 12px;
    margin-bottom: 18px;
}

/* ========================================
   PERFIL PROFISSIONAL - MELHORIAS
======================================== */

.perfil-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.perfil-nota-destaque {
    display: flex;
    align-items: center;
    gap: 6px;
}

.perfil-nota-destaque strong {
    font-size: 22px;
}

.perfil-estrela {
    font-size: 22px;
}

.perfil-experiencia-resumo {
    padding: 7px 12px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 14px;
    font-weight: 600;
}

.perfil-bairros {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

.perfil-bairro-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    font-size: 14px;
}

.perfil-avaliacoes-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.perfil-avaliacoes-topo span {
    color: #6b7280;
    font-size: 14px;
}

.lista-avaliacoes {
    margin-top: 18px;
}

.avaliacao-item {
    padding: 18px 0;
    border-bottom: 1px solid #e5e7eb;
}

.avaliacao-item:last-child {
    border-bottom: none;
}

.avaliacao-item p {
    margin-top: 8px;
    margin-bottom: 5px;
}

.avaliacao-cliente {
    color: #9ca3af;
}

.perfil-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-top: 10px;
    padding: 24px;

    background: #f7fff7;
    border: 1px solid #d9f3dc;
    border-radius: 14px;
}

.perfil-acoes strong {
    display: block;
    margin-bottom: 5px;
    font-size: 18px;
}

.perfil-acoes p {
    margin: 0;
    color: #6b7280;
}

@media (max-width: 700px) {

    .perfil-acoes {
        flex-direction: column;
        align-items: stretch;
    }

    .perfil-acoes .btn-solicitar {
        width: 100%;
    }
}

/* ========================================
   MODAL DE SOLICITAÇÃO
======================================== */

.modal-solicitacao {
    display: none;
    position: fixed;
    inset: 0;

    background: rgba(17, 24, 39, 0.55);

    align-items: center;
    justify-content: center;

    padding: 20px;

    z-index: 9999;
}

.modal-solicitacao.ativo {
    display: flex;
}

.modal-solicitacao-conteudo {
    position: relative;

    width: 100%;
    max-width: 560px;

    background: #ffffff;

    border-radius: 18px;

    padding: 32px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.18);
}

.modal-fechar {
    position: absolute;
    top: 16px;
    right: 18px;

    border: none;
    background: none;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    color: #6b7280;
}

.modal-subtitulo {
    color: #6b7280;
    margin-bottom: 24px;
}

#form-solicitacao {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#form-solicitacao label {
    font-weight: 700;
}

#descricao-solicitacao {
    width: 100%;
    box-sizing: border-box;

    min-height: 140px;

    padding: 14px;

    border: 1px solid #d1d5db;
    border-radius: 10px;

    font: inherit;

    resize: vertical;
}

#descricao-solicitacao:focus {
    outline: none;
    border-color: #55a857;
}

.modal-contador {
    text-align: right;
    color: #9ca3af;
    font-size: 12px;
}

.mensagem-solicitacao {
    min-height: 20px;
    color: #b91c1c;
    font-weight: 600;
}

.modal-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.btn-modal-secundario {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;

    border-radius: 9px;

    padding: 11px 16px;

    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 600px) {

    .modal-solicitacao-conteudo {
        padding: 24px;
    }

    .modal-acoes {
        flex-direction: column-reverse;
    }

    .modal-acoes button {
        width: 100%;
    }
}

/* ========================================
   FILTROS - ÁREA DO CLIENTE
======================================== */

.filtro-cliente {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;

    padding: 9px 16px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.2s;
}

.filtro-cliente:hover {
    border-color: #55a857;
    color: #15803d;
}

.filtro-cliente.ativo {
    background: #55a857;
    border-color: #55a857;
    color: #ffffff;
}

/* ========================================
   AÇÕES - ÁREA DO CLIENTE
======================================== */

.acoes-cliente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    margin-top: 16px;
}

.btn-ver-profissional-cliente {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 15px;

    border: 1px solid #55a857;
    border-radius: 8px;

    background: #ffffff;
    color: #3f8f43;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition: 0.2s;
}

.btn-ver-profissional-cliente:hover {
    background: #f0faf1;
    border-color: #3f8f43;
}

/* ========================================
   CABEÇALHO - ÁREA DO PRESTADOR
======================================== */

.cabecalho-pagina-prestador {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.btn-editar-perfil {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 16px;

    border: 1px solid #55a857;
    border-radius: 9px;

    background: #ffffff;
    color: #3f8f43;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;

    transition: 0.2s;
}

.btn-editar-perfil:hover {
    background: #f0faf1;
    border-color: #3f8f43;
}

@media (max-width: 700px) {

    .cabecalho-pagina-prestador {
        flex-direction: column;
    }

    .btn-editar-perfil {
        width: 100%;
    }
}

/* ========================================
   EDITAR PERFIL DO PRESTADOR
======================================== */

.editar-perfil-card {
    max-width: 760px;
    margin: 0 auto 40px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    padding: 32px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.05);
}

#form-editar-perfil {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.campo-formulario {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campo-formulario label {
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}

.campo-formulario input,
.campo-formulario textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 13px 14px;

    border: 1px solid #d1d5db;
    border-radius: 10px;

    background: #ffffff;

    color: #111827;
    font: inherit;

    transition: 0.2s;
}

.campo-formulario textarea {
    min-height: 130px;
    resize: vertical;
}

.campo-formulario input:hover,
.campo-formulario textarea:hover {
    border-color: #9ca3af;
}

.campo-formulario input:focus,
.campo-formulario textarea:focus {
    outline: none;

    border-color: #55a857;

    box-shadow:
        0 0 0 3px rgba(85, 168, 87, 0.12);
}

.campo-formulario input::placeholder,
.campo-formulario textarea::placeholder {
    color: #9ca3af;
}


/* ========================================
   BOTÕES DA EDIÇÃO
======================================== */

.acoes-editar-perfil {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    margin-top: 8px;
    padding-top: 22px;

    border-top: 1px solid #f0f0f0;
}

.btn-cancelar-edicao,
.btn-salvar-perfil {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 11px 18px;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition: 0.2s;
}

.btn-cancelar-edicao {
    border: 1px solid #d1d5db;

    background: #ffffff;

    color: #4b5563;
}

.btn-cancelar-edicao:hover {
    background: #f9fafb;

    border-color: #9ca3af;
}

.btn-salvar-perfil {
    border: 1px solid #55a857;

    background: #55a857;

    color: #ffffff;
}

.btn-salvar-perfil:hover {
    background: #469749;

    border-color: #469749;
}


/* ========================================
   RESPONSIVIDADE - EDITAR PERFIL
======================================== */

@media (max-width: 700px) {

    .editar-perfil-card {
        padding: 22px;
        border-radius: 14px;
    }

    .acoes-editar-perfil {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .btn-cancelar-edicao,
    .btn-salvar-perfil {
        width: 100%;
    }
}

/* ========================================
   CATEGORIAS E BAIRROS - EDITAR PERFIL
======================================== */

.editar-perfil-secao {
    margin-top: 14px;
    padding-top: 18px;
    border-top: 1px solid #eef0f2;
}

.editar-perfil-secao:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.editar-perfil-secao h2 {
    margin-bottom: 5px;
    font-size: 20px;
    color: #111827;
}

.editar-perfil-ajuda {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.opcoes-edicao-perfil {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.opcao-edicao-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 14px;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    background: #ffffff;

    cursor: pointer;

    transition: 0.2s;
}

.opcao-edicao-card:hover {
    border-color: #55a857;
    background: #f9fff9;
}

.opcao-edicao-card:has(
    input:checked
) {
    border-color: #55a857;
    background: #f3fbf4;
}

.opcao-edicao-card input {
    width: 18px;
    height: 18px;

    margin: 2px 0 0;

    flex-shrink: 0;

    accent-color: #55a857;
}

.opcao-edicao-card div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.opcao-edicao-card strong {
    color: #111827;
    font-size: 14px;
}

.opcao-edicao-card span {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}

.mensagem-editar-perfil {
    min-height: 20px;

    margin: 0;

    color: #b91c1c;

    font-size: 14px;
    font-weight: 600;
}

.btn-salvar-perfil:disabled {
    opacity: 0.65;
    cursor: wait;
}

@media (max-width: 700px) {

    .opcoes-edicao-perfil {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   CANCELAR SOLICITAÇÃO - CLIENTE
======================================== */

.btn-cancelar-cliente {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 15px;

    border: 1px solid #dc2626;
    border-radius: 8px;

    background: #ffffff;
    color: #b91c1c;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.2s;
}

.btn-cancelar-cliente:hover {
    background: #fef2f2;
    border-color: #b91c1c;
}

/* ========================================
   MOBILE - DASHBOARD DO PRESTADOR
======================================== */

@media (max-width: 700px) {

    .dashboard-prestador {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .dashboard-card {
        min-width: 0;
        padding: 18px;
    }

    .dashboard-card strong {
        font-size: 26px;
    }

    .dashboard-card small {
        font-size: 12px;
    }
}

/* ========================================
   MOBILE - AÇÕES DO CLIENTE
======================================== */

@media (max-width: 700px) {

    .acoes-cliente {
        display: flex;
        gap: 10px;
        align-items: stretch;
    }

    .acoes-cliente .btn-ver-profissional-cliente,
    .acoes-cliente .btn-avaliar,
    .acoes-cliente .btn-cancelar-cliente {
        flex: 1;
        min-width: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        text-align: center;
        min-height: 46px;

        box-sizing: border-box;
    }
}

/* ========================================
   ALINHAMENTO DAS AÇÕES DO CLIENTE
   DESKTOP + MOBILE
======================================== */

.acoes-cliente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}


/* Botões e avaliação realizada
   ficam com a mesma altura visual */

.acoes-cliente .btn-ver-profissional-cliente,
.acoes-cliente .btn-avaliar,
.acoes-cliente .btn-cancelar-cliente,
.acoes-cliente .avaliacao-realizada {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    box-sizing: border-box;

    margin: 0;
}


/* Evita diferenças de altura
   causadas por padding antigo */

.acoes-cliente .avaliacao-realizada {
    padding: 9px 15px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 700px) {

    .acoes-cliente {
        align-items: stretch;
    }

    .acoes-cliente .btn-ver-profissional-cliente,
    .acoes-cliente .btn-avaliar,
    .acoes-cliente .btn-cancelar-cliente {
        flex: 1;
        min-width: 0;

        padding: 10px 8px;

        font-size: 13px;

        text-align: center;
    }

    .acoes-cliente .avaliacao-realizada {
        min-height: 46px;
    }
}

/* ========================================
   MOBILE - MODAL DE SOLICITAÇÃO
======================================== */

@media (max-width: 700px) {

    .modal-solicitacao {
        align-items: flex-start;

        overflow-y: auto;

        padding:
            18px
            12px;
    }

    .modal-solicitacao-conteudo {
        width: 100%;
        max-width: none;

        max-height: calc(100vh - 36px);

        overflow-y: auto;

        margin: 0;

        padding: 24px 20px;

        border-radius: 18px;
    }

    #descricao-solicitacao {
        min-height: 150px;
    }

    .modal-acoes {
        position: sticky;
        bottom: 0;

        background: #ffffff;

        padding-top: 14px;
        padding-bottom: 4px;
    }
}

/* ========================================
   MOBILE - NAVEGAÇÃO DO CABEÇALHO
======================================== */

@media (max-width: 700px) {

    .navegacao {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 14px;

        padding-top: 16px;
        padding-bottom: 16px;
    }

    .navegacao .logo {
        align-self: flex-start;
    }

    .navegacao nav {
        display: flex !important;
        width: 100%;

        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;

        gap: 10px 18px;
    }

    .navegacao nav a {
        display: inline-flex !important;
        align-items: center;

        margin: 0;

        font-size: 14px;
        font-weight: 700;

        white-space: nowrap;
    }
}

/* ========================================
   FOTO - PERFIL PÚBLICO DO PROFISSIONAL
======================================== */

.perfil-topo {
    display: flex;
    align-items: center;
    gap: 22px;
}

.perfil-topo img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #eeeeee;
    flex-shrink: 0;
}

.perfil-topo > div:last-child {
    flex: 1;
}


/* ========================================
   PERFIL PÚBLICO - CELULAR
======================================== */

@media (max-width: 600px) {

    .perfil-topo {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .perfil-topo img {
        width: 100px;
        height: 100px;
    }

    .perfil-topo h1 {
        margin-top: 6px;
    }
}

/* ========================================
   CADASTRO - TERMOS E PRIVACIDADE
======================================== */

.aceite-termos {
    margin: 22px 0;
    padding: 16px;

    background: #f8f9fb;

    border: 1px solid #eeeeee;
    border-radius: 12px;
}


.aceite-termos-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    cursor: pointer;

    font-size: 14px;
    line-height: 1.55;

    color: #555555;
}


.aceite-termos-label input {
    width: 18px;
    height: 18px;

    margin: 2px 0 0;

    flex-shrink: 0;

    cursor: pointer;
}


.aceite-termos-label a {
    font-weight: 600;
    text-decoration: none;
}


.aceite-termos-label a:hover {
    text-decoration: underline;
}

/* ========================================
   RODAPÉ - LINKS LEGAIS
======================================== */

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 12px;
}

.footer-links a {
    color: inherit;
    text-decoration: none;
    font-size: 14px;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-links span {
    opacity: 0.6;
}

.footer-copy {
    margin-top: 10px;
    font-size: 13px;
    opacity: 0.7;
}