/*
 * CompareMarket V18.14 — Suite Responsive Compatibility Layer
 * Scope: only responsive layout protection for content received from suite plugins.
 * This file intentionally does not hide sections and does not alter the mega menu, chatbot or public content.
 */

:root {
  --cm-suite-safe-gap: clamp(14px, 2.2vw, 28px);
  --cm-suite-safe-radius: 18px;
  --cm-suite-min-touch: 44px;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.cmv-main,
.cmv-content,
.entry-content,
.page-content,
.cmv-page-shell,
.cmv-front-shell,
.site-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.cmv-content > *,
.entry-content > *,
.page-content > * {
  max-width: 100%;
}

/* Generic wrappers generated by Compare Engine, Page Studio and future suite plugins. */
.entry-content :where(
  [class*="compare-engine"],
  [class*="compare_engine"],
  [class*="cepv"],
  [class*="cep-v"],
  [class*="cmps"],
  [class*="cmp2"],
  [class*="cmp3"],
  [class*="cmp-market"],
  [class*="cmp_market"],
  [class*="page-studio"],
  [class*="partner-portal"],
  [class*="lead-marketplace"],
  [class*="revenue-center"],
  [class*="seo-programmatic"],
  [class*="data-health"],
  [class*="compliance-center"]
),
.cmv-content :where(
  [class*="compare-engine"],
  [class*="compare_engine"],
  [class*="cepv"],
  [class*="cep-v"],
  [class*="cmps"],
  [class*="cmp2"],
  [class*="cmp3"],
  [class*="cmp-market"],
  [class*="cmp_market"],
  [class*="page-studio"],
  [class*="partner-portal"],
  [class*="lead-marketplace"],
  [class*="revenue-center"],
  [class*="seo-programmatic"],
  [class*="data-health"],
  [class*="compliance-center"]
) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Grids, card lists and dashboard layouts from plugins must never force horizontal overflow. */
.entry-content :where(
  [class*="compare-engine"],
  [class*="compare_engine"],
  [class*="cepv"],
  [class*="cep-v"],
  [class*="cmps"],
  [class*="cmp2"],
  [class*="cmp3"],
  [class*="page-studio"]
) :where([class*="grid"], [class*="cards"], [class*="columns"], [class*="layout"], [class*="dashboard"], [class*="cockpit"], [class*="metrics"], [class*="kpi"], [class*="tiles"]),
.cmv-content :where(
  [class*="compare-engine"],
  [class*="compare_engine"],
  [class*="cepv"],
  [class*="cep-v"],
  [class*="cmps"],
  [class*="cmp2"],
  [class*="cmp3"],
  [class*="page-studio"]
) :where([class*="grid"], [class*="cards"], [class*="columns"], [class*="layout"], [class*="dashboard"], [class*="cockpit"], [class*="metrics"], [class*="kpi"], [class*="tiles"]) {
  max-width: 100%;
  min-width: 0;
  gap: var(--cm-suite-safe-gap);
}

/* Plugin cards and panels. */
.entry-content :where(
  [class*="compare-engine"],
  [class*="compare_engine"],
  [class*="cepv"],
  [class*="cep-v"],
  [class*="cmps"],
  [class*="cmp2"],
  [class*="cmp3"],
  [class*="page-studio"]
) :where([class*="card"], [class*="panel"], [class*="box"], [class*="item"], [class*="offer"], [class*="result"], [class*="profile"], [class*="widget"]),
.cmv-content :where(
  [class*="compare-engine"],
  [class*="compare_engine"],
  [class*="cepv"],
  [class*="cep-v"],
  [class*="cmps"],
  [class*="cmp2"],
  [class*="cmp3"],
  [class*="page-studio"]
) :where([class*="card"], [class*="panel"], [class*="box"], [class*="item"], [class*="offer"], [class*="result"], [class*="profile"], [class*="widget"]) {
  max-width: 100%;
  min-width: 0;
}

/* Tables from comparison plugins: readable, contained and scrollable when needed. */
.entry-content :where(table),
.cmv-content :where(table),
.page-content :where(table) {
  border-collapse: collapse;
  max-width: 100%;
}

.entry-content :where(.compare-engine-table, .ce-table, .cepv-table, .cmp-table, .cmps-table, .comparison-table, .dashboard-table),
.cmv-content :where(.compare-engine-table, .ce-table, .cepv-table, .cmp-table, .cmps-table, .comparison-table, .dashboard-table) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.entry-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"]) table,
.cmv-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"]) table {
  width: 100%;
  min-width: min(720px, 100%);
}

.entry-content :where(th, td),
.cmv-content :where(th, td) {
  overflow-wrap: anywhere;
}

/* Forms from Page Studio, Lead Marketplace, Partner Portal and suite plugins. */
.entry-content :where(form),
.cmv-content :where(form) {
  max-width: 100%;
}

.entry-content :where(input, select, textarea, button),
.cmv-content :where(input, select, textarea, button) {
  max-width: 100%;
}

.entry-content :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.cmv-content :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--cm-suite-min-touch);
}

.entry-content :where(button, .button, .btn, [class*="button"], [class*="btn"], [class*="cta"]),
.cmv-content :where(button, .button, .btn, [class*="button"], [class*="btn"], [class*="cta"]) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Media, embeds and charts from plugins. */
.entry-content :where(img, svg, canvas, video, iframe),
.cmv-content :where(img, svg, canvas, video, iframe) {
  max-width: 100%;
}

.entry-content :where(iframe, video),
.cmv-content :where(iframe, video) {
  width: 100%;
}

/* Tablet rules: keep dashboards and comparison sections balanced. */
@media (max-width: 1180px) {
  .entry-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]) :where([class*="grid"], [class*="cards"], [class*="columns"], [class*="dashboard"], [class*="cockpit"]),
  .cmv-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]) :where([class*="grid"], [class*="cards"], [class*="columns"], [class*="dashboard"], [class*="cockpit"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile rules: plugin output becomes one-column and readable. */
@media (max-width: 780px) {
  .entry-content,
  .cmv-content,
  .page-content {
    overflow-x: clip;
  }

  .entry-content :where([class*="compare-engine"], [class*="compare_engine"], [class*="cepv"], [class*="cep-v"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]),
  .cmv-content :where([class*="compare-engine"], [class*="compare_engine"], [class*="cepv"], [class*="cep-v"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]) {
    width: 100%;
  }

  .entry-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]) :where([class*="grid"], [class*="cards"], [class*="columns"], [class*="layout"], [class*="row"], [class*="dashboard"], [class*="cockpit"], [class*="metrics"], [class*="kpi"], [class*="tiles"]),
  .cmv-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]) :where([class*="grid"], [class*="cards"], [class*="columns"], [class*="layout"], [class*="row"], [class*="dashboard"], [class*="cockpit"], [class*="metrics"], [class*="kpi"], [class*="tiles"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .entry-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]) :where([class*="card"], [class*="panel"], [class*="box"], [class*="item"], [class*="offer"], [class*="result"], [class*="profile"], [class*="widget"]),
  .cmv-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]) :where([class*="card"], [class*="panel"], [class*="box"], [class*="item"], [class*="offer"], [class*="result"], [class*="profile"], [class*="widget"]) {
    width: 100%;
    flex-basis: 100%;
  }

  .entry-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"]) table,
  .cmv-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"]) table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 640px;
  }

  .entry-content :where(form [class*="row"], form [class*="grid"], form [class*="columns"], form [class*="fields"]),
  .cmv-content :where(form [class*="row"], form [class*="grid"], form [class*="columns"], form [class*="fields"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .entry-content :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button),
  .cmv-content :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button) {
    width: 100%;
  }
}

/* Very small screens: compact spacing without hiding content. */
@media (max-width: 480px) {
  .entry-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]),
  .cmv-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]) {
    font-size: 0.98rem;
  }

  .entry-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]) :where([class*="card"], [class*="panel"], [class*="box"], [class*="offer"], [class*="result"]),
  .cmv-content :where([class*="compare-engine"], [class*="cepv"], [class*="cmps"], [class*="cmp2"], [class*="cmp3"], [class*="page-studio"]) :where([class*="card"], [class*="panel"], [class*="box"], [class*="offer"], [class*="result"]) {
    padding-inline: min(18px, 5vw);
  }
}