/**
 * CodingPlanet — shared mobile / responsive foundation
 * Include on public marketing pages, auth, checkout, and tool shells.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

/* Touch-friendly controls */
a,
button,
input,
select,
textarea,
[role="button"],
.btn,
.card-cta,
.cta {
  touch-action: manipulation;
}

@media (max-width: 767px) {
  a,
  button,
  .btn,
  .card-cta,
  .cta,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  /* Keep table layout; scroll via a wrapper — display:block breaks columns on mobile */
  .cpn-table-scroll,
  [data-cpn-table-scroll],
  [style*="overflow-x:auto"],
  [style*="overflow-x: auto"] {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cpn-table-scroll table,
  [data-cpn-table-scroll] table,
  [style*="overflow-x:auto"] > table,
  [style*="overflow-x: auto"] > table {
    display: table;
    width: max-content;
    min-width: 100%;
    max-width: none;
    table-layout: auto;
    border-collapse: collapse;
  }

  .cpn-table-scroll th,
  .cpn-table-scroll td,
  [data-cpn-table-scroll] th,
  [data-cpn-table-scroll] td,
  [style*="overflow-x:auto"] th,
  [style*="overflow-x:auto"] td,
  [style*="overflow-x: auto"] th,
  [style*="overflow-x: auto"] td {
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
  }

  pre,
  code {
    overflow-x: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .cpn-break-long,
  .addr,
  [data-break-long] {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .row {
    flex-direction: column;
    align-items: stretch !important;
  }

  .row > .btn {
    margin-right: 0 !important;
    width: 100%;
  }
}

@media (max-width: 480px) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}