/**
 * Page: Acquiring (pg-solucoes-acquiring.php)
 * Estilos específicos da página. Referência: custom.css + styles-redesign.css.
 */

/* Hero: Owl antes de carregar + dots */
.owl-carousel:not(.owl-loaded) {
  display: block !important;
  overflow: hidden !important;
  max-height: 100vh !important;
}
.owl-header-hero .owl-dot {
  background: transparent !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
}
.owl-header-hero .owl-dots {
  margin-top: 0 !important;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}
.owl-header-hero .owl-dots .owl-dot span {
  margin: 0 !important;
}

/* Botão amarelo (hero azul) */
.new-button.yellow,
.tw-button.yellow {
  border-color: #eeff88 !important;
  background: #eeff88 !important;
  color: #000 !important;
}
.new-button.yellow:hover,
.tw-button.yellow:hover {
  border-color: #00d8d8 !important;
  background: #00d8d8 !important;
  color: #000 !important;
}

/* Acquiring as a service: grid de ícones (4 col) + último item dotted */
.acquiring-as-a-service .tw-acq-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 991px) {
  .acquiring-as-a-service .tw-acq-icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .acquiring-as-a-service .tw-acq-icon-grid {
    grid-template-columns: 1fr;
  }
}

/* Último item da grid: fundo cyan e outline tracejado (só nesta seção) */
.acquiring-as-a-service .tw-acq-icon-grid .tw-icon-box:last-child {
  border: 0 !important;
  outline: 4px dashed #00d8d8 !important;
  background-color: #00d8d8 !important;
  color: #000 !important;
}

/* Vantagens (maximizar-eficiencia): desktop grid vs mobile carousel */
#maximizar-eficiencia .vantagens-desktop {
  display: none;
}
#maximizar-eficiencia .vantagens-mobile {
  display: block;
}
@media (min-width: 768px) {
  #maximizar-eficiencia .vantagens-desktop {
    display: grid;
  }
  #maximizar-eficiencia .vantagens-mobile {
    display: none !important;
  }
}

/* Vantagens: banner com bg image */
.tw-acq-banner {
  background-size: cover;
  background-position: top right;
  border-radius: 16px;
  border: 3px solid rgba(0, 215, 217, 0.25);
}

/* Tabs Captura (não depende de Bootstrap: só um painel visível) */
#captura-de-transacao .tab-content.capturas-de-transacao .tab-pane {
  display: none;
}
#captura-de-transacao .tab-content.capturas-de-transacao .tab-pane.show {
  display: block;
}
.captura-btn {
  min-width: 204px;
  width: fit-content;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.captura-btn.active {
  background: #00d8d8;
  border-color: #00d8d8;
  color: #000;
}

/* E-commerce: serviços à esquerda, imagem à direita */
#captura-de-transacao .captura-online-layout {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 768px) {
  #captura-de-transacao .captura-online-services {
    grid-column: span 7;
    order: 1;
  }
  #captura-de-transacao .captura-online-image {
    grid-column: span 5;
    order: 2;
  }
  /* Serviços E-commerce: grid 2x2 (4 filhos diretos OU 1 wrapper com 4 filhos) */
  #captura-de-transacao .captura-online-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  #captura-de-transacao .captura-online-services-grid > * {
    break-inside: avoid;
    min-width: 0;
  }
  #captura-de-transacao .captura-online-services-grid > *:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  #captura-de-transacao .captura-online-services-grid > *:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  #captura-de-transacao .captura-online-services-grid > *:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }
  #captura-de-transacao .captura-online-services-grid > *:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
  /* Quando ACF injeta um único wrapper com os 4 blocos dentro */
  #captura-de-transacao .captura-online-services-grid > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    grid-column: 1 / -1;
    min-width: 0;
  }
  #captura-de-transacao .captura-online-services-grid > div > * {
    break-inside: avoid;
    min-width: 0;
  }
  #captura-de-transacao .captura-online-services-grid > div > *:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  #captura-de-transacao .captura-online-services-grid > div > *:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  #captura-de-transacao .captura-online-services-grid > div > *:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }
  #captura-de-transacao .captura-online-services-grid > div > *:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Vantagens mobile: altura do item no owl */
@media (max-width: 991px) {
  #maximizar-eficiencia .owl-acquiring-solution-cards .owl-item .tw-icon-box {
    min-height: 190px;
  }
}

/* Modal Bandeiras Homologadas (estilos completos: style-redesign desenfileirado) */
.modal-flag.d-none {
  display: none !important;
}
.modal-flag {
  width: 860px;
  max-width: 90%;
  background: #14191A;
  border-radius: 8px;
  padding: 32px;
  position: fixed;
  top: 20vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-height: 70vh;
  overflow-y: auto;
}
.modal-flag::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.modal-flag.d-none::before {
  display: none;
}
#open-flag-modal,
#close-modal-flag {
  cursor: pointer;
}
/* Utilitários dentro do modal (substituem Bootstrap d-flex, d-block, d-none, d-md-*) */
.modal-flag .d-flex { display: flex !important; }
.modal-flag .d-block { display: block !important; }
.modal-flag .d-none { display: none !important; }
@media (min-width: 768px) {
  .modal-flag .d-md-block { display: block !important; }
  .modal-flag .d-md-none { display: none !important; }
}
@media (max-width: 767px) {
  .modal-flag .d-md-block { display: none !important; }
  .modal-flag .d-md-none { display: block !important; }
}
@media (max-width: 768px) {
  .modal-flag {
    height: 80%;
    top: 120px;
    overflow-x: auto;
  }
  .modal-flag h2 {
    font-size: 1.2rem;
  }
}