.anim-invoice-form{
  max-width:900px;
  margin:0 auto;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:20px 24px 24px;
}
.anim-invoice-form h2{
  margin-top:0;
  margin-bottom:12px;
}
.anim-invoice-form h3{
  margin-top:18px;
  margin-bottom:8px;
}
.anim-invoice-form .grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 16px;
}
.anim-invoice-form label{
  display:flex;
  flex-direction:column;
  font-size:13px;
  font-weight:600;
}
.anim-invoice-form input,
.anim-invoice-form textarea,
.anim-invoice-form select{
  margin-top:4px;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid #cbd5e1;
  font-size:13px;
}
.anim-invoice-form textarea{
  resize:vertical;
}

.add-row-btn,
.submit-btn{
  margin-top:6px;
}

.anim-item-row{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) 110px 110px 140px 40px;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.anim-item-row input[readonly]{
  background:#f9fafb;
}
.anim-item-row .remove-row{
  width:40px;
  height:40px;
  padding:0;
  text-align:center;
  border-radius:6px;
}

.totals{
  display:flex;
  justify-content:flex-end;
  gap:16px;
  margin-top:10px;
}
.totals label{
  width:230px;
}

@media (max-width:768px){
  .anim-invoice-form .grid{
    grid-template-columns:1fr;
  }
  .anim-item-row{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "name name"
      "qty rate"
      "total remove";
  }
  .anim-item-row input[name="item_name[]"]{ grid-area:name; }
  .anim-item-row input[name="item_qty[]"]{ grid-area:qty; }
  .anim-item-row input[name="item_rate[]"]{ grid-area:rate; }
  .anim-item-row input[name="item_total[]"]{ grid-area:total; }
  .anim-item-row .remove-row{ grid-area:remove; justify-self:end; }
  .totals{
    flex-direction:column;
    align-items:flex-end;
  }
}