html,
body { margin: 0 !important; padding: 0 !important; height: 100dvh; overflow: hidden; font-family: 'Poppins', sans-serif;  padding-bottom: env(safe-area-inset-bottom);}
body.blog.wp-theme-astra.wp-child-theme-astra-child.ast-separate-container.ast-two-container.ast-no-sidebar.astra-4\.11\.5.ast-inherit-site-logo-transparent.ast-hfb-header.elementor-default.elementor-kit-15.ast-header-break-point {
    overflow: auto !important;
}
html, body { scroll-behavior: auto !important; }

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 0.5s ease;
}

.loading-content {
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 280px;
}

.toggle-btn-more-text {
    width: max-content !important;
    height: auto !important;
}

.non-repeater-content .short-desc {
    display: flex;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e5e5e5;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

.loading-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2980b9);
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 4px;
}

.progress-text {
  font-size: 0.9rem;
  color: #666;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.page-template-page-mapa-php header, 
.page-template-page-mapa-php footer {
    display: none !important;
}

.ast-container { padding: 0; margin: 0; }



#map { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; touch-action: pan-x pan-y; }
#screen-container-1,
#screen-container-2,
#screen-container-3 { position: absolute; width: 100%; z-index: 2; z-index: 99; }
#screen-container-1 { bottom: 0; height: auto; }
#screen-container-2 { top: 0; height: 100%; display: none; background: rgba(255, 255, 255, 0.95); z-index: 9999; }
#screen-container-3 { top: 0; height: 100%; display: none; background: rgba(255, 255, 255, 0.95); }
.screen { position: relative; width: 100%; height: 100%; overflow-y: auto; padding: 0px; box-sizing: border-box; }
/* #bottom-bar { position: relative; left: 50%; transform: translateX(-50%); width: 100%; max-width: 90vw; background-color: rgba(255, 255, 255, 0.92); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); z-index: 4; display: flex; flex-direction: column; pointer-events: auto; overflow: auto; } */


#bottom-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 90vw;
  height: auto;
  max-height: 70vh;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  z-index: 4;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow-y: auto;
  overflow-x: hidden;
 
  padding-bottom: env(safe-area-inset-bottom);
}



    /* Estado fechado */
    #bottom-bar.closed {
      height: 40px;
      overflow: hidden;
      transform: translateX(-50%) translateY(calc(100% - 40px));
    }

    /* Estado de arrastar (desativa transição para movimento suave) */
    #bottom-bar.dragging {
      transition: none;
    }

    /* Barrinha estilizada para fechar (com arrastar) */
   .drag-handle {
        position: absolute;
        width: 20vw !important;
        height: 0 !important;
        margin: 0;
        background: transparent;
        border-radius: 5px;
        left: 50% !important;
        transform: translateX(-25%) !important;
        top: 0;
        cursor: grab !important;
        z-index: 1001;
    }

    /* Ícone de seta para baixo */
    .drag-handle::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 25%;
        top: 3px;
        transform: translateX(-50%);
        font-size: 14px;
        color: #fff;
        background: #FF9800;
        padding: 0 5px;
        border-radius: 3px;
        height: 20px;
        display: flex;
        align-items: center;
    }

    /* Botão estilizado (Abrir Categorias) */
    #toggle-button {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      padding: 0 3px;
      width: 150px;
      height: 32px;
      background-color: #f4a522;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 500;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s ease, transform 0.2s ease;
      z-index: 1001;
    }

    /* Mostrar botão apenas quando fechado */
    #bottom-bar.closed #toggle-button {
      display: flex;
    }

    #toggle-button:hover {
      background-color: #f4a522;
      transform: translateX(-50%) scale(1.05);
    }

    #toggle-button:active {
      transform: translateX(-50%) scale(0.95);
    }

    /* Ícone da setinha no botão Abrir */
    #toggle-button::after {
      content: '↑';
      margin-left: 8px;
      font-size: 12px;
    }


#screen-container-2 {
    position: absolute;
    height: 100dvh;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9999;
    overflow: visible; /* Change from hidden to visible */
}
.loading-indicator { /* Adjust selector to match your actual indicator */
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #333;
    background: #fff;
    position: relative;
    z-index: 10000; /* Ensure it's above other elements */
}


.category-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.arrow-btn {
        background-color: #204c7e;
    color: white;
    border: none;
    padding: 0px;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    height: 27px;
    width: 0;
    font-size: 12px;
    border-radius: 83px;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Hidden by default */
}

.category-carousel:hover .arrow-btn {
    opacity: 1; /* Show arrows on hover */
    width: 27px;
    padding: 11px;
  
}

.arrow-btn:hover {
    background-color: #204c7e !important;
    width: 20px;
    padding: 11px;
}

.left-arrow {
    margin-right: 5px;
}

.right-arrow {
    margin-left: 5px;
    right: 15px;
}

.type-btn {
    margin: 0 5px;
    padding: 10px 20px;
    background-color: #204c7e;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s;
}

.type-btn:hover {
    background-color: #204c7e;
}
.arrow-btn.disabled {
    display: none; /* Esconde a seta completamente quando desativada */
}

.category-carousel {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0; /* Sem margens no .category-carousel */
}

/* Padrão para .category-scroll */
.category-scroll {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: 10px 0;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    margin: 0; /* Sem margens padrão */
    max-width: 100%; /* Padrão */
}
/* Base: sem hover, nunca reserva espaço para setas */
.category-carousel .category-scroll {
  margin: 0;
  max-width: 100%;
}

/* Ambas desabilitadas (qualquer estado) -> nada muda */
.category-carousel:has(.left-arrow.disabled):has(.right-arrow.disabled) .category-scroll {
  margin: 0;
  max-width: 100%;
}

/* HOVER + apenas seta direita habilitada (início do carrossel) */
.category-carousel:hover:has(.left-arrow.disabled):has(.right-arrow:not(.disabled)) .category-scroll {
  margin-right: 35px;
  margin-left: 0;
  max-width: calc(100% - 35px);
}

/* HOVER + apenas seta esquerda habilitada (final do carrossel) */
.category-carousel:hover:has(.right-arrow.disabled):has(.left-arrow:not(.disabled)) .category-scroll {
  margin-left: 35px;
  margin-right: 0;
  max-width: calc(100% - 35px);
}

/* HOVER + as duas habilitadas */
.category-carousel:hover:has(.left-arrow:not(.disabled)):has(.right-arrow:not(.disabled)) .category-scroll {
  margin: 0 30px;
  margin-right: 5px;
  max-width: calc(100% - 75px);
}

/* Mobile: remove margens e ajusta max-width */
@media (max-width: 767px) {
    .category-scroll {
        touch-action: pan-x;
        margin: 0; /* Sem margens no mobile */
        max-width: 100%; /* Sem redução no mobile */
    }
    .category-carousel:has(.left-arrow.disabled):not(.right-arrow.disabled) .category-scroll,
    .category-carousel:has(.right-arrow.disabled):not(.left-arrow.disabled) .category-scroll,
    .category-carousel:has(.left-arrow:not(.disabled)):has(.right-arrow:not(.disabled)) .category-scroll,
    .category-carousel:hover:has(.left-arrow:not(.disabled)):has(.right-arrow:not(.disabled)) .category-scroll,
    .category-carousel:has(.left-arrow.disabled):has(.right-arrow.disabled) .category-scroll {
        margin: 0; /* Sem margens no mobile */
        max-width: 100%; /* Sem redução no mobile */
    }

    div#loc-modal-content {
        max-width: 280px;
    }
    div#loc-modal-content button {
        font-size: 12px !important;
    }

    div#loc-modal-content p {
        font-size: 13px;
    }


    .info-box:last-child {
        margin-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    button.cat-btn.Luciano {margin-top: -3px;}

}

/* Variável de altura do cabeçalho */
:root{
  --screen2-header-h: 56px;   /* ajuste conforme o layout */
}

/* 3) Cabeçalho FIXO dentro do container */
#screen-2-header{
  position: fixed;            /* agora é fixo RELATIVO ao #screen-2 */
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: var(--screen2-header-h);
  display: flex; align-items: center; gap: .75rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb; /* #ccc/gray-200 */
  padding: 10px 12px;
  box-sizing: border-box;
}

div#listing-items {
    width: 100%;
}

/* 4) Área que rola abaixo do cabeçalho */
#listing-content {
    position: relative;
    margin-top: var(--screen2-header-h);
    height: calc(100dvh - var(--screen2-header-h)); /* Ensure this accounts for header */
    overflow-y: auto; /* Explicitly allow vertical scrolling */
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-bottom: 1px; /* Add padding to ensure loading indicator is visible */
    width: 100%;
}


.search-map.mb-4 { width: 100%; flex-direction: column; align-items: start; margin: 0 auto; padding: 0 15px; }
.search-map.mb-4 .section-title { width: 100%; text-align: left; margin-top: 25px; }

ul.list-disc.ml-5 { padding: 0; margin: 0; list-style: none; }

        
/* #bottom-bar::after { content: ''; position: absolute; width: 20vw; height: 5px; margin: 7px 0; background: #c0c0c0; border-radius: 5px; left: 50%; transform: translateX(-50%); } */
.section-title { font-size: 11px; color: #666; margin-bottom: 5px;}
.search-map { margin: 20px 0 15px; display: flex; justify-content: center; }
.search-map,
.content-second-categories,
.content-main-categories { overflow: visible; scrollbar-width: none; -ms-overflow-style: none; }
button.subcat-btn.cat-produtos-bazar { margin-top: -4px; }
button.cat-btn.Logo { margin-top: 16px; }
.pagination { display: none !important; }
.content-second-categories .buttons { display: flex; overflow-x: auto; overflow-y: hidden; max-width: calc(100% - 20px); padding-bottom: 0px; scroll-snap-type: x mandatory; gap: 5px; -webkit-overflow-scrolling: touch; box-sizing: border-box; margin: 0; }
.input-container { position: relative; width: 100%; max-width: 100%; }
.input-container input { width: 100%; padding: clamp(0.8rem, 3.5vw, 1rem) clamp(2rem, 5vw, 1.4rem); height: 7vh; box-sizing: border-box; border-radius: 25px; border: none; background: #EAEAEA; }
.input-container input::placeholder { margin-left: 15px; }
.input-container .icon-placeholder { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 16px; }
.input-container button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #aaa; font-size: 16px; padding: 5px; }
.input-container button:hover { color: #333; }
.buttons,
.categories { display: flex; justify-content: space-between; margin-bottom: 0.938rem; }
.buttons { gap: 0.50rem; }
.content-second-categories,
.content-main-categories { width: 100%; margin-left: 1.25rem; margin-top: 10px; }
.type-btn,
.cat-btn { background-color: #fff; color: #255C99; padding: .7rem; border-radius: 5px; cursor: pointer; font-size: 13px; }
button.type-btn { border: solid 2px #255C99 !important; }
.type-btn:hover { background: #255C99 !important; transition: .5s; }
.cat-btn i { margin-right: 5px; }
.back-btn,
.home-btn { background: none; border: none; font-size: 20px; cursor: pointer; margin-bottom: 10px; }
.subcat-btn { display: block; width: 100%; background-color: #FF6200; color: white; border: none; padding: 10px; margin-bottom: 5px; border-radius: 5px; cursor: pointer; }
span#current-category-title {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    row-gap: 1rem;
    justify-content: space-between;
    width: 100%;
    column-gap: 1rem;
}
span#current-category-title img {width: 17vw;}
.listing-item { background: #fff; padding: 10px; margin-bottom: 10px !important; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.listing-item h3 { margin: 0 0 5px 0; }
.listing-item p { margin: 0; color: #666; }
.categories { display: flex; flex-direction: column; align-items: start; gap: 7px; margin: 5px 0 0; position: relative; }
#bottom-bar button img { width: 21.02vw; max-width: auto; object-fit: cover; }
.row { display: flex; justify-content: center; gap: 4px; }
.offset { margin-left: 13vw; margin-top: -2.5rem; }
button.search img { width: 9vw !important; }
.categories button { all: unset; width: 20vw; height: auto; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.categories button img { width: 100%; height: auto; }
div::-webkit-scrollbar { display: none; }
.screen-container.active { display: block; }
.buttons button:hover { background: #d1d5db; }
.categories .row { display: flex; justify-content: start; margin-bottom: 1rem; }
.categories img { width: 48px; height: 48px; }
div#listing-content { display: flex; flex-direction: column; margin: 0 !important; /*margin-bottom: 30px !important;*/ margin-bottom: 0px !important; }
.listing-item { padding: 16px; margin-bottom: 0px; border: 1px solid #e5e7eb; border-radius: 8px;}
.listing-item img { max-width: 200px; height: auto; margin-top: 8px; }
.back-btn,
.home-btn { padding: 8px 16px; background: #e5e7eb; border-radius: 8px; margin-right: 8px; }
.back-btn:hover,
.home-btn:hover { background: #d1d5db; }
.category-back-btn { display: none; margin-bottom: 8px; }
.category-back-btn.active { display: inline-block; }

#category-buttons .type-btn { flex: 0 0 auto; white-space: nowrap; padding: 5px 10px; background-color: #eee; border: none; border-radius: 20px; cursor: pointer; scroll-snap-align: start; margin: 0; }
#category-buttons::-webkit-scrollbar { height: 4px; }
.content-second-categories { position: relative; }
.scroll-gesture { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.8; animation: fadeOutHint 6s forwards; animation-delay: 4s; z-index: 10; }
button.category-back-btn { border-radius: 50%; width: 30px; height: 30px; padding: 0; }
.type-category-and-button-back { display: flex; overflow-x: auto; overflow-y: hidden; justify-content: center; margin-left: -2.4rem; }
.categories .subcategory-sidebar { display: grid; height: 20vh; width: 12vw; position: relative; }
.categories .subcategory-sidebar img { width: 100%; position: absolute; bottom: 0; right: 0; left: 0; bottom: 0; height: auto; }
.subcategory-layout { display: flex; margin-left: 5rem !important; }
.subcategory-sidebar button { padding: 0px !important; background: #004082 !important; color: #fff !important; }
button.subcat-btn.cat-choose { margin-top: -32px; }

.subcategory-content .row {
    margin-bottom: 1.6rem !important;
}

.content-main-categories.content-main-categories-doe button.category-back-btn { margin-top: 30px; }

.content-main-categories.content-main-categories-doe .section-title, .content-main-categories.content-main-categories-reze .section-title,  .content-main-categories.content-main-categories-participe .section-title {
    margin: 30px 0 0;
}


        .horario_secretaria .border-b { margin: 10px 0; }

        .horario_secretaria.mt-4 .space-y-3.mt-2 { display: flex; flex-wrap: wrap; }

        .horario_secretaria.mt-4 .space-y-3.mt-2 .border-b.pb-2 { margin: 0px 5px 5px 0; display: flex; flex-direction: column; align-items: start; padding: 5px; background: #97c6f557; border-radius: 5px; }
        .horario_secretaria.mt-4 .space-y-3.mt-2 .border-b.pb-2 > span {
            font-weight: 600;
        }

.content-main-categories.content-main-categories-reze .section-title > b, .content-main-categories.content-main-categories-doe .section-title > b,  .content-main-categories.content-main-categories-participe .section-title > b {
    display: none;
}

.content-main-categories.content-main-categories-reze .highlight {
    color: #ff7200;
}

.content-main-categories.content-main-categories-participe .highlight {
    color: #2F5D50;
}

.content-main-categories.content-main-categories-doe .highlight {
    color: #A30018;
}

div#screen-2 { padding: 10px; }
div#screen-2 > div { display: flex; align-items: center; gap: 1rem; margin-bottom: 15px; }
.listing-item { width: 100%; box-shadow: none; border: solid 1px #767676; border-radius: 5px; padding: 5px; background: #F3F3F3; }
div#screen-2 button.back-btn { margin: 0; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #004082; }
.listing-item p { font-family: 'Poppins'; }
h3.listing-title { font-size: 18px; }

img.foto-ponto-lista {
    width: 100% !important;
    max-width: 100%;
    height: 290px;
    padding: 0 0 10px;
    object-fit: cover;
    border-radius: 20px;
}

.flex.distance-and-map {
    padding: 5px 0 10px;
    margin-bottom: 10px;
    border-bottom: dotted 3px #ccc;
}

.action-icons {
    padding-top: 10px;
    border-top: dotted 3px #ccc;
}

.short-desc {
    color: #777;
}

.short-desc-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.short-desc-container .short-desc {
  margin-right: 6px;
}

.short-desc-container button {
  font-size: 14px;
  background-color: #FF9800;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

p.listing-distance, p.listing-como-chegar, p.listing-contato { font-size: 14px; font-weight: 600; }

.listing-item .flex { display: flex; }
.listing-item .flex .listing-distance::after { content: ''; width: 2px; background: #767676; position: absolute; top: 1px; right: -9px; height: 85%; }
.listing-item .flex .listing-distance { position: relative; margin-right: 17px; }

.subcategory-details ul { list-style: none; padding: 0; margin: 0; }

.repeater-item {
    border-bottom: solid 1px #00BCD4;
    padding-bottom: 10px;
}

.repeater-item:last-child {
    border-bottom: 0;
    padding: 0;
}

.link-box {
    padding: 4px 6px;
    background: #ffbf00;
    margin: 5px 0;
    display: inline-block;
    color: #fff !important;
    border-radius: 5px;
}

.route-modal-open { overflow: hidden; }

.route-modal-backdrop {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
}

.route-modal {
  background: #fff;
  width: min(92vw, 420px);
  border-radius: 14px;
  padding: 18px 16px 20px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  font-family: inherit;
}

.route-modal-title {
  margin: 0 0 4px; font-size: 1.15rem; font-weight: 700;
}

.route-modal-subtitle {
  margin: 0 0 14px; color: #555; font-size: .95rem;
}

.route-modal-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

.route-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; padding: 12px 10px; text-decoration: none;
  background: #f2f2f2; border: 1px solid #e5e5e5; font-weight: 600;
}

.route-btn:hover { filter: brightness(0.98); }

.route-btn.disabled {
  pointer-events: none; opacity: 0.6;
}

.route-modal-close {
  position: absolute; top: 8px; right: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: none; font-size: 24px; line-height: 1;
  cursor: pointer; color: #666;
}

.info-box.p-4.border.rounded.bg-gray-50 h3 {
    font-size: 18px;
    margin: 10px 0;
    color: #000;
    font-weight: 700;
}

button.route-modal-close:hover {
    padding: 0 !important;
}

a.como-chegar-link, .telefone-link, .contato-link, .whatsapp-link { color: #fff; padding: 2px 4px; background: #398ADE; border-radius: 3px; margin-right: 5px; font-size: 12px; }

.whatsapp-link {margin-left:8px; color:#fff; background: #25d366; text-decoration:underline;}
.listing-item a.contato-link.whatsapp-link, .listing-item a.contato-link {margin: 0;}

.subcategory-sidebar button { padding: 0px !important; background: #004082; color: #fff; width: 30px !important; height: 30px !important; }

div#post-details-content { padding: 15px; }
div#post-details-content button { width: 30px; height: 30px; border-radius: 50%; justify-content: center; align-items: center; padding: 0; }
.post-details h3 { color: #666; font-size: 12px; margin-top: 20px; margin-bottom: 5px; }
select#subcategory-select { background: #D9D9D9; border: none; color: #000; font-weight: 700; }
.post-details .grid.grid-cols-1.md\:grid-cols-2.gap-4 { margin-top: 15px; }
.info-box.p-4.border.rounded.bg-gray-50 { background: #398ade33; }

body.wp-singular.page-template.page-template-page-mapa.page-template-page-mapa-php.page.page-id-2.wp-theme-astra.wp-child-theme-astra-child.ast-plain-container.ast-no-sidebar.astra-4\.11\.5.ast-single-post.ast-inherit-site-logo-transparent.ast-hfb-header.ast-normal-title-enabled.elementor-default.elementor-kit-15.ast-header-break-point {}

.subcategory-details .font-bold { font-weight: 600; }

.subcategory-details p { color: #000; margin-bottom: 7px;}

.main-title-subcategory { font-size: 16px; font-weight: 700; margin: 20px 0 5px !important; }

.action-icons a, .action-icons button {
    padding: 0;
    background: transparent;
}

.action-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.action-icons img {
    max-width: 100%;
}

.post-details h4 { font-size: 13px; }
.post-details p { margin: 0; }

.title-and-select-top {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 10px 0;
    width: 100%;
    z-index: 5000;
}

.cartaz.mt-2 img {
    max-width: 230px !important;
}

.post-details .info-box { margin-top: 10px; margin-bottom: 10px; padding: 15px; border-radius: 5px; box-shadow: 3px 5px 3px -4px #ccc; }

.post-details .info-box .font-bold { font-weight: 700; }

.button-and-title.flex.items-center.mb-4 { display: flex; align-items: center; gap: 1rem; }

.button-and-title.flex.items-center.mb-4 h2 { font-size: 18px; font-family: 'Poppins'; width: 33vw; }

.category-scroll { display: flex; overflow-x: auto; scroll-behavior: smooth; gap: 10px; padding: 10px 0; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Edge */ white-space: nowrap; user-select: none; /* Evita seleção de texto ao arrastar */ }

.category-scroll::-webkit-scrollbar { display: none; }

.type-btn { flex: 0 0 auto; padding: 8px 16px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 14px; }

#category-buttons { width: 100%; overflow: visible; }

.content-main-categories-reze button.category-back-btn.active,  .content-main-categories-participe button.category-back-btn.active { display: none; }
.content-main-categories.content-main-categories-reze .subcategory-layout, .content-main-categories.content-main-categories-participe .subcategory-layout {   margin-left: 0 !important; }

.info-box p { font-size: 13.5px; margin-bottom: 3px; }

a.icon-whatsapp-detail {
    padding: 5px;
    background: #25d366;
    border-radius: 5px;
    color: #fff;
}

a.icon-whatsapp-detail i {
    color: #fff;
    margin-left: 3px;
}

.links {}

div#general-content .links {
    display: flex;
    gap: .5rem;
}

div#general-content .links a {
    padding: 2px 4px;
    background: #398ade;
    color: #fff;
    border-radius: 3px;
}

@media (min-width: 768px) {
    .category-scroll {
        cursor: grab;
        max-width: 100%;
    }
    .category-scroll:active {
        cursor: grabbing;
    }

    button.bottom-label {
        display: none;
    }

    #map {
        height: 100% !important;
    }
  

    #screen-container-1 {
        top: 15px;
        height: auto;
        left: 15px;
        box-shadow: 1px 1px 5px -1px #666;
        border-radius: 5px;
        height: min-content;
        border-radius: 10px;
        overflow: hidden;
    }
    div#bottom-bar {
        margin-bottom: 0 !important;
    }

    .drag-handle {
        display: none;
    }

    div#screen-3 {
        width: 100%;
    }

    div#screen-container-2, div#screen-container-3 {
        width: 36%;
    }

    .image-two {
        display: none;
    }


}

@keyframes fadeOutHint {
    0% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { opacity: 0; display: none; }
}

@media screen and (max-width: 430px) {
    #bottom-bar { max-width: 100vw; }
    .input-container { width: 100%; }
    .categories button { width: 21vw; }
    .subcategory-content .offset { margin-left: -11vw; }
    .offset { margin-left: 11vw; }
    .category-scroll { padding: 0; }
}

@media screen and (min-width: 768px) {
    /* #map { height: 100vh !important; } */
    .categories button { all: unset; width: 10vw; height: auto; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .offset { margin-left: 5.5vw; margin-top: -6vh; }
    #bottom-bar { max-width: 55vw; min-height: auto !important; max-height: max-content !important; }
    .input-container button { width: 6vw; }
    .images-map { display: none; }
    .image-map-desktop { display: flex !important; height: auto; z-index: 5; margin: 5px auto; border-bottom: solid 1px #e6e6e6; width: 60%; padding: 20px; }
    div#bottom-bar::after {
        display: none;
    }
    .content-main-categories.content-main-categories-doe button.category-back-btn.active {display: none;}
    
      /* div#post-details-content {
        margin-bottom: 20px;
    } */

   

    .image-three {
        position: absolute;
        top: 70px;
        right: 15px;
        z-index: 9999;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .image-three img {
        max-width: 70px;
        height: auto;
    }

}




@media (max-width: 969px) {
    .page--map-bottomsheet #bottom-bar{
        position: fixed; left:0; right:0; bottom:0; transform:none;
        width:100vw; max-width:none; z-index:9999;
        /* altura será controlada por JS; mas deixamos uma base */
        height: auto;
        min-height: 56px;
        border-top-left-radius:16px; border-top-right-radius:16px;
        transition: height .22s ease;
    }

    /* Minimizado */
    .page--map-bottomsheet #bottom-bar.is-minimized{ height:56px !important; }

    /* Botão “Abrir Categorias”: começa oculto; só aparece minimizado */
    .page--map-bottomsheet #bottom-bar .bottom-label{ display:none; }
    .page--map-bottomsheet #bottom-bar.is-minimized .bottom-label{
        display:flex; margin:0 12px 10px; padding:10px 14px; border-radius:999px;
        justify-content:center; align-items:center; gap:8px;
        border:1px solid rgba(0,0,0,.08); box-shadow:0 4px 12px rgba(0,0,0,.08);
        background:linear-gradient(180deg,#fff,#f6f6f6);
        font-weight:700; font-size:14px; letter-spacing:.3px; color:#2b2b2b; cursor:pointer;
    }
    .page--map-bottomsheet #bottom-bar.is-minimized .bottom-label::before{
        content:"▴"; font-size:12px; transform:translateY(-1px);
    }
    .page--map-bottomsheet #bottom-bar.is-minimized .bottom-label:hover{ background:#eee; }

    /* Mapa: 100% minimizado; aberto ocupa o restante (JS ajusta altura) */
    .page--map-bottomsheet.bottombar-minimized #map{ height:90vh !important; }

    /* UX: evita seleção de texto ao arrastar */
    .page--map-bottomsheet #bottom-bar.is-dragging,
    .page--map-bottomsheet #bottom-bar.is-dragging *{ user-select:none; }
}




@media screen and (max-width: 767px) {
    .images-map { z-index: 5; position: absolute; display: flex; justify-content: space-between; width: auto; padding: 10px; z-index: 2; }
    .image-map-desktop { display: none; }

    .image-two { margin-top: 60px; position: absolute; right: 20px; top: 0; z-index: 2; }
    .content-main-categories-doe .type-category-and-button-back { margin-left: 0; margin-right: 2rem; }

    .button-and-title.flex.items-center.mb-4 h2 { width: 76vw; }

    #map {
        /* height: calc(100vh - 50dvh); */
        height: 100%;
        max-height: 60vh;
    }

    .gm-style-mtc {
        display: flex !important;       /* força flex container */
        flex-direction: row !important; /* mantém lado a lado */
        gap: 0 !important;              /* remove qualquer espaço */
        margin: 5px -5px !important;
    }

    .gm-style-mtc button {
            transform: scale(.9);
            transform-origin: top right;
            font-size: 14px !important;
            padding: 2px 13px !important;
            margin: 0 !important;
            border-radius: 0 !important;
    }

    /* arredonda só as pontas */
    .gm-style-mtc button:first-child {
        border-radius: 0px !important;
    }
    .gm-style-mtc button:last-child {
        border-radius: 0 !important;
    }

     .horario_secretaria.mt-4 .space-y-3.mt-2 {
                flex-direction: column;
            }

/*  */

/* estado minimizado: mantém só a altura do toggle */
#bottom-bar.minimized {
  overflow: visible; /* para o botão poder ficar por fora do conteúdo */
}

/* quando container-2 estiver ativo, o mapa fica com height 0 */
#screen-container-2.active ~ #map,
#screen-container-2:target ~ #map {
    height: 0 !important;
    overflow: hidden; /* evita scroll */
}


/* botão que aparece quando minimizado - fica por cima do mapa */
#toggle-button {
  position: absolute;
  bottom: 0; /* sempre colado na base da viewport/bottom-bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1005; /* acima do mapa e do bottom-bar */
  margin: 8px 0; /* evita colar exatamente na borda */
  display: none; /* só aparece quando minimizado via JS */
  pointer-events: auto;
}

/* garante que o mapa fique por trás e ocupe o espaço total */
#map {
  position: relative;
  z-index: 1;
  transition: height 0.3s ease, max-height 0.3s ease;
  height: 50vh; /* fallback inicial — o JS irá ajustar */
  max-height: 50vh;
}


    .info-box:last-child {
        margin-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    .image-one img {
    width: 130px;
}


}

.button-and-title.flex.items-center.mb-4 button:first-child {
    background: #004082 !important;
}

.info-box img {
    width: 100%;
}
.cartaz {
    position: relative;
}

        /* Contêiner das setas */
.category-arrows {
    display: none; /* Escondido em mobile */
    /* justify-content: space-between; */
    /* margin-top: 5px; */
    /* padding: 0 5px; */
}

@media screen and (min-width: 968px) {
    .categories button { width: 5vw; height: auto; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
    .offset { margin-left: 2.5vw; margin-top: -2.5rem; }
    .input-container button { width: 3vw; }
    #bottom-bar { max-width: 32vw; top: 0; max-height: 55vh; transform: translate(0); left: 0; margin-bottom: 25px; }
    .type-category-and-button-back { display: flex; overflow-x: auto; overflow-y: hidden; justify-content: start; margin-left: -1.27rem; justify-content: center; width: 100%; }
    .categories .subcategory-sidebar { width: 2vw; }  

    .category-carousel {
        display: flex;
    }

    span#current-category-title { align-items: center; }
    span#current-category-title img {width: 10vw;}

    .input-container input {
        height: 4vh;
    }



    .buttons-move-categories {
        height: 25px;
        width: 99%;
        margin-top: -4px;
        display: flex;
        justify-content: space-between;
    }

    .subcategory-content .row.offset { margin-left: -2.5vw; }



}

@media (min-width: 1100px) {
    .input-container input { height: 5vh; }
    #bottom-bar { width: 30vw; height: auto !important; left: 0% !important; transform: translateX(0%) !important; }

    .screen { width: fit-content; }

    #screen-container-1 { width: 70dvh; }
    button.cat-btn.Doe { margin-bottom: 5px; }
    .subcategory-layout { margin-left: 1rem !important; }

    #screen-container-2 { width: auto; }
}


/* Exibe setas apenas em desktop */
@media (min-width: 768px) {
    .category-arrows {
        display: flex;
        gap: 1rem;
    }
}























/* Estilos para o toggle (<details> e <summary>) */
.subcategory-details details {
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    margin-top: 5px;
}

.subcategory-details details[open] {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.subcategory-details summary {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    outline: none;
    user-select: none;
    transition: background-color 0.2s ease;
}

.subcategory-details li summary {
    background: #398ade33 !important;
}

.subcategory-details summary:hover {
    background-color: #e5e7eb;
    border-radius: 4px;
}

.subcategory-details summary::before {
    content: "\f054"; /* Ícone de seta para a direita (fechado) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.875rem;
    color: #4b5563;
    transition: transform 0.3s ease;
}

.subcategory-details details[open] summary::before {
    content: "\f078"; /* Ícone de seta para baixo (aberto) */
    transform: rotate(90deg);
}

.subcategory-details details > div {
    padding: 12px;
    font-size: 0.875rem;
    color: #374151;
}