/* Estado: Modo Claro */
[data-bs-theme="light"] .sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-bs-theme="light"] .moon-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* Estado: Modo Escuro */
[data-bs-theme="dark"] .sun-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-bs-theme="dark"] .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.theme-icon-wrapper svg {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

/* Opcional: transição suave para as cores de fundo padrão do site */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =========================================================
   MODO ESCURO - INFOBAIRRO (Baseado no data-bs-theme="dark")
   ========================================================= */

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .transition-layer,
[data-bs-theme="dark"] #map,
[data-bs-theme="dark"] .bg-light-subtle
{
    background-color: #111315 !important; /* Essa é a cor base do Dark Mode do Bootstrap */
}

/* Cor de fundo base por trás da animação */
[data-bs-theme="light"] .transition-layer,
 [data-bs-theme="light"] body{
    background-color: #ffffff; /* Ou a cor de fundo do seu light mode */
}

/* Elementos isolados (Lupa, Footer, Cross, Label, Menu Pop, Transição) */
[data-bs-theme="dark"] .pin-lupa-label,
[data-bs-theme="dark"] .pin-match::after,
[data-bs-theme="dark"] .footer-pill,
[data-bs-theme="dark"] .positionCross,
[data-bs-theme="dark"] .hideLabelBtn,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .menupop,
[data-bs-theme="dark"] .custom-context-menu,
[data-bs-theme="dark"] .context-menu-item,
[data-bs-theme="dark"] .context-menu-coord,
[data-bs-theme="dark"] .bairro-sheet {
    background-color: #121212;
    color: #ffffff;
}
[data-bs-theme="dark"] .menupop,
[data-bs-theme="dark"] .positionCross,
[data-bs-theme="dark"] .hideLabelBtn
{
    border-color: #495057;
}

[data-bs-theme="dark"] .card-ib,
[data-bs-theme="dark"] .stat-item {
    background-color: #000000;
    color: #ffffff;
}

[data-bs-theme="dark"] .border-light{
    border-color: #495057 !important;
}
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .stat-label{
    color: white !important;
}
[data-bs-theme="dark"] .btn-outline-secondary{
    color: white !important;
}
[data-bs-theme="dark"] .text-secondary{
    color: whitesmoke !important;
}

[data-bs-theme="dark"] .gerenciarBnt {
    background: white !important;
    color: black !important;
}

[data-bs-theme="dark"] .context-menu-item:hover {
    background-color: #000000;
    color: cornflowerblue !important;
}

[data-bs-theme="dark"] .search-input,
[data-bs-theme="dark"] .search-input:focus,
[data-bs-theme="dark"] .empty-state,
[data-bs-theme="dark"] .criteria-card,
[data-bs-theme="dark"] .btn-like,
[data-bs-theme="dark"] .offcanvas-header-custom,
[data-bs-theme="dark"] .search-wrapper {
    background: transparent;
}

[data-bs-theme="dark"] .btn-like:hover {
    background: #343a40;
    border: none;
}
[data-bs-theme="dark"] .btn-like,
[data-bs-theme="dark"] .content-text
{
    color: white !important;
    border: none;
}
[data-bs-theme="dark"] .comentario-card,
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly]
{
    background: #202020;
    color: #bdbdbd;
    border-color: #1e1e1e;
}
[data-bs-theme="dark"] .form-control
{
    border-color: #343a40;
}
[data-bs-theme="dark"] .card-avaliacao-hover .card,
[data-bs-theme="dark"] .comentario-card:hover,
[data-bs-theme="dark"] .config-card
{
    background: #171a1c;
}
[data-bs-theme="dark"] .star-icon-custom
{
    color: #8f8f8f !important;
}
[data-bs-theme="dark"] .card-avaliacao-hover:hover .card
{
    background-color: #1c1c1c;
}

[data-bs-theme="dark"] .pin-lupa-circle{
    border-color: black;
}
[data-bs-theme="dark"] .pin-lupa-circle::after {
    border-top-color: black;

}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: #ffffff;
}

/* Cards de Usuário */
[data-bs-theme="dark"] .user-card {
    background-color: #1c1c1c;
    border-color: #020305;
}

[data-bs-theme="dark"] .userRound {
    /* O !important anula a classe bg-secondary do Bootstrap automaticamente */
    background-color: #121212 !important;
}

/* Links e Menus (Classes) */
[data-bs-theme="dark"] .nav-link-custom {
    color: #ffffff;
}

[data-bs-theme="dark"] .text-fade {
    background: linear-gradient(transparent, #000000);
}
[data-bs-theme="dark"] .review-popup {
    color: white;
    background: #080808;
    border-color: #222223;
}
[data-bs-theme="dark"] .popup-body strong,
[data-bs-theme="dark"] .popup-body p
{
    color: white;
}

[data-bs-theme="dark"] .bg-animated-subtle {
    background: linear-gradient(-45deg, #121416, #1a222c, #161b22, #1c1c1c);
}

[data-bs-theme="dark"] .rating-card-glass {
    /* Um fundo escuro bem translúcido */
    background: rgba(30, 32, 35, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* A borda precisa ser clara, mas com baixíssima opacidade (o brilho do vidro) */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Efeito de hover no vidro dark */
[data-bs-theme="dark"] .rating-card-glass:hover{
    background: rgba(40, 42, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
[data-bs-theme="dark"] .btn-google:hover
{
    background: rgba(40, 42, 45, 0.8);
color: white;
}
[data-bs-theme="dark"] .form-card
{
    background: rgb(12, 12, 12);
}
[data-bs-theme="dark"] .hideLabelBtn
{
    background: rgb(0, 0, 0, 0.5) !important;
}
[data-bs-theme="dark"] .bg-cadastro-image {

    background-image: url("/img/bkgCadastro2.png");
}

[data-bs-theme="dark"] .overlay {
    /* Cores mais profundas e opacidade reduzida para 35-40% */
    background: linear-gradient(
            135deg,
            rgba(10, 88, 202, 0.4),  /* Azul Royal mais fechado */
            rgba(25, 135, 84, 0.3),  /* Verde Suave/Escuro */
            rgba(10, 88, 202, 0.4)
    );

    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite; /* Um pouco mais lenta para ser menos intrusiva */

    /* Mix-blend-mode é o segredo dos profissionais para Dark Mode */
    /* Ele faz a cor interagir com o que está atrás de forma mais orgânica */
    mix-blend-mode: multiply;

    z-index: 1;
}

[data-bs-theme="dark"] .eye-anim-icon{
    color: white;
    
}
[data-bs-theme="dark"] .btn-back-home{
   background-color: rgb(32, 32, 32);
    color: white;
   border: 1px solid rgba(255, 255, 255, 0.2);
    
}
[data-bs-theme="dark"] .btn-back{
   background: rgb(32, 32, 32);
    color: white !important;
   border: 1px solid rgba(255, 255, 255, 0.2);
    
}
[data-bs-theme="dark"] .btn-back:hover{
   background: rgb(14, 14, 14);
    color: var(--lime-dark) !important;
    
}

[data-bs-theme="dark"] .btn-back-home:hover{
   background-color: rgb(0, 0, 0);
    color: var(--bs-blue);
   border: 1px solid rgba(255, 255, 255, 0.2);
    
}
[data-bs-theme="dark"] .btn-google
{
    background-color: rgb(18, 18, 18);
    color: rgb(149, 149, 149);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
[data-bs-theme="dark"] .login-form-section, 
[data-bs-theme="dark"] .form-section 
{
    background-color: rgb(18, 18, 18);
}


[data-bs-theme="dark"] .shiny-container:after {
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0) 100%
    );
}

[data-bs-theme="dark"] .menu-item,
[data-bs-theme="dark"] .form-label-custom
{
    color: #ffffff;
    background-color: initial;
    transition: all 0.2s ease; /* Transição suave pro hover */
}
[data-bs-theme="dark"] .menu-item.text-danger:hover{
    background-color: rgba(253, 13, 13, 0.06);
    
}
[data-bs-theme="dark"] .menu-item.toMap:hover{
    background-color: rgba(13, 253, 53, 0.06);
    color: #9af690 !important;
    
}
.menu-item.toMap:hover{
    background-color: rgba(13, 253, 53, 0.06);
    color: #2a4927 !important;
    
}

[data-bs-theme="dark"] .menu-item:hover {
    color: #90b9f6;
    background-color: rgb(13 110 253 / 6%);}

/* =========================================================
   ANULANDO OS FUNDOS CLAROS DO BOOTSTRAP
   Como no JS você estava dando removeClass('bg-white') e ('bg-light'),
   no CSS nós simplesmente forçamos o fundo transparente ou escuro.
   ========================================================= */

[data-bs-theme="dark"] .filterGroup,
[data-bs-theme="dark"] .formControl,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] #searchInput,
[data-bs-theme="dark"] #searchInput:focus
{
    /* Transparent faz com que eles herdem o fundo escuro do pai */
    background-color: transparent !important;
    color: #ffffff; /* Já garante a fonte branca caso precise */
}
[data-bs-theme="dark"] .card-header.bg-danger{
background: rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important
    
}

[data-bs-theme="dark"] .brand-text-gradient {
    background: linear-gradient(to right, #96c168, #6b9cc1, #6b9cc1, #96c168);

    background-size: 200% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: -0.5px;

    /* A sua animação vai fazer o "branco suave" correr pelo texto, dando um efeito bem premium */
    animation: gradientShift 5s ease infinite;
}
[data-bs-theme="dark"] .rich-editor .toolbar button {
    background: #000000;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .conteudo_principal,
[data-bs-theme="dark"] .card_contato,
[data-bs-theme="dark"] .bg-white {
    background: transparent !important;
}
[data-bs-theme="dark"] #cityFilter,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] #itensPorPagina,
[data-bs-theme="dark"] #itensPorPagina1,
[data-bs-theme="dark"] #bg-lock-icon,
[data-bs-theme="dark"] #itensPorPagina2
{

    background: #151515 !important;
    /* Transparent faz com que eles herdem o fundo escuro do pai */
    color: #ffffff; /* Já garante a fonte branca caso precise */
}

[data-bs-theme="dark"] .text-azul-escuro,
[data-bs-theme="dark"] .icone_email
{
    color: white;
}

[data-bs-theme="dark"] .bg-azul-bebe {
    background: #000f1e !important;
}

[data-bs-theme="dark"] .caixa_email {
    background: #000f1e !important;
}

[data-bs-theme="dark"] .link_email {
    color: whitesmoke !important;
}

[data-bs-theme="dark"] .caixa_email:hover {
    background: #001d3a !important;
}

[data-bs-theme="dark"] .text-dark {
    color: #fffdfd !important;
}
[data-bs-theme="dark"] .bg-warning.text-dark {
    color: #000000 !important;
}
[data-bs-theme="dark"] .select-wrapper:after {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;

}
.select-wrapper {
    position: relative !important;
    display: inline-block !important;
}

.select-wrapper .form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none;
    padding: 10px 40px 10px 10px !important;
}
@keyframes scaleIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
/* seta */
.select-wrapper::after {
    content: "" !important;
    position: absolute !important;
    right: 12px !important;
    top: 70% !important;
    width: 20px !important;
    height: 20px !important;

    background-image: url('data:image/svg+xml;utf8,<svg fill="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
}
.select-wrapper:focus-within::after {
    transform: translateY(-50%) rotate(180deg) !important;
}
[data-bs-theme="dark"] .btnComecarSobre{
    background: whitesmoke !important;
}

[data-bs-theme="dark"] .bg-emerald-500{
    background: rgba(0,0,0,0.7) !important;
}