/* Mobile First Base Styles */
.comparison-section {
  background-color: #f8f8f8;
  padding: 50px 20px;
}

/* Toggle Buttons for Mobile */
.comparison-toggle {
  display: flex;
  border-bottom: 1px solid #000;
  margin-bottom: 20px;
}

.comparison-table{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.comparison-table .table-row{
  display: flex;
  border-bottom: 1px solid #fff;
}

.comparison-table .table-row .row-label{
  width: 107px;
  padding-right: 20px;
  padding-top: 12px;
}

.comparison-table .table-row .row-content{
  flex: 1;

}

.toggle-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 26px;
  text-transform: uppercase;
  color: #141414;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  transition: all 0.3s;
}

.toggle-btn.active {
  color: #d0191f; /* Drop-in Red */
  border-bottom-color: #000;
}

/* Tab logic: hide the column that isn't active */
.active-drop-in .col-spray-in { display: none; }
.active-spray-in .col-drop-in { display: none; }



.table-header-desktop { display: none; } /* Hide on mobile */


.row-label {
  font-weight: 700;
  font-size: 16px;
  text-transform: capitalize;
}

.cell {
  background: #fff;
  padding: 12px;
  font-size: 16px;
}

/* Desktop Styles */
@media (width >= 1024px) {
  .comparison-toggle { display: none; }

  .comparison-section {
    padding: 120px 20px;
  }

  .table-header-desktop {
    display: grid;
    margin-left: 170px;
    border-bottom: 1px solid #000;
    grid-template-columns: 1fr 1fr;
  }

  .comparison-table .table-row .row-label{
    width: 170px;
  }

  .comparison-table .table-row .row-content{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .header-cell {
    flex: 1;
    text-align: center;
    padding: 20px;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .comparison-table .table-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #fff;

  }

  .comparison-table .row-label {
    width: 170px;
    font-size: 18px;
    margin-bottom: 0;
  }

  .comparison-table .row-content {
    flex: 1;
    display: flex;
    gap: 10px;
  }

  .active-drop-in .col-spray-in,
  .active-spray-in .col-drop-in {
    display: block; /* Show both on desktop */
  }


}