/*
 * Seu arquivo style.css
 * Ajustes para replicar o design da imagem_7c1531.jpg
 *
 * Organização:
 * 1. Reset e Estilos Base
 * 2. Layout Principal (Header, Navegação)
 * 3. Componentes de Formulário (Campo de Busca)
 * 4. Elementos de UI Global (Ícones, Títulos, Botões Genéricos)
 * 5. Cards (Geral)
 * 6. Cards de Destaque
 * 7. Botões de Filtro e Ação Específicos
 * 8. Seção de Empresa (Detalhes)
 * 9. Seção Minha Conta/Perfil
 * 10. Notificações
 * 11. Select2 (Dropdown de Idioma)
 * 12. Dropdown de Login
 */

/* ========================================= */
/* 1. Reset e Estilos Base                   */
/* ========================================= */
body {
    background-color: #2e2e2e; /* Fundo cinza chumbo escuro padrão */
    color: #f0f0f0; /* Cor do texto padrão mais clara */
    font-family: 'Inter', sans-serif; /* Usando uma fonte comum, considere importar uma do Google Fonts se quiser mais exatidão */
    margin: 0;
    padding: 0;
}

/* Sobrescreve o body para a página de detalhes da empresa e outras seções escuras */
body:not(.profile-page) { /* Aplica-se a todas as páginas exceto as com 'profile-page' */
    background-color: #343a40 !important;
}

/* Reverte para light background para a página de perfil */
body.profile-page { /* Adicione esta classe ao body da página de perfil */
    background-color: #f8f9fa !important;
}


/* ========================================= */
/* 2. Layout Principal (Header, Navegação)   */
/* ========================================= */
.nav_bg {
    background-color: #5e5c5c;
}

header {
    background-color: #1a1a1a; /* Fundo do header muito escuro */
    border-bottom: 1px solid #4a4a4a; /* Borda sutil na parte inferior */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Sombra para profundidade */
}

header h1 {
    color: #f0f0f0;
    font-weight: 700; /* Negrito para o título */
}

/* Garante que o Select2 e o botão "Minha Conta" fiquem na mesma linha sem quebrar */
.header-right-items {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre o select e o botão de login */
}


/* ========================================= */
/* 3. Componentes de Formulário (Campo de Busca) */
/* ========================================= */
.input-group .form-control {
    background-color: #3a3a3a; /* Fundo do campo de busca */
    border: 1px solid #5a5a5a; /* Borda mais suave */
    color: #f0f0f0; /* Cor do texto digitado */
    border-radius: 0.5rem; /* Cantos arredondados para o campo */
    padding: 0.75rem 1rem; /* Padding interno */
}

.input-group .form-control::placeholder {
    color: #b0b0b0; /* Cor do placeholder */
}

.input-group .btn-outline-light {
    background-color: #5a5a5a; /* Fundo do botão de busca */
    border: 1px solid #5a5a5a; /* Borda do botão de busca */
    color: #f0f0f0; /* Cor do texto do botão */
    border-radius: 0.5rem; /* Cantos arredondados */
    margin-left: -1px; /* Ajuste para não ter espaço entre input e botão */
}

.input-group .btn-outline-light:hover {
    background-color: #6a6a6a; /* Fundo ao passar o mouse */
    border-color: #6a6a6a;
    color: #fff;
}

/* ========================================= */
/* 4. Elementos de UI Global (Ícones, Títulos, Botões Genéricos) */
/* ========================================= */
/* Ajustes para Ícones e Bandeiras no Header */
.text-end .bi-person-circle {
    color: #f0f0f0; /* Cor do ícone de perfil */
    margin-left: 1.5rem !important; /* Aumenta a margem para separar do idioma */
}

.text-end .fi { /* Estilo para os ícones de bandeira */
    font-size: 1.25rem; /* Tamanho da bandeira */
    vertical-align: middle; /* Alinhamento vertical */
    border: 1px solid #ccc; /* Borda fina clara */
    border-radius: 3px; /* Cantos levemente arredondados */
}

/* Títulos das Seções */
h2 {
    color: #f0f0f0; /* Cor dos títulos das seções */
    font-weight: 600; /* Um pouco mais de negrito */
    margin-bottom: 1.5rem !important; /* Espaçamento abaixo do título */
}

/* Botões genéricos (impedir que o texto quebre) */
.btn {
    white-space: nowrap; /* Impede que o texto quebre para a próxima linha dentro dos botões */
}

/* ========================================= */
/* 5. Cards (Geral)                          */
/* ========================================= */
.card {
    background-color: #3a3a3a; /* Fundo dos cards */
    border: 1px solid #6a6a6a; /* Borda mais clara para destaque */
    border-radius: 0.75rem; /* Cantos mais arredondados */
    overflow: hidden; /* Garante que a imagem siga o border-radius */
    box-shadow: 0 4px 8px rgba(0,0,0,0.4); /* Sombra mais pronunciada para profundidade */
    transition: transform 0.2s ease-in-out; /* Transição suave ao passar o mouse */
    display: flex; /* Transforma o card em um flex container */
    flex-direction: column; /* Coloca os itens (img, body) em coluna */
    height: auto; /* Garante que o card ocupe 100% da altura disponível em sua coluna (se houver flexbox no row) */
}

.card:hover {
    transform: translateY(-5px); /* Efeito de "levantar" ao passar o mouse */
}

.card-img-top {
    width: 100%;
    height: 180px; /* Altura fixa para as imagens dos cards (ajuste conforme necessário) */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorção */
    border-top-left-radius: 0.75rem; /* Arredondar só os cantos superiores da imagem */
    border-top-right-radius: 0.75rem;
}

.card-body {
    padding: 1.25rem; /* Aumenta o padding interno do card body */
    display: flex; /* Transforma o card-body em um flex container */
    flex-direction: column; /* Coloca os itens internos em coluna */
    justify-content: space-between; /* Empurra o botão para baixo e distribui o espaço */
    flex-grow: 1; /* Permite que o card-body ocupe todo o espaço restante */
    min-height: 140px; /* Ajuste este valor conforme o conteúdo mínimo */
}

.card-body .btn {
    margin-top: auto; /* Empurra o botão para o final do card-body */
}

.card-title {
    color: #f0f0f0; /* Cor do título do serviço/empresa no card */
    font-weight: 600;
}

.card-text {
    color: #d0d0d0; /* Cor do texto de descrição */
}

.card-text small {
    color: #b0b0b0 !important; /* Cor do texto do bairro */
}

/* ========================================= */
/* 6. Cards de Destaque                      */
/* ========================================= */
.card.bg-secondary { /* Aplica-se aos cards de destaque */
    background-color: #3a3a3a !important; /* Mesma cor de fundo dos outros cards */
    border: 1px solid #a0a0a0; /* Borda mais proeminente para destaques */
}

.card.bg-secondary .bg-danger {
    background-color: #e6007e !important; /* Cor do "TOP 10" (um rosa vibrante) */
    border-bottom-left-radius: 0.75rem; /* Arredondar os cantos inferiores-esquerdos do TOP 10 */
    padding: 0.25rem 0.75rem; /* Padding interno */
}

.card.bg-secondary .btn-primary {
    background-color: #e6007e; /* Cor do botão "Ver Detalhes" */
    border-color: #e6007e;
    font-weight: 600;
}

.card.bg-secondary .btn-primary:hover {
    background-color: #c4006c;
    border-color: #c4006c;
}

/* ========================================= */
/* 7. Botões de Filtro e Ação Específicos    */
/* ========================================= */
/* Botões de Localização (Filtros) */
.d-flex.flex-wrap.gap-2 button,
.d-flex.flex-wrap.gap-2 a.btn { /* Alvo tanto botões quanto links com classe btn */
    background-color: #3a3a3a; /* Fundo escuro */
    border: 1px solid #6a6a6a; /* Borda cinza clara */
    color: #f0f0f0; /* Texto claro */
    border-radius: 0.5rem; /* Cantos arredondados */
    padding: 0.5rem 1rem; /* Padding */
    font-size: 0.9rem; /* Tamanho da fonte */
    transition: all 0.3s ease; /* Transição suave */
    text-decoration: none; /* Remover sublinhado dos links */
}

.d-flex.flex-wrap.gap-2 button:hover,
.d-flex.flex-wrap.gap-2 a.btn:hover,
.d-flex.flex-wrap.gap-2 a.btn.active { /* Efeito de hover e ativo */
    background-color: #e6007e; /* Fundo rosa vibrante */
    border-color: #e6007e;
    color: #fff; /* Texto branco */
}

/* Botão Limpar Filtros */
.btn-warning {
    background-color: #5a5a5a !important; /* Cor mais neutra para limpar filtros */
    border-color: #5a5a5a !important;
    color: #f0f0f0 !important;
}

.btn-warning:hover {
    background-color: #7a7a7a !important;
    border-color: #7a7a7a !important;
}

/* Lista de Estabelecimentos/Empresas (Botão de Ver Serviços) */
.card.bg-dark .btn-success { /* Ajuste este se `.card.bg-dark` for o card principal da empresa */
    background-color: #e6007e; /* Mesma cor rosa vibrante */
    border-color: #e6007e;
    font-weight: 600;
}

.card.bg-dark .btn-success:hover {
    background-color: #c4006c;
    border-color: #c4006c;
}

/* ========================================= */
/* 8. Seção de Empresa (Detalhes)           */
/* ========================================= */
.empresa-header {
    min-height: 250px;
    position: relative; /* Essencial para posicionar os filhos absolutamente */
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: white;
    /* O background-image é definido inline no HTML */
}

.empresa-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay */
    z-index: 0;
}

/* Nome da Empresa no canto superior esquerdo */
.empresa-name-top-left {
    position: absolute;
    top: 20px; /* Distância do topo */
    left: 20px; /* Distância da esquerda */
    z-index: 1; /* Acima do overlay */
    font-size: 2.5rem; /* Tamanho do nome */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Sombra para melhorar a leitura */
}

/* Endereço no canto inferior esquerdo */
.empresa-address-bottom-left {
    position: absolute;
    bottom: 20px; /* Distância da base */
    left: 20px; /* Distância da esquerda */
    z-index: 1; /* Acima do overlay */
    font-size: 1.1rem; /* Tamanho do endereço */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Sombra para melhorar a leitura */
}

.empresa-address-bottom-left i {
    margin-right: 5px; /* Espaço entre o ícone e o texto */
}

/* Logo centralizado no banner */
.empresa-logo-center {
    position: absolute;
    top: 50%; /* Centraliza verticalmente */
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta para centralização exata */
    z-index: 2; /* Acima de tudo */
}

.empresa-logo-center img {
    border: 3px solid #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
    max-width: 180px; /* Tamanho do logo */
    height: auto;
    border-radius: 50%;
}

/* ========================================= */
/* 9. Seção Minha Conta/Perfil               */
/* ========================================= */
.profile-header {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 30px;
}

.profile-header h1 {
    margin-bottom: 5px;
    font-weight: 600;
}

.profile-header p {
    opacity: 0.9;
}

.card-custom {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.card-header-custom {
    background-color: #e9ecef;
    font-weight: bold;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.list-group-item strong {
    color: #007bff;
}

.btn-action {
    width: 100%;
    margin-bottom: 10px;
}

.btn-danger-custom {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-danger-custom:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.feedback-message {
    margin-top: 20px;
}

/* Estilos para modais (se desejar mantê-los no tema escuro) */
.modal-content.bg-dark .modal-header,
.modal-content.bg-dark .modal-body,
.modal-content.bg-dark .modal-footer {
    color: #f8f9fa;
    background-color: #343a40;
}

.modal-content.bg-dark .modal-header .modal-title,
.modal-content.bg-dark .modal-body label,
.modal-content.bg-dark .modal-body small {
    color: #f8f9fa;
}

.modal-content.bg-dark .btn-close {
    filter: invert(1);
}

/* ========================================= */
/* 10. Notificações                          */
/* ========================================= */
/* Estilo para notificação não lida */
.list-group-item.notificacao-nao-lida {
    background-color: #e9f7fe; /* Cor de fundo suave para notificação nova */
    border-left: 4px solid #007bff; /* Borda azul para destaque */
}

/* ========================================= */
/* 11. Select2 (Dropdown de Idioma)          */
/* ========================================= */
.select2-container {
    min-width: 160px; /* Largura mínima para acomodar o texto + bandeira */
    width: auto !important; /* Permite que ele se ajuste, mas respeite o min-width */
}

/* Container principal do Select2 */
.select2-container--default .select2-selection--single {
    background-color: #343a40; /* Cor de fundo escura (como o bg-dark do Bootstrap) */
    border: 1px solid #495057; /* Borda um pouco mais clara que o fundo para contraste */
    color: #f0f0f0; /* Cor do texto clara */
    height: calc(1.5em + .75rem + 10px); /* Ajuste de altura para ser similar aos inputs do Bootstrap */
    padding: .375rem .75rem; /* Padding para o texto */
    display: flex; /* Para centralizar bandeira e texto */
    align-items: center;
    justify-content: flex-start; /* Alinha o conteúdo à esquerda */
}

/* Texto selecionado */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f0f0f0; /* Cor do texto selecionado */
    line-height: normal; /* Altura da linha normal para evitar cortes */
    padding-left: 0; /* Remove padding extra se houver */
    padding-right: 0; /* Remove padding extra se houver */
}

/* Ícone da seta (dropdown arrow) */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #f0f0f0 transparent transparent transparent; /* Cor da seta para branco/claro */
    margin-top: -4px; /* Ajuste se a seta não estiver centralizada */
}

/* Contêiner do Dropdown (a lista de opções que aparece quando você clica) */
.select2-container--default .select2-dropdown {
    background-color: #343a40; /* Fundo escuro para a lista */
    border: 1px solid #495057; /* Borda da lista */
    z-index: 1060; /* Garante que o dropdown apareça acima de outros elementos, como modais */
}

/* Opção individual na lista */
.select2-container--default .select2-results__option {
    color: #f8f9fa; /* Cor do texto das opções */
    background-color: #343a40; /* Fundo padrão das opções */
    padding: 8px 12px; /* Padding para as opções na lista */
    display: flex; /* Para centralizar bandeira e texto na lista */
    align-items: center;
}

/* Opção ao passar o mouse (hover) */
.select2-container--default .select2-results__option--highlighted {
    background-color: #495057 !important; /* Cor de fundo ao passar o mouse */
    color: #ffffff !important; /* Cor do texto ao passar o mouse */
}

/* Opção selecionada na lista (se houver alguma já selecionada visualmente) */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #495057; /* Fundo para opção já selecionada */
    color: #ffffff; /* Cor do texto para opção já selecionada */
}

/* Ajustes para a imagem da bandeira dentro do Select2 */
.img-flag { /* Aplica-se às imagens criadas pelo Select2 */
    width: 20px; /* Largura da bandeira */
    height: 15px; /* Altura da bandeira */
    margin-right: 8px; /* Espaçamento à direita da bandeira */
    vertical-align: middle; /* Alinhamento vertical com o texto */
    /* Se precisar, adicione um border-radius para bordas arredondadas ou uma pequena borda */
    /* border: 1px solid #aaa; */
}

/* Estilo para placeholder (se você tiver um) */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #adb5bd; /* Cor do placeholder */
}

/* Estilo para a caixa de busca dentro do Select2 (se minimumResultsForSearch não for Infinity) */
.select2-search--dropdown .select2-search__field {
    background-color: #212529; /* Cor de fundo da caixa de busca */
    border: 1px solid #495057; /* Borda da caixa de busca */
    color: #f0f0f0; /* Cor do texto da busca */
}

/* ========================================= */
/* 12. Dropdown de Login                     */
/* ========================================= */
.dropdown-menu-dark {
    background-color: #343a40; /* Cor de fundo escura */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borda sutil */
}
.dropdown-menu-dark .dropdown-item {
    color: #f8f9fa; /* Cor do texto claro */
}
.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
    background-color: #495057; /* Cor de fundo no hover/focus */
}