/* ===============================
   FAQ Compare — unified styles + style templates
   v2.30.0
   - Full preset classes set ALL vars
   - Locked admin UI shows read-only mirrors
   =============================== */

/* ---------- Front-end: core table ---------- */

/* Wrapper: rounded corners + horizontal scroll (clip all corners) */
.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);        /* table body background */
  --di-bg-head: var(--di-bg-head, inherit);  /* thead (items) background */
  --di-bg-aspects: var(--di-bg-aspects, inherit); /* first-column (aspects) background */

  /* 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 (new + legacy support) */
  --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 paints 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)); /* items (thead) */
  --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)); /* aspects (tbody th) */
  --di-ah-w:    var(--di-ah-w,     var(--di-aspects-w, 600));
  --di-ah:      var(--di-ah,       var(--di-aspects-color, inherit));

  /* shadow token (used by presets) */
  --di-sh: var(--di-sh, 0 1px 6px rgba(0,0,0,.06));
}

/* 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; /* wrapper does the clipping */
}

/* Optional shadow style (preset may set --di-sh) */
.di-cmp-shadow .di-cmp-table{ box-shadow: var(--di-sh); }

.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); }

/* Zebra rows (accept new + legacy vars). Disable with --di-zebra:0 */
.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; }

/* 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}
}

/* ---------- Front-end: PRESETS (ALL VARS EXPLICIT) ----------
   Each preset assigns every variable so switching styles is immediate.
   Map:
   - content text:     --di-txt-size/--di-txt-w/--di-txt-color
   - items (thead):    --di-ih-size/--di-ih-w/--di-ih
   - aspects (tbody th): --di-ah-size/--di-ah-w/--di-ah
   - backgrounds:      --di-bg / --di-bg-head / --di-bg-aspects
   - zebra:            --di-zebra / --di-zebra-odd / --di-zebra-even / --di-aspects-zebra
   - border:           --di-bw / --di-bs / --di-bc / --di-br
   - shadow:           --di-sh
*/

/* 1) Default (user-customizable) — do not force anything */
.di-cmp-block[data-style="default"]{}

/* 2) Accent */
.di-cmp-block[data-style="accent"]{
  /* fonts */
  --di-txt-size:16px; --di-txt-w:500; --di-txt-color:#eeeeee;
  --di-ih-size:18px;  --di-ih-w:700;  --di-ih:#ffffff;
  --di-ah-size:16px;  --di-ah-w:700;  --di-ah:#ffffff;

  /* backgrounds */
  --di-bg:transparent; --di-bg-head:#1e6fb9; --di-bg-aspects:#5c5f62;

  /* zebra */
  --di-zebra:1; --di-zebra-odd:#bdbdbd; --di-zebra-even:#111111; --di-aspects-zebra:1;

  /* border & shadow */
  --di-bc:rgba(255,255,255,.25); --di-bw:1px; --di-bs:solid; --di-br:10px;
  --di-sh:0 2px 10px rgba(0,0,0,.07);
}
/* accent extra rule: left bar on aspects */
.di-cmp-block[data-style="accent"] .di-cmp-table tbody th{
  border-left:4px solid var(--di-bc, currentColor);
}

/* 3) Shadow */
.di-cmp-block[data-style="shadow"]{
  --di-txt-size:16px; --di-txt-w:500; --di-txt-color:#eeeeee;
  --di-ih-size:18px;  --di-ih-w:700;  --di-ih:#ffffff;
  --di-ah-size:16px;  --di-ah-w:700;  --di-ah:#ffffff;

  --di-bg:transparent; --di-bg-head:#2e7cc6; --di-bg-aspects:#45484b;

  --di-zebra:1; --di-zebra-odd:rgba(255,255,255,.06); --di-zebra-even:transparent; --di-aspects-zebra:1;

  --di-bc:currentColor; --di-bw:0px; --di-bs:inherit; --di-br:10px;
  --di-sh:0 8px 24px rgba(0,0,0,.10);
}

/* 4) Soft */
.di-cmp-block[data-style="soft"]{
  --di-txt-size:16px; --di-txt-w:500; --di-txt-color:#222222;
  --di-ih-size:16px;  --di-ih-w:700;  --di-ih:#111111;
  --di-ah-size:16px;  --di-ah-w:700;  --di-ah:#111111;

  --di-bg:#ffffff; --di-bg-head:#f6f7f9; --di-bg-aspects:#f0f0f2;

  --di-zebra:1; --di-zebra-odd:#f3f4f6; --di-zebra-even:transparent; --di-aspects-zebra:0;

  --di-bc:#e5e7eb; --di-bw:0px; --di-bs:inherit; --di-br:10px;
  --di-sh:0 0 0 rgba(0,0,0,0);
}
/* Soft: header bottom rule hint */
.di-cmp-block[data-style="soft"] .di-cmp-table thead th{ border-bottom:1px solid var(--di-bc, currentColor); }

/* 5) Lined */
.di-cmp-block[data-style="lined"]{
  --di-txt-size:16px; --di-txt-w:500; --di-txt-color:inherit;
  --di-ih-size:16px;  --di-ih-w:700;  --di-ih:inherit;
  --di-ah-size:16px;  --di-ah-w:600;  --di-ah:inherit;

  --di-bg:inherit; --di-bg-head:inherit; --di-bg-aspects:inherit;

  --di-zebra:0; --di-zebra-odd:transparent; --di-zebra-even:transparent; --di-aspects-zebra:0;

  --di-bc:currentColor; --di-bw:1px; --di-bs:solid; --di-br:8px;
  --di-sh:0 0 0 rgba(0,0,0,0);
}
.di-cmp-block[data-style="lined"] .di-cmp-table,
.di-cmp-block[data-style="lined"] .di-cmp-table th,
.di-cmp-block[data-style="lined"] .di-cmp-table td{
  border:1px solid currentColor;
}

/* 6) Card */
.di-cmp-block[data-style="card"]{
  --di-txt-size:16px; --di-txt-w:500; --di-txt-color:#222222;
  --di-ih-size:16px;  --di-ih-w:700;  --di-ih:#111111;
  --di-ah-size:16px;  --di-ah-w:700;  --di-ah:#111111;

  --di-bg:#ffffff; --di-bg-head:#f6f7f9; --di-bg-aspects:#f0f0f2;

  --di-zebra:1; --di-zebra-odd:rgba(0,0,0,.035); --di-zebra-even:transparent; --di-aspects-zebra:0;

  --di-bc:#e5e7eb; --di-bw:1px; --di-bs:solid; --di-br:10px;
  --di-sh:0 1px 6px rgba(0,0,0,.08);
}
.di-cmp-block[data-style="card"] .di-cmp-table{ overflow:hidden; }

/* 7) Minimal */
.di-cmp-block[data-style="minimal"]{
  --di-txt-size:16px; --di-txt-w:500; --di-txt-color:inherit;
  --di-ih-size:16px;  --di-ih-w:700;  --di-ih:inherit;
  --di-ah-size:16px;  --di-ah-w:600;  --di-ah:inherit;

  --di-bg:inherit; --di-bg-head:inherit; --di-bg-aspects:inherit;

  --di-zebra:0; --di-zebra-odd:transparent; --di-zebra-even:transparent; --di-aspects-zebra:0;

  --di-bc:currentColor; --di-bw:0px; --di-bs:inherit; --di-br:8px;
  --di-sh:0 0 0 rgba(0,0,0,0);
}
.di-cmp-block[data-style="minimal"] .di-cmp-table thead th{ border-bottom:1px solid currentColor; }

/* 8) Bare (simple dotted outline) */
.di-cmp-block[data-style="bare"]{
  --di-txt-size:16px; --di-txt-w:500; --di-txt-color:inherit;
  --di-ih-size:16px;  --di-ih-w:700;  --di-ih:inherit;
  --di-ah-size:16px;  --di-ah-w:600;  --di-ah:inherit;

  --di-bg:inherit; --di-bg-head:inherit; --di-bg-aspects:inherit;

  --di-zebra:0; --di-zebra-odd:transparent; --di-zebra-even:transparent; --di-aspects-zebra:0;

  --di-bc:currentColor; --di-bw:0px; --di-bs:dotted; --di-br:8px;
  --di-sh:0 0 0 rgba(0,0,0,0);
}
.di-cmp-block[data-style="bare"] .di-cmp-table,
.di-cmp-block[data-style="bare"] .di-cmp-table th,
.di-cmp-block[data-style="bare"] .di-cmp-table td{
  border:1px dotted currentColor;
}

/* 9) Outline */
.di-cmp-block[data-style="outline"]{
  --di-txt-size:16px; --di-txt-w:500; --di-txt-color:inherit;
  --di-ih-size:16px;  --di-ih-w:700;  --di-ih:inherit;
  --di-ah-size:16px;  --di-ah-w:700;  --di-ah:inherit;

  --di-bg:inherit; --di-bg-head:#f6f7f9; --di-bg-aspects:#efefef;

  --di-zebra:1; --di-zebra-odd:#efefef; --di-zebra-even:transparent; --di-aspects-zebra:1;

  --di-bc:#d1d5db; --di-bw:2px; --di-bs:solid; --di-br:8px;
  --di-sh:0 0 0 rgba(0,0,0,0);
}

/* ---------- Admin polish (settings screen) ---------- */
.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; }

/* Suggestions box */
.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; }

/* Layout */
.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}
/* compact selects (~50% of WP's default) */
.wp-admin .di-cmp-settings select{max-width:15rem}

/* checklist */
.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}

/* ---------- Admin: LOCK state for fixed presets ----------
   When a fixed (non-editable) preset is active, the form has .is-locked.
   We HIDE inputs and SHOW read-only mirrors (with color swatches).
*/

/* read-only mirror (hidden by default) */
.wp-admin .di-cmp-settings .di-ro{
  display:none;
  font-size:13px;
  color:#111;
  line-height:1.6;
}
.wp-admin .di-cmp-settings .di-ro .sw{
  display:inline-block;
  width:18px;height:18px;border-radius:4px;
  border:1px solid #cbd5e1;margin-right:6px;
  vertical-align:middle;
}

/* Locked: hide inputs/pickers, show mirrors; keep top buttons usable */
.wp-admin .di-cmp-settings.is-locked .di-fieldset input,
.wp-admin .di-cmp-settings.is-locked .di-fieldset select,
.wp-admin .di-cmp-settings.is-locked .di-fieldset textarea{
  display:none !important;
}
.wp-admin .di-cmp-settings.is-locked .di-fieldset .wp-picker-container{
  display:none !important; /* hide WP color picker UIs */
}
.wp-admin .di-cmp-settings.is-locked .di-fieldset .di-ro{
  display:flex !important; align-items:center; gap:8px;
}

/* In locked state, dim unrelated actions but keep Apply/Save-as enabled via JS */
.wp-admin .di-cmp-settings.is-locked .button,
.wp-admin .di-cmp-settings.is-locked [type="submit"]{
  opacity:.6; pointer-events:none;
}
.wp-admin .di-cmp-settings.is-locked .button#di-cmp-apply-style,
.wp-admin .di-cmp-settings.is-locked .button#di-cmp-save-style-as{
  opacity:1; pointer-events:auto;
}