/* =========================================================
   TWA INVESTIMENTOS
   DESCRIÇÃO + CARACTERÍSTICAS
   SCROLL + FADE + INDICADOR SEMPRE NA FRENTE
   ========================================================= */

:root{

    /* ALTURA DOS CARDS */
    --twa-desc-height: 420px;
    --twa-features-height: 420px;

    --twa-desc-height-mobile: 380px;
    --twa-features-height-mobile: 380px;

    /* CANTOS */
    --twa-radius: 20px;

    /* FADES PEQUENOS */
    --twa-fade-height: 34px;
    --twa-fade-height-mobile: 40px;

}


/* =========================================================
   DESCRIÇÃO
   ========================================================= */

#wpestate_property_description_section{

    position: relative !important;

    background: #fff !important;

    border-radius: var(--twa-radius) !important;

    overflow: hidden !important;

    isolation: isolate !important;

}


/* 20PX NOS 4 CANTOS */

#wpestate_property_description_section,
#wpestate_property_description_section.property-panel{

    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;

    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;

}


/* =========================================================
   CARACTERÍSTICAS
   ========================================================= */

#accordion_features_details,
#accordion_features_details.accordion,
#accordion_features_details.property-panel{

    position: relative !important;

    background: #fff !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    isolation: isolate !important;

}


/* TOPO */

#accordion_features_details .accordion-header,
#accordion_features_details .panel-heading{

    border-radius: 20px 20px 0 0 !important;

}


/* BASE */

#accordion_features_details_collapse,
#accordion_features_details_collapse .accordion-body,
#accordion_features_details .accordion-body{

    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;

    overflow: hidden !important;

}


/* =========================================================
   VIEWPORT
   ========================================================= */

.twa-scroll-viewport{

    position: relative !important;

    width: 100% !important;

    overflow: hidden !important;

    border-radius: 0 !important;

    isolation: isolate !important;

    z-index: 1 !important;

}


/* =========================================================
   ÁREA DE SCROLL — DESCRIÇÃO
   ========================================================= */

#wpestate_property_description_section
.twa-scroll-area{

    position: relative !important;

    width: 100% !important;

    max-height: var(--twa-desc-height);

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box;

    padding-right: 8px;

    /*
     espaço para última linha
    */
    padding-bottom: 25px;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

    touch-action: pan-y;

    scroll-behavior: smooth;

    z-index: 1;

}


/* =========================================================
   ÁREA DE SCROLL — CARACTERÍSTICAS
   ========================================================= */

#accordion_features_details
.twa-scroll-area,

#accordion_features_details_collapse
.twa-scroll-area{

    position: relative !important;

    width: 100% !important;

    max-height: var(--twa-features-height);

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box;

    padding-right: 8px;

    padding-bottom: 25px;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

    touch-action: pan-y;

    scroll-behavior: smooth;

    z-index: 1;

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.twa-scroll-area{

    scrollbar-width: thin;

    scrollbar-color:

        rgba(154,123,79,.32)

        transparent;

}


.twa-scroll-area::-webkit-scrollbar{

    width: 5px;

}


.twa-scroll-area::-webkit-scrollbar-track{

    background: transparent;

}


.twa-scroll-area::-webkit-scrollbar-thumb{

    background: rgba(154,123,79,.32);

    border-radius: 999px;

}


.twa-scroll-area::-webkit-scrollbar-thumb:hover{

    background: rgba(154,123,79,.50);

}


/* =========================================================
   BASE DOS FADES
   ========================================================= */

.twa-scroll-fade-top,
.twa-scroll-fade-bottom{

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    height: var(--twa-fade-height) !important;

    /*
     Fade abaixo do texto
     "Deslize para ler mais"
    */
    z-index: 100 !important;

    pointer-events: none !important;

    border-radius: 0 !important;

    transition:

        opacity .18s ease,
        visibility .18s ease;

}


/* =========================================================
   FADE SUPERIOR
   ========================================================= */

.twa-scroll-fade-top{

    top: 0 !important;

    opacity: 0;

    visibility: hidden;

    background:

        linear-gradient(

            to bottom,

            rgba(255,255,255,1) 0%,

            rgba(255,255,255,1) 8%,

            rgba(255,255,255,.98) 18%,

            rgba(255,255,255,.94) 29%,

            rgba(255,255,255,.84) 40%,

            rgba(255,255,255,.70) 52%,

            rgba(255,255,255,.52) 64%,

            rgba(255,255,255,.33) 75%,

            rgba(255,255,255,.17) 86%,

            rgba(255,255,255,.06) 94%,

            rgba(255,255,255,0) 100%

        ) !important;

}


/* =========================================================
   FADE INFERIOR
   ========================================================= */

.twa-scroll-fade-bottom{

    bottom: 0 !important;

    opacity: 1;

    visibility: visible;

    background:

        linear-gradient(

            to top,

            rgba(255,255,255,1) 0%,

            rgba(255,255,255,1) 8%,

            rgba(255,255,255,.98) 18%,

            rgba(255,255,255,.94) 29%,

            rgba(255,255,255,.84) 40%,

            rgba(255,255,255,.70) 52%,

            rgba(255,255,255,.52) 64%,

            rgba(255,255,255,.33) 75%,

            rgba(255,255,255,.17) 86%,

            rgba(255,255,255,.06) 94%,

            rgba(255,255,255,0) 100%

        ) !important;

}


/* =========================================================
   ESTADOS DOS FADES
   ========================================================= */

/* AO ROLAR, MOSTRA O DE CIMA */

.twa-scroll-viewport.twa-has-top-fade
.twa-scroll-fade-top{

    opacity: 1 !important;

    visibility: visible !important;

}


/* NO FINAL, ESCONDE O DE BAIXO */

.twa-scroll-viewport.twa-at-bottom
.twa-scroll-fade-bottom{

    opacity: 0 !important;

    visibility: hidden !important;

}


/* SEM SCROLL */

.twa-scroll-viewport.twa-no-scroll
.twa-scroll-fade-top,

.twa-scroll-viewport.twa-no-scroll
.twa-scroll-fade-bottom{

    opacity: 0 !important;

    visibility: hidden !important;

}


/* =========================================================
   "DESLIZE PARA LER MAIS"
   SEMPRE NA FRENTE
   ========================================================= */

.twa-scroll-indicator{

    position: absolute !important;

    left: 50% !important;

    /*
     FICA BEM EMBAIXO,
     mas AINDA dentro do card.
     Não usamos valor negativo.
    */
    bottom: 2px !important;

    transform:
        translateX(-50%) !important;

    /*
     MUITO ACIMA DO FADE
     E DO CONTEÚDO
    */
    z-index: 999999 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 3px !important;

    white-space: nowrap !important;

    pointer-events: none !important;

    opacity: 1;

    visibility: visible;

    font-family: inherit !important;

    font-size: 9px !important;

    font-weight: 500 !important;

    line-height: 1 !important;

    letter-spacing: .01em !important;

    /*
     TEXTO MAIS VISÍVEL
    */
    color: rgba(22,25,29,.72) !important;

    /*
     deixa a leitura limpa mesmo
     estando sobre o fade
    */
    text-shadow:

        0 1px 2px rgba(255,255,255,1),

        0 0 5px rgba(255,255,255,.95) !important;

    transition:

        opacity .18s ease,
        visibility .18s ease;

}


/* GARANTE QUE O SPAN FIQUE NA FRENTE */

.twa-scroll-indicator span{

    position: relative !important;

    z-index: 1000000 !important;

    display: block !important;

}


/* SETA */

.twa-scroll-indicator svg{

    position: relative !important;

    z-index: 1000000 !important;

    width: 9px !important;

    height: 9px !important;

    min-width: 9px !important;

    flex: 0 0 9px !important;

    overflow: visible !important;

    animation:

        twaScrollArrowTWA
        1.35s
        ease-in-out
        infinite;

}


@keyframes twaScrollArrowTWA{

    0%,
    100%{

        transform: translateY(-1px);

        opacity: .55;

    }


    50%{

        transform: translateY(2px);

        opacity: 1;

    }

}


/* =========================================================
   INDICADOR SOME APENAS QUANDO CHEGA AO FINAL
   ========================================================= */

.twa-scroll-viewport.twa-at-bottom
.twa-scroll-indicator,

.twa-scroll-viewport.twa-no-scroll
.twa-scroll-indicator{

    opacity: 0 !important;

    visibility: hidden !important;

}


/* =========================================================
   TÍTULO DA DESCRIÇÃO
   ========================================================= */

#wpestate_property_description_section
> .property_heading,

#wpestate_property_description_section
> .panel-heading,

#wpestate_property_description_section
> h2,

#wpestate_property_description_section
> h3,

#wpestate_property_description_section
> h4{

    position: relative !important;

    z-index: 200 !important;

    background: #fff !important;

}


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

@media(max-width:768px){

    :root{

        --twa-fade-height:
            var(--twa-fade-height-mobile);

    }


    /* DESCRIÇÃO */

    #wpestate_property_description_section
    .twa-scroll-area{

        max-height:
            var(--twa-desc-height-mobile);

        padding-right: 0;

        padding-bottom: 27px;

    }


    /* CARACTERÍSTICAS */

    #accordion_features_details
    .twa-scroll-area,

    #accordion_features_details_collapse
    .twa-scroll-area{

        max-height:
            var(--twa-features-height-mobile);

        padding-right: 0;

        padding-bottom: 27px;

    }


    /* SEM SCROLLBAR VISÍVEL */

    .twa-scroll-area{

        scrollbar-width: none;

    }


    .twa-scroll-area::-webkit-scrollbar{

        display: none;

    }


    /* TEXTO BEM EMBAIXO, MAS VISÍVEL */

    .twa-scroll-indicator{

        bottom: 2px !important;

        z-index: 999999 !important;

        font-size: 9px !important;

        color: rgba(22,25,29,.74) !important;

    }


    .twa-scroll-indicator span{

        z-index: 1000000 !important;

    }


    .twa-scroll-indicator svg{

        z-index: 1000000 !important;

        width: 9px !important;
        height: 9px !important;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .twa-scroll-area{

        scroll-behavior: auto;

    }


    .twa-scroll-indicator svg{

        animation: none;

    }

}