/* Base styles from your CSS */
.title-small-bold {
  font-family: 'Quicksand', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-align: left;
  margin-left: 0;
}
.title-bold {
  font-family: 'Quicksand', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  text-align: left;
  color: #204462;
}
.subtitle-bold {
  font-family: "Quicksand", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
}
.flex-center-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auto-width-bg-green {
  width: auto !important;
  background-color: #009A00 !important;
}
.text-green-dark {
  color: #004D00;
}
.gap-0-5rem {
  gap: 0.5rem;
}
.justify-start {
  justify-content: flex-start !important;
}
.bg-white {
  background-color: white !important;
}
.text-gray {
  color: #4D4D4D;
}
.m-0 {
  margin: 0 !important;
}
.mb-0-5 {
  margin-bottom: 0.5rem;
}
.mt-0-5 {
  margin-top: 0.5rem !important;
}
.mb-0_875rem {
  margin-bottom: 0.875rem !important;
}
.mt-2_125rem {
  margin-top: 2.125rem;
}
.align-center {
  align-items: center !important;
}

/* Table Styles */
.table-container {
  width: 100%;
  overflow-x: auto; /* This enables horizontal scrolling on mobile */
  -webkit-overflow-scrolling: touch; /* Improves scrolling on iOS devices */
  max-width: 100%;
}

/* Limit width of the table on desktop view */
@media (min-width: 1024px) {
  .table-container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

.features-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Quicksand', sans-serif;
}

.features-table td {
  padding: 0.8125rem;
  border: 1px solid #E6E6E6;
  vertical-align: top;
}

/* Center everything besides first column and first row */
.features-table tr:not(:first-child) td:not(:first-child) {
  text-align: center;
}

.features-table tr:nth-child(even) {
  background-color: #F8F8F8;
}

.features-table tr td:first-child {
  width: 34%;
}

.features-table tr td:not(:first-child) {
  width: 16.5%;
  text-align: left;
}

/* Buttons */
.select-button {
  display: inline-block;
  padding: 8px 12px;
  background-color: #009A00;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: Quicksand;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
}

/* Price styles */
.price {
  margin-bottom: 0.5rem;
}

.price span {
  font-family: Quicksand;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.015em;
  text-align: left;
  color: #000000;
}

/* Check and Cross Cell Styles */
.check-cell::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 12px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none"><path d="M14.6181 0.46223C14.1059 -0.0499101 13.2583 -0.0499101 12.7461 0.46223L5.06401 8.14434L2.25607 5.33639C1.74393 4.82425 0.896246 4.82425 0.384105 5.33639C-0.128035 5.84853 -0.128035 6.69622 0.384105 7.20836L3.81015 10.6344C4.49889 11.3231 5.61147 11.3231 6.30021 10.6344L14.6004 2.33419C15.1302 1.82205 15.1302 0.974371 14.6181 0.46223Z" fill="%23009A00"/></svg>') no-repeat center;
  background-size: contain;
  vertical-align: middle;
}

.cross-cell::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 19px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none"><path d="M13.725 4.36066C13.4325 4.06816 12.96 4.06816 12.6675 4.36066L9.00004 8.02066L5.33254 4.35316C5.04004 4.06066 4.56754 4.06066 4.27504 4.35316C3.98254 4.64566 3.98254 5.11816 4.27504 5.41066L7.94254 9.07816L4.27504 12.7457C3.98254 13.0382 3.98254 13.5107 4.27504 13.8032C4.56754 14.0957 5.04004 14.0957 5.33254 13.8032L9.00004 10.1357L12.6675 13.8032C12.96 14.0957 13.4325 14.0957 13.725 13.8032C14.0175 13.5107 14.0175 13.0382 13.725 12.7457L10.0575 9.07816L13.725 5.41066C14.01 5.12566 14.01 4.64566 13.725 4.36066Z" fill="%23939393"/></svg>') no-repeat center;
  background-size: contain;
  vertical-align: middle;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
  }
  
  .table-container {
    display: block;
    width: 100%;
    position: relative;
    overflow-x: auto;
    max-width: 100vw;
  }
  
  .table-container::after {
    content: '← Scroll →';
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    opacity: 0.8;
    z-index: 100;
  }
  
  .features-table {
    min-width: 800px; /* Fixed minimum width to ensure readability */
    max-width: none;
  }
  
  .features-table td {
    min-width: 120px;
    font-size: 14px;
  }
  
  .features-table tr td:first-child {
    min-width: 150px;
  }
}