/* Styles for the Program Comparator */

.program-comparator {
  padding: 50px 0;
  background-color: #f7f7f7;
  margin: 0 0 80px 0;
}

.program-comparator-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #292f34;
}

.program-comparator-description {
  font-size: 16px;
  margin-bottom: 30px;
  max-width: 800px;
  color: #292f34;
}

.comparator-step {
  display: none;
}

.comparator-step.active {
  display: block;
}

/* Styles for Step 1 - Search Form */
.search-form {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.search-form .form-group {
  margin-bottom: 0;
}

.search-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.search-form select {
  height: 50px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.btn-primary,
button.btn-search-programs {
  background-color: #e30613;
  border: none;
  color: #fff;
  padding: 10px 16px;
  width: 100%;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  @media screen and (max-width: 767px) {
    width: max-content;
    margin: 0 auto;
  }
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
button.btn-search-programs:hover {
  background-color: #a81623;
  border-color: #a81623;
}

.btn-outline-primary {
  color: #c91b2a;
  border-color: #c91b2a;
  background-color: transparent;
  height: 40px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background-color: #c91b2a;
  color: #fff;
}

/* Styles for Step 2 - Search Results */
.search-results {
}

.row-results {
  display: block;
  width: 100%;
}

.row-results.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.row-results .content-row-results {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 24px;
}

.row-results .content-row-results .flex-comparison {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

button.btn-compare {
  background-color: #e30613;
  border: none;
  color: #fff;
  padding: 10px 16px;
  width: 100%;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.search-box {
  position: relative;
}

.search-box input {
  height: 50px;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding-left: 42px;
  width: 100%;
  max-width: 420px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21.7099%2020.2894L17.9999%2016.6094C19.44%2014.8138%2020.1374%2012.5347%2019.9487%2010.2407C19.76%207.94672%2018.6996%205.8122%2016.9854%204.27606C15.2713%202.73992%2013.0337%201.91893%2010.7328%201.98189C8.43194%202.04485%206.24263%202.98698%204.61505%204.61456C2.98747%206.24214%202.04534%208.43145%201.98237%2010.7323C1.91941%2013.0332%202.74041%2015.2708%204.27655%2016.9849C5.81269%2018.6991%207.94721%2019.7595%2010.2412%2019.9482C12.5352%2020.1369%2014.8143%2019.4395%2016.6099%2017.9994L20.2899%2021.6794C20.3829%2021.7731%2020.4935%2021.8475%2020.6153%2021.8983C20.7372%2021.9491%2020.8679%2021.9752%2020.9999%2021.9752C21.1319%2021.9752%2021.2626%2021.9491%2021.3845%2021.8983C21.5063%2021.8475%2021.6169%2021.7731%2021.7099%2021.6794C21.8901%2021.493%2021.9909%2021.2438%2021.9909%2020.9844C21.9909%2020.7251%2021.8901%2020.4759%2021.7099%2020.2894ZM10.9999%2017.9994C9.61544%2017.9994%208.26206%2017.5889%207.11091%2016.8197C5.95977%2016.0505%205.06256%2014.9573%204.53275%2013.6782C4.00293%2012.3991%203.86431%2010.9917%204.13441%209.63378C4.4045%208.27592%205.07119%207.02864%206.05016%206.04967C7.02912%205.0707%208.27641%204.40402%209.63427%204.13392C10.9921%203.86382%2012.3996%204.00245%2013.6787%204.53226C14.9578%205.06207%2016.051%205.95928%2016.8202%207.11042C17.5894%208.26157%2017.9999%209.61495%2017.9999%2010.9994C17.9999%2012.8559%2017.2624%2014.6364%2015.9497%2015.9492C14.6369%2017.2619%2012.8564%2017.9994%2010.9999%2017.9994Z%22%20fill%3D%22%23455055%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: left 8px center;
}

#selected-count {
  display: inline-block;
  margin-right: 15px;
  font-weight: 700;
  line-height: 50px;
  color: #292f34;
  font-size: 14px;
}

.label-title {
  color: #292f34;
}

select.program-select {
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #dddddd;
  padding: 12px;
  width: 100%;
  max-width: 350px;
  display: block;
  clear: both;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M1.41%200.589844L6%205.16984L10.59%200.589844L12%201.99984L6%207.99984L0%201.99984L1.41%200.589844Z%22%20fill%3D%22%23292F34%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  @media screen and (max-width: 767px) {
    max-width: 100vw;
  }
}

.program-card {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
  border-left: 3px solid #3b3b3b;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.program-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.program-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  min-height: 60px;
  margin: 0;
  color: #000000;
}

.program-checkbox {
}

.program-checkbox input {
  accent-color: #3b3b3b;
  border-color: #3b3b3b;
}

.program-content {
  flex: 1;
  padding-left: 12px;
}

.program-actions {
  margin-top: 15px;
  text-align: right;
}

.program-actions a {
  color: #e10d17 !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}

.program-actions a:hover,
.program-actions a:selected {
  color: #e10d17 !important;
  text-decoration: underline;
}

/* Tooltip for max selection message */
.tooltip-max-selected {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  width: 250px;
  top: -40px;
  left: 0;
  z-index: 10;
  display: none;
}

.tooltip-max-selected:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 15px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Pagination styles */
.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination li a,
.pagination li span {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination li.active span {
  background-color: #c91b2a;
  border-color: #c91b2a;
  color: #fff;
}

.pagination li a:hover {
  background-color: #f5f5f5;
}

/* Styles for Step 3 - Program Comparison */
.comparison-results {
}

.program-comparison {
  background-color: #fff;
  border-bottom: 4px solid #c10a13;
  border-radius: 8px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
}

.program-comparison:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.program-comparison-header {
  padding: 32px 16px 16px;
}

.program-comparison-header h3 {
  font-size: 24px;
  color: #292f34;
  font-weight: 700;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

.program-comparison-body {
  padding: 20px;
}

.program-comparison-detail {
  margin-bottom: 15px;
}

.program-comparison-detail h4 {
  font-size: 14px;
  color: rgba(67, 80, 84, 0.5);
  margin-bottom: 5px;
  text-transform: uppercase;
  font-weight: 400;
}

.program-comparison-detail p {
  color: #292f34;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.program-comparison-footer {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 16px;
}

.apply-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background-color: #fff;
  color: #c91b2a !important;
  padding: 8px 20px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
}

.apply-button:hover {
  color: #c91b2a !important;
  text-decoration: underline;
}

a.view-details {
  color: rgba(67, 80, 84, 0.5);
  font-weight: 700;
}

a.view-details:hover {
  color: rgba(67, 80, 84, 0.5);
  font-weight: 700;
  text-decoration: underline;
}

/* Mobile styles */
@media (max-width: 767px) {
  .search-form {
    padding: 15px;
  }

  .search-form .form-group {
    margin-bottom: 15px;
  }

  #selected-count {
    display: block;
    margin-bottom: 10px;
    text-align: left;
    line-height: normal;
  }

  .comparison-results h3 {
    text-align: center;
    margin-bottom: 15px;
  }

  #new-comparison-button {
    width: 100%;
    margin-bottom: 20px;
  }
}

button.btn-download-results {
  background-color: #fff;
  width: max-content;
  padding: 8px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #c91b2a !important;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
  margin: 16px auto;
  border: none;
}

button.btn-download-results:hover {
  background-color: #c91b2a !important;
  color: #fff !important;
  text-decoration: underline;
}

button.btn-download-results:hover svg path {
  fill: #fff !important;
}

h3.title-options {
  color: #292f34;
  font-size: 18px;
  font-weight: 700;
}

#program-type-loading {
  color: #292f34;
}

.js-comparison-slider .slick-track{
  display: flex;
}

.js-comparison-slider .slick-slide{
  height: inherit !important;
}

.js-comparison-slider button.slick-arrow {
  width: 24px;
  height: 24px;
  top: -24px;
  font-size: 0;
  background-color: transparent;
}

.js-comparison-slider button.slick-arrow:hover {
  background-color: transparent;
}

.js-comparison-slider button.slick-prev {
  opacity: 1;
  left: calc(100% - 64px) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.9999%2011.0002H9.4099L12.7099%207.71019C12.8982%207.52188%2013.004%207.26649%2013.004%207.00019C13.004%206.73388%2012.8982%206.47849%2012.7099%206.29019C12.5216%206.10188%2012.2662%205.99609%2011.9999%205.99609C11.7336%205.99609%2011.4782%206.10188%2011.2899%206.29019L6.2899%2011.2902C6.19886%2011.3853%206.12749%2011.4974%206.0799%2011.6202C5.97988%2011.8636%205.97988%2012.1367%206.0799%2012.3802C6.12749%2012.5029%206.19886%2012.6151%206.2899%2012.7102L11.2899%2017.7102C11.3829%2017.8039%2011.4935%2017.8783%2011.6153%2017.9291C11.7372%2017.9798%2011.8679%2018.006%2011.9999%2018.006C12.1319%2018.006%2012.2626%2017.9798%2012.3845%2017.9291C12.5063%2017.8783%2012.6169%2017.8039%2012.7099%2017.7102C12.8036%2017.6172%2012.878%2017.5066%2012.9288%2017.3848C12.9796%2017.2629%2013.0057%2017.1322%2013.0057%2017.0002C13.0057%2016.8682%2012.9796%2016.7375%2012.9288%2016.6156C12.878%2016.4937%2012.8036%2016.3831%2012.7099%2016.2902L9.4099%2013.0002H16.9999C17.2651%2013.0002%2017.5195%2012.8948%2017.707%2012.7073C17.8945%2012.5198%2017.9999%2012.2654%2017.9999%2012.0002C17.9999%2011.735%2017.8945%2011.4806%2017.707%2011.2931C17.5195%2011.1055%2017.2651%2011.0002%2016.9999%2011.0002Z%22%20fill%3D%22%23E30613%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
}

.js-comparison-slider button.slick-next {
  opacity: 1;
  left: calc(100% - 40px);
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.92%2011.6202C17.8724%2011.4974%2017.801%2011.3853%2017.71%2011.2902L12.71%206.29019C12.6168%206.19695%2012.5061%206.12299%2012.3842%206.07253C12.2624%206.02207%2012.1319%205.99609%2012%205.99609C11.7337%205.99609%2011.4783%206.10188%2011.29%206.29019C11.1968%206.38342%2011.1228%206.49411%2011.0723%206.61594C11.0219%206.73776%2010.9959%206.86833%2010.9959%207.00019C10.9959%207.26649%2011.1017%207.52188%2011.29%207.71019L14.59%2011.0002H7C6.73478%2011.0002%206.48043%2011.1055%206.29289%2011.2931C6.10536%2011.4806%206%2011.735%206%2012.0002C6%2012.2654%206.10536%2012.5198%206.29289%2012.7073C6.48043%2012.8948%206.73478%2013.0002%207%2013.0002H14.59L11.29%2016.2902C11.1963%2016.3831%2011.1219%2016.4937%2011.0711%2016.6156C11.0203%2016.7375%2010.9942%2016.8682%2010.9942%2017.0002C10.9942%2017.1322%2011.0203%2017.2629%2011.0711%2017.3848C11.1219%2017.5066%2011.1963%2017.6172%2011.29%2017.7102C11.383%2017.8039%2011.4936%2017.8783%2011.6154%2017.9291C11.7373%2017.9798%2011.868%2018.006%2012%2018.006C12.132%2018.006%2012.2627%2017.9798%2012.3846%2017.9291C12.5064%2017.8783%2012.617%2017.8039%2012.71%2017.7102L17.71%2012.7102C17.801%2012.6151%2017.8724%2012.5029%2017.92%2012.3802C18.02%2012.1367%2018.02%2011.8636%2017.92%2011.6202Z%22%20fill%3D%22%23E30613%22%2F%3E%3C%2Fsvg%3E");
}

.js-comparison-slider button.slick-prev.slick-disabled {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.9999%2011.0002H9.4099L12.7099%207.71019C12.8982%207.52188%2013.004%207.26649%2013.004%207.00019C13.004%206.73388%2012.8982%206.47849%2012.7099%206.29019C12.5216%206.10188%2012.2662%205.99609%2011.9999%205.99609C11.7336%205.99609%2011.4782%206.10188%2011.2899%206.29019L6.2899%2011.2902C6.19886%2011.3853%206.12749%2011.4974%206.0799%2011.6202C5.97988%2011.8636%205.97988%2012.1367%206.0799%2012.3802C6.12749%2012.5029%206.19886%2012.6151%206.2899%2012.7102L11.2899%2017.7102C11.3829%2017.8039%2011.4935%2017.8783%2011.6153%2017.9291C11.7372%2017.9798%2011.8679%2018.006%2011.9999%2018.006C12.1319%2018.006%2012.2626%2017.9798%2012.3845%2017.9291C12.5063%2017.8783%2012.6169%2017.8039%2012.7099%2017.7102C12.8036%2017.6172%2012.878%2017.5066%2012.9288%2017.3848C12.9796%2017.2629%2013.0057%2017.1322%2013.0057%2017.0002C13.0057%2016.8682%2012.9796%2016.7375%2012.9288%2016.6156C12.878%2016.4937%2012.8036%2016.3831%2012.7099%2016.2902L9.4099%2013.0002H16.9999C17.2651%2013.0002%2017.5195%2012.8948%2017.707%2012.7073C17.8945%2012.5198%2017.9999%2012.2654%2017.9999%2012.0002C17.9999%2011.735%2017.8945%2011.4806%2017.707%2011.2931C17.5195%2011.1055%2017.2651%2011.0002%2016.9999%2011.0002Z%22%20fill%3D%22%23435054%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
}

.js-comparison-slider button.slick-next.slick-disabled {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.92%2011.6202C17.8724%2011.4974%2017.801%2011.3853%2017.71%2011.2902L12.71%206.29019C12.6168%206.19695%2012.5061%206.12299%2012.3842%206.07253C12.2624%206.02207%2012.1319%205.99609%2012%205.99609C11.7337%205.99609%2011.4783%206.10188%2011.29%206.29019C11.1968%206.38342%2011.1228%206.49411%2011.0723%206.61594C11.0219%206.73776%2010.9959%206.86833%2010.9959%207.00019C10.9959%207.26649%2011.1017%207.52188%2011.29%207.71019L14.59%2011.0002H7C6.73478%2011.0002%206.48043%2011.1055%206.29289%2011.2931C6.10536%2011.4806%206%2011.735%206%2012.0002C6%2012.2654%206.10536%2012.5198%206.29289%2012.7073C6.48043%2012.8948%206.73478%2013.0002%207%2013.0002H14.59L11.29%2016.2902C11.1963%2016.3831%2011.1219%2016.4937%2011.0711%2016.6156C11.0203%2016.7375%2010.9942%2016.8682%2010.9942%2017.0002C10.9942%2017.1322%2011.0203%2017.2629%2011.0711%2017.3848C11.1219%2017.5066%2011.1963%2017.6172%2011.29%2017.7102C11.383%2017.8039%2011.4936%2017.8783%2011.6154%2017.9291C11.7373%2017.9798%2011.868%2018.006%2012%2018.006C12.132%2018.006%2012.2627%2017.9798%2012.3846%2017.9291C12.5064%2017.8783%2012.617%2017.8039%2012.71%2017.7102L17.71%2012.7102C17.801%2012.6151%2017.8724%2012.5029%2017.92%2012.3802C18.02%2012.1367%2018.02%2011.8636%2017.92%2011.6202Z%22%20fill%3D%22%23435054%22%2F%3E%3C%2Fsvg%3E");
}

.pagination-container .pagination ul.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  gap: 8px;
}

.pagination-container .pagination ul.pagination li {
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #455055;
  overflow: hidden;
}

.pagination-container .pagination ul.pagination li.disabled{
  pointer-events: none;
  opacity: 0.5;
}

.pagination-container .pagination ul.pagination li.active {
  background-color: #455055;
  border: 1px solid #455055;
  color: #fff;
}

.pagination-container .pagination ul.pagination li.active span {
  background: none !important;
  border: none !important;
}

.pagination-container .pagination ul.pagination li a {
  color: #455055;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  background: none; !important;
  border: none; !important;
}


.pagination-container .pagination ul.pagination li a:hover{
  background-color: #455055;
  color: #fff;
}