/* Card genérico desabilitado */
.solution_card--disabled {
  filter: grayscale(0.7) brightness(0.97);
  opacity: 0.7;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.08), 0 5px 15px 0 rgba(37, 44, 97, 0.07);
  width: 100%;
  min-width: 0;
  margin: 0;
}

.solution_card--disabled:hover {
  background: #fff;
  color: inherit;
  transform: none;
  z-index: 1;
}
/* Card organizador desabilitado */
.solution_card.organizer-disabled {
  filter: grayscale(0.7) brightness(0.97);
  opacity: 0.7;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.08), 0 5px 15px 0 rgba(37, 44, 97, 0.07);
}

.solution_card.organizer-disabled:hover {
  background: #fff;
  color: inherit;
  transform: none;
  z-index: 1;
}
  /* Forçar o card Organizador para baixo no mobile */
  @media (max-width: 767px) {
    .our_solution_category .solution_cards_box {
      flex-direction: column;
      gap: 20px;
    }
    .solution_cards_box .solution_card {
      max-width: 100% !important;
      min-width: 0 !important;
      margin-right: 0 !important;
    }
  }
.section_our_solution .row {
    align-items: center;
  }
  
  .our_solution_category {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .our_solution_category .solution_cards_box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    /* Allow the cards container to grow with the parent .container */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  @media (max-width: 767px) {
    .our_solution_category .solution_cards_box {
      flex-direction: column;
      gap: 20px;
    }
    .solution_cards_box .solution_card {
      max-width: 100% !important;
      min-width: 0 !important;
      margin-right: 0 !important;
    }
  }
  .solution_cards_box .solution_card {
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2),
      0 5px 15px 0 rgba(37, 44, 97, 0.15);
    border-radius: 15px;
    margin: 0;
    padding: 16px 18px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 240px;
    transition: 0.7s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  
  .solution_cards_box .solution_card:hover {
    background: #309df0;
    color: #fff;
    transform: scale(1.1);
    z-index: 9;
}

/* Botão do card: texto branco apenas no hover do card */
.solution_cards_box .solution_card:hover .btn-outline-primary,
.solution_cards_box .solution_card:hover .btn-outline-primary i {
  color: #fff !important;
}
  
  .solution_cards_box .solution_card:hover::before {
    background: rgb(85 108 214 / 10%);
  }
  
  .solution_cards_box .solution_card:hover .solu_title h3,
  .solution_cards_box .solution_card:hover .solu_description p {
    color: #fff;
  }
  
  .solution_cards_box .solution_card:before {
    content: "";
    position: absolute;
    background: rgb(85 108 214 / 5%);
    width: 170px;
    height: 400px;
    z-index: -1;
    transform: rotate(42deg);
    right: -56px;
    top: -23px;
    border-radius: 35px;
  }
  
  .solution_cards_box .solution_card:hover .solu_description button {
    background: #fff !important;
    color: #309df0;
  }
  
  .solution_card .so_top_icon {
    /* placeholder for icon container styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .solution_card .solu_title h3 {
    color: #212121;
    font-size: 1.3rem;
    margin-top: 13px;
    margin-bottom: 13px;
  }
  
  .solution_card .solu_description p {
    font-size: 15px;
    margin-bottom: 15px;
  }
  
  .solution_card .solu_description button {
    border: 0;
    border-radius: 15px;
    background: linear-gradient(
      140deg,
      #42c3ca 0%,
      #42c3ca 50%,
      #42c3cac7 75%
    ) !important;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    padding: 5px 16px;
  }
  
  .our_solution_content h1 {
    text-transform: capitalize;
    margin-bottom: 1rem;
    font-size: 2.5rem;
  }
  .our_solution_content p {
    margin: 0 0 1rem 0;
  }
  
  .hover_color_bubble {
    position: absolute;
    background: rgb(54 81 207 / 15%);
    width: 100rem;
    height: 100rem;
    left: 0;
    right: 0;
    z-index: -1;
    top: 16rem;
    border-radius: 50%;
    transform: rotate(-36deg);
    left: -18rem;
    transition: 0.7s;
  }
  
  .solution_cards_box .solution_card:hover .hover_color_bubble {
    top: 0rem;
  }
  
  .solution_cards_box .solution_card .so_top_icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .solution_cards_box .solution_card .so_top_icon img {
    width: 40px;
    height: 50px;
    object-fit: contain;
  }
  
  /*start media query*/
  @media screen and (max-width: 991px) {
    .our_solution_category .solution_cards_box {
      flex-direction: column;
      align-items: center;
    }
    .solution_cards_box .solution_card {
      max-width: 100%;
      width: 100%;
    }
  }

/* Ensure .solution_cards_box used as a Bootstrap row behaves responsively.
   Use CSS Grid to avoid conflicts with existing flex-direction: column rules
   in this stylesheet. Two columns on md+ and stacked (1 column) on small.
*/
.solution_cards_box.row {
  display: grid;
  /* Flexible columns with minimum width, allowing cards to grow on very wide screens */
  grid-template-columns: repeat(2, minmax(380px, 1fr));
  column-gap: 4%;
  row-gap: 1rem;
  align-items: stretch; /* ensure grid cells stretch vertically */
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .solution_cards_box.row {
    grid-template-columns: 1fr;
    column-gap: 0;
    justify-content: stretch;
  }
}

/* Make sure direct column wrappers (now .card-cell) stretch their children to equal height */
.solution_cards_box.row > .card-cell {
  /* behave like the previous column wrapper: act as a flex container
     so the .solution_card inside can stretch and align correctly */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.solution_cards_box.row > .card-cell > .solution_card {
  width: 100%;
  box-sizing: border-box;
  /* Allow each card to grow to fill the column wrapper; using flex:1
     makes equal-height cards more robust than height:100% across browsers. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* utility to keep previous spacing formerly provided by Bootstrap utilities */
.card-cell {
  padding-bottom: 1rem; /* similar to mb-3 spacing */
}

/* ensure the action/description area sits at the bottom of the card */
.solution_card .solu_description {
  margin-top: auto;
}

/* Small muted text positioned at the bottom-right of a card.
   Intended to be added manually inside the card HTML where needed.
   Example usage in the Profissional card:
     <div class="card-bottom-muted">Upgrade</div>
*/
.card-bottom-muted {
  font-size: 0.8rem;
  color: #6c757d; /* bootstrap text-muted equivalent */
  margin-top: 0.5rem; /* small gap from the content above */
  align-self: flex-end; /* align to the right within flex column */
  text-align: right;
  padding-left: 8px;
  padding-right: 4px;
}

/* When card is hovered (dark background) keep the muted text visible by lightening it */
.solution_cards_box .solution_card:hover .card-bottom-muted {
  color: rgba(255,255,255,0.85);
}

/* On very large screens allow the cards container to expand so each card becomes wider */
@media (min-width: 1200px) {
  .our_solution_category .solution_cards_box {
    max-width: 1400px; /* increase from default 1100px */
  }
}
  

/* Give the small muted note in the pricing section a bit more vertical spacing
   so it doesn't sit flush against the card boxes. Scoped to .pricing to
   avoid changing other small.text-muted instances. */
.pricing small.text-muted,
.pricing .text-muted {
  display: block; /* ensure it gets vertical margin */
  margin-top: 1rem; /* a little extra space from the cards above */
  margin-bottom: 0;
}