/* =========================================================
   Author: Arif Fikri / OpenAI
   Date: 2026-04-28
   Purpose: Reusable styling for Ninja Tables comparison table
            using the wrapper class .ke-table-v1
   Notes:
   - Apply .ke-table-v1 on the outer wrapper/container
   - This CSS is meant for reusable pricing/comparison tables
   - Includes desktop, tablet, and mobile refinements
   ========================================================= */


/* =========================================================
   1) OUTER WRAPPER
   ========================================================= */
.ke-table-v1 {
  overflow: hidden;
  /*border: 1px solid var(--color-border);*/
  border-radius: var(--radius-2xl);
  background: var(--ke-white);
}


/* =========================================================
   2) BASE TABLE RESET
   ========================================================= */
.ke-table-v1 .ninja_table_wrapper,
.ke-table-v1 .ninja_table_wrapper table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: var(--ke-white);
}

.ke-table-v1 .ninja_table_wrapper th,
.ke-table-v1 .ninja_table_wrapper td {
  border-color: var(--color-border);
}


/* =========================================================
   3) COLUMN WIDTHS
   - Feature: 34%
   - Lite / Pro / Enterprise: 22%
   ========================================================= */
.ke-table-v1 col.ninja_column_0 {
  width: 34%;
}

.ke-table-v1 col.ninja_column_1,
.ke-table-v1 col.ninja_column_2,
.ke-table-v1 col.ninja_column_3 {
  width: 22%;
}


/* =========================================================
   4) TOP HEADER ROW
   Refined:
   - stronger selector for Ninja Tables header
   - proper padding/alignment
   - force uppercase
   - Pro header turns green correctly
   ========================================================= */
.ke-table-v1 .ninja_table_wrapper thead tr.footable-header th {
  padding: 12px 18px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--ke-ink-5) !important;
  background: var(--ke-cream-2) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  white-space: nowrap;
  vertical-align: middle !important;
  line-height: 1.4 !important;
}

/* In case Ninja Tables wraps header text inside inner tags */
.ke-table-v1 .ninja_table_wrapper thead tr.footable-header th * {
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* First header cell = left aligned */
.ke-table-v1 .ninja_table_wrapper thead tr.footable-header th.ninja_clmn_nm_features {
  text-align: left !important;
}

/* Plan headers = centered */
.ke-table-v1 .ninja_table_wrapper thead tr.footable-header th.ninja_clmn_nm_lite,
.ke-table-v1 .ninja_table_wrapper thead tr.footable-header th.ninja_clmn_nm_promostpopular,
.ke-table-v1 .ninja_table_wrapper thead tr.footable-header th.ninja_clmn_nm_enterprise {
  text-align: center !important;
}

/* Pro header highlighted in green */
.ke-table-v1 .ninja_table_wrapper thead tr.footable-header th.ninja_clmn_nm_promostpopular {
  background: var(--ke-green-soft) !important;
  color: var(--ke-green) !important;
  border-bottom-color: var(--ke-green-mid) !important;
}

/* Popular badge inside Pro header */
.ke-table-v1 .ninja_table_wrapper thead tr.footable-header th.ninja_clmn_nm_promostpopular span {
  display: inline-block;
  margin-left: 6px !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
  color: var(--ke-white) !important;
}


/* =========================================================
   5) FIRST COLUMN CELLS (FEATURE ITEMS)
   ========================================================= */
.ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_features {
  padding: 11px 18px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  text-align: left;
  color: var(--ke-ink-3);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}


/* =========================================================
   6) PLAN COLUMN CELLS (LITE / PRO / ENTERPRISE)
   ========================================================= */
.ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_lite,
.ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_promostpopular,
.ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_enterprise {
  padding: 11px 18px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  text-align: center;
  color: var(--ke-ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

/* Pro column body cells */
.ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_promostpopular {
  background: rgba(0, 95, 54, 0.025);
}


/* =========================================================
   7) SECTION HEADER ROWS
   Fixes:
   - Full row uses same section header background
   - Pro column highlight is disabled for these rows
   - Typography matches the top header
   ========================================================= */

/* Detect section rows by bold text inside first column */
.ke-table-v1 .ninja_table_wrapper tbody tr:has(> td.ninja_clmn_nm_features b) td {
  padding: 11px 18px;
  background: var(--ke-cream-2) !important;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

/* First cell in section row = section title styling */
.ke-table-v1 .ninja_table_wrapper tbody tr:has(> td.ninja_clmn_nm_features b) td.ninja_clmn_nm_features,
.ke-table-v1 .ninja_table_wrapper tbody tr:has(> td.ninja_clmn_nm_features b) td.ninja_clmn_nm_features b {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ke-ink-5);
  line-height: 1.4;
}

/* Empty cells on section rows should stay blank */
.ke-table-v1 .ninja_table_wrapper tbody tr:has(> td.ninja_clmn_nm_features b) td:not(.ninja_clmn_nm_features)::before {
  content: none !important;
}


/* =========================================================
   8) CHECK ICON
   - Current Ninja Tables output appears to use emoji image
   ========================================================= */
.ke-table-v1 .ninja_table_wrapper tbody td img.emoji[alt="✔"] {
  width: 13px;
  height: 13px;
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(20%) sepia(82%) saturate(1267%)
    hue-rotate(117deg) brightness(90%) contrast(103%);
}


/* =========================================================
   9) DASH FOR EMPTY CELLS
   - Only for regular content rows
   - Not for section header rows
   ========================================================= */
.ke-table-v1 .ninja_table_wrapper tbody tr:not(:has(> td.ninja_clmn_nm_features b))
  td.ninja_clmn_nm_lite:empty::before,
.ke-table-v1 .ninja_table_wrapper tbody tr:not(:has(> td.ninja_clmn_nm_features b))
  td.ninja_clmn_nm_promostpopular:empty::before,
.ke-table-v1 .ninja_table_wrapper tbody tr:not(:has(> td.ninja_clmn_nm_features b))
  td.ninja_clmn_nm_enterprise:empty::before {
  content: "—";
  color: var(--color-border-mid);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}


/* =========================================================
   10) ROW HOVER
   - Highlight whole row on hover
   - Excludes section header rows
   ========================================================= */
.ke-table-v1 .ninja_table_wrapper tbody tr:not(:has(> td.ninja_clmn_nm_features b)):hover td {
  background-color: rgba(0, 0, 0, 0.018);
}

.ke-table-v1 .ninja_table_wrapper tbody tr:not(:has(> td.ninja_clmn_nm_features b)):hover td.ninja_clmn_nm_promostpopular {
  background-color: rgba(0, 95, 54, 0.05);
}


/* =========================================================
   11) TABLET
   ========================================================= */
@media (max-width: 1024px) {
  .ke-table-v1 .ninja_table_wrapper thead th {
    padding: 10px 14px;
    font-size: 10.5px;
  }

  .ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_features,
  .ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_lite,
  .ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_promostpopular,
  .ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_enterprise {
    padding: 10px 14px;
    font-size: 12px;
  }

  .ke-table-v1 .ninja_table_wrapper tbody tr:has(> td.ninja_clmn_nm_features b) td {
    padding: 10px 14px;
  }

  .ke-table-v1 .ninja_table_wrapper tbody tr:has(> td.ninja_clmn_nm_features b) td.ninja_clmn_nm_features,
  .ke-table-v1 .ninja_table_wrapper tbody tr:has(> td.ninja_clmn_nm_features b) td.ninja_clmn_nm_features b {
    font-size: 10.5px;
  }

  .ke-table-v1 .ninja_table_wrapper tbody td img.emoji[alt="✔"] {
    width: 13px;
    height: 13px;
  }
}


/* =========================================================
   12) MOBILE
   - Keep horizontal scrolling
   ========================================================= */
@media (max-width: 768px) {
  .ke-table-v1 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ke-table-v1 .ninja_table_wrapper table {
    min-width: 760px;
  }

  .ke-table-v1 .ninja_table_wrapper thead th {
    padding: 10px 12px;
    font-size: 10px;
  }

  .ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_features,
  .ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_lite,
  .ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_promostpopular,
  .ke-table-v1 .ninja_table_wrapper tbody td.ninja_clmn_nm_enterprise {
    padding: 10px 12px;
    font-size: 12px;
  }

  .ke-table-v1 .ninja_table_wrapper tbody tr:has(> td.ninja_clmn_nm_features b) td {
    padding: 10px 12px;
  }

  .ke-table-v1 .ninja_table_wrapper tbody tr:has(> td.ninja_clmn_nm_features b) td.ninja_clmn_nm_features,
  .ke-table-v1 .ninja_table_wrapper tbody tr:has(> td.ninja_clmn_nm_features b) td.ninja_clmn_nm_features b {
    font-size: 10px;
  }

  .ke-table-v1 .ninja_table_wrapper tbody td img.emoji[alt="✔"] {
    width: 12px;
    height: 12px;
  }

  .ke-table-v1 .ninja_table_wrapper tbody tr:not(:has(> td.ninja_clmn_nm_features b))
    td.ninja_clmn_nm_lite:empty::before,
  .ke-table-v1 .ninja_table_wrapper tbody tr:not(:has(> td.ninja_clmn_nm_features b))
    td.ninja_clmn_nm_promostpopular:empty::before,
  .ke-table-v1 .ninja_table_wrapper tbody tr:not(:has(> td.ninja_clmn_nm_features b))
    td.ninja_clmn_nm_enterprise:empty::before {
    font-size: 12px;
  }
}