@media (max-width: 767.98px) {

  /* ── 1.1 Form Container & Cards ── */
  html, body {
    overflow-x: hidden;
  }

  /* iOS Safari zooms the viewport whenever a focused field computes under 16px,
     so every tap on a field left the customer pinching back out — across a
     six-step form, dozens of times each.

     This rule used to read `select.form-control` alone and never took effect:
     style.css has `.abn-form .form-control { font-size: 15px }`, and two classes
     outrank one class plus an element type, so 15px won on specificity no matter
     the load order. Matching that specificity below is what makes it apply, since
     mobile.css is loaded after style.css. The bare element selectors catch fields
     that have no .form-control class and inherit 15px from body. */
  .abn-form .form-control,
  .abn-form .nice-select,
  .contact-section .form-control,
  .registration-form-card .form-control,
  .abn-form input,
  .abn-form select,
  .abn-form textarea {
    font-size: 16px;
  }

  .entry-type__content {
    border: 1px solid var(--color-border);
  }

  .entry-type-section {
    min-height: 100vh;
  }

  .entry-type-section .form-control {
    height: auto;
  }

  .abn-form-card {
    padding: 24px 18px;
    margin-bottom: 24px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  /* ── 1.2 Typography & Visual Hierarchy ── */
  .abn-form .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 18px;
  }

  .control-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-body);
    margin-bottom: 5px;
    text-align: left;
  }

  .form-check-label {
    font-size: 14px;
  }

  #wizard-step-label {
    font-size: 13px;
  }

  .help-inline {
    font-weight: 400;
    font-size: 13px;
    color: var(--color-muted);
  }

  span.required {
    display: inline;
  }

  /* ── 1.3 Input Fields & Dropdowns ── */
  .form-control,
  .nice-select,
  .ss-main,
  textarea.form-control {
    min-height: 44px;
    font-size: 16px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    padding: 10px 12px;
  }

  .nice-select .current {
    font-size: 16px;
  }

  .nice-select .list,
  .ss-list {
    max-height: 240px;
    overflow-y: auto;
    border-radius: 6px;
  }

  .ss-input {
    min-height: 44px;
    font-size: 16px;
  }

  /* ── 1.4 Radio & Checkbox Groups ── */
  .form-check {
    display: flex;
    align-items: flex-start;
    padding-left: 0;
  }

  .form-check-input {
    position: static;
    margin-left: 0;
    margin-top: 4px;
    margin-right: 10px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
  }

  .form-check-inline .form-check-input {
    margin-right: 8px;
  }

  /* Radio and checkbox hit areas measured 20px against the 44px minimum — on the
     yes/no questions that gate the whole conditional flow, where a mis-tap sends
     the customer down the wrong branch and can change what they are charged.

     The 20px came from the min-width/min-height above winning over style.css's
     `.abn-form .form-check-input { width: 18px }`. These rules match the
     `.abn-form` specificity used there so they actually apply; mobile.css loads
     after style.css, so equal specificity wins on order.

     The label carries `for`, so giving it a 44px-tall box enlarges the tap area
     without changing how the control itself looks. */
  .abn-form .form-check,
  .abn-form .form-check-inline {
    min-height: 44px;
  }

  /* Scoped to the inline Yes/No options only, and inline-block rather than
     inline-flex. Applying flex to every .form-check-label turned the <a> children of
     the terms declaration into flex items: they shrank to min-content and wrapped a
     character at a time, so "Terms & Conditions of Service" and "Privacy Policy"
     rendered as narrow vertical strips of letters on the final step before payment.
     Labels that wrap must stay ordinary inline text. */
  .abn-form .form-check-inline .form-check-label {
    display: inline-block;
    padding: 11px 10px 11px 2px;
    margin-bottom: 0;
  }

  .abn-form .form-check-input {
    width: 22px;
    height: 22px;
  }

  /* ── 1.5 Wizard Progress Bar ── */
  #wizard-progress {
    overflow: visible;
  }

  #wizard-steps-row {
    justify-content: center;
    flex-wrap: nowrap;
  }

  #wizard-step-label {
    font-size: 13px;
    white-space: normal;
    word-wrap: break-word;
  }

  /* ── 1.6 Wizard Navigation Buttons ── */
  .wizard-nav {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 24px;
  }

  .wizard-nav .btn {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    border-radius: 8px;
  }

  /* ── 1.7 Date Selector Groups ── */
  .select-box-3 {
    min-height: 44px;
    font-size: 16px;
    padding: 10px 6px;
  }

  /* ── 1.8 Accordion Sections ── */
  .card-header a {
    padding: 14px;
    transition: background-color 0.15s ease;
  }

  .card-body {
    padding: 14px;
  }

  .status-indicator {
    display: inline;
    overflow: visible;
  }

  .director-div .card,
  .shareholder-div .card {
    border-radius: 8px;
  }

  /* ── 1.9 Error Messages ── */
  label.error {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-error);
    padding: 6px 0;
    display: block;
    clear: both;
  }

  /* ── 1.10 Tooltips ── */
  .tooltip_box {
    display: inline;
    padding: 4px 6px;
    cursor: pointer;
  }

  /* ── 1.11 Focus States ── */
  .form-control:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    outline: none;
  }

  .wizard-nav .btn:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    outline: none;
  }

  .card-header a:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    outline: none;
  }

  /* ── 1.12 Transitions ── */
  .form-control {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .wizard-nav .btn {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }

  .nice-select {
    transition: border-color 0.15s ease;
  }

  /* ── 1.13 Shadows & Depth ── */
  .director-div .card,
  .shareholder-div .card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .nice-select .list {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .wizard-nav .btn-primary {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* ── 1.14 Loading & Submission States ── */
  .form-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.92);
    z-index: 9999;
  }

  .form-loading-overlay .spinner {
    width: 40px;
    height: 40px;
  }

  .form-loading-overlay p {
    font-size: 15px;
    margin-top: 12px;
  }

  .form-submit-status {
    width: 100%;
    padding: 14px;
    border-radius: 6px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
  }

  /* ── 1.15 Payment Page ── */
  .payment-container {
    padding: 0 16px;
  }

  .payment-container .col-6 {
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
  }

  .submit-button {
    width: 100%;
    min-height: 48px;
  }

  /* ── 1.16 Add-On Section ── */
  #gst_enable .card,
  #payg_enable .card,
  #is_bnr_registration_enable .card {
    border: none;
    padding: 0 8px;
  }

  #gst_enable,
  #payg_enable,
  #is_bnr_registration_enable {
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    margin-top: 8px;
  }

  /* ── Footer ── */
  .siteend .siteend__brand {
    text-align: center;
    margin-bottom: 24px;
  }

  .siteend .row .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }

}

@media (max-width: 575.98px) {

  /* ── 2.1 Narrow Phone Overrides ── */
  /* Vertical padding was 0, so the step indicator sat flush against the card's top
     border — the card read as broken rather than as a container. Keeps the tight
     horizontal gutters this breakpoint wants. */
  .entry-type__content {
    padding: 20px 14px 28px;
    box-shadow: none;
    border-radius: 6px;
  }

  .entry-type-section {
    padding: 20px 0;
  }

  .abn-form-card {
    margin-bottom: 20px;
  }

  .form-group {
    margin-bottom: 16px;
  }

  /* ── 2.3 Wizard Progress Bar Narrow Overrides ── */
  .wz-circle {
    width: 30px;
    height: 30px;
    font-size: 13px;
    line-height: 30px;
  }

  .wz-line {
    width: 30px;
  }

  /* ── 2.4 Date Selector Narrow Overrides ── */
  .date-select-row {
    display: flex;
    gap: 8px;
  }

  .date-select-row > div,
  .date-select-row .col {
    flex: 1;
    padding: 0;
  }

  .select-box-3 {
    min-height: 44px;
    font-size: 16px;
    width: 100%;
  }

}