/* =====================================================
   CHECKOUT MOBILE CLEAN FIX (SAFE VERSION)
   ใช้แทนไฟล์เดิมได้เลย
   ===================================================== */

@media (max-width:768px){

  /* ---------------- GLOBAL ---------------- */
  *,*::before,*::after{
    box-sizing:border-box;
  }

  html,body{
    width:100%;
    overflow-x:hidden;
  }

  /* ---------------- HEADER ---------------- */

  .header{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    padding:8px 12px !important;
    gap:8px;
  }

  .header-left{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .header-icons{
    display:flex !important;
    align-items:center;
    gap:10px;
  }

  .nav-pill{
    padding:6px 12px;
    font-size:14px;
    border-radius:12px;
  }

  /* ปุ่มไอคอนกลม */
  .header-icon{
    position:relative;
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid #e5e7eb;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;      /* emoji ใช้ตัวนี้ */
    line-height:1;
  }

  /* badge */
  .header-icon .badge{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    font-size:11px;
    font-weight:700;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* ซ่อนเบอร์โทรบน mobile */
  .header-phone span{
    display:none;
  }

  /* ---------------- STEPPER ---------------- */

  .container.stepper{
    display:flex !important;
    justify-content:center !important;
    gap:10px !important;

   margin:16px 0 2px !important;  
  padding:0 6px;
  }

  .container.stepper .step{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
  }

  .container.stepper .step::before{
    width:24px;
    height:24px;
    min-width:24px;
    min-height:24px;
    font-size:12px;
    line-height:24px;
    text-align:center;
  }

  /* ลดช่องว่างก่อน form */
  .checkout-grid{
    margin-top:0 !important;
  }

  .header-icon{
  font-size:0;
}

.header-icon .icon-transport{
  display:block;
  font-size:20px;
  line-height:1;
}

#cartButton{
  font-size:20px;
  line-height:1;
}

.form-card h2{
  margin-top:8px !important;
}



}