@media (max-width: 575.98px) {
  .main-content {
    margin-left: 0;
    padding: 30px 10px 50px;
  }

  /* make the card fill nicely on small screens */
  .card {
    margin: 4vmin auto;
    width: calc(100% - 24px);
  }

  /* allow header circles to overflow card edges slightly on mobile */
  .canvas { overflow: visible !important; }
  .card { overflow: visible !important; }

  /* actions (Back / Next) should be visible and centered on mobile */
  .actions {
    padding-left: 0 !important;
    padding: 12px !important;
    justify-content: center !important;
    gap: 12px !important;
    display: flex !important;
  }

  /* make the step circles overlap slightly and stay centered */
  .card-header .container {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px;
    margin: 0 4px;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    -ms-overflow-style: none; /* hide IE scrollbar */
    scrollbar-width: none; /* hide Firefox scrollbar */
  }

  .card-header .container > .d-flex {
    position: relative;
    margin: 0;
    min-width: 56px; /* reserve space for label under each circle */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px; /* room for absolutely positioned circle */
    flex: 0 0 auto; /* allow horizontal scrolling snap */
    scroll-snap-align: center;
  }

  /* make sure first two items are visible by adding left padding so they aren't clipped */
  .card-header .container { padding-left: 12px; }

  .card-header .container > .d-flex:first-child {
    margin-left: 0;
  }

  /* ensure the inner circle visuals are consistent and sized for mobile */
  .card-header .container .rounded-circle {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    padding: 0 !important;
    transition: transform .12s ease;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transform-origin: center center !important;
    color: #222 !important; 
    font-weight: 700 !important;
    -webkit-font-smoothing: antialiased !important;
    text-shadow: none !important;
    z-index: 20 !important;
  }

  /* position circles absolutely inside each item so text centers exactly */
  .card-header .container > .d-flex .rounded-circle {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* bring the circle itself above overlapping siblings when hovered or focused */
    z-index: 20 !important;
  }

  /* When a step is focused/hovered/tapped, lift its circle above neighbors so letter remains visible */
  .card-header .container > .d-flex:focus-within .rounded-circle,
  .card-header .container > .d-flex:hover .rounded-circle {
    z-index: 30 !important;
  }

  /* hide native scrollbar while keeping functionality */
  .card-header .container::-webkit-scrollbar { display: none; }

  /* ensure circle text stays centered even after transform */
  .card-header .container .rounded-circle, .card-header .container .rounded-circle * {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* provide stacking so later circles appear on top */
  .card-header .container > .d-flex:nth-child(1) { z-index: 9; }
  .card-header .container > .d-flex:nth-child(2) { z-index: 10; }
  .card-header .container > .d-flex:nth-child(3) { z-index: 11; }
  .card-header .container > .d-flex:nth-child(4) { z-index: 12; }
  .card-header .container > .d-flex:nth-child(5) { z-index: 13; }
  .card-header .container > .d-flex:nth-child(6) { z-index: 14; }
  .card-header .container > .d-flex:nth-child(7) { z-index: 15; }
  .card-header .container > .d-flex:nth-child(8) { z-index: 16; }

  /* make small labels wrap below the circles to avoid overflow and clamp to 2 lines so circles align */
  .card-header ._txt {
    font-size: 11px !important;
    text-align: center;
    margin-top: 38px;
    max-width: 64px;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    height: calc(1.2em * 2) !important; /* fixed height for two lines */
    min-height: calc(1.2em * 2) !important;
  }

  /* Removed broad rule that forced hidden elements to be visible on mobile.
     Keep hidden elements (like installment_amounts) hidden unless explicitly shown by JS. */
  /* ensure action buttons are visible and not pushed off-screen */
  .actions {
    position: relative !important;
    left: 0 !important;
    width: 100% !important;
    margin: 12px 0 !important;
  }

  .btn {
    display: inline-block !important;
    z-index: 20 !important;
  }

  /* Stack the select and others input into vertical rows on small screens */
  .row.align-items-center.pt-3 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .row.align-items-center.pt-3 .col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #specificSizeSelect,
  #othersInput {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Stack StudentInfo name fields into vertical rows on small screens */
  .row.g-3 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .row.g-3 .col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .row.g-3 .form-control {
    width: 100% !important;
    box-sizing: border-box !important;
  }

}