@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap');

body {
    font-family: 'Open Sans', sans-serif; /* Fonte padrão para o corpo do texto */
    line-height: 1.6; /* Melhora a legibilidade do texto */
    margin: 0;
    padding: 0;
}

/* Aplicar a fonte aos placeholders */
input::placeholder,
textarea::placeholder,
select {
    font-family: 'Open Sans', sans-serif;
}

/* Garantir que o texto dentro dos campos de entrada também use a fonte */
input,
textarea,
select {
    font-family: 'Open Sans', sans-serif;
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100%);
    z-index: -1; /* Ensure the map is behind other elements */
    outline: 0;
    background-color: transparent; /* Ensure no background color interferes */
}

/* Overlay branco atrás do full-container, mas à frente do Leaflet */
.full-container-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(45, 45, 45, 0.85);
    opacity: 0;
    transition: opacity 180ms ease;
    z-index: -1;
    pointer-events: none; /* apenas visual: não bloqueia cliques */
}

.full-container-backdrop.active {
    opacity: 1;
}

.leaflet-control-zoom {
    display: none;
}

select,
.search-container {
      display: block;
      margin-bottom: 10px;
      margin: 0 auto 10px; /* Center horizontally with auto margins */
      width: calc(100% - 20px); /* Adjust the width as needed */
      padding: 10px;
    border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
    background: var(--surface-background);
    color: var(--text-primary);
}

.input-div{
    display: block;
    margin: 0 auto 10px; /* Center horizontally with auto margins */
    width: 100%; /* Adjust the width as needed */
}
  
input[type="range"] {
    width: calc(100% - 3px);
    margin-bottom: 16px;
    display: block;
}
  
.price-label {
    display: block;
    margin-right: 10px; /* Adjust as needed to move it slightly to the left */
}

/* Exemplo de estilização para títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color); /* Cor do texto */
    font-family: 'Open Sans', sans-serif; /* Fonte padrão para o corpo do texto */
}

#search-results {
    margin-top: 20px;
}

.slider-container {
    display: none;
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.7); /* Adjust background color and transparency */
    padding: 10px; /* Add padding for better appearance */
}

.slider-container {
    z-index: -1;
    position: absolute;
    bottom: 20px; /* Change 'top' to 'bottom' */
    right: 20px;
}

/* CSS for smooth transition */
.leaflet-interactive {
    transition: all 0.3s ease-in-out; /* Define transition for all circle properties */
}


.hidden {
    opacity: 0; /* Initially set opacity to 0 */
    pointer-events: none; /* Disable pointer events for hidden elements */
}

.icon-filter {
    display:none;
    position: fixed;
    top: 7px; /* mesma posição que o antigo */
    left: 5px; /* ajustar conforme necessário */
    width: 30px;
    height: 30px;
    background-color: var(--surface-background); /* fundo roxo */
    color: var(--primary-color); /* ícone branco */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* cantos arredondados */
    cursor: pointer;
    transition: left 0.3s ease-in-out, background-color 0.3s;
    z-index: 1001;
    border: 1px solid var(--primary-color); /* Borda padrão */
}

.icon-filter:hover {
    background-color: var(--primary-color); /* roxo mais claro no hover */
    color: var(--primary-contrast-text); /* ícone branco */
}

.icon-filter i {
    font-size: 20px; /* tamanho do ícone */
}

.icon-filter.collapsed {
    left: 300px; /* ajustar conforme necessário */
    font-size: 20px; /* tamanho do ícone */
}

.sidebar.collapsed + .sidebar-collapse .icon-filter {
    left: 0; /* Move icon to the screen's edge when sidebar is collapsed */
}

.icon.collapsed {
    left: 12px;
}

.sidebar.collapsed + .sidebar-collapse .icon {
    left: 0; /* Move icon to the screen's edge when sidebar is collapsed */
}

.container::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

.container::-webkit-scrollbar-track {
    background: var(--scrollbar-track); /* Background color of the scrollbar track */
}

.container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb); /* Color of the scrollbar thumb */
    border-radius: 5px; /* Roundness of the scrollbar thumb */
}

.container {
    width: 279px;
    height: 450px;
    overflow-y: scroll;
    border: 1px solid var(--border-color);
    padding: 10px;
    background: var(--surface-elevated);
    color: var(--text-primary);
}

.sidebar-content {
    width: 99%;
    overflow-y: scroll;
    padding: 10px;
    border: none; /* Ensures the div itself has no border */
}

@media only screen and (max-width: 650px) {
    .sidebar-content {
        margin-top: 85px;
    }

    .div-button-search-sidebar{
        position:absolute;
        bottom: 80px;
        width: 100%;
    }
}

@media only screen and (min-width: 650px) {

    .sidebar-content {
        height: 95% !important;
    }

    .div-button-search-sidebar{
        position:absolute;
        bottom: 10px;
        width: 100%;
    }
}

.title {
    font-weight: bold;
    font-size: 18px;
}
.subtitle {
    font-size: 13px;
}
.number {
    float: right;
    font-size: 24px;
}

.advertising {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    z-index: 500; /* Ensure the advertising section is above the map */
    overflow-y: auto; /* Enable vertical scrollbar */
    overflow-x: hidden;
    background-color: var(--page-background);
    scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0); /* Gray color for thumb and transparent color for track */
    max-height: 0; /* Initially set max-height to 0 */
    opacity: 0; /* Initially set opacity to 0 */
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Add transition for max-height and opacity */
}

@media only screen and (min-width: 800px) {
    .advertising .box {
        min-height: calc(47% + 300px);
    }   
}

.advertising::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.advertising::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
}

.advertising::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0); /* Transparent color for scrollbar track */
}

.advertising2 > * {
    margin: 0 auto; /* Center children elements horizontally */
    text-align: center; /* Center text inside the elements */
}

.advertising2::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.advertising2::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
}

.advertising2::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0); /* Transparent color for scrollbar track */
}

.announce-buttons {
    display: flex; /* Usa flexbox para alinhar o ícone e o texto */
    align-items: center; /* Alinha verticalmente o conteúdo */
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
    width: 170px;
    height: 30px;
    background-color: #007bff; /* Azul forte */
    color: #fff; /* Texto branco */
    border: none;
    border-radius: 25px; /* Bordas arredondadas */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    padding: 0 15px; /* Padding horizontal */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s; /* Transições suaves */
}

.announce-buttons i {
    margin-right: 8px; /* Espaçamento entre o ícone e o texto */
    font-size: 18px; /* Tamanho do ícone */
}

.announce-buttons:hover {
    background-color: #0056b3; /* Azul mais escuro ao passar o mouse */
    transform: scale(1.05); /* Aumento leve ao passar o mouse */
}

.announce-buttons:active {
    transform: scale(0.95); /* Reduz o botão quando clicado */
}


.searchDivGlobal {
    display: grid;
    place-items: center; /* centraliza vertical e horizontal */
    height: 100vh;
    margin: auto;
    gap: 0.5%;
    background: var(--page-background);
}

.searchDivGlobal.hidden{
    display:none
}

.close-btn {
    position: fixed;
    top: 10px;
    right: 5px;
    width: 30px;
    height: 30px;
    min-width: 44px;
    min-height: 44px;
    background-color: rgba(128, 128, 128, 0.9); /* Black background with 10% opacity */
    border: none;
    border-radius: 50%; /* Make the background circular */
    cursor: pointer;
    color: #fff; /* Adjust color as needed */
    font-size: 18px; /* Increase the size for better visibility */
    text-align: center;
    transition: color 0.3s, transform 0.3s, background-color 0.3s; /* Add transitions for smooth effects */
    z-index: 9999999;
}

.commercySearchBar {
    width: 92%;
    max-width: 400px;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.commercySearchBar:focus {
    border-color: #007BFF;
    outline: none;
}

.close-btn:hover {
    color: #fff; /* Change color on hover */
    transform: scale(1.1); /* Slightly increase size on hover */
    background-color: rgba(39, 39, 40, 0.8);
}

.close-btn:focus-visible {
    outline: 2px solid #5915a4;
    outline-offset: 2px;
}

/* Optional: Add an icon or use a font library like FontAwesome */
.close-btn::before {
    content: 'X'; /* Unicode for multiplication sign (×) */
}

.announce-container.not-displayed {
    display: none;
}

.announcePhotos {
    width: 300px; /* Ajuste para o tamanho desejado */
    height: 300px; /* Ajuste para o tamanho desejado */
    object-fit: cover; /* Garante que a imagem seja cortada e não distorcida */
    object-position: center; /* Centraliza o corte */
}

.search-parameters {
    margin-top: 15px;
    width: 100%;
    height: calc(100% - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0);
    opacity: 1;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.container-div {
    width: 40%;
    /* height: 94%; */
    overflow-y: auto;
    display: flex;
    flex-direction: column; /* Default is column */
    background-color: var(--page-background);
    gap: 5px; /* Space between boxes */
}

.pagination-horizontal {
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-left:0%;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Adjustments for even smaller screens */
@media only screen and (max-width: 800px) {

    .search-container2 {
        position: absolute;
        top: 47%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0); /* Gray color for thumb and transparent color for track */
        width: 98%;
        max-width: 600px;
        height: 76%;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        background-color: var(--page-background);
        opacity: 1;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
        /* margin-top: 25px; */
    }

    .search-container2 h1 {
        margin-top: 2px;
        margin-bottom: 4px;
        font-size: 28px;
    }

    .advertising.hidden {
        max-height: 0; /* Set max-height to 0 when hidden */
        opacity: 0; /* Initially set opacity to 0 */
        pointer-events: none; /* Disable pointer events for hidden elements */
    }
    
    .advertising:not(.hidden) {
        max-height: 100%; /* Set max-height to the desired value when visible */
        opacity: 1; /* Set opacity to 1 when visible */
    }
    
    .advertising .search {
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        margin-bottom: 20px; /* Adjust margin for spacing */
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .advertising .search #search-bar {
        width: 300px;
        padding: 10px;
        border: none;
        border-radius: 5px;
    }
    
    .advertising .search #search-button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        background-color: #007bff;
        color: white;
        cursor: pointer;
        margin-left: 10px; /* Adjust margin for spacing */
    }
    
    .advertising .box {
        position: relative;
        width: 95%;
        /* max-width: 450px; */
        padding: 2px;
        border-radius: 12px;
        text-align: right;
        margin: 12px auto;
        transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.5s ease-in-out;
        cursor: pointer;
    }

    .advertising .mobility-cta-box,
    .advertising .commerce-cta-box {
        position: sticky;
        top: 0;
        z-index: 600;
        width: 95% !important;
        margin: 12px auto;
        padding-top: 22px;
        padding-bottom: 32px;
        border-radius: 12px;
        text-align: left;
        background: rgba(255, 255, 255, 1.0);
        box-sizing: border-box;
        cursor: default;
        transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.5s ease-in-out;
    }

    .full-container.visible {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 99%;
        max-height: 100vh; /* 90% of the viewport height */
        background-color: var(--page-background); /* Adjust background color and transparency */
        overflow-y: scroll;
        scrollbar-width: thin; /* Thin scrollbar */
        scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0); /* Gray thumb, transparent track */
        padding: 10px;
    
        /* New styles */
        border: none; /* Remove borders */
        border-radius: 12px; /* Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add subtle shadow for better aesthetics */
        z-index: 1;
    }
    
    .full-container {
        transition: max-height 0.3s ease-out;
        max-height: 0;
        overflow: hidden;
    }

    .announce-container {
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 10px;
    }

    #photosResponsive {
        padding: 1px !important
    }

    .photos {
        position: relative;
        display: inline-block;
        overflow: hidden; /* Ensure any overflowing part of the image is hidden */
        width: 100%; /* Adjust as needed */
        /* height: 300px; */
        height: 50vw; /* 80% da largura da tela */
        cursor: pointer;
        max-height: 350px;
    }

    .photos.expanded {
        position: fixed; /* Fixed position relative to the viewport, not parent */
        top: 50%;
        left: 50%;
        width: 90vw; /* Full viewport width */
        transform: translate(-50%, -50%); /* Center the div */
        z-index: 9000000; /* Ensure it is above other content */
        height: 500px;
        max-height: 90%;
    }

    .announcePhotos {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%; /* Fixed minimum width */
        max-width: 100%; /* Fixed maximum width */
        min-height: 100%; /* Fixed minimum height */
        max-height: 100%; /* Fixed maximum height */
        object-fit: cover; /* Image is cut off to fill the container without distortion */
        object-position: center; /* Center the image within the container */
        transition: transform 0.5s ease-in-out; /* Smooth transition effect */
        max-width: 300px;
        height: auto;
        display: block;
    }

    .container-div {
        width: 65%;
        scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0); /* Gray color for thumb and transparent color for track */
    }

    .pagination-horizontal {
        margin-left: 0%;
        width: 65%;
        background-color: var(--page-background);
    }

    .advertising .box .photos {
        position: flex; /* This should be changed to position: relative; */
        display: inline-block;
        overflow: hidden; /* Ensure any overflowing part of the image is hidden */
        float: left; /* Align the element to the left */
        margin-right: 10px; /* Optional: add some space to the right */
        transition: opacity 0.5s ease-in-out; /* Add transition for opacity */
        border-radius: 10px; /* Rounds the corners slightly */
    }

    .advertising .box .photos:hover {
        transform: scale(1.02); /* Slightly enlarge on hover */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
    }
}

@media only screen and (max-width: 650px) {

    .search-container2 {
        margin-top:30px;
    }
}

@media only screen and (min-width: 550px) and (max-width: 1218px) {
    .search-container2 {
        position: relative;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 600px;
        padding: 20px;
        min-width: 380px;
        height: 85%;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0);
        border-radius: 8px;
        background-color: var(--page-background);
        transition: max-height 0.5s 
ease-in-out, opacity 0.5s 
ease-in-out;
        z-index: 10000;
        /* margin-top: 25px; */
    }

    .container-div {
        width: 95%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 2.5%;
        margin-top: 3px;
        transition: transform 0.2s 
ease, box-shadow 0.3s 
ease, opacity 0.5s 
ease-in-out;
        scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0);
    }

    .advertising .box {
        width: 49%;
        padding: 2px;
        border-radius: 12px;
        text-align: right;
        transition: transform 0.2s 
            ease, box-shadow 0.3s 
            ease, opacity 0.5s 
            ease-in-out;
        cursor: pointer;
    }

    .advertising .mobility-cta-box,
    .advertising .commerce-cta-box {
        width: 100% !important;
        flex: 0 0 100%;
        text-align: left;
        cursor: default;
        padding-top: 52px;
        padding-bottom: 32px;
        box-sizing: border-box;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.8);
        transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.5s ease-in-out;
        position: sticky;
        top: 0;
        z-index: 600;
    }

    .advertising .mobility-cta-box .mobility-cta-inner,
    .advertising .commerce-cta-box .mobility-cta-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-left: 2px;
        padding-right: 5px;
    }

    .advertising .mobility-cta-box .mobility-cta-button,
    .advertising .commerce-cta-box .mobility-cta-button {
        width: auto;
        min-width: 300px;
    }

    .advertising .box .photos {
        position: flex; /* This should be changed to position: relative; */
        display: inline-block;
        overflow: hidden; /* Ensure any overflowing part of the image is hidden */
        width: 100%; /* Adjust as needed */
        float: left; /* Align the element to the left */
        box-shadow: 0 0 3px rgba(0, 0, 0, 0);
        transition: opacity 0.5s ease-in-out; /* Add transition for opacity */
        border-radius: 10px; /* Rounds the corners slightly */
        max-height: 350px;
    }

    .full-container.visible {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 99%;
        max-height: 100vh; /* 90% of the viewport height */
        background-color: var(--page-background); /* Adjust background color and transparency */
        overflow-y: scroll;
        scrollbar-width: auto;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        padding: 10px;
        border-radius: 12px; /* Rounded corners */
    }

    .full-container.visible::-webkit-scrollbar {
        width: 12px;
    }

    .full-container.visible::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
    }

    .full-container.visible::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 999px;
    }
    
    .full-container {
        transition: max-height 0.3s ease-out;
        max-height: 0;
        overflow: hidden;
    }

    .advertising.hidden {
        max-height: 0; /* Set max-height to 0 when hidden */
        opacity: 0; /* Initially set opacity to 0 */
        pointer-events: none; /* Disable pointer events for hidden elements */
    }
    
    .advertising:not(.hidden) {
        max-height: 100%; /* Set max-height to the desired value when visible */
        opacity: 1; /* Set opacity to 1 when visible */
    }
    
    .advertising .search {
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        margin-bottom: 20px; /* Adjust margin for spacing */
        flex-direction: column;
        justify-content: flex-start;
    }

    .photos.expanded {
        position: fixed; /* Fixed position relative to the viewport, not parent */
        top: 50%;
        left: 50%;
        width: 90vw; /* Full viewport width */
        height: 60vh; /* Full viewport height */
        transform: translate(-50%, -50%); /* Center the div */
        z-index: 9000000; /* Ensure it is above other content */
        height: 500px;
    }

    #photosResponsive {
        padding: 1px !important
    }
    
}

@media only screen and (min-width: 550px) and (max-width: 800px) {
    .search-container2 {
        position: fixed;
    }
}

@media only screen and (max-width: 650px){
    #photosResponsive {
        margin-top: 70px;
    }
}

.full-container .carousel-inner {
    border-radius: 20px;
}

.full-container-scroll-top {
    position: fixed;
    left: 16px;
    top: 16px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, var(--primary-color) 24%);
    background: color-mix(in srgb, var(--surface-elevated, var(--page-background)) 92%, var(--primary-color) 8%);
    color: var(--text-primary);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--shadow-color) 28%, transparent);
    cursor: pointer;
    z-index: 12;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.full-container-scroll-top i {
    font-size: 1.6rem;
    line-height: 1;
}

.full-container-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.full-container-scroll-top:hover,
.full-container-scroll-top:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--surface-elevated, var(--page-background)) 86%);
    border-color: color-mix(in srgb, var(--primary-color) 34%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-color) 34%, transparent), 0 14px 28px color-mix(in srgb, var(--shadow-color) 34%, transparent);
    outline: none;
}

:root[data-theme="dark"] .full-container-scroll-top {
    background: color-mix(in srgb, var(--surface-elevated, var(--page-background)) 88%, var(--primary-color) 12%);
    color: color-mix(in srgb, var(--text-primary) 92%, var(--text-secondary) 8%);
    border-color: color-mix(in srgb, var(--border-color) 66%, var(--primary-color) 34%);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--shadow-color) 54%, transparent);
}

:root[data-theme="dark"] .full-container-scroll-top:hover,
:root[data-theme="dark"] .full-container-scroll-top:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 18%, var(--surface-elevated, var(--page-background)) 82%);
    border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .full-container-scroll-top {
        background: color-mix(in srgb, var(--surface-elevated, var(--page-background)) 88%, var(--primary-color) 12%);
        color: color-mix(in srgb, var(--text-primary) 92%, var(--text-secondary) 8%);
        border-color: color-mix(in srgb, var(--border-color) 66%, var(--primary-color) 34%);
        box-shadow: 0 12px 26px color-mix(in srgb, var(--shadow-color) 54%, transparent);
    }

    :root:not([data-theme="light"]) .full-container-scroll-top:hover,
    :root:not([data-theme="light"]) .full-container-scroll-top:focus-visible {
        background: color-mix(in srgb, var(--primary-color) 18%, var(--surface-elevated, var(--page-background)) 82%);
        border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
    }
}

.announcePhotos .active{
    z-index: 2;
}

@media only screen and (min-width: 1218px) {

    .full-container-scroll-top {
        display: none !important;
    }

    .pagination-horizontal {
        width: 85%;
        background-color: var(--page-background);
        z-index: 2;
        margin-left: 7.5%;
    }

    .container-div {
        width: 100%;
        max-width: 1200px;
        flex-direction: row; /* Switch to row */
        flex-wrap: wrap; /* Allow wrapping to next line if needed */
        justify-content: flex-start;
        margin-left: 0%; /* Push the container 70% to the left */
        margin-top:3px;
        transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.5s ease-in-out;
        scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0); /* Gray color for thumb and transparent color for track */
    }

    .search-container2 {
        position: relative; /* Add this to make suggestions positioned relative to this container */
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Center the contents vertically */
        width: 600px;
        padding: 20px;
        min-width: 380px;
        height: 85%;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0); /* Gray color for thumb and transparent color for track */
        border-radius: 8px;
        background-color: var(--page-background);
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
        z-index: 10000;
        /* margin-top: 25px; */
    }

    .search-container2 h1 {
        margin-top: 2px;
        margin-bottom: 4px;
    }

    .search-container2.hidden {
        max-height: 10; /* Set max-height to 0 when hidden */
        opacity: 0; /* Initially set opacity to 0 */
        pointer-events: none; /* Disable pointer events for hidden elements */
    }

    .close-btn {
        top: 10px;
        right: 5px;
    }

    .top-right {
        top: 10px !important;
        right: 20px !important;
    }
    
    .full-container.visible {
        position: fixed;
        inset: 0;
        transform: none;
        width: 100vw;
        max-width: none;
        max-height: 100vh;
        background-color: var(--page-background);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px 0 18px;
        border-radius: 0;
        box-sizing: border-box;
        scrollbar-width: auto;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }

    .full-container.visible::-webkit-scrollbar {
        width: 14px;
    }

    .full-container.visible::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
    }

    .full-container.visible::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 999px;
    }

    .full-container.visible > :not(#backBtn) {
        width: min(100%, 1200px);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    
    .full-container {
        transition: max-height 0.3s ease-out;
        max-height: 0;
        overflow: hidden;
    }

    .photos {
        position: relative;
        display: inline-block;
        overflow: hidden; /* Ensure any overflowing part of the image is hidden */
        width: 70%; /* Adjust as needed */
        height: 300px; /* Adjust as needed */
        transition: all 0.3s ease;
        cursor: pointer;
        margin: 0 auto;
        max-height: 350px;
    }

    .photos.expanded {
        position: fixed; /* Fixed position relative to the viewport, not parent */
        top: 50%;
        left: 50%;
        width: 60vw; /* Full viewport width */
        height: 90vh; /* Full viewport height */
        transform: translate(-50%, -50%); /* Center the div */
        z-index: 9000000; /* Ensure it is above other content */
        height: 90%;
        max-height: 90%;
    }

    .announcePhotos {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%; /* Fixed minimum width */
        max-width: 100%; /* Fixed maximum width */
        min-height: 100%; /* Fixed minimum height */
        max-height: 100%; /* Fixed maximum height */
        object-fit: cover; /* Image is cut off to fill the container without distortion */
        object-position: center; /* Center the image within the container */
        transition: transform 0.5s ease-in-out; /* Smooth transition effect */
        max-width: 100%;
        height: auto;
        display: block;
    }

    .announce-container {
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 20px;
    }

    .advertising.hidden {
        max-height: 0; /* Set max-height to 0 when hidden */
        opacity: 0; /* Initially set opacity to 0 */
        pointer-events: none; /* Disable pointer events for hidden elements */
    }
    
    .advertising:not(.hidden) {
        max-height: 100%; /* Set max-height to the desired value when visible */
        opacity: 1; /* Set opacity to 1 when visible */
    }
    
    .advertising .search {
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        margin-bottom: 20px; /* Adjust margin for spacing */
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .advertising .search #search-bar {
        width: 300px;
        padding: 10px;
        border: none;
        border-radius: 5px;
    }
    
    .advertising .box {
        width: 24.5%;
        /* height: 100%; */
        padding: 2px;
        border-radius: 12px;
        text-align: right;
        transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.5s ease-in-out;
        cursor: pointer;
    }

    .advertising .mobility-cta-box,
    .advertising .commerce-cta-box {
        width: 100% !important;
        flex: 0 0 100%;
        text-align: left;
        cursor: default;
        padding: 3px;
        padding-top: 32px;
        padding-bottom: 26px;
        box-sizing: border-box;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.8);
        transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.5s ease-in-out;
        position: sticky;
        top: 0;
        z-index: 600;
    }

    .advertising .mobility-cta-box .mobility-cta-inner,
    .advertising .commerce-cta-box .mobility-cta-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding-left: 2px;
        padding-right: 5px;
    }

    .advertising .mobility-cta-box .mobility-cta-button,
    .advertising .commerce-cta-box .mobility-cta-button {
        width: auto;
        min-width: 300px;
    }
    
    /* Adjusted hover effect to avoid scaling issues */
    /* .advertising .box:hover {
        transform: translateY(-2px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
        opacity: 0.95;
    } */

    .advertising .box .photos {
        position: flex; /* This should be changed to position: relative; */
        display: inline-block;
        overflow: hidden; /* Ensure any overflowing part of the image is hidden */
        width: 100%;
        float: left; /* Align the element to the left */
        box-shadow: 0 0 3px rgba(0, 0, 0, 0);
        transition: opacity 0.5s ease-in-out; /* Add transition for opacity */
        border-radius: 10px; /* Rounds the corners slightly */
    }

    .advertising2 {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.8);
        width: 100%;
        max-height: 100vh;
        max-width: 100%;
        overflow: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0);
        z-index: 0;
        transition: width 0.4s ease; /* Smoother transition */
    }

    .advertising2-boxes {
        display: flex; /* Ativa o Flexbox */
        flex-wrap: wrap; /* Permite que os elementos se ajustem para a próxima linha quando necessário */
        justify-content: space-between; /* Distribui os itens igualmente com espaçamento */
        align-items: center; /* Alinha os itens verticalmente */
        height: 100% !important;
        max-width: 100%;
        overflow: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 rgba(0, 0, 0, 0);
        z-index: 0;
    }
    
    .advertising2-boxes > * {
        flex: 0 1 calc(50% - 10px); /* Cada item ocupa 50% do container, com espaçamento de 10px entre eles */
        margin-bottom: 10px; /* Espaçamento inferior entre os itens */
    }
    
    .advertising2-boxes .box {
        height: 355px;
        padding: 5px; /* Slightly more padding for better spacing */
        border-radius: 12px; /* Softer, more modern corner rounding */
        text-align: center; /* Centraliza o conteúdo horizontalmente */
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); /* Softer shadow for depth */
        transition: transform 0.3s ease, opacity 0.5s ease-in-out; /* Smooth animations */
        cursor: pointer; /* Indicates interactivity */
    }
    
    .advertising2-boxes .box .photos {
        position: relative; /* Corrigido de "flex" para "relative" */
        display: inline-block; /* Garante que o elemento respeite o text-align */
        overflow: hidden; /* Garante que partes da imagem que extrapolem sejam ocultadas */
        width: 100%; /* Ajuste conforme necessário */
        height: 280px; /* Ajuste conforme necessário */
        transition: opacity 0.5s ease-in-out; /* Adiciona transição para opacidade */
        border-radius: 10px; /* Arredonda levemente os cantos */
    }
    
    .advertising2-boxes .box .photos:hover {
        transform: scale(1.02); /* Slightly enlarge on hover */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
    }

    .advertising2 .box .photos:hover {
        transform: scale(1.02); /* Slightly enlarge on hover */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
    }

    .advertising .box .photos:hover {
        transform: scale(1.02); /* Slightly enlarge on hover */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
    }
    
}

@media only screen and (max-width: 650px) {
    .top-right {
        top: 70px !important;
        right: 5px !important;
    }
}



.tooltip {
    position: absolute;
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 2000;
}

/* #anounce img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto 20px;
    border-radius: 5px;
} */

#anounce p {
    margin-bottom: 10px;
}

#contact {
    margin-top: 20px;
}

.close-btn2 {
    background-color: #ff4444;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

#features {
    width: 100%;
}

#share-info {
    width: 100%;
}

#specification {
    position:relative;
    flex: 1;
    width: 100%;
    max-width: 100%;
}

.button-container {
    position: absolute;      /* Position relative to parent container */
    bottom: 15px;            /* Fix at the bottom with some spacing */
    left: 50%;               /* Center horizontally */
    transform: translateX(-50%);
    width: 93%;              /* Adjust button width as needed */
}

.table-row {
    display: flex;
    align-items: center; /* Align items vertically */
}

.table-cell {
    flex: 1; /* Each cell takes equal space */
    padding: 1px; /* Adjust padding as needed */
    width: 60%;
}

.table-cell:first-child {
    text-align: left; /* Align the first cell content to the right */
}

/* Optional styling */
.label {
    font-weight: bold;
    color: #333;
}

.default-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.default-button:hover {
    background-color: #0056b3;
}

.highlight {
    border: 2px solid red; /* Borda vermelha para campos obrigatórios não preenchidos */
    background-color: #fdd; /* Fundo vermelho claro opcional */
}

.error-message {
    display: none; /* Inicialmente escondido */
    color: red; /* Cor do texto da mensagem de erro */
    font-size: 12px; /* Tamanho da fonte */
    margin-top: 5px; /* Espaço acima da mensagem */
}

.price-container {
    display: flex;
    align-items: center; /* Alinha verticalmente os itens no centro */
    width: 100%;
}

.price-label {
    display: block; /* Para garantir que o texto e o input fiquem em linha */
}

.price-range {
    -webkit-appearance: none;
    vertical-align: middle; /* Alinha verticalmente com o texto */
    width: 100%; /* Ocupa toda a largura disponível */
    appearance: none; /* Remove o estilo padrão do input */
    height: 8px; /* Altura da trilha do slider */
    background: var(--slider-track-soft); /* Cor neutra para a trilha */
    border-radius: 5px; /* Bordas arredondadas da trilha */
    outline: none; /* Remove o contorno ao focar */
    transition: background 0.3s; /* Transição suave da cor do fundo */
}

.price-range::-webkit-slider-thumb {
    appearance: none; /* Remove o estilo padrão do thumb */
    width: 15px; /* Largura do thumb */
    height: 15px; /* Altura do thumb */
    background: var(--slider-thumb-solid); /* Cor do thumb */
    border-radius: 50%; /* Thumb arredondado */
    cursor: pointer; /* Muda o cursor ao passar sobre o thumb */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra leve */
}

.price-range::-moz-range-thumb {
    width: 15px; /* Largura do thumb */
    height: 20px; /* Altura do thumb */
    background: var(--slider-thumb-solid); /* Cor do thumb */
    border-radius: 20px; /* Thumb arredondado */
    cursor: pointer; /* Muda o cursor ao passar sobre o thumb */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra leve */
}

.price-range::-ms-thumb {
    width: 15px; /* Largura do thumb */
    height: 15px; /* Altura do thumb */
    background: var(--slider-thumb-solid); /* Cor do thumb */
    border-radius: 20px; /* Thumb arredondado */
    cursor: pointer; /* Muda o cursor ao passar sobre o thumb */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra leve */
}

.price-range:hover {
    background: var(--slider-track-soft-hover); /* Cor da trilha ao passar o mouse */
}

.price-input {
    display: block;
    width: 45%; /* Define uma largura fixa para o campo de texto */
    margin-left: 10px; /* Adiciona um espaçamento à esquerda do campo de texto */
    margin-right: 10px; /* Adiciona um espaçamento à esquerda do campo de texto */
    padding: 10px;
    color: #555555; /* Cor do texto neutra */
    border: 1px solid #7e319c; /* Borda cinza fina */
    border-radius: 25px; /* Bordas arredondadas */
    font-size: 14px;
}

.change-image {
    position: absolute;
    top: 50%;
    /* transform: translateY(-50%); */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10; /* Ensures the buttons are above the image */
}

.change-image-left {
    position: absolute;
    top: 50%;
    /* transform: translateY(-50%); */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10; /* Ensures the buttons are above the image */
    left: 10px; /* Adjust the distance from the left edge */
    border-radius: 5px;
}

.change-image-rigth {
    position: absolute;
    top: 50%;
    /* transform: translateY(-50%); */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10; /* Ensures the buttons are above the image */
    right: 10px; /* Adjust the distance from the right edge */
    border-radius: 5px;
}

.change-image-left:hover {
    transform: scale(1.1); /* Slightly increase size on hover */
    background-color: rgba(0, 0, 0, 0.2); /* Increase opacity on hover */
}

.change-image-rigth:hover {
    transform: scale(1.1); /* Slightly increase size on hover */
    background-color: rgba(0, 0, 0, 0.2); /* Increase opacity on hover */
}

#prevBtn {
    left: 10px; /* Adjust the distance from the left edge */
}

#nextBtn {
    right: 10px; /* Adjust the distance from the right edge */
}

#nextBtn {
    right: 10px; /* Adjust the distance from the right edge */
}

#inputFotos {
    display: block;
    margin-bottom: 20px;
}

#fotosPreview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#fotosPreview img {
    width: 100px; /* Fixed width */
    height: 100px; /* Fixed height */
    object-fit: cover; /* Ensure the image is not distorted */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for elegance */
}

.divider {
    border: none; /* Remove default border */
    margin: 10px auto; /* Space above and below the line, centered horizontally */
    width: 100%; /* Reduce width to 80% */
    transition: border-top 0.3s ease-in-out; /* Smooth transition effect */
}

.price {
    font-size: 1.55rem;
    font-weight: bold;
    color: #05111e;
    margin: 10px 0;
}

:root[data-theme="dark"] .price {
    color: color-mix(in srgb, var(--text-primary) 74%, var(--text-secondary) 26%);
}

:root[data-theme="dark"] .price h3 {
    color: color-mix(in srgb, var(--text-primary) 80%, var(--text-secondary) 20%);
}

:root[data-theme="dark"] .price h5 {
    color: color-mix(in srgb, var(--text-primary) 62%, var(--text-secondary) 38%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .price {
        color: color-mix(in srgb, var(--text-primary) 74%, var(--text-secondary) 26%);
    }

    :root:not([data-theme="light"]) .price h3 {
        color: color-mix(in srgb, var(--text-primary) 80%, var(--text-secondary) 20%);
    }

    :root:not([data-theme="light"]) .price h5 {
        color: color-mix(in srgb, var(--text-primary) 62%, var(--text-secondary) 38%);
    }
}

.fullscreen-overlay {
    position: fixed; /* Fixes the div relative to the viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-color: rgba(0, 0, 0, 0.91); /* Black background with 91% opacity */
    z-index: 10000; /* Ensure it's above other elements */
}

.sort-section {
    margin-bottom: 10px;
    border: none; /* Ensures the div itself has no border */
}

.sort-section label {
    font-size: 16px;
    margin-right: 10px;
}

#sortOptions {
    padding: 10px;
    font-size: 16px;
    margin-bottom: 10px;
}
  
.page-btn {
    background-color: transparent; /* Fundo transparente */
    color: #555555; /* Cor do texto neutra */
    border: 1px solid #cccccc; /* Borda cinza fina */
    border-radius: 25px; /* Bordas arredondadas */
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  }
  
  .page-btn:hover {
    background-color: #f0f0f0; /* Leve preenchimento ao passar o mouse */
    color: #333333; /* Cor do texto mais escura */
    border-color: #999999; /* Borda mais escura ao passar o mouse */
  }
  
  .page-btn:focus {
    outline: none;
    border-color: #666666; /* Destaque ao focar */
  }

  /* Custom CSS for the marker */
  .custom-marker {
    position: relative;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, border 0.3s ease; /* Smooth transition */
}

/* On hover, scale up and change border color */
.custom-marker:hover {
    transform: scale(1.2); /* Make the icon and circle bigger */
}

.box p {
    margin: 5px 0;
    color: #666;
}

.sidebar-box {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    cursor:pointer;
}

.box-title {
    font-size: 1 rem;
    color: #333;
    margin: 10px 0;
    text-align: left;
}

/* CTA (configurar deslocamento) - não deve se comportar como item do grid */
.mobility-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.mobility-cta-button {
    width: 100%;
    border: 1px solid #7e319c;
    background: linear-gradient(135deg, #7e319c 0%, #6a2b85 100%);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 9px rgba(126, 49, 156, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.mobility-cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 11px rgba(126, 49, 156, 0.20);
    filter: brightness(1.04);
}

.mobility-cta-button:active {
    transform: translateY(0);
    box-shadow: 0 6px 11px rgba(126, 49, 156, 0.20);
}

.mobility-cta-button:focus-visible {
    outline: 3px solid rgba(126, 49, 156, 0.2);
    outline-offset: 2px;
}

.address {
    color: color-mix(in srgb, var(--text-primary) 62%, var(--text-secondary) 38%);
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: left;
}

.address.address-primary {
    color: #666;
}

.observation {
    display: none;
    color: #888; /* Cor que normalmente se assemelha ao placeholder */
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: left;
}

.observation2 {
    font-size: 0.875rem;
    color: #686767;
    margin-top: 10px;
    text-align: left;
}

.carousel-control-next-icon-black{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 11-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708z'/%3E%3C/svg%3E") !important;
}

.carousel-control-prev-icon-black{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 11-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z'/%3E%3C/svg%3E") !important;
}

/* General styles for both next and previous icons */
.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 42px; /* Increase size */
    height: 42px;
    background-color: rgba(0, 0, 0, 0.3); /* Add dark background for contrast */
    border-radius: 50%; /* Make icons round */
    background-size: 70%; /* Ensure icons are well-sized within the circle */
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Add slight zoom effect on hover */
.carousel-control-next:hover .carousel-control-next-icon,
.carousel-control-prev:hover .carousel-control-prev-icon {
    background-color: rgba(0, 0, 0, 1); /* Make background fully opaque on hover */
    transform: scale(1.1); /* Zoom the icon slightly */
}

.star-container {
    justify-content: end;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Estilo das estrelas */
.star {
    color: var(--stars-color, rgb(138, 43, 226));
    font-size: 20px;
}

:root[data-theme="dark"] .star {
    color: var(--stars-color, rgb(138, 43, 226));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .star {
        color: var(--stars-color, rgb(138, 43, 226));
    }
}

.filled {
    color: var(--stars-color, rgb(138, 43, 226));
}


.half {
    color: rgba(138, 43, 226, 0.5);
}

/* Descrição ao lado das estrelas */
.description {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #333;
}

.favorite-heart svg {
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

.favorite-heart:hover svg {
    transform: scale(1.3); /* Increase size by 30% */
}

.carousel-control-prev-icon{
    max-height: 42px;
}

.carousel-control-next-icon{
    max-height: 42px;
}

.carousel-control-next {
    right: 1%;
}

.carousel-control-prev {
    left: 1%;
}

.share-section {
    width: 100%;
    padding: 20px;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    font-family: 'Open Sans', sans-serif;
}

.share-text {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 10px;
}

.share-icons {
    display: flex;
    flex-direction: row; /* Stack items vertically */
    gap: 2px; /* Add space between items */
    align-items: flex-start; /* Align items to the left (or center, if preferred) */
}

.share-button svg {
    width: 16px;
    height: 16px;
    fill: currentColor; /* Ensure the SVG inherits the text color */
}

.share-button span {
    line-height: 1; /* Ensures text aligns well */
}

.share-button {
    display: flex;
    align-items: center; /* Align icon and text vertically */
    gap: 8px; /* Add spacing between icon and text */
    background-color: color-mix(in srgb, var(--surface-elevated, var(--page-background)) 82%, transparent);
    color: color-mix(in srgb, var(--text-primary) 78%, var(--text-secondary) 22%);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.share-button:hover,
.share-button:focus-visible {
    background-color: color-mix(in srgb, var(--primary-color) 10%, var(--surface-elevated, var(--page-background)) 90%);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary-color) 24%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-color) 42%, transparent);
    outline: none;
}

.share-button:active {
    transform: translateY(1px);
}

:root[data-theme="dark"] .share-button {
    background-color: color-mix(in srgb, var(--surface-elevated, var(--page-background)) 92%, var(--primary-color) 8%);
    color: color-mix(in srgb, var(--text-primary) 88%, var(--text-secondary) 12%);
    border-color: color-mix(in srgb, var(--border-color) 72%, var(--primary-color) 28%);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--shadow-color) 42%, transparent);
}

:root[data-theme="dark"] .share-button:hover,
:root[data-theme="dark"] .share-button:focus-visible {
    background-color: color-mix(in srgb, var(--primary-color) 16%, var(--surface-elevated, var(--page-background)) 84%);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary-color) 38%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-color) 36%, transparent), 0 10px 24px color-mix(in srgb, var(--shadow-color) 58%, transparent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .share-button {
        background-color: color-mix(in srgb, var(--surface-elevated, var(--page-background)) 92%, var(--primary-color) 8%);
        color: color-mix(in srgb, var(--text-primary) 88%, var(--text-secondary) 12%);
        border-color: color-mix(in srgb, var(--border-color) 72%, var(--primary-color) 28%);
        box-shadow: 0 6px 14px color-mix(in srgb, var(--shadow-color) 42%, transparent);
    }

    :root:not([data-theme="light"]) .share-button:hover,
    :root:not([data-theme="light"]) .share-button:focus-visible {
        background-color: color-mix(in srgb, var(--primary-color) 16%, var(--surface-elevated, var(--page-background)) 84%);
        color: var(--text-primary);
        border-color: color-mix(in srgb, var(--primary-color) 38%, var(--border-color));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-color) 36%, transparent), 0 10px 24px color-mix(in srgb, var(--shadow-color) 58%, transparent);
    }
}
  
/* Style for the buttons container */
.buttons-container {
    display: flex; /* Default to horizontal layout */
    gap: 10px; /* Add spacing between the buttons */
}

/* Style for each button */
.buttons-container button {
    flex: 1 1 300px; /* Buttons take full width on small screens but can grow on larger screens */
}

#share-info-div{
    width: 100%;
    max-height: 220px;
    display: flex; /* Enable side-by-side layout */
    align-items: center; /* Vertically align items */
    gap: 20px; /* Add space between the two containers */
}

#details p {
    margin-bottom: 10px;
}


#details p {
    margin-bottom: 10px;
}

.qr-code-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


@media (min-width: 1218px) {

    .qr-code-container {
        max-width: 220px;
        max-height: 180px;
    }

    #share-info-div{
        position: relative;
        left: 106%; /* Move a div para a direita do pai */
        transform: translateX(-94%); /* Ajusta para alinhar corretamente */
        width: 300px;
        margin-top:5px;
        margin-bottom:5px
    }

    #details {
        position:relative;
        flex: 1;
        padding-right: 0px;
        max-width: 100%; /* Ensures the content doesn't exceed the container's width */
        text-align: right;
    }
}

/* Media query for mobile view (below 768px screen width) */
@media (max-width: 1218px) {

    .qr-code-container {
        max-width: 100%;
        max-height: 180px;
    }

    #details {
        position:relative;
        flex: 1;
        max-width: 100%; /* Ensures the content doesn't exceed the container's width */
    }

    .buttons-container {
        flex-direction: column; /* Stack buttons vertically on mobile */
        align-items: center; /* Center the buttons */
    }

    .buttons-container {
        flex-direction: column; /* Stack buttons vertically on mobile */
        align-items: center; /* Center the buttons */
    }

    .half-div-buttons {
        width: 100%;
    }

    #share-info-div{
        position: relative;
        margin-bottom:5px;
        margin-top:5px;
    }
}

.alert-main {
    display: flex;
    align-items: center;
}

.alert-section {
    margin: 0.5rem auto;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    /* background-color: #F3E5F5; */
    border: 1px solid var(--partner-section-border, #7E57C2);
    border-radius: 0.5rem;          /* cantos arredondados */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: left;
    /* margin-left: 20px;
    width: calc(100% - 40px); */
}

.alert-text {
    margin: 0;
    color: var(--partner-section-text-primary, rgb(74, 20, 140));
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.alert-subtext {
    margin: 0;
    margin-top: 0.5rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;       /* menor que o texto principal */
    line-height: 1.4;
    color: var(--text-secondary);
    opacity: 0.8;              /* sutilização */
}

.about-advertiser-title,
.announce-main-title,
.announce-property-title,
.announce-street-title {
    color: var(--heading-color);
}

.announce-location-meta {
    color: var(--text-secondary);
}

.about-advertiser-section a {
    color: var(--primary-color);
}

.about-advertiser-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    row-gap: 16px;
    align-items: center;
}

.about-advertiser-section > .about-advertiser-title,
.about-advertiser-section > .alert-section {
    grid-column: 1 / -1;
}

.about-advertiser-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: center;
    width: auto;
    margin-top: 0;
}

.about-advertiser-contact-button {
    width: 289px;
    max-width: 100%;
}

.pagination-horizontal-wrapper {
    width: 100%;
}

.inline-footer-bottom {
    border-top: 1px solid var(--footer-border);
    padding-top: 20px;
    text-align: center;
    color: var(--footer-text-muted);
}

.inline-footer-copyright {
    margin: 0;
    color: inherit;
}

.pagination-footer-bottom {
    width: min(100%, 95%);
    margin: 18px auto 0;
}

:root[data-theme="dark"] .alert-section {
    background: var(--surface-elevated);
    border-color: var(--border-color);
    box-shadow: 0 2px 6px color-mix(in srgb, #000 35%, transparent);
}

:root[data-theme="dark"] .about-advertiser-title,
:root[data-theme="dark"] .announce-main-title,
:root[data-theme="dark"] .alert-text {
    color: var(--text-primary);
}

:root[data-theme="dark"] .announce-location-meta,
:root[data-theme="dark"] .alert-subtext {
    color: var(--text-secondary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-section {
        background: var(--surface-elevated);
        border-color: var(--border-color);
        box-shadow: 0 2px 6px color-mix(in srgb, #000 35%, transparent);
    }

    :root:not([data-theme="light"]) .about-advertiser-title,
    :root:not([data-theme="light"]) .announce-main-title,
    :root:not([data-theme="light"]) .alert-text {
        color: var(--text-primary);
    }

    :root:not([data-theme="light"]) .announce-location-meta,
    :root:not([data-theme="light"]) .alert-subtext {
        color: var(--text-secondary);
    }
}

@media only screen and (max-width: 1218px) {
    .about-advertiser-section {
        display: block;
    }

    .about-advertiser-action-row {
        justify-content: stretch;
        width: 100%;
        margin-top: 16px;
    }

    .about-advertiser-contact-button {
        width: 100%;
    }
}

.watermark {
    display: none; /* Oculta inicialmente */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg); /* Centraliza e inclina */
    font-size: 72px;
    color: rgba(0, 0, 0, 0.13); /* Muito transparente */
    pointer-events: none; /* Deixa a marca d'água "invisível" para interações */
    user-select: none;    /* Não permite seleção de texto */
    z-index: 9999;
    white-space: nowrap;
}

@media (min-width: 1218px) {
    .star-container2 {
        justify-content: flex-end; /* Alinhar à direita em telas maiores (computadores) */
    }

    .alert-section {
        margin-right: 0;
    }

    .watermark {
        font-size: 72px;
    }

    #tabela-custos{
        position: relative;
        left: 96%;
        transform: translateX(-94%);
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

@media (max-width: 1218px) {
    .star-container2 {
        justify-content: flex-start; /* Alinhar à esquerda em telas menores */
    }
    .watermark {
        font-size: 48px;
    }
}

/* Search Section */
.search-section {
    padding: 5rem 0;
    position: relative;
}

.search-section h2 {
    text-align: center;
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 3rem;
    font-weight: 700;
}

.search-form {
    background: var(--white);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: var(--shadow);
    max-width: 800px;
    margin: 0 auto;
}

/* .form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fadeIn 0.5s ease;
} */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-step h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.input-group {
    position: relative;
    margin-bottom: 2rem;
}

.input-group label {
    display: block;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.input-group i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    z-index: 2;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.full-width {
    grid-column: 1 / -1;
}

.price-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
    background: linear-gradient(to right, var(--slider-track-base) 0%, var(--slider-track-base) 100%);
  outline: none;
  opacity: 0.9;
  transition: all 0.3s ease;
  cursor: pointer;
  margin: 16px 2% 1px 2%;
}

.price-range:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.price-range:focus {
    outline: 2px solid var(--slider-focus-outline);
  outline-offset: 2px;
}

.price-container .bi-dash-circle-fill,
.price-container .bi-plus-circle-fill {
    color: var(--slider-step-icon-color, var(--slider-thumb-solid));
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.price-container .bi-dash-circle-fill:hover,
.price-container .bi-plus-circle-fill:hover {
    opacity: 0.9;
    transform: scale(1.08);
}

.price-container .bi-dash-circle-fill:focus-visible,
.price-container .bi-plus-circle-fill:focus-visible {
    outline: 2px solid var(--slider-focus-outline);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Estilo do thumb (botão deslizante) */
.price-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-top: -8px;
    background: var(--slider-thumb-fill);
  cursor: pointer;
  border: 3px solid #ffffff;
  transition: all 0.2s ease;
}

.price-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
    background: var(--slider-thumb-hover-fill);
}

.price-range::-webkit-slider-thumb:active {
  transform: scale(1.05);
}

/* Estilo para Firefox */
.price-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 0%;
  margin-top: -8px; /* Centraliza o thumb na trilha de 8px */
    background: var(--slider-thumb-fill);
  cursor: pointer;
  border: 3px solid #ffffff;
  transition: all 0.2s ease;
}

.price-range::-moz-range-thumb:hover {
  transform: scale(1.1);
    background: var(--slider-thumb-hover-fill);
}

/* Estilo da trilha para Firefox */
.price-range::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
    background: linear-gradient(to right, var(--slider-track-base) 0%, var(--slider-track-base) 100%);
  border-radius: 4px;
  border: none;
}

/* Estilo da trilha preenchida (progresso) */
.price-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
    background: var(--slider-track-fill);
  border-radius: 4px;
  border: none;
}

/* Versão alternativa com JavaScript para mostrar progresso dinâmico */
.price-range.with-progress {
  background: #e5e7eb;
}

.price-range.with-progress::-webkit-slider-runnable-track {
  background: #e5e7eb;
}

/* Container para melhor apresentação */
.price-range-container {
  position: relative;
  padding: 20px 0;
  margin: 0 2%;
}

.price-range-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to right, #7e319c 0%, #6a2b85 var(--progress, 75%), #e5e7eb var(--progress, 75%), #e5e7eb 100%);
  border-radius: 4px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: -1;
}

/* Labels e valores */
.price-range-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.price-range-value {
  background: linear-gradient(135deg, #7e319c 0%, #6d28d9 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(139, 69, 193, 0.2);
}

/* Responsividade */
@media (max-width: 768px) {
  
  .price-range::-webkit-slider-thumb {
    margin-top: -3px;
    width: 16px;
    height: 16px;
  }
  
  .price-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
  }
  
  .price-range-container {
    margin: 0 4%;
  }
}

/* Animação suave para mudanças de valor */
@keyframes valueChange {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.price-range-value.animate {
  animation: valueChange 0.3s ease;
}

.announce-container .photos {
    height: 550px;
    max-height: 550px;
}

/* AI Warning Box Style */
.gc-ai-warning {
    background-color: color-mix(in srgb, var(--status-warning) 12%, var(--surface-elevated));
    border-left: 4px solid var(--status-warning);
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.gc-ai-warning-icon {
    font-size: 1.2rem;
    margin-right: 10px;
    color: var(--status-warning);
}

.financing-criteria-list {
    display: grid;
    gap: 12px;
    margin: 18px 0;
}

.financing-summary-card {
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, var(--border-color));
    border-left-width: 5px;
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 9%, var(--surface-elevated)) 0%, var(--surface-elevated) 100%);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.financing-summary-card .alert-main {
    align-items: flex-start;
    gap: 0.55rem;
}

.financing-summary-card .alert-main i {
    font-size: 1.15rem;
    margin-top: 0.1rem;
}

.financing-summary-card .alert-text {
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.4;
}

.financing-summary-card .alert-subtext {
    margin-top: 0.6rem;
    font-size: 0.96rem;
    line-height: 1.55;
    opacity: 1;
}

.financing-criteria-item,
.financing-estimate-card {
    border: 1px solid color-mix(in srgb, var(--primary-color) 16%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 6%, var(--surface-elevated));
    border-radius: 12px;
    padding: 14px 16px;
}

.financing-estimate-card--highlight {
    background: linear-gradient(135deg, var(--surface-background) 0%, color-mix(in srgb, var(--primary-color) 10%, var(--surface-elevated)) 100%);
}

.financing-criteria-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.financing-criteria-title,
.financing-estimate-title,
.financing-section-subtitle {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.financing-criteria-description,
.financing-estimate-details,
.financing-section-helper {
    margin: 8px 0 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.financing-estimate-range {
    margin: 10px 0 0;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 700;
}

.financing-estimate-card--highlight .financing-estimate-range {
    margin-top: 14px;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.financing-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.financing-status-pill i {
    font-size: 0.8rem;
}

.financing-status-pill[data-tone="success"] {
    color: var(--status-success-strong);
    background: color-mix(in srgb, var(--status-success) 15%, var(--surface-elevated));
    border-color: color-mix(in srgb, var(--status-success) 35%, var(--border-color));
}

.financing-status-pill[data-tone="warning"] {
    color: color-mix(in srgb, var(--status-warning) 84%, #000 16%);
    background: color-mix(in srgb, var(--status-warning) 14%, var(--surface-elevated));
    border-color: color-mix(in srgb, var(--status-warning) 30%, var(--border-color));
}

.financing-status-pill[data-tone="danger"] {
    color: color-mix(in srgb, var(--status-danger) 84%, #000 16%);
    background: color-mix(in srgb, var(--status-danger) 12%, var(--surface-elevated));
    border-color: color-mix(in srgb, var(--status-danger) 30%, var(--border-color));
}

.financing-status-pill[data-tone="neutral"] {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--surface-elevated));
    border-color: color-mix(in srgb, var(--primary-color) 22%, var(--border-color));
}

.financing-estimates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.financing-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.financing-cta-button {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    width: auto;
    min-width: 220px;
    padding-inline: 18px;
}

.financing-cta-button-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
}

.financing-cta-button-secondary:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--surface-elevated));
    color: var(--primary-color);
}

.financing-checklist {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.financing-checklist-disclosure {
    width: 100%;
}

.financing-checklist-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    margin: 0 0.5rem;
}

.financing-checklist-summary::-webkit-details-marker {
    display: none;
}

.financing-checklist-summary::after {
    content: '\25BE';
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.financing-checklist-disclosure[open] .financing-checklist-summary::after {
    transform: rotate(180deg);
}

.financing-checklist li + li {
    margin-top: 8px;
}

.financing-estimate-entry {
    margin: 10px 0 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
}

.financing-checklist-card {
    margin: 1rem 0 1.25rem;
}

.financing-alert-section {
    margin-top: 18px;
}

.financing-alert-estimates {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.financing-alert-estimate-item + .financing-alert-estimate-item {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.financing-alert-estimate-title {
    margin: 0;
    color: var(--text-primary);
    font-weight: 700;
}

@media (max-width: 768px) {
    .financing-criteria-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .financing-estimates-grid {
        grid-template-columns: 1fr;
    }

    .financing-cta-button {
        width: 100%;
    }
}

:root[data-theme="dark"] .gc-ai-warning {
    background-color: color-mix(in srgb, var(--status-warning) 16%, var(--surface-elevated));
    border-left-color: var(--status-warning);
    color: var(--text-primary);
}

:root[data-theme="dark"] .gc-ai-warning-icon {
    color: var(--status-warning);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .gc-ai-warning {
        background-color: color-mix(in srgb, var(--status-warning) 16%, var(--surface-elevated));
        border-left-color: var(--status-warning);
        color: var(--text-primary);
    }

    :root:not([data-theme="light"]) .gc-ai-warning-icon {
        color: var(--status-warning);
    }
}

/* Processing State Style */
.gc-processing-container {
    text-align: center;
    padding: 50px 20px;
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--shadow-color) 35%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--shadow-color) 24%, transparent);
    margin: 20px auto;
    color: var(--text-secondary);
    width: 100%;
}

.gc-spinner {
    border: 4px solid var(--surface-muted);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto;
}

:root[data-theme="dark"] .gc-processing-container {
    background-color: color-mix(in srgb, var(--surface-elevated) 90%, var(--surface-muted) 10%);
    border-color: var(--border-strong);
    color: color-mix(in srgb, var(--text-primary) 32%, var(--text-secondary) 68%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .gc-processing-container {
        background-color: color-mix(in srgb, var(--surface-elevated) 90%, var(--surface-muted) 10%);
        border-color: var(--border-strong);
        color: color-mix(in srgb, var(--text-primary) 32%, var(--text-secondary) 68%);
    }
}

.skeleton-box {
    position: relative; /* allow centered absolute spinner */
    background: linear-gradient(90deg, var(--surface-muted) 25%, var(--surface-background) 37%, var(--surface-muted) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: 8px;
    overflow: hidden; /* keep spinner inside the rounded box */
}

/* Skeleton / mock placeholders for advertise boxes to avoid layout jump */
.skeleton-box-spinner {
    position: relative; /* allow centered absolute spinner */
    background: linear-gradient(90deg, var(--surface-muted) 25%, var(--surface-background) 37%, var(--surface-muted) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: 8px;
    overflow: hidden; /* keep spinner inside the rounded box */
}

/* subtle centered spinner inside skeleton boxes (CSS-only, no JS required) */
.skeleton-box-spinner::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    /* translate + rotation baseline; keyframes will rotate the element */
    transform: translate(-50%, -50%) rotate(0deg);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    /* subtle ring: slightly darker than the skeleton background */
    border: 3px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
    border-top-color: color-mix(in srgb, var(--text-primary) 18%, transparent);
    box-sizing: border-box;
    pointer-events: none;
    /* light shadow so spinner is visible on very light backgrounds */
    filter: drop-shadow(0 0 0 rgba(0,0,0,0.00));
    animation: skeleton-spinner 1s linear infinite;
}

@keyframes skeleton-spinner {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .skeleton-box-spinner::after { animation: none; }
}

/* Slightly smaller spinner on very small screens */
@media (max-width: 420px) {
    .skeleton-box-spinner::after { width: 22px; height: 22px; border-width: 2px; }
}

@keyframes shimmer {
    0% { background-position: 200% 0 }
    100% { background-position: -200% 0 }
}

.mock-box { box-sizing: border-box; }
/* Photos placeholder: responsive fixed height so boxes keep proportion */
.mock-photos { width: 100%; border-radius: 8px; overflow: hidden; height: 180px; }
@media only screen and (min-width: 700px) {
    .mock-photos { height: 260px; }
}

:root[data-theme="light"] .mock-photos.skeleton-box-spinner {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
    background-size: 400% 100%;
}

/* Generic skeleton line used to simulate text blocks. Avoid inline styles. */
.mock-line { display: inline-block; height: 12px; margin-top: 8px; border-radius: 6px; vertical-align: middle; }
.mock-line.long { width: 70%; height: 20px; }
.mock-line.medium { width: 50%; height: 14px; }
.mock-line.short { width: 30%; height: 14px; }

/* Price container styling to match layout of real cards */
.mock-price { margin: 8px 0; }
.mock-price h2 { display: inline-block; margin: 0; vertical-align: middle; }

.mock-badge { display:inline-block; width:64px; height:20px; border-radius:10px; margin-left:6px; }

/* Wrapper for carousel images so pseudo-element spinner can render behind the <img> */
.img-wrapper {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent; /* default transparent; specific modifier below */
}

/* background color for this skeleton variant (does not change other skeleton instances) */
.img-wrapper.skeleton-white {
  background: var(--surface-background);     /* surface background for this solution */
  /* keep shimmer off for the white variant to be uniform */
  animation: none !important;
  background-image: none !important;
}

/* ensure spinner (::after on .skeleton-box) sits behind image */
.img-wrapper.skeleton-box::after {
  z-index: 0; /* behind img */
}

/* image sits above spinner and fades in when loaded */
.img-wrapper .carousel-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center !important;
  opacity: 0;
  transition: opacity 100ms ease-in;
  background-color: transparent;
}

.img-wrapper .carousel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px);
  transform: scale(1.1);
  opacity: 0.9;
  pointer-events: none;
}

/* when loaded, image becomes fully opaque (covers spinner) */
.img-wrapper .carousel-img.loaded {
  opacity: 1;
}

/* small fallback visual when image fails */
.img-wrapper.skeleton-error {
  background: #f5f5f5;
  animation: none !important;
}


@media only screen and (min-width: 550px) and (max-width: 800px){

    .photos {
        height: 230px;
    }
}

@media only screen and (max-width: 550px){

    .full-container .photos:not(.gc-box-responsive .photos) {
        height: 400px;
    }

    .full-container .container-div-horizontal .photos {
        height: 250px !important;
    }
    
    .photos {
        height: 260px;
    }

    .container-div {
        width: 100% !important;
    }

    .pagination-horizontal {
        width: 95% !important;
    }
}


/* Modalidade switch - minimal, targeted styles only.
     This block only affects the switch UI with id/class 'modalidade-switch' and its children.
     JS will compute the indicator width and transform at runtime; CSS provides layout and transitions.
*/
#modalidade-switch, .modalidade-switch {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px; /* small padding so indicator can inset */
    border-radius: 30px;
    background-color: var(--surface-background);
    border: 2px solid var(--border-color);
    width: 99%;
}

.modalidade-switch .switch-btn {
    position: relative;
    flex: 1 1 0;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: 30px;
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 300;
    text-align: center;
}


@media only screen and (max-width: 758px){

    .modalidade-switch .switch-btn {
        font-size: 11px;
    }
}

.modalidade-switch .switch-btn[aria-pressed="true"],
.modalidade-switch .switch-btn.active {
    color: var(--primary-contrast-text);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    box-shadow: none;
}

/* Sliding indicator - width/translate set by JS. Keep transitions here. */
.modalidade-switch .switch-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 30px;
    z-index: 1; /* behind buttons */
    transition: transform 220ms cubic-bezier(.2,.9,.3,1), width 220ms cubic-bezier(.2,.9,.3,1);
    will-change: transform, width;
}

.modalidade-switch .switch-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
    border-radius: 30px;
}

.modalidade-switch .switch-btn:focus-visible {
    outline: 2px solid var(--slider-focus-outline);
    outline-offset: 2px;
    border-radius: 30px;
}

.carousel-indicators [data-bs-target] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* NOVA CLASSE (não substitui outras existentes) */
.container-div-horizontal .box {
  box-sizing: border-box; /* importante para usar padding sem "estourar" a largura */
  /* flex: 0 0 30%; */
  min-width: 285px;
}

.container-div-horizontal .photos {
    width: 100%;
    height: 250px;
}

/* Responsivo: em telas menores, cada box ocupa 100% */
@media (max-width: 768px) {
  /* .container-div-horizontal .box {
    width: 100%;
    flex: 0 0 92%;
    min-width: 250px;
  } */
  
}

.container-div-horizontal {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.container-div-horizontal::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}


.chips-hide-scrollbar {
    display: flex;
    flex-flow: row;
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;

    /* Firefox */
    scrollbar-width: none;

    /* IE / Edge antigo */
    -ms-overflow-style: none;
}

.chips-hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.container-div {
    overflow-x: auto;

    /* Firefox */
    scrollbar-width: none;

    /* IE / Edge antigo */
    -ms-overflow-style: none;
}

.container-div::-webkit-scrollbar {
  display: none;
}

/* Position the suggestions absolute to the search container so width:100% matches the input row.
    Use transform:scaleX to animate only the horizontal dimension (no height changes). */
#searchBarContainer { position: relative; }

#suggestionsParent {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    overflow: hidden;
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 160ms linear;
    pointer-events: none;
    will-change: transform, opacity;
    max-width: 100%;
}

#suggestionsParent.suggestions-expanded {
    transform: scaleX(1);
    opacity: 1;
    pointer-events: auto;
}

/* Overlay shown while topbar suggestions are visible.
   Must not cover the fixed topbar nor the suggestions dropdown (overlay sits under z-index 1000). */
#topbarSuggestionsOverlay {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 85px; /* fallback; JS will adjust to the real topbar bottom */
    background: rgba(0, 0, 0, 0.85);
    z-index: 500;
    pointer-events: auto;
}

#topbarSuggestionsOverlay.active {
    display: block;
}

.box.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.voice-listening-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 9999;
}

.voice-listening-box {
    background: var(--surface-elevated);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 260px;
    max-width: 90vw;
    min-height: 260px;
}

.voice-pulse-circle {
    width: 100px;
    height: 100px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.voice-pulse-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(59, 130, 246, 0.8);
    animation: voice-pulse 1.6s ease-out infinite;
}

.voice-pulse-icon {
    font-size: 26px;
    color: var(--primary-color);
}

.voice-listening-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 0.2px;
}

/* Animação mais elegante */
@keyframes voice-pulse {
    0% {
        transform: scale(0.75);
        opacity: 0.9;
    }
    60% {
        transform: scale(1.45);
        opacity: 0;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

/* Ajustes finos para mobile */
@media (max-width: 480px) {
    .voice-listening-box {
        padding: 18px 20px;
        min-width: 240px;
    }

    .voice-pulse-circle {
        width: 60px;
        height: 60px;
    }

    .voice-pulse-icon {
        font-size: 22px;
    }

    .voice-listening-text {
        font-size: 14px;
    }
}

@media (max-width: 650px) {
    .containerDivParent {
        margin-top: 70px;
    }
}

.search-group-box {
    border: 2px solid color-mix(in srgb, var(--primary-color) 55%, transparent);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--surface-background) 0%, var(--surface-background) 100%);
    /* box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08); */
    padding: 10px;
}

.mobility-container{display:flex;gap:16px;flex-direction:column;align-items:stretch;width:100%;}
.mobility-left{flex:none;min-width:0;width:100%;}
.mobility-right{flex:none;min-width:0;width:100%;}
.mobility-transport-table{border-collapse:separate;border-spacing:0;width:100%;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;}
.mobility-transport-table tr:first-child{background:var(--surface-muted);}
.mobility-transport-table tr:first-child td{padding:12px 12px;font-size:13px;}
.mobility-transport-table td{padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.06);font-size:14px;}
.mobility-transport-table tr:last-child td{border-bottom:none;}
.mobility-row:hover{background:var(--surface-muted);}
.mobility-row.is-selected{background:color-mix(in srgb, var(--primary-color) 12%, var(--surface-background));}
.route-map{height:300px;border-radius:14px;margin-top:10px;border:1px solid rgba(0,0,0,.08);}

.route-details{margin-top:10px;border-radius:16px;padding:16px;background:var(--surface-background);border:1px solid rgba(0,0,0,.08);}
.route-details h3{margin:0 0 6px 0;font-size:16px;letter-spacing:.2px;}
.route-details .route-meta{font-size:13px;color:var(--text-secondary);margin-bottom:10px;}

/* Mode headers (cleaner, less "caseiro") */
.route-mode-section{margin-top:12px;}
.route-mode-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0 10px 0;}
.route-mode-title{font-size:12px;color:var(--text-secondary);font-weight:700;letter-spacing:.6px;text-transform:uppercase;}
.route-mode-count{font-size:12px;color:var(--text-secondary);border:1px solid rgba(0,0,0,.08);background:var(--surface-muted);border-radius:999px;padding:4px 8px;min-width:28px;text-align:center;}

/* Solution cards as details/summary (Google Maps-like) */
.route-solution{border:1px solid rgba(0,0,0,.08);border-radius:14px;background:var(--surface-background);overflow:hidden;margin-bottom:10px;}
.route-solution > summary{list-style:none;}
.route-solution > summary::-webkit-details-marker{display:none;}
.route-solution-head{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 12px;cursor:pointer;background:var(--surface-background);}
.route-solution-head:hover{background:var(--surface-muted);}
.route-solution-head-left{display:flex;flex-direction:column;gap:6px;min-width:0;}
.route-solution-head-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.route-solution-title{font-size:14px;font-weight:650;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.route-solution-chips{display:flex;gap:6px;flex-wrap:wrap;}

/* Pills and line chips */
.gc-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.08);background:var(--surface-muted);border-radius:999px;padding:4px 8px;font-size:12px;color:var(--text-secondary);}
.gc-line-chip{display:inline-flex;align-items:center;border:1px solid rgba(0,0,0,.12);background:var(--surface-subtle);border-radius:999px;padding:4px 8px;font-size:12px;color:var(--text-primary);line-height:1;}
.gc-line-chip.small{padding:3px 8px;font-size:11px;}

.route-steps{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px 12px;}
.route-step{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;background:var(--surface-background);border:1px solid rgba(0,0,0,.06);}
.route-step .step-icon{width:24px;flex:0 0 24px;text-align:center;}
.route-step .step-body{min-width:0;flex:1;}
.route-step .step-title-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.route-step .step-title{font-weight:650;font-size:13px;color:var(--text-primary);}
.route-step .step-sub{font-size:12px;color:var(--text-secondary);margin-top:2px;}
.step-lines{display:flex;gap:6px;flex-wrap:wrap;}
.step-alt-lines{margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06);}
.step-alt-label{font-size:12px;color:var(--text-secondary);margin-bottom:6px;}
@media (max-width: 768px){
    .mobility-container{flex-direction:column;align-items:stretch;}
    .route-map{width:100%;}
}

/* Landing: allow JS to fade placeholder text discretely */
.bairro-input.landing-placeholder-fade::placeholder {
    opacity: var(--landingPlaceholderOpacity, 1);
    transition: opacity 280ms ease;
}

/* CTA de destaque na listagem pessoal: faixa exclusiva com contraste estrutural */
.advertising .mobility-cta-box,
.advertising .commerce-cta-box {
    width: 100% !important;
    flex: 0 0 100% !important;
    position: relative !important;
    top: auto !important;

}

:root[data-theme="dark"] .full-container-backdrop,
:root[data-theme="dark"] #topbarSuggestionsOverlay {
    background: var(--surface-overlay);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .full-container-backdrop,
    :root:not([data-theme="light"]) #topbarSuggestionsOverlay {
        background: var(--surface-overlay);
    }
}

:root[data-theme="dark"] .search-container {
    color-scheme: dark;
}

.sidebar-box,
.price-input,
.page-btn,
.search-group-box,
.route-details,
.route-solution,
.route-solution-head,
.route-step,
.voice-listening-box,
.mobility-transport-table,
.route-map,
#modalidade-switch,
.modalidade-switch {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

:root[data-theme="dark"] .slider-container,
:root[data-theme="dark"] .sidebar-box,
:root[data-theme="dark"] .mobility-transport-table,
:root[data-theme="dark"] .route-details,
:root[data-theme="dark"] .route-solution,
:root[data-theme="dark"] .route-solution-head,
:root[data-theme="dark"] .route-step,
:root[data-theme="dark"] .price-input,
:root[data-theme="dark"] .page-btn,
:root[data-theme="dark"] .advertising,
:root[data-theme="dark"] .advertising2,
:root[data-theme="dark"] .container,
:root[data-theme="dark"] #modalidade-switch,
:root[data-theme="dark"] .modalidade-switch,
:root[data-theme="dark"] .search-group-box,
:root[data-theme="dark"] .voice-listening-box,
:root[data-theme="dark"] .mobility-cta-button,
:root[data-theme="dark"] .gc-pill,
:root[data-theme="dark"] .gc-line-chip,
:root[data-theme="dark"] .img-wrapper.skeleton-white,
:root[data-theme="dark"] .img-wrapper.skeleton-error,
:root[data-theme="dark"] .route-mode-count,
:root[data-theme="dark"] .mobility-row:hover,
:root[data-theme="dark"] .route-solution-head:hover {
    box-shadow: none;
}

:root[data-theme="dark"] .mobility-transport-table,
:root[data-theme="dark"] .route-details,
:root[data-theme="dark"] .route-solution,
:root[data-theme="dark"] .route-step,
:root[data-theme="dark"] .sidebar-box,
:root[data-theme="dark"] .container,
:root[data-theme="dark"] .price-input,
:root[data-theme="dark"] .page-btn,
:root[data-theme="dark"] #modalidade-switch,
:root[data-theme="dark"] .modalidade-switch,
:root[data-theme="dark"] .search-group-box,
:root[data-theme="dark"] .voice-listening-box {
    background: var(--surface-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .box-title,
:root[data-theme="dark"] .label,
:root[data-theme="dark"] .address,
:root[data-theme="dark"] .observation,
:root[data-theme="dark"] .observation2,
:root[data-theme="dark"] .box p,
:root[data-theme="dark"] .route-details .route-meta,
:root[data-theme="dark"] .route-mode-title,
:root[data-theme="dark"] .route-mode-count,
:root[data-theme="dark"] .route-step .step-sub,
:root[data-theme="dark"] .step-alt-label {
    color: color-mix(in srgb, var(--text-primary) 74%, var(--text-secondary) 26%);
}

:root[data-theme="dark"] .address.address-primary {
    color: var(--text-secondary);
    font-weight: 500 !important;
}

:root[data-theme="dark"] .label-cell {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .container-div:not(.container-div-horizontal) .box .address {
    color: color-mix(in srgb, var(--text-primary) 76%, var(--text-secondary) 24%);
}

:root[data-theme="dark"] .container-div:not(.container-div-horizontal) .box .address.address-primary {
    color: color-mix(in srgb, var(--text-primary) 60%, var(--text-secondary) 40%);
}

:root[data-theme="dark"] .page-btn:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] .modalidade-switch .switch-btn {
    color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary) 28%);
    font-weight: 500;
}

:root[data-theme="dark"] #modalidade-switch,
:root[data-theme="dark"] .modalidade-switch {
    background: color-mix(in srgb, var(--surface-subtle) 86%, var(--surface-elevated) 14%);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] .modalidade-switch .switch-btn:hover {
    background: color-mix(in srgb, var(--surface-hover-strong) 56%, transparent);
}

:root[data-theme="dark"] .modalidade-switch .switch-btn[aria-pressed="true"],
:root[data-theme="dark"] .modalidade-switch .switch-btn.active,
:root[data-theme="dark"] .modalidade-switch .switch-indicator,
:root[data-theme="dark"] .mobility-cta-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--primary-contrast-text);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--surface-overlay-strong) 28%, transparent);
}

:root[data-theme="dark"] .mobility-cta-button {
    border-color: transparent;
}

:root[data-theme="dark"] .voice-pulse-circle {
    background: rgba(214, 169, 255, 0.12);
}

:root[data-theme="dark"] .voice-pulse-circle::after {
    border-color: rgba(214, 169, 255, 0.7);
}

:root[data-theme="dark"] .img-wrapper.skeleton-white,
:root[data-theme="dark"] .img-wrapper.skeleton-error {
    background: var(--surface-muted);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sidebar-box,
    :root:not([data-theme="light"]) .mobility-transport-table,
    :root:not([data-theme="light"]) .route-details,
    :root:not([data-theme="light"]) .route-solution,
    :root:not([data-theme="light"]) .route-step,
    :root:not([data-theme="light"]) .container,
    :root:not([data-theme="light"]) .price-input,
    :root:not([data-theme="light"]) .page-btn,
    :root:not([data-theme="light"]) #modalidade-switch,
    :root:not([data-theme="light"]) .modalidade-switch,
    :root:not([data-theme="light"]) .search-group-box,
    :root:not([data-theme="light"]) .voice-listening-box {
        background: var(--surface-elevated);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    :root:not([data-theme="light"]) .address.address-primary {
        color: var(--text-secondary);
        font-weight: 500 !important;
    }

    :root:not([data-theme="light"]) .label-cell {
        color: var(--text-secondary);
    }

    :root:not([data-theme="light"]) .container-div:not(.container-div-horizontal) .box .address {
        color: color-mix(in srgb, var(--text-primary) 76%, var(--text-secondary) 24%);
    }

    :root:not([data-theme="light"]) .container-div:not(.container-div-horizontal) .box .address.address-primary {
        color: color-mix(in srgb, var(--text-primary) 60%, var(--text-secondary) 40%);
    }

    :root:not([data-theme="light"]) #modalidade-switch,
    :root:not([data-theme="light"]) .modalidade-switch {
        background: color-mix(in srgb, var(--surface-subtle) 86%, var(--surface-elevated) 14%);
        border-color: var(--border-strong);
    }

    :root:not([data-theme="light"]) .modalidade-switch .switch-btn {
        color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary) 28%);
        font-weight: 500;
    }

    :root:not([data-theme="light"]) .modalidade-switch .switch-btn:hover {
        background: color-mix(in srgb, var(--surface-hover-strong) 56%, transparent);
    }

    :root:not([data-theme="light"]) .modalidade-switch .switch-btn[aria-pressed="true"],
    :root:not([data-theme="light"]) .modalidade-switch .switch-btn.active,
    :root:not([data-theme="light"]) .modalidade-switch .switch-indicator {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        color: var(--primary-contrast-text);
        box-shadow: 0 6px 16px color-mix(in srgb, var(--surface-overlay-strong) 28%, transparent);
    }
}

.advertising .mobility-cta-box,
.advertising .commerce-cta-box {
    z-index: 2;
    margin: 22px 0 26px 0 !important;
    padding: 14px !important;
    border-radius: 16px;
    border: 2px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 16%, var(--surface-elevated)) 0%, color-mix(in srgb, var(--primary-color) 6%, var(--surface-elevated)) 42%, var(--surface-elevated) 100%);
    box-sizing: border-box;
}

.advertising .mobility-cta-box .mobility-cta-inner,
.advertising .commerce-cta-box .mobility-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.advertising .mobility-cta-box .mobility-cta-text .box-title,
.advertising .commerce-cta-box .mobility-cta-text .box-title {
    color: var(--text-primary);
    margin: 0 0 6px 0;
    line-height: 1.2;
}

.advertising .mobility-cta-box .mobility-cta-text .address,
.advertising .commerce-cta-box .mobility-cta-text .address {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1.05rem;
}

.advertising .mobility-cta-box .mobility-cta-button,
.advertising .commerce-cta-box .mobility-cta-button {
    min-width: 320px;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 6px 16px var(--shadow-color);
}

@media (max-width: 800px) {
    .advertising .mobility-cta-box,
    .advertising .commerce-cta-box {
        margin: 14px 0 18px 0 !important;
        padding: 10px !important;
    }

    .advertising .mobility-cta-box .mobility-cta-inner,
    .advertising .commerce-cta-box .mobility-cta-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    .advertising .mobility-cta-box .mobility-cta-button,
    .advertising .commerce-cta-box .mobility-cta-button {
        width: 100%;
        min-width: 0;
    }
}