#specs .flex-wrapper { justify-content: space-between; }
#specs article { padding-top: var(--space-4); }
#specs h3 {
  font-size: 27px;
  font-weight: bold;
  margin-top: var(--space-2);
}

#specs p { font-size: 15px; }

/** COMPARA APP */


#no-app,
#app { margin-top: var(--space-5) }

#app *[class*=btn-] { padding: var(--space-1) var(--space-3) }

.compare-flex {
	display: flex;
	justify-content: space-between;
}

.compare-header {
	width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
	padding: var(--space-5) var(--space-3);
	color: white;
	margin-top: var(--space-3);
	border-radius: 15px;
	text-align: left;
}

.compare-table {
	display: flex;
	flex-direction: column;
	
	margin-top: var(--space-3);
}

.tr {
	width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
	padding: var(--space-4) var(--space-3);
	text-align: center;
}

.tr > .compare-card { gap: 1rem; }
.tr > span {
    display: flex;
    justify-content: center;
    align-items: center;
  }

.compare-table .tr:nth-child(even) { background-color: #F2F5F7 }

.btn-gray {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: all .2s ease;
	background-color: var(--color-gray)
}

.circle-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #333;
  border-radius: 50%;
  appearance: none; /* remove o padrão */
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  position: relative;
}

/* Check visual */
.circle-checkbox:checked::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background: #333;
  border-radius: 50%;
}

.dropdown {
    position: relative;
	display: inline-block;
	margin-bottom: 10px;
}

.dropdown-content {
	position: absolute;
	background: white;
	border: 1px solid #ccc;
	padding: 10px;
	z-index: 10;
}


.sortable {
  cursor: pointer;
  user-select: none;

  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* container dos dois */
.triangles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 0;
}

/* triângulo base */
.triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

/* cima */
.triangle.up {
  border-bottom: 6px solid white;
}

/* baixo */
.triangle.down {
  border-top: 6px solid white;
}

/* ASC ativo */
.sortable.asc .triangle.up {
  border-bottom-color: white;
}

/* DESC ativo */
.sortable.desc .triangle.down {
  border-top-color: white;
}


.triangle + .triangle { margin-top: 3px; }

.hide { display: none; }

#quick-picks .box {
  padding: var(--space-5) var(--space-2);
  height: 337px;
}
#quick-picks h3 {
  margin-top: var(--space-2);
  font-size: 25px;
}
#quick-picks p {
  padding: 0 var(--space-3);
  margin-top: var(--space-2);
  color: var(--font-color-gray-light);
  font-size: 15px;
}

#quick-picks .link {
  width: 170px;
  background: #ECEFF2;
  padding: 18px 14px;
  border-radius: 250px;
  margin-top: var(--space-4);

  font-size: 14px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  font-family: Inter;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 2%;
  text-align: center;
  display: inline-flex;
  justify-content: space-around;
  align-items: baseline;
  gap: 8px;
  position: absolute;
  bottom: var(--space-5);
  left: 50px;
}

.table-line { padding: var(--space-4) 0; }


@media (max-width: 767px) {
  #which-choose-swipper .box { padding: 0; }
}

@media (min-width: 768px) {
  #which-chose .big { width: 35%; }
  #specs article { width: 30%; }

  #compare #hero .black,
  #compare .home-actions { width: 90%; }


  /* COMPARE TABLE */
    .tr > div { display: inline-block; }

  .compare-table {
    border-radius: 15px;
    border: 2px solid var(--color-gray);
  }

  .compare-table .tr:last-child { border-radius: 0 0 15px 15px; }

  .compare-card { flex-direction: column; }
}

@media (max-width: 1023px) {

  .compare-header { display: none; }

  /* COMPARE TABLE */
  .compare-flex > a {
    width: calc(50% - 1rem);
    justify-content: center;
  }
  
  .tr {
    border-radius: 15px;
    border: 2px solid var(--color-gray);
    margin-bottom: var(--space-3);
  }
    .tr>div { width: calc(50% - var(--space-3)); }
    .tr>div:first-child {
      width: var(--space-3);
      margin-left: var(--space-2);
    }
   .tr>div.compare-card { width: calc(100% - 40px); } /* calculei na mao */

    .tr .mobile {
      display: block;
      flex-basis: 100%;
      width: 100%;
    }
    .tr .mobile::after {
      content: "";
      display: block; /* força quebra de linha */
    }

    .detail-card {
      height: 150px;
      border-radius: 15px;
      border: 2px solid var(--color-gray);
      align-content: center;
      font-size: 14px;
      padding: var(--space-2);
    }

    .detail-card > div {
      font-size: 16px;
      font-weight: bold;
    }

    .compare-card {
      justify-content: space-between;
      display: flex;
      flex-direction: row;
    }

    .compare-table .tr:nth-child(even) .detail-card { background-color: white; }

    .compare-card img {
      width: 200px;
      margin-right: var(--space-4);
    }
    .tr>div:first-child,
    .compare-card * { align-content: center; }
}

@media (min-width: 1024px) {
  #quick-picks .carrousell { width: 298px; }

  .compare-header,
  .tr {
    display: grid;
    gap: 16px;
    align-items: center;
  }

  .tr,
  .compare-header { grid-template-columns: 20px 160px 80px 40px 80px 60px 60px 80px 80px 60px; }
}

@media (min-width: 1280px) {
  #quick-picks .carrousell { width: 275px; }

  
  .atm_fee_abroad,
  .reload_options { max-width: 65%; }

  .tr,
  .compare-header { grid-template-columns: 20px 120px 120px 60px 120px 100px 100px 140px 100px 100px; }
}