/* Reset Hello Elementor (and generic theme) defaults within our widget */
.etc-table,
.etc-table th,
.etc-table td {
  all: unset;
  display: revert;
  box-sizing: border-box;
}

.etc-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.etc-table tbody>tr:nth-child(even)>td, .etc-table table tbody>tr:nth-child(even)>th,
.etc-table tbody>tr:nth-child(odd)>td, .etc-table table tbody>tr:nth-child(odd)>th {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  background-color: transparent;
  vertical-align: top;
}

/* Wrapper and scroll behavior */
.etc-table-wrap { position: relative; --etc-compact-max: 768px; }
.etc-scroll { overflow-x: auto; }
.etc-table { width: 100%; border-collapse: collapse; background: var(--etc-body-bg, transparent); color: var(--etc-body-text, inherit); }
.etc-table thead th { background: var(--etc-head-bg, #f6f7f9); color: var(--etc-head-text, inherit); text-align: left; }


/* Basic table borders (Elementor control can override) */
.etc-table th, .etc-table td { border-bottom: 1px solid rgba(0,0,0,.08); }


/* Compact titles are hidden by default */
.etc-col-title { display: none; opacity: .8; margin-right: .5em; }


/* Mode toggle */
.etc-mode-toggle { display: flex; gap: .5rem; margin-bottom: .5rem; }
.etc-mode-toggle button { border: 1px solid rgba(0,0,0,.1); background: #fff; padding: .35rem .6rem; border-radius: 6px; cursor: pointer; }
.etc-mode-toggle button[aria-pressed="true"] { outline: 2px solid #000; }

/* Remove bottom margin/padding from last child elements in table cells */
.etc-table td > *:last-child,
.etc-table th > *:last-child, 
.etc-table td > .etc-cell-data > *:last-child,
.etc-table th > .etc-cell-data > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Zebra striping: alternate row background */
.etc-table tbody tr { background-color: var(--etc-body-bg, #fff); }
.etc-table tbody tr:nth-child(even):not([style*="background-color"]) { background-color: var(--etc-alt-row-bg, #f9fafb); }

/*
* COMPACT MODE
* - Each row becomes a vertical stack
* - Each cell shows its column title prefix
* - Table headers are visually hidden but still accessible

.etc-table-wrap.mode-compact .etc-scroll { overflow: visible; }
.etc-table-wrap.mode-compact .etc-table { display: block; }
.etc-table-wrap.mode-compact thead {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px);
}
.etc-table-wrap.mode-compact tbody { display: grid; gap: .75rem; }
.etc-table-wrap.mode-compact tr {
  display: grid; grid-template-columns: 1fr;
  padding: .5rem; border: 1px solid rgba(0,0,0,.06); border-radius: 10px;
  background: var(--etc-body-bg, transparent);
}
.etc-table-wrap.mode-compact td {
  display: flex; align-items: flex-start; gap: .5rem; border: 0;
  padding: .35rem 0 !important;
}
.etc-table-wrap.mode-compact .etc-col-title { display: inline; white-space: normal; }
.etc-table-wrap.mode-compact .etc-cell-data { display: inline; }
*/

/* ——— COMPACT: Key–Value Card ——— */
.etc-table-wrap.mode-compact .etc-scroll { overflow: visible; }
.etc-table-wrap.mode-compact .etc-table { display: block; }

.etc-table-wrap.mode-compact thead {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
}

/* Row becomes a card */
.etc-table-wrap.mode-compact tbody {
  display: grid; gap: .75rem;
}
.etc-table-wrap.mode-compact tr {
  display: block;
  padding: .75rem .85rem;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: var(--etc-body-bg, #fff);
}

/* Each cell = one grid row: [label][value] */
.etc-table-wrap.mode-compact td {
  display: grid;
  grid-template-columns: var(--etc-compact-label-w, 140px) 1fr;
  align-items: start;
  gap: .5rem .75rem;
  border: 0;
  padding: .35rem 0 !important;
}

/* Label + value styling */
.etc-table-wrap.mode-compact .etc-col-title {
  display: block;
  font-weight: 600;
  opacity: .9;
  text-align: right;          /* Right align labels for tidy edges */
}
.etc-table-wrap.mode-compact .etc-cell-data {
  display: block;
  min-width: 0;               /* allow wrapping */
}

/* Tighten the last item inside the value area (you asked this earlier) */
.etc-table-wrap .etc-table td > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Optional: subtle dividers between rows (inside a card) */
.etc-table-wrap.mode-compact tr + tr { border-top: 0; }
.etc-table-wrap.mode-compact td + td { border-top: 1px solid rgba(0,0,0,.06); }

/* Hide empty cells in compact mode when enabled */
.etc-table-wrap.mode-compact.hide-empty-compact td.etc-empty-cell {
  display: none !important;
}

/* Zebra still respected via row backgrounds */