/* ==========================================================================
   2026-10-31 (new-demo, owner): compact phone layout of booking steps 2-6. Design only, active only with html.fsm2 (see php/fs-m2.php).
   Same rules as step 1 (css/fs-m1.css): phones up to 767px; space comes from padding, gaps and stacking; inputs stay 16px (iOS zoom); text wraps, nothing is cut.
   ========================================================================== */
/* The :not(#a):not(#b) only raises strength: this page has many older rules with !important. */
@media (max-width:767px){
  /* header + chat, like step 1 */
  html.fsm2:not(#a):not(#b) body .fsh{ --fsh-h:54px !important; }
  html.fsm2:not(#a):not(#b) body #fsca{ bottom:8px !important; left:max(10px,env(safe-area-inset-left)) !important; }
  html.fsm2:not(#a):not(#b) body #fsca .fsca-btn{ height:46px !important; padding:0 16px 0 6px !important; font-size:14px !important; translate:0 var(--fsm2y,0px); }
  html.fsm2:not(#a):not(#b) body #fsca .fsca-ic{ width:34px !important; height:34px !important; }
  html.fsm2.fsm2-form:not(#a):not(#b) body #fsca .fsca-hint{ display:none !important; }

  /* step 2: pickup and flight */
  html.fsm2:not(#a):not(#b) body .fs-arrival-cards{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:6px !important; }
  html.fsm2:not(#a):not(#b) body .fs-arrival-card{ display:block !important; position:relative !important; padding:8px 40px 8px 56px !important; min-height:52px !important; height:auto !important; border-radius:12px !important; text-align:left !important; }
  html.fsm2:not(#a):not(#b) body .fs-arrival-card-top{ display:block !important; position:static !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; }
  html.fsm2:not(#a):not(#b) body .fs-arrival-card-icon{ position:absolute !important; left:10px !important; top:8px !important; width:36px !important; height:36px !important; margin:0 !important; }
  html.fsm2:not(#a):not(#b) body .fs-arrival-card-check{ position:absolute !important; right:10px !important; top:10px !important; margin:0 !important; }
  html.fsm2:not(#a):not(#b) body .fs-arrival-card-title{ font-size:15px !important; line-height:1.25 !important; margin:0 !important; text-align:left !important; }
  html.fsm2:not(#a):not(#b) body .fs-arrival-card-desc{ font-size:12.5px !important; line-height:1.25 !important; margin:0 !important; text-align:left !important; }
  html.fsm2:not(#a):not(#b) body .fs-arrival-card-explain{ font-size:12.5px !important; line-height:1.35 !important; margin:6px -30px 0 -46px !important; padding:6px 0 0 !important; text-align:left !important; }
  html.fsm2:not(#a):not(#b) body .fs-arrival-card-badge{ margin:4px 0 0 !important; }
  html.fsm2:not(#a):not(#b) body .fs-field-group{ margin-bottom:10px !important; }
  html.fsm2:not(#a):not(#b) body .fs-field-group > label{ margin-bottom:3px !important; }
  html.fsm2:not(#a):not(#b) body .fs-p2-hint{ margin-bottom:4px !important; font-size:12.5px !important; line-height:1.3 !important; }
  html.fsm2:not(#a):not(#b) body .fs-input-wrap{ min-height:46px !important; border-radius:10px !important; }
  html.fsm2:not(#a):not(#b) body .fs-input-wrap input, html.fsm2:not(#a):not(#b) body .fs-input-wrap select{ min-height:46px !important; height:46px !important; }
  html.fsm2:not(#a):not(#b) body .fs-mobile-pax-luggage{ gap:10px !important; }
  html.fsm2:not(#a):not(#b) body .fs-mobile-pax-luggage .custom-field-group{ margin:0 !important; }
  html.fsm2:not(#a):not(#b) body .fs-mobile-pax-luggage .custom-input-wrapper{ min-height:46px !important; }
  html.fsm2:not(#a):not(#b) body .fs-mobile-pax-luggage .custom-display-trigger{ min-height:46px !important; height:46px !important; }
  html.fsm2:not(#a):not(#b) body .fsdp-trg{ min-height:46px !important; padding:4px 10px !important; }

  /* trip card */
  html.fsm2:not(#a):not(#b) body .fs-tripcard{ padding:12px !important; border-radius:14px !important; }
  html.fsm2:not(#a):not(#b) body .fs-tripcard-route{ gap:6px !important; margin-bottom:8px !important; }

  /* step 3: vehicles */
  html.fsm2:not(#a):not(#b) body .fs-map, html.fsm2:not(#a):not(#b) body #pjTbsMapCanvas{ height:130px !important; min-height:130px !important; }
  html.fsm2:not(#a):not(#b) body .fs-fleet__main{ padding:8px 10px !important; gap:6px !important; }
  html.fsm2:not(#a):not(#b) body .fs-fleet__foot{ padding:6px 10px 8px !important; gap:6px !important; }
  html.fsm2:not(#a):not(#b) body .fs-fleet__ribbon{ padding:6px 12px !important; font-size:13px !important; }
  html.fsm2:not(#a):not(#b) body .fs-fleet__buy{ padding-top:6px !important; margin-top:0 !important; }
  html.fsm2:not(#a):not(#b) body .fs-fleet__price{ font-size:24px !important; line-height:1.15 !important; }
  html.fsm2:not(#a):not(#b) body .fs-btn-book, html.fsm2:not(#a):not(#b) body .pjTbsBtnBookTaxi{ min-height:44px !important; height:44px !important; }

  /* step 4: customer data */
  html.fsm2:not(#a):not(#b) body .top-header-sec{ padding-top:60px !important; padding-bottom:6px !important; }
  html.fsm2:not(#a):not(#b) body .top-header-sec h2{ font-size:18px !important; line-height:1.25 !important; margin:0 !important; }
  html.fsm2:not(#a):not(#b) body .tab-progress{ padding-top:6px !important; padding-bottom:2px !important; }
  html.fsm2:not(#a):not(#b) body .fs-card{ margin-bottom:10px !important; border-radius:14px !important; }
  html.fsm2:not(#a):not(#b) body .fs-card-header{ padding:9px 12px !important; font-size:15px !important; }
  html.fsm2:not(#a):not(#b) body .fs-card-body{ padding:10px 12px !important; }
  html.fsm2:not(#a):not(#b) body .fs-fields-grid{ row-gap:8px !important; }
  html.fsm2:not(#a):not(#b) body .fs-form-group{ margin:0 !important; padding:0 !important; }
  html.fsm2:not(#a):not(#b) body .fs-label{ margin:0 0 2px !important; font-size:13px !important; line-height:1.25 !important; min-height:0 !important; }
  html.fsm2:not(#a):not(#b) body .fs-input{ height:44px !important; min-height:44px !important; border-radius:10px !important; }
  html.fsm2:not(#a):not(#b) body textarea.fs-input{ height:64px !important; min-height:64px !important; }
  html.fsm2:not(#a):not(#b) body .fs-opt-card{ padding:8px 10px !important; }
  html.fsm2:not(#a):not(#b) body .fs-payment-card, html.fsm2:not(#a):not(#b) body .fs-payment-option{ padding:8px 10px !important; margin-bottom:6px !important; }
  html.fsm2:not(#a):not(#b) body .fs-terms-row{ margin:8px 0 !important; }
  @supports selector(:has(a)){
    @media (min-width:350px){
      html.fsm2:not(#a):not(#b) body .fs-fields-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; column-gap:8px !important; }
      html.fsm2:not(#a):not(#b) body .fs-fields-grid > *{ grid-column:1 / -1; min-width:0; }
      html.fsm2:not(#a):not(#b) body .fs-fields-grid > .fs-form-group:has(#fs_c_company),
      html.fsm2:not(#a):not(#b) body .fs-fields-grid > .fs-form-group:has(#fs_c_title),
      html.fsm2:not(#a):not(#b) body .fs-fields-grid > .fs-form-group:has(#fs_c_fname),
      html.fsm2:not(#a):not(#b) body .fs-fields-grid > .fs-form-group:has(#fs_c_lname),
      html.fsm2:not(#a):not(#b) body .fs-fields-grid > .fs-form-group:has(#fs_c_city),
      html.fsm2:not(#a):not(#b) body .fs-fields-grid > .fs-form-group:has(#fs_c_zip){ grid-column:auto !important; }
    }
  }

  /* step 5: summary */
  html.fsm2:not(#a):not(#b) body .pjTbs-box{ padding:12px !important; margin-bottom:10px !important; border-radius:14px !important; }
  html.fsm2:not(#a):not(#b) body .fs-preview-root .row, html.fsm2:not(#a):not(#b) body .pjTbs-personal-details{ row-gap:0 !important; }
  /* more of step 2 */
  html.fsm2:not(#a):not(#b) body .fs-steps{ padding-top:4px !important; padding-bottom:2px !important; margin:0 0 6px !important; }
  html.fsm2:not(#a):not(#b) body .fs-flight-card{ padding:10px 12px !important; }
  html.fsm2:not(#a):not(#b) body .fs-flight-layout{ gap:10px !important; padding-top:0 !important; margin-top:0 !important; }
  html.fsm2:not(#a):not(#b) body #fs_p2_h{ font-size:19px !important; line-height:1.25 !important; margin:0 0 2px !important; }
  html.fsm2:not(#a):not(#b) body .fs-flight-fields-row{ gap:8px !important; }

  /* more of step 4: payment and security question */
  html.fsm2:not(#a):not(#b) body .fs-payment-grid{ gap:6px !important; }
  html.fsm2:not(#a):not(#b) body .fs-payment-card{ padding:8px 10px !important; margin:0 !important; border-radius:12px !important; }
  html.fsm2:not(#a):not(#b) body .fs-captcha-section{ margin:8px 0 0 !important; padding-top:8px !important; }
  html.fsm2:not(#a):not(#b) body .fs-captcha-row{ gap:6px !important; }
  html.fsm2:not(#a):not(#b) body .fs-actions-row{ gap:6px !important; margin-top:8px !important; }
}