/* UI base styles */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; }
.modal .btn { margin-right: .5rem; }
.navbar-brand img { height: 32px; }
.content-wrapper { padding-bottom: 48px; }

/* Topbar localização */
.bg-primary.text-white.text-center { background-color: #2f6bf2 !important; }
/* Cards de loja */
.slick-gallery .img-thumbnail { border-radius: 6px; }
.badge-dark { background-color: #000; }
/* Topbar */
.topbar { background-color: #2f6bf2; }
.topbar .icon-btn { position: relative; }
.topbar .icon-badge { position: absolute; top: -6px; right: -6px; background: #fff; color: #2f6bf2; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
/* Contato button */
.btn-contact { background-color: #28a745; color: #fff; border-color: #28a745; }
.btn-contact:hover { filter: brightness(1.05); color: #fff; }
body.block-scroll{ overflow: hidden; }

/* Modal de imagens (.modal__image) */
#modal__wrapper{
  display:none;
  position:fixed;
  top:100px;
  right:0;
  left:0;
  margin:0 16px;
  z-index:30000;
  overflow: hidden; /* Já definido acima, reforçando aqui */
  touch-action: pan-x; /* Já definido acima, reforçando aqui */
}
#modal__header{ display:flex; justify-content:flex-end; width:100%; margin-bottom:16px; }
#modal__close{
  cursor:pointer;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}
#modal__close:hover {
  background: rgba(0, 0, 0, 0.9);
}
#modal_slides{ margin:0; padding:0; height:438px; margin-bottom:16px; display:flex; gap:16px; width:calc(100vw - 32px); position:static; }
#modal_slides > li{ position:relative; }
#modal_slides > li.active{ position:absolute; }
.modal__image{ height:438px; width:calc(100vw - 32px); border-radius:5px; background-position:center; background-repeat:no-repeat; background-size:contain; }
#modal__title{ font-weight:700; font-size:16px; line-height:29px; color:#fff; }
#modal__footer{ display:flex; align-items:center; justify-content:space-between; }
#modal__category{ font-weight:700; font-size:12px; line-height:17px; display:flex; align-items:center; color:#fff; }
#modal__footer__actions{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.modal__footer__action__item{ background:#fff; border-radius:5px; width:56px; height:44.33px; display:flex; justify-content:center; align-items:center; cursor:pointer; }
/* Icon sizing and color inside action items */
.modal__footer__action__item { color:#222; }
.modal__footer__action__item svg{ width:22px; height:22px; display:block; }
.modal__footer__action__item i{ font-size:20px; line-height:1; }
/* Ensure white icons on black buttons (e.g., favorited heart) */
.btn-black i { color: #fff; }
/* Black background for favorited state */
.btn-black { background-color: #000; border-color: #000; color: #fff; }
.btn-black:hover, .btn-black:focus { background-color: #000; color: #fff; }
/* Keep non-favorited heart dark on light button */
.btn-light i { color: #000; }
/* Specific safeguard for heart icon inside contact tools */
.contact-tools .btn-black i.fa-heart { color: #fff; }
.image--open_modal{ cursor:pointer; }
#modal__overlay{
  display:none;
  background-color:#000;
  position:fixed;
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index:20000;
  opacity:75%;
  touch-action: none; /* Já definido acima, reforçando aqui */
}
.modal--active #modal__overlay{ display:block; pointer-events:auto; }
.modal--active #modal__wrapper{ display:block; pointer-events:auto; }
/* Block page interactions when modal is active */
body.block-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none; /* Bloqueia gestos de toque */
}
body.block-scroll #mf__modal {
  pointer-events: auto;
  touch-action: pan-y pan-x; /* Permite swipe apenas no modal */
}
#modal__overlay {
  touch-action: none; /* Bloqueia scroll no overlay */
}
#modal__wrapper {
  overflow: hidden; /* Impede scroll no wrapper */
  touch-action: pan-x; /* Permite apenas swipe horizontal */
}
#modal__left, #modal__right{ display:flex; align-items:center; justify-content:center; z-index:30001; position:absolute; top:calc( 16px + 16px + 438px/2 - 24px/2 + 100px); cursor:pointer; }
#modal__left{ left:0; }
#modal__right{ right:0; }
/* Garantir Font Awesome 6 para o ícone de três pontinhos */
.btn-tools-toggle i.fa-solid,
.btn-tools-toggle i.fa-ellipsis-vertical {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
@media screen and (min-width:650px){
  #modal__left, #modal__right{ transform:scale(1.2); }
  #modal__left{ top:calc( 16px + 16px + 438px/2 - 38px/2 + 100px); left:calc(50vw - 200px - 16px - 16px); width:32px; height:32px; }
  #modal__right{ top:calc( 16px + 16px + 438px/2 - 38px/2 + 100px); right:calc(50vw - 200px - 16px - 16px); width:32px; height:32px; }
  #modal__wrapper{ max-width:400px; left:calc(50vw - (432px)/2); overflow:hidden; padding:0; }
  .modal__image{ height:438px; width:400px; border-radius:5px; background-position:center; background-repeat:no-repeat; background-size:contain; }
}