/* ------------------------------------------------------------------
   «Mapa das lojas»: the Lojas page (inc/elementor/widgets/city-store-filter-widget.php,
   assets/js/city-store-filter-widget.js). Figma page 23, option C (Pedro, 09/11/2026):
   the map under the header at the window's height, a white panel over it; on a phone
   the panel is a sheet that slides up over the map.
------------------------------------------------------------------ */
:where(.twf-stores),
:where(.twf-stores) *,
:where(.twf-stores) *::before,
:where(.twf-stores) *::after{
    box-sizing: border-box;
}
:where(.twf-stores) h1,
:where(.twf-stores) h2,
:where(.twf-stores) p,
:where(.twf-stores) ul{
    margin: 0;
    padding: 0;
}
:where(.twf-stores) ul{
    list-style: none;
}
:where(.twf-stores) button{
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}

.twf-stores{
    --twf-ink: #212529;
    --twf-grey: #737373;
    --twf-line: #E3E1DD;
    --twf-row: #ECEAE6;
    --twf-gold: #AD8D5C;
    --twf-gutter: var(--main-gutter-size, 65px);
    position: relative;
    width: 100%;
    height: calc(100vh - 198px); /* the script sets the real height: the window under the header */
    min-height: 560px;
    overflow: hidden;
    background: #F0F0EC;
    font-family: "Roboto Condensed", sans-serif;
}

.twf-stores__map{
    position: absolute;
    inset: 0;
}

/* The panel: title, search, «Perto de mim» and the stores in view */
.twf-stores .twf-stores__panel{
    position: absolute;
    z-index: 2;
    top: 40px;
    bottom: 40px;
    left: var(--twf-gutter);
    display: flex;
    flex-direction: column;
    width: min(440px, calc(100% - 2 * var(--twf-gutter)));
    padding: 40px 36px 0;
    background: #FFFFFF;
    box-shadow: 0 8px 30px rgba(33, 37, 41, .14);
}

.twf-stores .twf-stores__handle{
    display: none;
}

/* The page's title, in the kit's «Título de página» (Elementor › Site Settings › Global Fonts) */
.twf-stores .twf-stores__title{
    flex: none;
    margin: 0 0 28px;
    font-family: var(--e-global-typography-primary-font-family, "Roboto Condensed"), sans-serif;
    font-size: var(--e-global-typography-primary-font-size, 40px);
    font-weight: var(--e-global-typography-primary-font-weight, 700);
    line-height: var(--e-global-typography-primary-line-height, 1.15em);
    letter-spacing: var(--e-global-typography-primary-letter-spacing, 2px);
    text-transform: var(--e-global-typography-primary-text-transform, uppercase);
    color: var(--twf-ink);
}

.twf-stores .twf-stores__search{
    position: relative;
    flex: none;
}
.twf-stores .twf-stores__search > svg{
    position: absolute;
    top: 50%;
    left: 16px;
    margin-top: -9px;
    color: #61656B;
    pointer-events: none;
}
.twf-stores .twf-stores__input{
    display: block;
    width: 100%;
    height: 53px;
    margin: 0;
    padding: 0 48px 0 46px;
    background: #FFFFFF;
    border: 1px solid #CED4DA;
    border-radius: 0;
    box-shadow: none;
    color: var(--twf-ink);
    font: 400 17px/1.3 "Roboto Condensed", sans-serif;
    -webkit-appearance: none;
    appearance: none;
}
.twf-stores .twf-stores__input::placeholder{
    color: #8E9297;
    opacity: 1;
}
.twf-stores .twf-stores__input:focus{
    outline: none;
    border-color: #6C757D;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, .12);
}
.twf-stores .twf-stores__input::-webkit-search-cancel-button{
    display: none;
    -webkit-appearance: none;
}
.twf-stores .twf-stores__clear{
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    color: var(--twf-grey);
}
.twf-stores .twf-stores__clear:hover{
    color: var(--twf-ink);
}

.twf-stores .twf-stores__near{
    display: inline-flex;
    flex: none;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: 16px;
    color: var(--twf-ink);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}
.twf-stores .twf-stores__near span{
    text-decoration: underline;
    text-decoration-color: #C9C6C0;
    text-underline-offset: 4px;
}
.twf-stores .twf-stores__near:hover{
    color: var(--twf-gold);
}
.twf-stores .twf-stores__near:hover span{
    text-decoration-color: currentColor;
}
.twf-stores .twf-stores__near.is-busy{
    opacity: .55;
    cursor: progress;
}

.twf-stores .twf-stores__msg{
    flex: none;
    margin-top: 12px;
    color: var(--twf-grey);
    font-size: 15px;
    line-height: 20px;
}

.twf-stores .twf-stores__clear[hidden],
.twf-stores .twf-stores__near[hidden],
.twf-stores .twf-stores__msg[hidden]{
    display: none;
}

/* The list scrolls inside the panel and fades out at its foot */
.twf-stores .twf-stores__list{
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 22px -16px 0 0;
    padding: 0 16px 72px 0;
    overflow-y: auto;
    border-top: 1px solid var(--twf-line);
    scrollbar-width: thin;
    scrollbar-color: #D5D3CF transparent;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent);
}
.twf-stores .twf-stores__city-name{
    padding: 22px 0 6px;
    color: var(--twf-grey);
    font-family: inherit;
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: uppercase;
}
.twf-stores .twf-stores__km{
    text-transform: none;
}
.twf-stores .twf-stores__store{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    border-bottom: 1px solid var(--twf-row);
}
.twf-stores .twf-stores__name{
    display: block; /* the theme's buttons are centred flex boxes */
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 0;
    color: var(--twf-ink);
    font-weight: 400;
    font-size: 17px;
    line-height: 22px;
    text-align: left;
    transition: color .2s;
}
.twf-stores .twf-stores__site{
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    color: var(--twf-grey);
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
    transition: color .2s;
}
.twf-stores .twf-stores__store:hover .twf-stores__name,
.twf-stores .twf-stores__store.is-active .twf-stores__name,
.twf-stores .twf-stores__site:hover{
    color: var(--twf-gold);
}
.twf-stores .twf-stores__name:focus-visible,
.twf-stores .twf-stores__site:focus-visible,
.twf-stores .twf-stores__near:focus-visible,
.twf-stores .twf-stores__clear:focus-visible,
.twf-stores .twf-stores__pin:focus-visible{
    outline: 2px solid var(--twf-gold);
    outline-offset: 2px;
}

/* Markers: a circle with the number of stores, or a dot for one store; gold for the store in hand */
.twf-stores .twf-stores__pin{
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--twf-ink);
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
    color: #FFFFFF;
    font: 600 13px/26px "Roboto Condensed", sans-serif;
    text-align: center;
    transition: background-color .2s;
}
.twf-stores .twf-stores__pin.is-big{
    width: 34px;
    height: 34px;
    line-height: 30px;
}
.twf-stores .twf-stores__pin.is-one{
    width: 14px;
    height: 14px;
}
.twf-stores .twf-stores__pin:hover,
.twf-stores .twf-stores__pin.is-active{
    background: var(--twf-gold);
}
.twf-stores .twf-stores__me{
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border: 5px solid var(--twf-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(173, 141, 92, .22);
}

/* The popup of a spot */
.twf-stores .twf-stores__popup .maplibregl-popup-content{
    min-width: 220px;
    padding: 16px 20px 18px;
    border-radius: 0;
    box-shadow: 0 6px 22px rgba(33, 37, 41, .16);
    font-family: "Roboto Condensed", sans-serif;
}
.twf-stores .twf-stores__popup .maplibregl-popup-close-button{
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    color: var(--twf-grey);
    font-size: 20px;
    line-height: 28px;
}
.twf-stores .twf-stores__popup .maplibregl-popup-close-button:hover{
    background: none;
    color: var(--twf-ink);
}
.twf-stores .twf-stores__pop{
    max-height: 260px;
    overflow-y: auto;
}
.twf-stores .twf-stores__pop-item + .twf-stores__pop-item{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--twf-row);
}
.twf-stores .twf-stores__pop-name{
    padding-right: 18px;
    color: var(--twf-ink);
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
}
.twf-stores .twf-stores__pop-place{
    margin-top: 2px;
    color: var(--twf-grey);
    font-size: 15px;
    line-height: 20px;
}
.twf-stores .twf-stores__pop-link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--twf-gold);
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    text-decoration: none;
}
.twf-stores .twf-stores__pop-link:hover{
    color: var(--twf-ink);
}

/* Zoom buttons: square, as the site's buttons */
.twf-stores .maplibregl-ctrl-top-right{
    top: 40px;
    right: var(--twf-gutter);
}
.twf-stores .maplibregl-ctrl-top-right .maplibregl-ctrl{
    margin: 0;
}
.twf-stores .maplibregl-ctrl-group{
    background: #FFFFFF;
    border: 1px solid var(--twf-line);
    border-radius: 0;
    box-shadow: none;
}
.twf-stores .maplibregl-ctrl-group button{
    width: 36px;
    height: 36px;
}
.twf-stores .maplibregl-ctrl-group button + button{
    border-top: 1px solid var(--twf-line);
}
.twf-stores .maplibregl-ctrl-attrib{
    font-size: 11px;
}
.twf-stores .maplibregl-cooperative-gesture-screen{
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
}

/* Without WebGL: the list and the search, and the note where the map would be */
.twf-stores .twf-stores__nomap{
    position: absolute;
    top: 50%;
    right: var(--twf-gutter);
    left: calc(var(--twf-gutter) + 480px);
    color: var(--twf-grey);
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    transform: translateY(-50%);
}

.twf-stores__notice{
    padding: 20px;
    border: 1px dashed #BBBBBB;
    color: var(--twf-grey, #737373);
    text-align: center;
}

/* On this page the dark footer starts right under the map: no light band between them */
body:has(.twf-stores) .rey-siteFooter > .elementor > .e-con-top{
    margin-top: 0;
}

@media (max-width: 1024px){
    .twf-stores .twf-stores__panel{
        width: min(400px, calc(100% - 2 * var(--twf-gutter)));
        padding: 32px 28px 0;
    }
}

/* Phone: the panel is a sheet over the map; closed it shows the title, the search and the start of the list */
@media (max-width: 767px){
    .twf-stores{
        height: calc(100svh - 64px);
        min-height: 480px;
    }
    .twf-stores .twf-stores__panel{
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: calc(100% - 120px);
        padding: 30px 20px 0;
        box-shadow: 0 -6px 24px rgba(33, 37, 41, .16);
        transform: translateY(calc(100% - var(--twf-peek, 374px)));
    }
    .twf-stores.is-ready .twf-stores__panel{
        transition: transform .3s ease;
    }
    .twf-stores.is-open .twf-stores__panel{
        transform: translateY(0);
    }
    /* Closed, a swipe on the sheet opens it (the script) instead of scrolling the page or the list */
    .twf-stores:not(.is-open):not(.is-nomap) .twf-stores__panel{
        touch-action: none;
    }
    .twf-stores .twf-stores__handle{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        display: block;
        height: 30px;
        touch-action: none;
    }
    .twf-stores .twf-stores__handle span{
        position: absolute;
        top: 10px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        background: #D5D3CF;
    }
    .twf-stores .twf-stores__title{
        margin-bottom: 16px;
    }
    .twf-stores .twf-stores__input{
        height: 48px;
        font-size: 16px;
    }
    .twf-stores .twf-stores__near{
        margin-top: 14px;
    }
    .twf-stores .twf-stores__list{
        margin-top: 18px;
    }
    .twf-stores .maplibregl-ctrl-group{
        display: none;
    }
    .twf-stores.is-nomap .twf-stores__panel{
        height: 100%;
        transform: none;
    }
    .twf-stores .twf-stores__nomap{
        display: none;
    }
}