/* ===============================
   FAQ Compare — unified styles
   v2.6.5 (sticky col + corner, zebra back-compat, full radius clip, admin fixes)
   =============================== */

/* ---------- Front-end ---------- */

/* Wrapper: rounded corners + horizontal scroll (clip inside) */
.di-cmp-table-wrap{
  border-radius: var(--di-br, 8px);
  overflow: hidden;      /* clip all four corners */
  overflow-x: auto;      /* enable horizontal scroll */
}

/* Root custom properties (with safe fallbacks) */
.di-cmp-block{
  margin:24px 0;
  color:var(--di-text, inherit);

  /* backgrounds */
  --di-bg: var(--di-bg, transparent);
  --di-bg-head: var(--di-bg-head, inherit);
  --di-bg-aspects: var(--di-bg-aspects, inherit);

  /* borders / radius */
  --di-bw: var(--di-bw, 0px);
  --di-bs: var(--di-bs, solid);
  --di-bc: var(--di-bc, currentColor);
  --di-br: var(--di-br, 8px);

  /* zebra (support old + new) */
  --di-zebra: var(--di-zebra, 1); /* default ON for back-compat */
  /* odd: new -> legacy -> single-color -> transparent */
  --_z-odd:  var(--di-zebra-odd,  var(--di-z-odd,  var(--di-zebra-color, transparent)));
  /* even: new -> legacy -> transparent (single-color means "odd only") */
  --_z-even: var(--di-zebra-even, var(--di-z-even, transparent));

  /* when 1, aspects column uses zebra colors too */
  --di-aspects-zebra: var(--di-aspects-zebra, 0);

  /* fonts */
  --di-txt-size: var(--di-txt-size, var(--di-cont-size, inherit));
  --di-txt-w:    var(--di-txt-w,    var(--di-cont-w, inherit));
  --di-txt-color:var(--di-txt-color, var(--di-cont-color, inherit));
  --di-ih-size:  var(--di-ih-size,  var(--di-items-size, inherit));
  --di-ih-w:     var(--di-ih-w,     var(--di-items-w, 700));
  --di-ih:       var(--di-ih,       var(--di-items-color, inherit));
  --di-ah-size:  var(--di-ah-size,  var(--di-aspects-size, inherit));
  --di-ah-w:     var(--di-ah-w,     var(--di-aspects-w, 600));
  --di-ah:       var(--di-ah,       var(--di-aspects-color, inherit));
}

/* Title */
.di-cmp-title{margin:0 0 10px 0;font-weight:700;line-height:1.25;color:inherit}

/* Table base */
.di-cmp-table{
  width:100%;
  min-width:768px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  color:inherit;
  background:var(--di-bg);
  border:var(--di-bw) var(--di-bs) var(--di-bc);
  border-radius:var(--di-br);
  box-shadow:none;
}

/* Optional shadow style */
.di-cmp-shadow .di-cmp-table{ box-shadow: var(--di-sh, var(--di-shadow, 0 1px 6px rgba(0,0,0,.06))); }

.di-cmp-table thead th,
.di-cmp-table tbody th,
.di-cmp-table td{ color:inherit; background:inherit; }

.di-cmp-table thead th{
  padding:12px 10px;text-align:left;font-weight:var(--di-ih-w,700);
  background:var(--di-bg-head, inherit);
  font-size:var(--di-ih-size, inherit);
  color:var(--di-ih, inherit);
}
.di-cmp-table .di-cmp-colhead{ font-weight:var(--di-ih-w,700); color:var(--di-ih, inherit); }

.di-cmp-table tbody th{
  padding:12px 10px;text-align:left;font-weight:var(--di-ah-w,600);
  word-break:normal;overflow-wrap:break-word;color:var(--di-ah, inherit);
  font-size:var(--di-ah-size, inherit);
  background:var(--di-bg-aspects, inherit);
}
.di-cmp-table td{
  padding:12px 10px;vertical-align:top;word-break:normal;overflow-wrap:break-word;
  font-size:var(--di-txt-size, inherit);font-weight:var(--di-txt-w, inherit);
  color:var(--di-txt-color, inherit);
}

/* Sticky header + first column (desktop) */
.di-cmp-block:not([data-accordion="1"]) .di-cmp-table thead th{
  position:sticky;top:0;z-index:5;background:var(--di-bg-head, inherit);
}
/* top-left corner: sticky on both axes & rounded */
.di-cmp-block:not([data-accordion="1"]) .di-cmp-table thead th:first-child{
  position:sticky;left:0;top:0;z-index:7;background:var(--di-bg-head, inherit);
  border-top-left-radius: var(--di-br);
}
/* first column cells */
.di-cmp-block:not([data-accordion="1"]) .di-cmp-table tbody th:first-child{
  position:sticky;left:0;z-index:6;background:var(--di-bg-aspects, inherit);
}

/* Visual rounded corners */
.di-cmp-table thead th:last-child{ border-top-right-radius: var(--di-br); }
.di-cmp-table tbody tr:last-child th:first-child{ border-bottom-left-radius: var(--di-br); }
.di-cmp-table tbody tr:last-child td:last-child{ border-bottom-right-radius: var(--di-br); }

/* Weight-only presets */
.di-cmp-lined .di-cmp-table, .di-cmp-lined th, .di-cmp-lined td { border:1px solid currentColor; }
.di-cmp-card  .di-cmp-table { border:1px solid currentColor;border-radius:10px;overflow:hidden; }
.di-cmp-minimal .di-cmp-table thead th { border-bottom:1px solid currentColor; }
.di-cmp-accent  .di-cmp-table tbody th { border-left:4px solid currentColor; }
.di-cmp-bare .di-cmp-table, .di-cmp-bare th, .di-cmp-bare td { border:1px dotted currentColor; }
.di-cmp-soft .di-cmp-table thead th { border-bottom:1px solid currentColor; }

/* ZEBRA
   Accepts: --di-zebra-odd/even (new) OR --di-z-odd/even (legacy) OR --di-zebra-color (odd only).
   Disable only with --di-zebra:0 on the block.
*/
.di-cmp-table tbody tr:nth-child(odd)  td{ background:var(--_z-odd); }
.di-cmp-table tbody tr:nth-child(even) td{ background:var(--_z-even); }
.di-cmp-block[style*="--di-zebra:0"] .di-cmp-table tbody td{ background:transparent; }

/* Aspects column follows zebra when enabled (tolerate whitespace) */
.di-cmp-block[style*="--di-aspects-zebra:1"]  .di-cmp-table tbody tr:nth-child(odd)  th,
.di-cmp-block[style*="--di-aspects-zebra: 1"] .di-cmp-table tbody tr:nth-child(odd)  th{ background:var(--_z-odd)  !important; }
.di-cmp-block[style*="--di-aspects-zebra:1"]  .di-cmp-table tbody tr:nth-child(even) th,
.di-cmp-block[style*="--di-aspects-zebra: 1"] .di-cmp-table tbody tr:nth-child(even) th{ background:var(--_z-even) !important; }

/* Editable states (admin preview) */
.di-cmp-table [contenteditable="true"]{ outline:2px solid currentColor; outline-offset:2px; border-radius:6px; }
.di-cmp-table .editing{ background: rgba(0,0,0,.035); }

/* Mobile accordion */
@media (max-width:680px){
  .di-cmp-block[data-accordion="1"] .di-cmp-table{display:block;min-width:0;}
  .di-cmp-block[data-accordion="1"] thead{display:none}
  .di-cmp-block[data-accordion="1"] tbody{display:block}
  .di-cmp-block[data-accordion="1"] tbody tr{display:block;border:1px solid currentColor;border-radius:8px;margin-bottom:12px;overflow:hidden}
  .di-cmp-block[data-accordion="1"] tbody th{display:block;font-weight:700;border-bottom:1px solid currentColor;padding:12px 10px;background:var(--di-bg-aspects, inherit)}
  .di-cmp-block[data-accordion="1"] tbody td{display:block;border-bottom:1px solid currentColor;position:relative;padding:10px}
  .di-cmp-block[data-accordion="1"] tbody td::before{content:attr(data-col);display:block;font-size:12px;font-weight:600;margin-bottom:2px}
  .di-cmp-block[data-accordion="1"] tbody td:last-child{border-bottom:0}
}

/* ---------- Admin polish (unchanged visuals, better responsiveness) ---------- */
.wp-admin .di-cmp-tablebox{
  background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:14px;margin:18px 0;
}
.wp-admin .di-cmp-tablebox__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.wp-admin .di-cmp-row--bar{ margin-bottom:12px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.wp-admin .di-cmp-row--bar .small{ width:70px; }
.wp-admin .di-cmp-place{ min-width:140px; }
.wp-admin .di-cmp-heading{ display:none; }
.wp-admin .di-cmp-n{ display:inline-flex; align-items:center; }
.wp-admin .di-cmp-n .small{ width:60px; margin-left:4px; }

.wp-admin .di-cmp-title{ display:block; margin:0 0 12px 0; }
.wp-admin .di-cmp-title .di-lbl{ font-size:13px; font-weight:600; display:block; margin-bottom:6px; }
.wp-admin .di-cmp-title .di-help{ display:block; margin-top:6px; }

.wp-admin .di-cmp-guide{ display:block; margin:12px 0; }
.wp-admin .di-cmp-guide .di-lbl{ font-size:13px; font-weight:600; display:block; margin-bottom:6px; }
.wp-admin .di-cmp-guide .di-help{ display:block; margin:0 0 6px 0; }

.wp-admin .di-cmp-suggest{
  background:#f7f7f9;border:1px solid #ececec;border-radius:8px;padding:12px;margin:14px 0;
}
.wp-admin .di-cmp-suggest__title{ font-weight:600; margin-bottom:8px; }
.wp-admin .di-cmp-suggest__grid{ display:grid; grid-template-columns:220px 260px 1fr auto; gap:10px; align-items:end; }
.wp-admin .di-cmp-edit input{ width:100%; }
.wp-admin .di-cmp-suggest__btns .button{ margin-right:6px; }

.wp-admin .di-cmp-ia{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; }
.wp-admin .di-cmp-col__actions{ margin-top:6px; }
.wp-admin .di-cmp-actions .button{ margin-right:6px; }
.wp-admin .di-cmp-status{ margin-left:8px; color:#111; }

.wp-admin .di-cmp-preview, 
.wp-admin .di-cmp-preview *{ color:#111 !important; }
.wp-admin .di-cmp-table th, 
.wp-admin .di-cmp-table td{ background:#fff; }
.wp-admin .di-cmp-table thead th{ position:sticky; top:0; background:#f6f7f9 !important; z-index:3; }

/* Settings page cards + responsive grid */
.wp-admin .di-cmp-settings .di-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  padding:18px;margin:18px 0;box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.wp-admin .di-cmp-settings .di-card__head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.wp-admin .di-cmp-settings .di-card h2{margin:0}
.wp-admin .di-cmp-settings .description{color:#6b7280;margin:0}

.wp-admin .di-cmp-settings .di-grid{display:grid;gap:16px}
/* auto-fit prevents overlap at tablet widths */
.wp-admin .di-cmp-settings .di-grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.wp-admin .di-cmp-settings .di-grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.wp-admin .di-cmp-settings .di-grid--4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.wp-admin .di-cmp-settings .di-fieldset{background:#fafafa;border:1px solid #f1f5f9;border-radius:10px;padding:12px}
.wp-admin .di-cmp-settings .di-fieldset > h3{margin:0 0 10px;font-size:14px}
.wp-admin .di-cmp-settings .di-field{display:flex;flex-direction:column;gap:6px}
.wp-admin .di-cmp-settings .di-field--check{flex-direction:row;align-items:center}
.wp-admin .di-cmp-settings .di-field--rowcol .di-rowcol{display:flex;align-items:center;gap:8px}
.wp-admin .di-cmp-settings .di-field--inline .di-inline{display:flex;gap:8px;align-items:center}
.wp-admin .di-cmp-settings .di-field label{font-weight:600}
.wp-admin .di-cmp-settings .help{font-size:12px;color:#6b7280;margin:0}

/* Controls sizing */
.wp-admin .di-cmp-settings input[type="number"]{width:110px}
.wp-admin .di-cmp-settings .di-color{width:160px}
/* make selects ~50% of previous width (WP gives them big min-widths) */
.wp-admin .di-cmp-settings select{max-width:15rem}

/* fine: checklist & tiny text */
.wp-admin .di-cmp-settings .di-checklist{display:grid;gap:8px}
.wp-admin .di-cmp-settings .di-check{display:flex;gap:8px;align-items:center}
.wp-admin .di-cmp-settings .times{opacity:.6}