/* ============================================================
   Printster — mobile responsiveness fixes (cart / configure flow)
   Added 2026-06-18. Scoped to <=767px ONLY, so desktop is untouched.
   Reversible: remove the <link> in index.html or empty this file.
   ============================================================ */

@media (max-width: 767px) {

  /* --- Kill horizontal scroll / overflow --- */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  img { max-width: 100% !important; height: auto !important; }

  /* --- Configure/cart: force the 3-column grid to stack cleanly --- */
  /* (step-rail col-md-1, file-list col-md-3/.rvgbgray, settings col-md-8) */
  .rvsect .col-md-1, .rvsect .col-lg-1,
  .rvsect .col-md-3, .rvsect .col-lg-3, .rvsect .rvgbgray,
  .rvsect .col-md-8, .rvsect .col-lg-8,
  .rvsect .col-md-12 {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    max-width: 100% !important;
    left: 0 !important;
    position: relative !important;
  }

  /* --- Step rail (1-4): horizontal scrollable strip, no overlap --- */
  .side-category.rvside-cat {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px !important;
    gap: 4px;
  }
  .side-category.rvside-cat > div,
  .side-category.rvside-cat .col-md-12 {
    width: auto !important;
    float: none !important;
    flex: 0 0 auto;
    min-width: 90px;
    text-align: center;
  }

  /* --- File-list column spacing --- */
  .rvgbgray { padding: 12px !important; }
  .rvgbgray .col-md-12, .rvgbgray .col-xs-12 { width: 100% !important; float: none !important; }

  /* --- Settings panel: stack the paired columns (PAGES|COPIES etc.) --- */
  .col-md-8 .col-md-6, .col-lg-8 .col-lg-6,
  .col-md-8 .col-md-4, .col-lg-8 .col-lg-4 {
    width: 100% !important; float: none !important; clear: both !important;
  }
  .form-group { width: 100% !important; margin-bottom: 12px !important; }

  /* --- Inputs/selects: full width, 16px font (stops iOS auto-zoom) --- */
  .input-group { display: table !important; width: 100% !important; }
  .input-group-addon { white-space: normal !important; min-width: 96px; }
  input, select, textarea, .form-control {
    font-size: 16px !important;
    min-height: 44px !important;
    max-width: 100% !important;
  }
  .input-group .form-control, .input-group select { width: 100% !important; }

  /* --- Tap targets: buttons & action links at least 44px --- */
  a.btn, button, input[type="submit"], input[type="button"],
  .rvbtn, [class*="btnsubmit"], [class*="proceed"] {
    min-height: 44px !important;
    line-height: 1.3 !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Primary actions span the width on mobile */
  [class*="proceed"], [class*="btnsubmit"] { width: 100% !important; }

  /* --- Top toolbar buttons (TOTAL FILES / ADD MORE / TECH ISSUE) wrap --- */
  .rvsect .pull-right, .rvsect .text-right { float: none !important; }

  /* --- Fix Bootstrap negative-margin .row overflow (caused content to be
         ~30px wider than the screen -> sideways scroll / cut-off). Verified
         to remove all horizontal overflow inside the configure flow. --- */
  .rvsect, .rvsect * { box-sizing: border-box !important; }
  .rvsect .row { margin-left: 0 !important; margin-right: 0 !important; }
  .rvsect .panel { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
  .rvsect [class*="col-"] { padding-left: 8px !important; padding-right: 8px !important; }
  .rvsect .side-category.rvside-cat { max-width: 100% !important; }
}