*{
  box-sizing:border-box;
  font-family:Arial, sans-serif;
  margin: 0;
  padding: 0;
}

body{
  background:#eee;
  padding:20px;
}

/* FORM */

.form-box{
  max-width:900px;
  margin:auto;
  background:#fff;
  padding:20px;
  border:1px solid #000;
  margin-bottom:20px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.form-grid div{
  display:flex;
  flex-direction:column;
}

label{
  font-size:14px;
  font-weight:bold;
  margin-bottom:3px;
}

input{
  padding:7px;
  border:1px solid #999;
  width:100%;
  font-size:16px; /* prevents iOS auto-zoom on focus */
}

button{
  margin-top:15px;
  width:100%;
  padding:10px;
  background:#003366;
  color:white;
  border:none;
  font-size:16px;
  cursor:pointer;
}

/* RECEIPT */

.receipt-wrap{
  max-width:900px;
  margin:auto;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.receipt{
  max-width:900px;
  min-width:600px; /* keeps table layout intact, wrapper scrolls it */
  margin:auto;
  background:white;
  border:1px solid #000;
  display:none;
}

.row{
  border-bottom:1px solid #000;
  padding:8px;
}

.center{
  text-align:center;
  font-weight:bold;
}

.header{
  display:flex;
  align-items:center;
}

.logo img{
  width:139px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

.head-text{
  flex:1;
  text-align:center;
}

.head-text h2{
  margin:5px 0;
}

.info{
  display:flex;
}

.info div{
  width:50%;
  padding:10px;
}

.info p{
  margin:5px 0;
}

/* FOOTER */

.footer{
  padding:10px;
  border-top:1px solid #000;
  font-size:14px;
}

.sign{
  width:35%;
  border-left:1px solid #000;
  text-align:center;
  padding:10px;
}

.bottom{
  display:flex;
}

/* BUTTON */

.download{
  background:green;
}

@media print{
  .form-box,button{
    display:none;
  }
  .receipt-wrap{
    overflow-x:visible;
  }
  .receipt{
    min-width:0;
  }
}

@media print{
  .receipt{
    border:3px solid #000 !important;
  }
  td,th{
    border:2px solid #000 !important;
  }
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width:768px){
  body{
    padding:10px;
  }

  .form-box{
    padding:15px;
  }

  .form-grid{
    grid-template-columns:1fr; /* single column form on mobile */
    gap:10px;
  }

  .receipt table{
    font-size:12px;
  }

  .receipt td,
  .receipt th{
    padding:4px !important;
  }
}

@media (max-width:480px){
  .form-box h2{
    font-size:18px;
  }

  button{
    font-size:14px;
    padding:9px;
  }

  .receipt table{
    font-size:11px;
  }
}