/* Gibonus.com — mobile layout for the original table-based pages.
   Desktop look stays unchanged. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

iframe {
  max-width: 100%;
}

@media screen and (max-width: 880px) {
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #000 !important;
    color: #c0c0c0;
  }

  * {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  body * {
    max-width: 100vw !important;
  }

  center,
  div[align="center"],
  div[align="left"] {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    float: none !important;
  }

  td[bgcolor="#000000"] {
    padding: 12px !important;
  }

  td[background*="edycja1.gif"],
  td[background*="edycja3.gif"],
  img[src*="bok.gif"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  td[background*="gora1.gif"],
  td[background*="gora2.gif"] {
    text-align: center !important;
    padding: 10px 8px !important;
    background-color: #000 !important;
    background-image: none !important;
  }

  img,
  embed,
  object,
  video {
    max-width: 100vw !important;
    width: auto !important;
    height: auto !important;
  }

  img[src*="baner"] {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    object-fit: contain;
  }

  img[align="left"],
  img[align="right"] {
    float: none !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  iframe {
    width: 100% !important;
    max-width: 100vw !important;
    height: 260px !important;
  }

  p,
  font,
  span,
  div,
  td,
  li,
  b {
    overflow-wrap: anywhere;
    word-wrap: break-word;
    white-space: normal !important;
    max-width: 100vw !important;
  }

  p {
    width: auto !important;
  }

  blockquote {
    margin: 8px 10px !important;
    padding: 0 !important;
  }

  font[size="2"],
  font[size="1"] {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  font[size="4"],
  font[size="5"] {
    font-size: 1.25em !important;
    line-height: 1.3 !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100vw !important;
    font-size: 16px !important;
  }

  table[width="133"],
  table[id="table1"],
  table[id="table3"] {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    background: #000 !important;
    padding: 8px 8px 12px !important;
    text-align: center !important;
  }

  table[width="133"] tbody,
  table[width="133"] tr,
  table[id="table1"] tbody,
  table[id="table1"] tr,
  table[id="table3"] tbody,
  table[id="table3"] tr {
    display: contents !important;
  }

  table[width="133"] td:first-child:not([bgcolor]),
  table[id="table1"] td:first-child:not([bgcolor]),
  table[id="table3"] td:first-child:not([bgcolor]) {
    display: none !important;
  }

  table[width="133"] td[bgcolor],
  table[id="table1"] td[bgcolor],
  table[id="table3"] td[bgcolor] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px 4px !important;
    background: #000 !important;
  }

  table[width="133"] p,
  table[id="table1"] p,
  table[id="table3"] p {
    display: block !important;
    margin: 0 !important;
  }

  table[width="133"] p:not(:has(a)),
  table[id="table1"] p:not(:has(a)),
  table[id="table3"] p:not(:has(a)) {
    display: none !important;
  }

  table[width="133"] a,
  table[id="table1"] a,
  table[id="table3"] a {
    display: inline-block !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border: 1px solid #fcc34c;
    color: #fcc34c !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    max-width: 100%;
  }

  table[width="133"] font,
  table[id="table1"] font,
  table[id="table3"] font {
    font-size: 15px !important;
  }
}
