/* ═══════════════════════════════════════════════════════
   CMP Table Widget — Front-end Styles
   All colours/sizes can be overridden from Elementor UI.
═══════════════════════════════════════════════════════ */

.cmp-table {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}

/* ── Header ── */
.cmp-head {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  background: #064E3B;
  padding: 20px 28px;
  gap: 16px;
  align-items: center;
}
.cmp-head div {
  font-family: 'Times New Roman', Times, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmp-head .cmp-col-topic {
  color: rgba(255,255,255,0.6) !important;
  font-size: 18px !important;
}
.cmp-head .cmp-col-do   { color: #6effa0 !important; }
.cmp-head .cmp-col-dont { color: #ff9b9b !important; }

/* ── Header icons ── */
.cmp-head-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.cmp-head-icon--do   { background: rgba(110,255,160,0.18); color: #6effa0; }
.cmp-head-icon--dont { background: rgba(255,179,179,0.18); color: #ff9b9b; }

/* ── Rows ── */
.cmp-row {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  padding: 20px 28px;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  transition: background 0.2s ease;
}
.cmp-row:last-child          { border-bottom: none; }
.cmp-row:nth-child(even)     { background: #fafaf9; }
.cmp-row:hover               { background: #f5faf7; }

/* ── Topic label ── */
.cmp-topic-label {
  font-family: 'Times New Roman', Times, serif;
  font-size: 22px;
  font-weight: 700;
  color: #064E3B;
}

/* ── Pills ── */
.cmp-pill {
  font-family: 'Times New Roman', Times, serif;
  font-size: 22px;
  font-weight: 400;
  display: inline-block;
  line-height: 1.5;
  padding: 6px 18px;
  border-radius: 30px;
  border: 1px solid transparent;
}
.cmp-pill--do {
  background: #f0fdf4;
  color: #0a5c2e;
  border-color: #bbf7d0;
}
.cmp-pill--dont {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

/* ── Tablet ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cmp-head { padding: 18px 20px; }
  .cmp-head div { font-size: 20px; }
  .cmp-row  { padding: 18px 20px; }
  .cmp-pill { font-size: 18px; padding: 5px 14px; }
  .cmp-topic-label { font-size: 18px; }
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .cmp-table { border-radius: 12px; }

  .cmp-head {
    grid-template-columns: 1fr 1fr;
    padding: 14px 16px;
    gap: 10px;
  }
  .cmp-head div { font-size: 18px; }
  .cmp-head .cmp-col-topic { display: none; }

  .cmp-row {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 10px;
  }
  .cmp-col-topic {
    padding-bottom: 6px;
    border-bottom: 1px solid #e8e8e8;
  }
  .cmp-topic-label {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .cmp-col-do,
  .cmp-col-dont {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cmp-col-do::before {
    content: '✓';
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #f0fdf4;
    color: #0a5c2e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
  }
  .cmp-col-dont::before {
    content: '✕';
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fef2f2;
    color: #991b1b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
  }
  .cmp-pill {
    font-size: 16px;
    padding: 0;
    background: none !important;
    border: none !important;
    border-radius: 0;
  }
  .cmp-pill--do   { color: #0a5c2e; }
  .cmp-pill--dont { color: #991b1b; }
}