/* CredEnd layout hardening patch
   - Prevents “cracked” sections caused by unexpected CSS collisions (e.g., Bootstrap .container/.card)
   - Stabilizes grids and cards across breakpoints
   - Keeps long content from forcing overflow
*/

/* 1) Safer defaults */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* 2) Make our layout utilities win against common third‑party CSS */
.container {
  width: min(1160px, calc(100% - 48px)) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important; /* width already accounts for gutters */
  max-width: none !important;
}

.section { width: 100%; }

/* 3) Grid utilities: always shrink correctly */
.grid2, .grid3, .grid4 {
  width: 100%;
  max-width: 100%;
}

.grid2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
.grid3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
.grid4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; }

.grid2 > *, .grid3 > *, .grid4 > * { min-width: 0 !important; }

@media (max-width: 980px) {
  .container { width: min(980px, calc(100% - 32px)) !important; }
  .grid2 { grid-template-columns: 1fr !important; }
  .grid3 { grid-template-columns: 1fr !important; }
  .grid4 { grid-template-columns: 1fr !important; }
}

/* 4) Card: force block layout + predictable sizing */
.card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-radius: 18px !important;
  border: 1px solid var(--stroke) !important;
  background: #fff !important;
}

/* Some frameworks add `.card-body` paddings; keep ours consistent */
.card > * { min-width: 0; }

/* 5) Flex wrappers should wrap (prevents right-side “cut off”) */
.section__head { flex-wrap: wrap !important; }

/* 6) Text overflow safety: long tokens should not break layout */
.card, .mini, .feature, .rc-card, .note, p, li {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 7) Flow diagrams: allow horizontal scroll instead of layout break */
.flow-diagram { max-width: 100%; overflow-x: auto; }
.flow-diagram::-webkit-scrollbar { height: 8px; }
.flow-diagram::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }

/* 8) Buttons/CTAs: avoid pushing outside cards */
.btn { max-width: 100%; }

/* 9) Forms: keep inputs from overflowing */
.input, select.input, textarea.input { width: 100% !important; max-width: 100% !important; }
.input-group { width: 100%; }

/* 10) WhatsApp bubble should never hide content on smaller widths */
.wa-float { right: 16px !important; bottom: 16px !important; }