/* =========================================================
   Mobile / responsive overrides (loaded after page styles)
   Used by: index.php , subscribe/register.php
   ========================================================= */

img, video, iframe, select, input, textarea { max-width: 100%; }
img[width], img[style*="width"] { height: auto; }

/* plans iframe on ?w=3 : height is set by jscript/mobile.js */
iframe.kmn-auto-height { display: block; width: 100%; min-height: 600px; }

@media (max-width: 767.98px) {
  html, body { overflow-x: hidden; }
  body { background-size: cover !important; background-attachment: scroll !important; }

  /* index.php : fixed-width boxes / logos */
  .card-header[style*="width"] { width: 100% !important; max-width: 100%; }
  .kmn-logo { width: 100% !important; max-width: 100%; height: auto; }

  .btn { white-space: normal; max-width: 100%; }
  .g-recaptcha { transform: scale(.88); transform-origin: center top; }
}

/* ---------- subscribe/register.php : phones + tablets (desktop layout needs ~1100px) ---------- */
@media (max-width: 1199.98px) {
  #regmain, #regmain > form { width: 100%; }

  /* outer layout table -> stacked blocks */
  #regmain table.style1,
  #regmain table.style1 > tbody,
  #regmain table.style1 > tbody > tr,
  #regmain table.style1 > tbody > tr > td {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  /* price grid keeps its columns but scrolls sideways inside the screen */
  #regmain table.style1 table.table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #regmain table.style1 table.table td { padding: 6px 4px; font-size: 13px; white-space: normal; }

  /* sign-up form moved above the price grid by jscript/mobile.js */
  #regmain .kmn-mobile-form { width: 100%; max-width: 420px; margin: 0 auto 15px; }
  #regmain .kmn-mobile-form .card { max-width: 100% !important; min-width: 0 !important; }
  #regmain .kmn-mobile-form input.text,
  #regmain .kmn-mobile-form select { width: 100% !important; box-sizing: border-box; }

  /* plan cards */
  #regmain .card { margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; }
  #regmain .row { margin-left: 0 !important; margin-right: 0 !important; }
  #regmain .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
  #regmain .list-group { padding-left: 0 !important; padding-right: 0 !important; }
  #regmain .list-group-item { padding: 10px 8px; word-wrap: break-word; overflow-wrap: anywhere; }
  #regmain h3.price { font-size: 1.4rem; }
  #regmain .card-header h5 { font-size: 1.05rem; }
}