/* ===============================================
   COMPARE TABLE – CLEAN, RESPONSIVE, 1 TABLE
   =============================================== */

.c-compare-table.home #compare-tables {
	background: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 11.6px 7px #0000001A;
    overflow: visible; /* ← Critical: was 'hidden' */
    position: relative;
    z-index: 0;
}

/* Hide mobile duplicate */
#compare-table-mobile {
  display: none !important;
}

/* Scrollable wrapper */
#compare-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* ===============================================
   GRID LAYOUT (All screens)
   =============================================== */
.c-compare-table .l-container .Rtable.Rtable--5cols {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) repeat(4, minmax(110px, 140px));
  gap: 0;
  min-width: 700px; /* forces scroll on small screens */
}

/* ===============================================
   CELL BASE
   =============================================== */
.Rtable-cell {
  padding: 12px 8px;
  border-bottom: 1px solid #d3d9e1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  min-height: 52px;
  box-sizing: border-box;
  position: relative;
	z-index: 1;
}

/* ===============================================
   STICKY: First column (Feature)
   =============================================== */
.Rtable-cell.subject,
.Rtable.header .Rtable-cell.subject{
  justify-content: flex-start;
  padding-left: 16px;
  font-weight: 600;
  position: sticky;
  left: -2px;
  z-index: 999;
  box-shadow: 8px 0 8px -6px rgba(0, 0, 0, 0.12);
  background:#fff
}

/* ===============================================
   STICKY: Header row
   =============================================== */
.Rtable.header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #fff;
}

.Rtable.header .Rtable-cell {
  border-bottom: 3px solid #ffcc33;
  font-size: 1.25em;
  min-height: 70px;
    z-index: 11;
}

.Rtable.header .Rtable-cell.subject {
  color: #1087fc;
  font-size: 24px;
  font-weight: 400;
}
.Rtable.header .Rtable-cell:not(.prep101){
	background:#fff !important;
}

/* ===============================================
   COMPANY COLUMNS
   =============================================== */
.Rtable-cell.prep101 {
  background: #1087fc;
  color: #fff;
  font-weight: 500;
}

/* Checkmarks */
.Rtable-cell.checkmark {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.Rtable-cell.prep101.checkmark {
  background-image: url("https://prep101mcadev.wpengine.com/wp-content/uploads/2025/09/white-check.svg");
}
.Rtable-cell.princeton.checkmark,
.Rtable-cell.kaplan.checkmark,
.Rtable-cell.blueprint.checkmark {
  background-image: url("https://prep101mcadev.wpengine.com/wp-content/uploads/2025/09/gray-check.svg");
}
.Rtable-cell.xmark {
  background-image: url("https://prep101mcadev.wpengine.com/wp-content/uploads/2025/09/red-cross.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}

/* ===============================================
   ROW STRIPES
   =============================================== */
.Rtable.even .Rtable-cell:not(.prep101) {
  background: #1087fc1a;
}
.Rtable.odd .Rtable-cell.prep101 {
  background: #1087fc;
}
.Rtable.even .Rtable-cell.prep101 {
  background: #1087fce5;
}

/* ===============================================
   HEADER LOGOS & TEXT
   =============================================== */
.Rtable.header .Rtable-cell.prep101 {
  background: #1087fc
    url("https://prep101mcadev.wpengine.com/wp-content/uploads/2025/09/preplogo_white-KP_140.png")
    center / auto 38px no-repeat;
}

.Rtable.header .Rtable-cell.princeton,
.Rtable.header .Rtable-cell.kaplan,
.Rtable.header .Rtable-cell.blueprint {
  position: relative;
  font-size: 14px;
  color: #444;
}

.Rtable.header .Rtable-cell.princeton span,
.Rtable.header .Rtable-cell.kaplan span,
.Rtable.header .Rtable-cell.blueprint span {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
}

/* ===============================================
   NUMBERS (Hours)
   =============================================== */
.Rtable-cell.number {
  font-weight: 600;
  font-size: 1.4em;
  color: #333;
}
.Rtable-cell.prep101.number {
  color: #fff;
}

/* ===============================================
   LAST ROW
   =============================================== */
.Rtable.last .Rtable-cell {
  border-bottom: none;
  height: 10px;
}

/* ===============================================
   MOBILE TWEAKS
   =============================================== */
@media (max-width: 480px) {
  .Rtable-cell {
    font-size: 14px;
    padding: 10px 6px;
  }
  .Rtable-cell.subject {
    font-size: 15px;
    padding-left: 12px;
  }
  .Rtable.header .Rtable-cell {
    font-size: 1.1em;
  }
  .Rtable-cell.number {
    font-size: 1.3em;
  }
}

.scroll-indicator-wrapper {
  position: sticky;
  top: 0;
  right: 0;
  margin-left: auto;
  height: 14px;
  width: 100%;
  max-width:200px;
  background: #e6e6e6;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 10px;
  display: none; /* Only show on mobile */
  z-index: 50;
  padding:2px;
  border:1px solid #1087FC;
}

.scroll-indicator {
  height: 100%;
  width: 60%; /* will be overridden in JS */
  background: rgba(16, 135, 252, 1);
  border-radius: 5px;
  transition: width 0.1s linear;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

@media (max-width: 768px) {
  .scroll-indicator-wrapper {
    display: block;
  }
}