/* Comparison pages (Bookingly vs X). Builds on pricing.css. */

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid #d9dbe3;
  border-radius: 14px;
  background: #fff;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 0.95rem;
}

  .compare-table th,
  .compare-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
    border-bottom: 1px solid #eceef4;
  }

  .compare-table thead th {
    font-size: 1rem;
    background: #fafaff;
  }

  .compare-table tbody th {
    font-weight: 700;
    width: 24%;
  }

  .compare-table tbody tr:last-child th,
  .compare-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .compare-table .compare-us {
    background: rgba(86, 94, 237, 0.06);
  }

  .compare-table thead .compare-us {
    background: rgba(86, 94, 237, 0.14);
    color: var(--primary-color);
  }

.compare-icon {
  margin-right: 6px;
  font-size: 0.85rem;
}

.compare-yes {
  color: #1f9d55;
}

.compare-no {
  color: #c0392b;
}

.compare-note {
  margin-top: 16px;
  font-size: 0.9rem;
  color: #55575f;
  line-height: 1.55;
}

  .compare-note p {
    margin: 0 0 8px;
  }

  .compare-note a,
  .compare-note-small a {
    color: var(--primary-color);
  }

.compare-note-small {
  font-size: 0.88rem;
}

.compare-flag {
  display: inline-block;
  margin-left: 6px;
  font-weight: 700;
}

.compare-example {
  margin-top: 24px;
  background: #f4f5ff;
  border-radius: 14px;
  padding: 22px 24px;
}

  .compare-example h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
  }

  .compare-example p {
    margin: 0;
    line-height: 1.6;
  }

.compare-disclaimer {
  margin-top: 28px;
  text-align: center;
  font-size: 0.82rem;
  color: #6b6d76;
}

@media (min-width: 768px) {
  .compare-choose {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Hub page cards */
.compare-hub-grid {
  margin-top: 20px;
}

.compare-hub-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

  .compare-hub-card:hover,
  .compare-hub-card:focus-visible {
    border-color: var(--primary-color);
    box-shadow: 0 6px 18px rgba(86, 94, 237, 0.15);
  }

.compare-hub-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--primary-color);
}

@media (min-width: 1000px) {
  .compare-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}